diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index c14afaedf8add..1312719e517f2 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -35,8 +35,8 @@ $z-layers: (
".edit-site-header": 62,
".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__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": 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-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 6b7a24887b342..57ecba139422c 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -79,6 +79,7 @@ export { default as MediaUpload } from './media-upload';
export { default as MediaUploadCheck } from './media-upload/check';
export { default as PanelColorSettings } from './panel-color-settings';
export { default as PlainText } from './plain-text';
+export { default as __experimentalResizableBoxPopover } from './resizable-box-popover';
export { default as __experimentalResponsiveBlockControl } from './responsive-block-control';
export {
default as RichText,
diff --git a/packages/block-editor/src/components/resizable-box-popover/index.js b/packages/block-editor/src/components/resizable-box-popover/index.js
new file mode 100644
index 0000000000000..d93f45faeec9d
--- /dev/null
+++ b/packages/block-editor/src/components/resizable-box-popover/index.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { ResizableBox } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopover from '../block-popover';
+
+export default function ResizableCoverPopover( {
+ clientId,
+ __unstableRefreshSize,
+ ...props
+} ) {
+ return (
+
+
+
+ );
+}
diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 1982ecc44853e..4f36d956873b6 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -88,6 +88,18 @@
"padding": true
}
},
+ "__experimentalBorder": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true,
+ "__experimentalDefaultControls": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ }
+ },
"color": {
"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
"text": false,
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index ee9536aa1ed2b..6aa59750d8fb1 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -9,9 +9,9 @@ import namesPlugin from 'colord/plugins/names';
* WordPress dependencies
*/
import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
import { Placeholder, Spinner } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
+import { compose, useResizeObserver } from '@wordpress/compose';
import {
withColors,
ColorPalette,
@@ -42,7 +42,7 @@ import useCoverIsDark from './use-cover-is-dark';
import CoverInspectorControls from './inspector-controls';
import CoverBlockControls from './block-controls';
import CoverPlaceholder from './cover-placeholder';
-import ResizableCover from './resizable-cover';
+import ResizableCoverPopover from './resizable-cover-popover';
extend( [ namesPlugin ] );
@@ -148,6 +148,14 @@ function CoverEdit( {
const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+ const [ resizeListener, { height, width } ] = useResizeObserver();
+ const resizableBoxDimensions = useMemo( () => {
+ return {
+ height: minHeight ? parseFloat( minHeight ) : 'auto',
+ width: 'auto',
+ };
+ }, [ minHeight ] );
+
const minHeightWithUnit =
minHeight && minHeightUnit
? `${ minHeight }${ minHeightUnit }`
@@ -245,24 +253,50 @@ function CoverEdit( {
/>
);
+ 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 ( ! useFeaturedImage && ! hasInnerBlocks && ! hasBackground ) {
return (
<>
{ blockControls }
{ inspectorControls }
+ { isSelected && (
+
+ ) }
+ { resizeListener }
@@ -274,21 +308,6 @@ function CoverEdit( {
/>
-
{
- setAttributes( { minHeightUnit: 'px' } );
- toggleSelection( false );
- } }
- onResize={ ( value ) => {
- setAttributes( { minHeight: value } );
- } }
- onResizeStop={ ( newMinHeight ) => {
- toggleSelection( true );
- setAttributes( { minHeight: newMinHeight } );
- } }
- showHandle={ isSelected }
- />
>
);
@@ -317,22 +336,7 @@ function CoverEdit( {
style={ { ...style, ...blockProps.style } }
data-url={ url }
>
- {
- setAttributes( { minHeightUnit: 'px' } );
- toggleSelection( false );
- } }
- onResize={ ( value ) => {
- setAttributes( { minHeight: value } );
- } }
- onResizeStop={ ( newMinHeight ) => {
- toggleSelection( true );
- setAttributes( { minHeight: newMinHeight } );
- } }
- showHandle={ isSelected }
- />
-
+ { resizeListener }
{ ( ! useFeaturedImage || url ) && (
+ { isSelected && (
+
+ ) }
>
);
}
diff --git a/packages/block-library/src/cover/edit/resizable-cover.js b/packages/block-library/src/cover/edit/resizable-cover-popover.js
similarity index 73%
rename from packages/block-library/src/cover/edit/resizable-cover.js
rename to packages/block-library/src/cover/edit/resizable-cover-popover.js
index 7029e5c997e46..3f5950912f5d7 100644
--- a/packages/block-library/src/cover/edit/resizable-cover.js
+++ b/packages/block-library/src/cover/edit/resizable-cover-popover.js
@@ -6,8 +6,8 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { useState } from '@wordpress/element';
-import { ResizableBox } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { __experimentalResizableBoxPopover as ResizableBoxPopover } from '@wordpress/block-editor';
const RESIZABLE_BOX_ENABLE_OPTION = {
top: false,
@@ -20,17 +20,25 @@ const RESIZABLE_BOX_ENABLE_OPTION = {
topLeft: false,
};
-export default function ResizableCover( {
+export default function ResizableCoverPopover( {
className,
- onResizeStart,
+ height,
+ minHeight,
onResize,
+ onResizeStart,
onResizeStop,
+ width,
...props
} ) {
const [ isResizing, setIsResizing ] = useState( false );
+ const dimensions = useMemo(
+ () => ( { height, minHeight, width } ),
+ [ minHeight, height, width ]
+ );
return (
- .components-drop-zone .components-drop-zone__content {
opacity: 0.8 !important;
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 95fab91763886..216944e64fa9a 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -11,6 +11,7 @@
box-sizing: border-box;
// Keep the flex layout direction to the physical direction (LTR) in RTL languages.
/*rtl:raw: direction: ltr; */
+ overflow: hidden;
/**
* Set a default background color for has-background-dim _unless_ it includes another