From e028ca3d297f92870c4102699a1a2016390aac60 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 30 Apr 2021 18:05:48 +1000 Subject: [PATCH 1/6] Add border support to the cover block --- packages/block-library/src/cover/block.json | 12 ++++++++++++ packages/block-library/src/cover/style.scss | 10 ++++++++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index f908f544fb297..0450b736b2f75 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -87,6 +87,18 @@ "padding": true } }, + "__experimentalBorder": { + "color": true, + "radius": true, + "style": true, + "width": true, + "__experimentalDefaultControls": { + "color": true, + "radius": true, + "style": true, + "width": true + } + }, "color": { "__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background", "text": false, diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 8e137633f4e35..d8c98e5b82ae5 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -11,6 +11,8 @@ padding: 1em; // This block has customizable padding, border-box makes that more predictable. box-sizing: border-box; + // Overflow is hidden to handle border radius being applied on the block wrapper. + overflow: hidden; &.has-parallax { background-attachment: fixed; @@ -39,14 +41,18 @@ * background-color class implies that another style will provide the background color * for the overlay. * + * The default background color has been moved to the before pseudo element + * to allow custom border styles. If left on the `.has-background-dim` + * element the color acts as a background to the dotted/dashed borders. + * * See: * - Issue with background color specificity: https://github.com/WordPress/gutenberg/issues/26545 * - Issue with alternative fix: https://github.com/WordPress/gutenberg/issues/26545 */ // the first selector is required for old Cover markup - &.has-background-dim:not([class*="-background-color"]), - .has-background-dim:not([class*="-background-color"]) { + &.has-background-dim:not([class*="-background-color"])::before, + .has-background-dim:not([class*="-background-color"])::before { background-color: $black; } From a9c13d61b599cea6484ca893de584c54580646eb Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 9 Aug 2021 15:34:08 +1000 Subject: [PATCH 2/6] Add baseline border styles for cover block These new styles have zero specificity and are easily overridden by theme or global styles. They however ensure there is some value set such that a user is more likely to be given immediate visual feedback when editing individual border properties. --- packages/block-library/src/cover/style.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index d8c98e5b82ae5..c3e866747f269 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -282,3 +282,10 @@ section.wp-block-cover-image > h2, padding: 0.44em; text-align: center; } + +// The following sets baseline border styles with zero specificity such that +// when a user begins to alter cover block borders via the block support UI they +// see immediately visual changes. +html :where(.wp-block-cover) { + border: 0 solid currentColor; +} From 9d79d94d6358832316a85a9bbc3d7da9bb50c431 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 29 Apr 2022 13:23:23 +1000 Subject: [PATCH 3/6] Try moving application of border in the editor to improve UX --- packages/block-library/src/cover/block.json | 1 + packages/block-library/src/cover/editor.scss | 1 + packages/block-library/src/cover/save.js | 6 +++++- 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 0450b736b2f75..d42232dd0f277 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -92,6 +92,7 @@ "radius": true, "style": true, "width": true, + "__experimentalSkipSerialization": true, "__experimentalDefaultControls": { "color": true, "radius": true, diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index f3890c56ceae1..ae72189b95b6b 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -2,6 +2,7 @@ /* Extra specificity needed because the reset.css applied in the editor context is overriding this rule. */ .editor-styles-wrapper & { box-sizing: border-box; + overflow: initial; } // Override default cover styles diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js index ee6e6e2def8b4..64cc2e72f1841 100644 --- a/packages/block-library/src/cover/save.js +++ b/packages/block-library/src/cover/save.js @@ -11,6 +11,7 @@ import { getColorClassName, __experimentalGetGradientClass, useBlockProps, + __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, } from '@wordpress/block-editor'; /** @@ -59,12 +60,14 @@ export default function save( { attributes } ) { const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType; const isImgElement = ! ( hasParallax || isRepeated ); + const borderProps = getBorderClassesAndStyles( attributes ); const style = { ...( isImageBackground && ! isImgElement && ! useFeaturedImage ? backgroundImageStyles( url ) : {} ), minHeight: minHeight || undefined, + ...borderProps.style, }; const bgStyle = { @@ -87,7 +90,8 @@ export default function save( { attributes } ) { contentPosition ), }, - getPositionClassName( contentPosition ) + getPositionClassName( contentPosition ), + borderProps.className ); const gradientValue = gradient || customGradient; From ac7cdcdb78c4f1f1a7d0e50a8b858bdf235e44ca Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 29 Apr 2022 15:13:27 +1000 Subject: [PATCH 4/6] Refine application of borders and display in editor This still isn't perfect. The cover content/background appears to be "under" dashed/dotted borders in the editor but are instead contained within them on the frontend. --- packages/block-library/src/cover/editor.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index ae72189b95b6b..cc292eb8a9cb1 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -75,7 +75,8 @@ margin-left: auto; } -.block-library-cover__resize-container { +.block-library-cover__resize-container, +.block-library-cover__border-visualizer { position: absolute !important; top: 0; left: 0; @@ -84,6 +85,10 @@ min-height: 50px; } +.block-library-cover__border-visualizer { + z-index: z-index(".wp-block-cover.has-background-dim::before"); +} + .block-library-cover__resize-container:not(.is-resizing) { // Important is used to have higher specificity than the inline style set by re-resizable library. height: auto !important; From 7de91cab178a99a4616edf20432500985e02dbbd Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 29 Apr 2022 17:24:02 +1000 Subject: [PATCH 5/6] Try new approach to handling cover borders in editor --- packages/block-library/src/cover/block.json | 1 - packages/block-library/src/cover/editor.scss | 20 +++++++++++++------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index d42232dd0f277..0450b736b2f75 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -92,7 +92,6 @@ "radius": true, "style": true, "width": true, - "__experimentalSkipSerialization": true, "__experimentalDefaultControls": { "color": true, "radius": true, diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index cc292eb8a9cb1..d297bc13e5c63 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -2,7 +2,6 @@ /* Extra specificity needed because the reset.css applied in the editor context is overriding this rule. */ .editor-styles-wrapper & { box-sizing: border-box; - overflow: initial; } // Override default cover styles @@ -75,8 +74,7 @@ margin-left: auto; } -.block-library-cover__resize-container, -.block-library-cover__border-visualizer { +.block-library-cover__resize-container { position: absolute !important; top: 0; left: 0; @@ -85,10 +83,6 @@ min-height: 50px; } -.block-library-cover__border-visualizer { - z-index: z-index(".wp-block-cover.has-background-dim::before"); -} - .block-library-cover__resize-container:not(.is-resizing) { // Important is used to have higher specificity than the inline style set by re-resizable library. height: auto !important; @@ -104,3 +98,15 @@ .block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover { background-attachment: scroll; } + +.block-library-cover__outer-wrapper { + position: relative; + + &.is-selected { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + + > .wp-block-cover::after { + display: none; + } + } +} From c9b990951163d0ca6e220361c0e8e7cc7c756542 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 16 May 2022 18:17:18 +1000 Subject: [PATCH 6/6] Re-apply edit component changes after controls refactoring --- .../block-library/src/cover/edit/index.js | 105 ++++++++++-------- 1 file changed, 56 insertions(+), 49 deletions(-) diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 513e222294dbd..4c84dde0eef56 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -82,6 +82,7 @@ function CoverEdit( { context: { postId, postType }, } ) { const { + align, contentPosition, id, useFeaturedImage, @@ -305,10 +306,10 @@ function CoverEdit( { currentSettings={ currentSettings } />
+
+