diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index f908f544fb2974..0450b736b2f754 100644
--- a/packages/block-library/src/cover/block.json
+++ b/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,
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index 513e222294dbd9..4c84dde0eef56e 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/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 }
/>
+
+
-
) }
- style={ { backgroundImage: gradientValue, ...bgStyle } }
- />
-
- { url && isImageBackground && isImgElement && (
-

- ) }
- { url && isVideoBackground && (
-
+ ) }
+ { isUploadingMedia &&
}
+
- ) }
- { isUploadingMedia &&
}
-
-
+
+
>
);
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index f3890c56ceae1b..d297bc13e5c63b 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/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;
+ }
+ }
+}
diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index ee6e6e2def8b4c..64cc2e72f18419 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 8e137633f4e358..c3e866747f269c 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;
+ // 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;
+}