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.
WordPress · May 3, 2022 · 02f3b46 · 02f3b46
1 parent ac5dd04
commit 02f3b46
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 45 deletions.
diff --git 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/edit.js b/packages/block-library/src/cover/edit.js
@@ -51,6 +51,7 @@ import {
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
 	__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
+	__experimentalUseBorderProps as useBorderProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
@@ -315,6 +316,8 @@ function CoverEdit( {
 		templateLock,
 	} = attributes;
 
+	const borderProps = useBorderProps( attributes );
+
 	const [ featuredImage ] = useEntityProp(
 		'postType',
 		postType,
@@ -756,53 +759,61 @@ function CoverEdit( {
 					showHandle={ isSelected }
 				/>
 
-				<span
-					aria-hidden="true"
+				<div
 					className={ classnames(
-						'wp-block-cover__background',
-						dimRatioToClass( dimRatio ),
-						{
-							[ overlayColor.class ]: overlayColor.class,
-							'has-background-dim': dimRatio !== undefined,
-							// For backwards compatibility. Former versions of the Cover Block applied
-							// `.wp-block-cover__gradient-background` in the presence of
-							// media, a gradient and a dim.
-							'wp-block-cover__gradient-background':
-								url && gradientValue && dimRatio !== 0,
-							'has-background-gradient': gradientValue,
-							[ gradientClass ]: gradientClass,
-						}
+						'block-library-cover__border-wrapper',
+						borderProps.className
 					) }
-					style={ { backgroundImage: gradientValue, ...bgStyle } }
-				/>
-
-				{ url && isImageBackground && isImgElement && (
-					<img
-						ref={ isDarkElement }
-						className="wp-block-cover__image-background"
-						alt={ alt }
-						src={ url }
-						style={ mediaStyle }
+					style={ { ...borderProps.style } }
+				>
+					<span
+						aria-hidden="true"
+						className={ classnames(
+							'wp-block-cover__background',
+							dimRatioToClass( dimRatio ),
+							{
+								[ overlayColor.class ]: overlayColor.class,
+								'has-background-dim': dimRatio !== undefined,
+								// For backwards compatibility. Former versions of the Cover Block applied
+								// `.wp-block-cover__gradient-background` in the presence of
+								// media, a gradient and a dim.
+								'wp-block-cover__gradient-background':
+									url && gradientValue && dimRatio !== 0,
+								'has-background-gradient': gradientValue,
+								[ gradientClass ]: gradientClass,
+							}
+						) }
+						style={ { backgroundImage: gradientValue, ...bgStyle } }
 					/>
-				) }
-				{ url && isVideoBackground && (
-					<video
-						ref={ isDarkElement }
-						className="wp-block-cover__video-background"
-						autoPlay
-						muted
-						loop
-						src={ url }
-						style={ mediaStyle }
+
+					{ url && isImageBackground && isImgElement && (
+						<img
+							ref={ isDarkElement }
+							className="wp-block-cover__image-background"
+							alt={ alt }
+							src={ url }
+							style={ mediaStyle }
+						/>
+					) }
+					{ url && isVideoBackground && (
+						<video
+							ref={ isDarkElement }
+							className="wp-block-cover__video-background"
+							autoPlay
+							muted
+							loop
+							src={ url }
+							style={ mediaStyle }
+						/>
+					) }
+					{ isUploadingMedia && <Spinner /> }
+					<CoverPlaceholder
+						disableMediaButtons
+						onSelectMedia={ onSelectMedia }
+						onError={ onUploadError }
 					/>
-				) }
-				{ isUploadingMedia && <Spinner /> }
-				<CoverPlaceholder
-					disableMediaButtons
-					onSelectMedia={ onSelectMedia }
-					onError={ onUploadError }
-				/>
-				<div { ...innerBlocksProps } />
+					<div { ...innerBlocksProps } />
+				</div>
 			</div>
 		</>
 	);

diff --git 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
@@ -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
@@ -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;