From fe399d792a72898543bc31de1b7ff95f71571721 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 18 May 2022 13:36:26 +1000 Subject: [PATCH 1/9] Move ResizableBox to BlockPopover for Cover block borders --- packages/base-styles/_z-index.scss | 4 +- packages/block-editor/src/components/index.js | 1 + .../components/resizable-box-popover/index.js | 25 ++++++ packages/block-library/src/cover/block.json | 12 +++ .../block-library/src/cover/edit/index.js | 81 ++++++++++--------- ...le-cover.js => resizable-cover-popover.js} | 18 +++-- packages/block-library/src/cover/editor.scss | 24 +++--- packages/block-library/src/cover/style.scss | 1 + 8 files changed, 107 insertions(+), 59 deletions(-) create mode 100644 packages/block-editor/src/components/resizable-box-popover/index.js rename packages/block-library/src/cover/edit/{resizable-cover.js => resizable-cover-popover.js} (73%) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index d61403d702707..a85814b4b838a 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -33,8 +33,8 @@ $z-layers: ( ".interface-interface-skeleton__content": 20, ".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 f5b2c17e87740..bb3f36c948e45 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -77,6 +77,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 0d272ab4e4cff..8c7cb0f9143c6 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -94,6 +94,18 @@ "blockGap": 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": true, diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index a74ebe8fe18eb..930d0a71890c5 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 ] ); @@ -146,6 +146,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 }` @@ -246,24 +254,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 }
@@ -275,21 +309,6 @@ function CoverEdit( { />
- { - setAttributes( { minHeightUnit: 'px' } ); - toggleSelection( false ); - } } - onResize={ ( value ) => { - setAttributes( { minHeight: value } ); - } } - onResizeStop={ ( newMinHeight ) => { - toggleSelection( true ); - setAttributes( { minHeight: newMinHeight } ); - } } - showHandle={ isSelected } - /> ); @@ -318,22 +337,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 ) && (