diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 04a58df261194c..0444afc675e040 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -37,6 +37,7 @@ $z-layers: (
".edit-widgets-header": 30,
".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block
+ ".wp-block-cover.is-placeholder .components-placeholder.is-large": 1, // Cover block resizer component inside a large placeholder.
".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
".wp-block-cover__image-background": 0, // Image background inside cover block.
".wp-block-cover__video-background": 0, // Video background inside cover block.
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 85906ec4cec207..3965f079e090bf 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -277,29 +277,27 @@ function CoverPlaceholder( {
} ) {
const { removeAllNotices, createErrorNotice } = noticeOperations;
return (
-
- }
- labels={ {
- title: __( 'Cover' ),
- instructions: __(
- 'Drag and drop onto this block, upload, or select existing media from your library.'
- ),
- } }
- onSelect={ onSelectMedia }
- accept="image/*,video/*"
- allowedTypes={ ALLOWED_MEDIA_TYPES }
- notices={ noticeUI }
- disableMediaButtons={ disableMediaButtons }
- onError={ ( message ) => {
- removeAllNotices();
- createErrorNotice( message );
- } }
- style={ style }
- >
- { children }
-
-
+ }
+ labels={ {
+ title: __( 'Cover' ),
+ instructions: __(
+ 'Drag and drop onto this block, upload, or select existing media from your library.'
+ ),
+ } }
+ onSelect={ onSelectMedia }
+ accept="image/*,video/*"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ notices={ noticeUI }
+ disableMediaButtons={ disableMediaButtons }
+ onError={ ( message ) => {
+ removeAllNotices();
+ createErrorNotice( message );
+ } }
+ style={ style }
+ >
+ { children }
+
);
}
@@ -641,20 +639,6 @@ function CoverEdit( {
noticeOperations={ noticeOperations }
style={ { minHeight: temporaryMinHeight || minHeight } }
>
- {
- setAttributes( { minHeightUnit: 'px' } );
- toggleSelection( false );
- } }
- onResize={ setTemporaryMinHeight }
- onResizeStop={ ( newMinHeight ) => {
- toggleSelection( true );
- setAttributes( { minHeight: newMinHeight } );
- setTemporaryMinHeight( null );
- } }
- showHandle={ isSelected }
- />
+ {
+ setAttributes( { minHeightUnit: 'px' } );
+ toggleSelection( false );
+ } }
+ onResize={ setTemporaryMinHeight }
+ onResizeStop={ ( newMinHeight ) => {
+ toggleSelection( true );
+ setAttributes( { minHeight: newMinHeight } );
+ setTemporaryMinHeight( null );
+ } }
+ showHandle={ isSelected }
+ />
>
);
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 44c7ee5e3ae9b6..5e43aedc6738bf 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -9,6 +9,22 @@
&.is-placeholder {
min-height: auto !important;
padding: 0 !important;
+
+ // Resizeable placeholder
+ .components-resizable-box__container {
+ display: none;
+ }
+ .components-placeholder {
+ &.is-large {
+ min-height: 250px;
+ justify-content: flex-start;
+ z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large");
+ + .components-resizable-box__container {
+ min-height: 250px;
+ display: block;
+ }
+ }
+ }
}
&.components-placeholder h2 {
@@ -116,22 +132,3 @@
.block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {
background-attachment: scroll;
}
-
-// Resizeable placeholder
-.wp-block-cover.is-placeholder .cover-block__cover-placeholder-container {
- width: 100%;
- .components-resizable-box__container {
- display: none;
- }
- .components-placeholder {
- justify-content: flex-start;
- &.is-large {
- min-height: 250px;
-
- .components-resizable-box__container {
- min-height: 250px;
- display: block;
- }
- }
- }
-}