diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 1af1a99cba73ee..b7bcbb35f40ea0 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -38,7 +38,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": 32, // InnerBlocks area inside cover image block. Must be higher than block popover and less than drop zone. - ".wp-block-cover.is-placeholder .components-placeholder.is-large": 1, // Cover block resizer component inside a large placeholder. + ".wp-block-cover.is-placeholder .components-placeholder.is-large": 32, // 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. ".block-library-cover__padding-visualizer": 2, // BoxControl visualizer needs to be +1 higher than .wp-block-cover.has-background-dim::before ".wp-block-cover__image-background": 0, // Image background inside cover block. diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index e4fde66b530748..db3cf86f710540 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -220,6 +220,27 @@ function CoverEdit( { overlayColor, }; + const resizableCoverProps = { + className: 'block-library-cover__resize-container', + clientId, + height, + minHeight: parseFloat( minHeight ), + onResizeStart: () => { + setAttributes( { minHeightUnit: 'px' } ); + toggleSelection( false ); + }, + onResize: ( value ) => { + setAttributes( { minHeight: value } ); + }, + onResizeStop: ( newMinHeight ) => { + toggleSelection( true ); + setAttributes( { minHeight: newMinHeight } ); + }, + showHandle: true, + size: resizableBoxDimensions, + width, + }; + if ( ! hasInnerBlocks && ! hasBackground ) { return ( <> @@ -238,26 +259,7 @@ function CoverEdit( { currentSettings={ currentSettings } /> { isSelected && ( - { - setAttributes( { minHeightUnit: 'px' } ); - toggleSelection( false ); - } } - onResize={ ( value ) => { - setAttributes( { minHeight: value } ); - } } - onResizeStop={ ( newMinHeight ) => { - toggleSelection( true ); - setAttributes( { minHeight: newMinHeight } ); - } } - showHandle={ true } - size={ { height: 'auto', width: 'auto' } } - width={ width } - height={ height } - /> + ) }
- { isSelected && ( - { - setAttributes( { minHeightUnit: 'px' } ); - toggleSelection( false ); - } } - onResize={ ( value ) => { - setAttributes( { minHeight: value } ); - } } - onResizeStop={ ( newMinHeight ) => { - toggleSelection( true ); - setAttributes( { minHeight: newMinHeight } ); - } } - showHandle - size={ resizableBoxDimensions } - width={ width } - height={ height } - /> - ) }
+ { isSelected && ( + + ) } ); }