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; - } - } - } -}