From b9e01523c47990bcf0b06a3f17a4fe063381b002 Mon Sep 17 00:00:00 2001 From: Amit Raj Date: Thu, 27 Jun 2024 02:48:47 +0530 Subject: [PATCH 1/3] Adds Aspect ratio control on Image blocks in Grids --- .../src/components/dimensions-tool/index.js | 94 ++++++++++--------- packages/block-library/src/image/image.js | 20 +++- 2 files changed, 67 insertions(+), 47 deletions(-) diff --git a/packages/block-editor/src/components/dimensions-tool/index.js b/packages/block-editor/src/components/dimensions-tool/index.js index bbd3ac5ffb86e..74dbc2faf20f8 100644 --- a/packages/block-editor/src/components/dimensions-tool/index.js +++ b/packages/block-editor/src/components/dimensions-tool/index.js @@ -58,6 +58,7 @@ function DimensionsTool( { scaleOptions, // Default options handled by ScaleTool. defaultScale = 'fill', // Match CSS default value for object-fit. unitsOptions, // Default options handled by UnitControl. + parentLayoutType, } ) { // Coerce undefined and CSS default values to be null. const width = @@ -131,56 +132,61 @@ function DimensionsTool( { onChange( nextValue ); } } /> - { - const nextValue = { ...value }; + { parentLayoutType !== 'grid' && ( + { + const nextValue = { ...value }; - // 'auto' is CSS default, so it gets treated as null. - nextWidth = nextWidth === 'auto' ? null : nextWidth; - nextHeight = nextHeight === 'auto' ? null : nextHeight; + // 'auto' is CSS default, so it gets treated as null. + nextWidth = nextWidth === 'auto' ? null : nextWidth; + nextHeight = nextHeight === 'auto' ? null : nextHeight; - // Update width. - if ( ! nextWidth ) { - delete nextValue.width; - } else { - nextValue.width = nextWidth; - } + // Update width. + if ( ! nextWidth ) { + delete nextValue.width; + } else { + nextValue.width = nextWidth; + } - // Update height. - if ( ! nextHeight ) { - delete nextValue.height; - } else { - nextValue.height = nextHeight; - } + // Update height. + if ( ! nextHeight ) { + delete nextValue.height; + } else { + nextValue.height = nextHeight; + } - // Auto-update aspectRatio. - if ( nextWidth && nextHeight ) { - delete nextValue.aspectRatio; - } else if ( lastAspectRatio ) { - nextValue.aspectRatio = lastAspectRatio; - } else { - // No setting defaultAspectRatio here, because - // aspectRatio is optional in this scenario, - // unlike scale. - } + // Auto-update aspectRatio. + if ( nextWidth && nextHeight ) { + delete nextValue.aspectRatio; + } else if ( lastAspectRatio ) { + nextValue.aspectRatio = lastAspectRatio; + } else { + // No setting defaultAspectRatio here, because + // aspectRatio is optional in this scenario, + // unlike scale. + } - // Auto-update scale. - if ( ! lastAspectRatio && !! nextWidth !== !! nextHeight ) { - delete nextValue.scale; - } else if ( lastScale ) { - nextValue.scale = lastScale; - } else { - nextValue.scale = defaultScale; - setLastScale( defaultScale ); - } + // Auto-update scale. + if ( + ! lastAspectRatio && + !! nextWidth !== !! nextHeight + ) { + delete nextValue.scale; + } else if ( lastScale ) { + nextValue.scale = lastScale; + } else { + nextValue.scale = defaultScale; + setLastScale( defaultScale ); + } - onChange( nextValue ); - } } - /> - { showScaleControl && ( + onChange( nextValue ); + } } + /> + ) } + { showScaleControl && parentLayoutType !== 'grid' && ( image?.media_details?.sizes?.[ slug ]?.source_url @@ -400,6 +399,18 @@ export default function Image( { defaultAspectRatio="auto" scaleOptions={ scaleOptions } unitsOptions={ dimensionsUnitsOptions } + parentLayoutType={ parentLayoutType } + /> + ); + + const aspectRatioControl = ( + { + setAttributes( { aspectRatio: newAspectRatio } ); + } } + defaultAspectRatio="auto" + parentLayoutType={ parentLayoutType } /> ); @@ -421,7 +432,10 @@ export default function Image( { resetAll={ resetAll } dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS } > - { isResizable && dimensionsControl } + { isResizable && + ( parentLayoutType === 'grid' + ? aspectRatioControl + : dimensionsControl ) } ); From 361ac96ea9df023b9c099b6f78e71b6496d6cfe2 Mon Sep 17 00:00:00 2001 From: Amit Raj Date: Thu, 27 Jun 2024 14:59:59 +0530 Subject: [PATCH 2/3] Adds tools prop to DimensionsTool to control which sub-tools are displayed --- .../src/components/dimensions-tool/index.js | 86 ++++++++++--------- packages/block-library/src/image/image.js | 8 +- 2 files changed, 49 insertions(+), 45 deletions(-) diff --git a/packages/block-editor/src/components/dimensions-tool/index.js b/packages/block-editor/src/components/dimensions-tool/index.js index 74dbc2faf20f8..49d0fe03b4cb4 100644 --- a/packages/block-editor/src/components/dimensions-tool/index.js +++ b/packages/block-editor/src/components/dimensions-tool/index.js @@ -58,7 +58,7 @@ function DimensionsTool( { scaleOptions, // Default options handled by ScaleTool. defaultScale = 'fill', // Match CSS default value for object-fit. unitsOptions, // Default options handled by UnitControl. - parentLayoutType, + tools = [ 'aspectRatio', 'widthHeight', 'scale' ], } ) { // Coerce undefined and CSS default values to be null. const width = @@ -93,46 +93,48 @@ function DimensionsTool( { return ( <> - { - const nextValue = { ...value }; - - // 'auto' is CSS default, so it gets treated as null. - nextAspectRatio = - nextAspectRatio === 'auto' ? null : nextAspectRatio; - - setLastAspectRatio( nextAspectRatio ); - - // Update aspectRatio. - if ( ! nextAspectRatio ) { - delete nextValue.aspectRatio; - } else { - nextValue.aspectRatio = nextAspectRatio; - } - - // Auto-update scale. - if ( ! nextAspectRatio ) { - delete nextValue.scale; - } else if ( lastScale ) { - nextValue.scale = lastScale; - } else { - nextValue.scale = defaultScale; - setLastScale( defaultScale ); - } - - // Auto-update width and height. - if ( 'custom' !== nextAspectRatio && width && height ) { - delete nextValue.height; - } - - onChange( nextValue ); - } } - /> - { parentLayoutType !== 'grid' && ( + { tools.includes( 'aspectRatio' ) && ( + { + const nextValue = { ...value }; + + // 'auto' is CSS default, so it gets treated as null. + nextAspectRatio = + nextAspectRatio === 'auto' ? null : nextAspectRatio; + + setLastAspectRatio( nextAspectRatio ); + + // Update aspectRatio. + if ( ! nextAspectRatio ) { + delete nextValue.aspectRatio; + } else { + nextValue.aspectRatio = nextAspectRatio; + } + + // Auto-update scale. + if ( ! nextAspectRatio ) { + delete nextValue.scale; + } else if ( lastScale ) { + nextValue.scale = lastScale; + } else { + nextValue.scale = defaultScale; + setLastScale( defaultScale ); + } + + // Auto-update width and height. + if ( 'custom' !== nextAspectRatio && width && height ) { + delete nextValue.height; + } + + onChange( nextValue ); + } } + /> + ) } + { tools.includes( 'widthHeight' ) && ( ) } - { showScaleControl && parentLayoutType !== 'grid' && ( + { tools.includes( 'scale' ) && showScaleControl && ( ); @@ -410,7 +409,7 @@ export default function Image( { setAttributes( { aspectRatio: newAspectRatio } ); } } defaultAspectRatio="auto" - parentLayoutType={ parentLayoutType } + tools={ [ 'aspectRatio' ] } /> ); @@ -749,7 +748,10 @@ export default function Image( { /> ) } - { isResizable && dimensionsControl } + { isResizable && + ( parentLayoutType === 'grid' + ? aspectRatioControl + : dimensionsControl ) } { !! imageSizeOptions.length && ( Date: Fri, 28 Jun 2024 11:13:22 +0530 Subject: [PATCH 3/3] Addressed feedback --- packages/block-library/src/image/image.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 5a61f5490483c..17a860fa5f47c 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -408,7 +408,10 @@ export default function Image( { { - setAttributes( { aspectRatio: newAspectRatio } ); + setAttributes( { + aspectRatio: newAspectRatio, + scale: 'cover', + } ); } } defaultAspectRatio="auto" tools={ [ 'aspectRatio' ] } @@ -864,7 +867,7 @@ export default function Image( { /> ); - } else if ( ! isResizable ) { + } else if ( ! isResizable || parentLayoutType === 'grid' ) { img = (
{ img }