diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 04a58df261194..0444afc675e04 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-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index 58bc1a8635248..f13206870f815 100644 --- a/packages/block-editor/src/components/media-placeholder/index.js +++ b/packages/block-editor/src/components/media-placeholder/index.js @@ -78,6 +78,7 @@ export function MediaPlaceholder( { children, mediaLibraryButton, placeholder, + style, } ) { const mediaUpload = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); @@ -248,6 +249,7 @@ export function MediaPlaceholder( { notices={ notices } onDoubleClick={ onDoubleClick } preview={ mediaPreview } + style={ style } > { content } { children } diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index 1f783024598ba..d0f61d87699bf 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -198,7 +198,6 @@ function ResizableCover( { onResizeStop( elt.clientHeight ); setIsResizing( false ); } } - minHeight={ COVER_MIN_HEIGHT } { ...props } /> ); @@ -274,6 +273,7 @@ function CoverPlaceholder( { noticeUI, noticeOperations, onSelectMedia, + style, } ) { const { removeAllNotices, createErrorNotice } = noticeOperations; return ( @@ -294,6 +294,7 @@ function CoverPlaceholder( { removeAllNotices(); createErrorNotice( message ); } } + style={ style } > { children } @@ -636,6 +637,7 @@ function CoverEdit( { noticeUI={ noticeUI } onSelectMedia={ onSelectMedia } noticeOperations={ noticeOperations } + style={ { minHeight: temporaryMinHeight || minHeight } } >
+ { + 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 a76ac26b9bade..f3890c56ceae1 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 for placeholder. + .block-library-cover__resize-container { + display: none; + } + .components-placeholder { + &.is-large { + min-height: 240px; + justify-content: flex-start; + z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large"); + + .block-library-cover__resize-container { + min-height: 240px; + display: block; + } + } + } } &.components-placeholder h2 { @@ -64,6 +80,7 @@ left: 0; right: 0; bottom: 0; + min-height: 50px; } .block-library-cover__resize-container:not(.is-resizing) {