From 55c19b75eedee579dd857a00de0cefdda59ec539 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Tue, 16 Nov 2021 11:00:34 -0800 Subject: [PATCH 1/5] Move width and height controls into the Dimensions panel via SlotFill --- .../block-editor/src/hooks/dimensions.scss | 5 + packages/block-editor/src/style.scss | 1 + .../post-featured-image/dimension-controls.js | 121 ++++++++++-------- .../src/post-featured-image/edit.js | 10 +- .../src/post-featured-image/editor.scss | 8 -- 5 files changed, 83 insertions(+), 62 deletions(-) create mode 100644 packages/block-editor/src/hooks/dimensions.scss diff --git a/packages/block-editor/src/hooks/dimensions.scss b/packages/block-editor/src/hooks/dimensions.scss new file mode 100644 index 0000000000000..e67e16ad92295 --- /dev/null +++ b/packages/block-editor/src/hooks/dimensions.scss @@ -0,0 +1,5 @@ +.dimensions-block-support-panel { + .single-column { + grid-column: span 1; + } +} diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 6cb68d820be86..40a672fb2890b 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -56,6 +56,7 @@ @import "./hooks/anchor.scss"; @import "./hooks/layout.scss"; @import "./hooks/border.scss"; +@import "./hooks/dimensions.scss"; @import "./hooks/typography.scss"; @import "./components/block-toolbar/style.scss"; diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index d0db990f50d7d..9448c471988dd 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -1,22 +1,15 @@ -/** - * External dependencies - */ -import classNames from 'classnames'; - /** * WordPress dependencies */ import { __, _x } from '@wordpress/i18n'; import { - PanelBody, __experimentalUnitControl as UnitControl, - Flex, - FlexItem, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUseCustomUnits as useCustomUnits, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; -import { useSetting } from '@wordpress/block-editor'; +import { InspectorControls, useSetting } from '@wordpress/block-editor'; const SCALE_OPTIONS = ( <> @@ -51,6 +44,7 @@ const scaleHelp = { }; const DimensionControls = ( { + clientId, attributes: { width, height, scale }, setAttributes, } ) => { @@ -72,53 +66,80 @@ const DimensionControls = ( { }; const scaleLabel = _x( 'Scale', 'Image scaling options' ); return ( - - + !! height } + label={ __( 'Height' ) } + onDeselect={ () => setAttributes( { height: undefined } ) } + resetAllFilter={ () => ( { + height: undefined, + } ) } + isShownByDefault={ true } + panelId={ clientId } + > + + onDimensionChange( 'height', nextHeight ) + } + units={ units } + /> + + !! width } + label={ __( 'Width' ) } + onDeselect={ () => setAttributes( { width: undefined } ) } + resetAllFilter={ () => ( { + width: undefined, + } ) } + isShownByDefault={ true } + panelId={ clientId } > - - { - onDimensionChange( 'height', nextHeight ); - } } - units={ units } - /> - - - { - onDimensionChange( 'width', nextWidth ); - } } - units={ units } - /> - - + + onDimensionChange( 'width', nextWidth ) + } + units={ units } + /> + { !! height && ( - !! scale } label={ scaleLabel } - value={ scale } - help={ scaleHelp[ scale ] } - onChange={ ( value ) => { + onDeselect={ () => setAttributes( { - scale: value, - } ); - } } - isBlock + scale: undefined, + } ) + } + resetAllFilter={ () => ( { + scale: undefined, + } ) } + isShownByDefault={ !! height } + panelId={ clientId } > - { SCALE_OPTIONS } - + + setAttributes( { + scale: value, + } ) + } + isBlock + > + { SCALE_OPTIONS } + + ) } - + ); }; diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index 828ff26fb121b..ca52ffcb69405 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -47,6 +47,7 @@ const placeholderChip = ( ); function PostFeaturedImageDisplay( { + clientId, attributes, setAttributes, context: { postId, postType, queryId }, @@ -137,11 +138,12 @@ function PostFeaturedImageDisplay( { return ( <> + - Date: Tue, 16 Nov 2021 13:57:20 -0800 Subject: [PATCH 2/5] Add min value & correctly reset scale --- .../src/post-featured-image/dimension-controls.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index 9448c471988dd..27c264b1fb9d4 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -71,9 +71,15 @@ const DimensionControls = ( { className="single-column" hasValue={ () => !! height } label={ __( 'Height' ) } - onDeselect={ () => setAttributes( { height: undefined } ) } + onDeselect={ () => + setAttributes( { + height: undefined, + scale: 'cover', + } ) + } resetAllFilter={ () => ( { height: undefined, + scale: 'cover', } ) } isShownByDefault={ true } panelId={ clientId } @@ -82,6 +88,7 @@ const DimensionControls = ( { label={ __( 'Height' ) } labelPosition="top" value={ height || '' } + min={ 0 } onChange={ ( nextHeight ) => onDimensionChange( 'height', nextHeight ) } @@ -103,6 +110,7 @@ const DimensionControls = ( { label={ __( 'Width' ) } labelPosition="top" value={ width || '' } + min={ 0 } onChange={ ( nextWidth ) => onDimensionChange( 'width', nextWidth ) } @@ -115,11 +123,11 @@ const DimensionControls = ( { label={ scaleLabel } onDeselect={ () => setAttributes( { - scale: undefined, + scale: 'cover', } ) } resetAllFilter={ () => ( { - scale: undefined, + scale: 'cover', } ) } isShownByDefault={ !! height } panelId={ clientId } From 735b97668fe91c12cf61fe4697f94002180e8f0c Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Tue, 16 Nov 2021 17:43:54 -0800 Subject: [PATCH 3/5] Show Scale as default when rendered --- .../block-library/src/post-featured-image/dimension-controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index 27c264b1fb9d4..684ae33893abf 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -129,7 +129,7 @@ const DimensionControls = ( { resetAllFilter={ () => ( { scale: 'cover', } ) } - isShownByDefault={ !! height } + isShownByDefault={ true } panelId={ clientId } > Date: Wed, 17 Nov 2021 15:25:01 -0800 Subject: [PATCH 4/5] Only allow resetting scale when it is not the default value --- .../src/post-featured-image/dimension-controls.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index 684ae33893abf..1652ca50cabcc 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -31,6 +31,8 @@ const SCALE_OPTIONS = ( ); +const DEFAULT_SCALE = 'cover'; + const scaleHelp = { cover: __( 'Image is scaled and cropped to fill the entire space without being distorted.' @@ -74,12 +76,12 @@ const DimensionControls = ( { onDeselect={ () => setAttributes( { height: undefined, - scale: 'cover', + scale: DEFAULT_SCALE, } ) } resetAllFilter={ () => ( { height: undefined, - scale: 'cover', + scale: DEFAULT_SCALE, } ) } isShownByDefault={ true } panelId={ clientId } @@ -119,15 +121,15 @@ const DimensionControls = ( { { !! height && ( !! scale } + hasValue={ () => !! scale && scale !== DEFAULT_SCALE } label={ scaleLabel } onDeselect={ () => setAttributes( { - scale: 'cover', + scale: DEFAULT_SCALE, } ) } resetAllFilter={ () => ( { - scale: 'cover', + scale: DEFAULT_SCALE, } ) } isShownByDefault={ true } panelId={ clientId } From f744a0d85b1c08ad226e59ebe6b44c7948ec0025 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Wed, 17 Nov 2021 16:00:17 -0800 Subject: [PATCH 5/5] Do not reset scale when height is reset --- .../src/post-featured-image/dimension-controls.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index 1652ca50cabcc..424001efb50db 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -73,15 +73,9 @@ const DimensionControls = ( { className="single-column" hasValue={ () => !! height } label={ __( 'Height' ) } - onDeselect={ () => - setAttributes( { - height: undefined, - scale: DEFAULT_SCALE, - } ) - } + onDeselect={ () => setAttributes( { height: undefined } ) } resetAllFilter={ () => ( { height: undefined, - scale: DEFAULT_SCALE, } ) } isShownByDefault={ true } panelId={ clientId }