From 9e795fd299da87da37fd16059e34021e5781f1dd Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 3 May 2022 14:51:17 +1000 Subject: [PATCH 1/2] Alternate approach to handling border support in editor The use of ResizableBox within the Cover block wrapper causes problems when the wrapper may have a border applied to it. Additionally, clipping the content via overflow: hidden also cuts off the drag handle. The approach in this commit attempts to avoid these. --- packages/block-library/src/cover/block.json | 15 ++++- packages/block-library/src/cover/editor.scss | 59 ++++++++++++++++++++ packages/block-library/src/cover/save.js | 6 +- packages/block-library/src/cover/style.scss | 2 + 4 files changed, 80 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index f908f544fb297..75c2fd30fecd2 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -87,8 +87,21 @@ "padding": true } }, + "__experimentalBorder": { + "color": true, + "radius": true, + "style": true, + "width": true, + "__experimentalSkipSerialization": true, + "__experimentalDefaultControls": { + "color": true, + "radius": true, + "style": true, + "width": true + } + }, "color": { - "__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background", + "__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background, > .block-library-cover__border-wrapper > .wp-block-cover__video-background, > .block-library-cover__border-wrapper > .wp-block-cover__image-background", "text": false, "background": false } diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index f3890c56ceae1..fb63e7de9e3b2 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 @@ -98,3 +99,61 @@ .block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover { background-attachment: scroll; } + +.block-library-cover__border-wrapper { + // Absolute positioning is needed to handle padding that might be applied + // to the main block wrapper via global styles. + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + // Hide backgrounds so they don't overflow the border. + overflow: hidden; + // Re-establish layout and handle custom positions. + display: flex; + justify-content: center; + align-items: center; + // Inherits padding from main block wrapper. + padding: inherit; + + // Position: Top + .is-position-top-left & { + align-items: flex-start; + justify-content: flex-start; + } + .is-position-top-center & { + align-items: flex-start; + justify-content: center; + } + .is-position-top-right & { + align-items: flex-start; + justify-content: flex-end; + } + // Position: Center + .is-position-center-left & { + align-items: center; + justify-content: flex-start; + } + .is-position-center-center & { + align-items: center; + justify-content: center; + } + .is-position-center-right & { + align-items: center; + justify-content: flex-end; + } + // Position: Bottom + .is-position-bottom-left & { + align-items: flex-end; + justify-content: flex-start; + } + .is-position-bottom-center & { + align-items: flex-end; + justify-content: center; + } + .is-position-bottom-right & { + align-items: flex-end; + justify-content: flex-end; + } +} 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; diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 8e137633f4e35..f67a812a0b34f 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; + // Prevent overflow of background when block has border radius. + overflow: hidden; &.has-parallax { background-attachment: fixed; From 216012153ddce154e7220e135fd821c9057522c2 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 16 May 2022 18:29:04 +1000 Subject: [PATCH 2/2] Re-apply edit component updates after recent controls refactor --- .../block-library/src/cover/edit/index.js | 97 +++++++++++-------- 1 file changed, 54 insertions(+), 43 deletions(-) diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 513e222294dbd..3c57833389f4e 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -19,6 +19,7 @@ import { useSetting, useInnerBlocksProps, __experimentalUseGradient, + __experimentalUseBorderProps as useBorderProps, store as blockEditorStore, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; @@ -97,6 +98,8 @@ function CoverEdit( { templateLock, } = attributes; + const borderProps = useBorderProps( attributes ); + const [ featuredImage ] = useEntityProp( 'postType', postType, @@ -326,53 +329,61 @@ function CoverEdit( { showHandle={ isSelected } /> -