diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index f908f544fb2974..75c2fd30fecd22 100644
--- 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/index.js b/packages/block-library/src/cover/edit/index.js
index 513e222294dbd9..3c57833389f4ea 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -19,6 +19,7 @@ import {
useSetting,
useInnerBlocksProps,
__experimentalUseGradient,
+ __experimentalUseBorderProps as useBorderProps,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
@@ -97,6 +98,8 @@ function CoverEdit( {
templateLock,
} = attributes;
+ const borderProps = useBorderProps( attributes );
+
const [ featuredImage ] = useEntityProp(
'postType',
postType,
@@ -326,53 +329,61 @@ function CoverEdit( {
showHandle={ isSelected }
/>
-
-
- { url && isImageBackground && isImgElement && (
-
+
- ) }
- { url && isVideoBackground && (
-
+ ) }
+ { url && isVideoBackground && (
+
+ ) }
+ { isUploadingMedia && }
+
- ) }
- { isUploadingMedia && }
-
-
+
+
>
);
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index f3890c56ceae1b..fb63e7de9e3b2b 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
@@ -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
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..f67a812a0b34f3 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;
+ // Prevent overflow of background when block has border radius.
+ overflow: hidden;
&.has-parallax {
background-attachment: fixed;