Try moving application of border in the editor to improve UX

WordPress · Apr 29, 2022 · 9f987f2 · 9f987f2
1 parent 858ca1b
commit 9f987f2
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git 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/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';
@@ -651,6 +652,7 @@ function CoverEdit( {
 
 	const ref = useRef();
 	const blockProps = useBlockProps( { ref } );
+	const borderProps = useBorderProps( attributes );
 
 	// Check for fontSize support before we pass a fontSize attribute to the innerBlocks.
 	const hasFontSizes = !! useSetting( 'typography.fontSizes' )?.length;
@@ -755,12 +757,12 @@ function CoverEdit( {
 					} }
 					showHandle={ isSelected }
 				/>
-
 				<span
 					aria-hidden="true"
 					className={ classnames(
 						'wp-block-cover__background',
 						dimRatioToClass( dimRatio ),
+						borderProps.className,
 						{
 							[ overlayColor.class ]: overlayColor.class,
 							'has-background-dim': dimRatio !== undefined,
@@ -773,7 +775,11 @@ function CoverEdit( {
 							[ gradientClass ]: gradientClass,
 						}
 					) }
-					style={ { backgroundImage: gradientValue, ...bgStyle } }
+					style={ {
+						backgroundImage: gradientValue,
+						...bgStyle,
+						...borderProps.style,
+					} }
 				/>
 
 				{ url && isImageBackground && isImgElement && (

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

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;