From 9f987f20cc72262859acd614f0a6c166814ca9c3 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] Try moving application of border in the editor to improve UX

---
 packages/block-library/src/cover/block.json  |  1 +
 packages/block-library/src/cover/edit.js     | 10 ++++++++--
 packages/block-library/src/cover/editor.scss |  1 +
 packages/block-library/src/cover/save.js     |  6 +++++-
 4 files changed, 15 insertions(+), 3 deletions(-)

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/edit.js b/packages/block-library/src/cover/edit.js
index 7481bf4640769..5899cd61adff5 100644
--- 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
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;