Cover: Add custom border support to the cover block

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,

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 }
 			/>
 			<div
-				{ ...blockProps }
-				className={ classnames( classes, blockProps.className ) }
-				style={ { ...style, ...blockProps.style } }
-				data-url={ url }
+				className={ classnames( 'block-library-cover__outer-wrapper', {
+					[ `align${ align }` ]: align,
+					'is-selected': isSelected,
+				} ) }
 			>
 				<ResizableCover
 					className="block-library-cover__resize-container"
@@ -325,54 +326,60 @@ function CoverEdit( {
 					} }
 					showHandle={ isSelected }
 				/>
+				<div
+					{ ...blockProps }
+					className={ classnames( classes, blockProps.className ) }
+					style={ { ...style, ...blockProps.style } }
+					data-url={ url }
+				>
+					<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 } }
+					/>
 
-				<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,
-						}
+					{ url && isImageBackground && isImgElement && (
+						<img
+							ref={ mediaElement }
+							className="wp-block-cover__image-background"
+							alt={ alt }
+							src={ url }
+							style={ mediaStyle }
+						/>
 					) }
-					style={ { backgroundImage: gradientValue, ...bgStyle } }
-				/>
-
-				{ url && isImageBackground && isImgElement && (
-					<img
-						ref={ mediaElement }
-						className="wp-block-cover__image-background"
-						alt={ alt }
-						src={ url }
-						style={ mediaStyle }
-					/>
-				) }
-				{ url && isVideoBackground && (
-					<video
-						ref={ mediaElement }
-						className="wp-block-cover__video-background"
-						autoPlay
-						muted
-						loop
-						src={ url }
-						style={ mediaStyle }
+					{ url && isVideoBackground && (
+						<video
+							ref={ mediaElement }
+							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>
 		</>
 	);

packages/block-library/src/cover/editor.scss

@@ -98,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;
+		}
+	}
+}

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;

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;
 	}
 
@@ -276,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;
+}