From 4ab14a06277d16669771d99c09a4fbf603a467d3 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 4 Jan 2024 10:55:46 +0100 Subject: [PATCH 01/12] Replace __experimentalImageSizeControl with ResolutionTool --- packages/block-library/src/media-text/edit.js | 158 ++++++++++++------ 1 file changed, 105 insertions(+), 53 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index f3baeb8c1756b..68af97ec60f53 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -16,18 +16,19 @@ import { InspectorControls, useBlockProps, __experimentalImageURLInputUI as ImageURLInputUI, - __experimentalImageSizeControl as ImageSizeControl, store as blockEditorStore, useBlockEditingMode, + privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { - PanelBody, RangeControl, TextareaControl, ToggleControl, ToolbarButton, ExternalLink, FocalPointPicker, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { isBlobURL, getBlobTypeByURL } from '@wordpress/blob'; import { pullLeft, pullRight } from '@wordpress/icons'; @@ -44,6 +45,9 @@ import { LINK_DESTINATION_ATTACHMENT, TEMPLATE, } from './constants'; +import { unlock } from '../lock-unlock'; + +const { ResolutionTool } = unlock( blockEditorPrivateApis ); // this limits the resize to a safe zone to avoid making broken layouts const applyWidthConstraints = ( width ) => @@ -229,81 +233,118 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { }; const mediaTextGeneralSettings = ( - - + - setAttributes( { - isStackedOnMobile: ! isStackedOnMobile, - } ) + isShownByDefault={ true } + hasValue={ () => !! isStackedOnMobile } + onDeselect={ () => + setAttributes( { isStackedOnMobile: false } ) } - /> - { mediaType === 'image' && ( + > setAttributes( { - imageFill: ! imageFill, + isStackedOnMobile: ! isStackedOnMobile, } ) } /> + + { mediaType === 'image' && ( + !! imageFill } + onDeselect={ () => setAttributes( { imageFill: false } ) } + > + + setAttributes( { + imageFill: ! imageFill, + } ) + } + /> + ) } { imageFill && mediaUrl && mediaType === 'image' && ( - - setAttributes( { focalPoint: value } ) + isShownByDefault={ true } + hasValue={ () => !! focalPoint } + onDeselect={ () => + setAttributes( { focalPoint: undefined } ) } - onDragStart={ imperativeFocalPointPreview } - onDrag={ imperativeFocalPointPreview } - /> + > + + setAttributes( { focalPoint: value } ) + } + onDragStart={ imperativeFocalPointPreview } + onDrag={ imperativeFocalPointPreview } + /> + ) } { mediaType === 'image' && ( - - - { __( 'Describe the purpose of the image.' ) } - -
- { __( 'Leave empty if decorative.' ) } - - } - /> + isShownByDefault={ true } + hasValue={ () => !! mediaAlt } + onDeselect={ () => setAttributes( { mediaAlt: '' } ) } + > + + + { __( + 'Describe the purpose of the image.' + ) } + +
+ { __( 'Leave empty if decorative.' ) } + + } + /> + ) } { mediaType === 'image' && ( - ) } { mediaUrl && ( - + isShownByDefault={ true } + hasValue={ () => !! mediaWidth } + onDeselect={ () => setAttributes( { mediaWidth: 50 } ) } + > + + ) } - + ); const blockProps = useBlockProps( { @@ -318,6 +359,17 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { const blockEditingMode = useBlockEditingMode(); + function resetAll() { + setAttributes( { + isStackedOnMobile: false, + imageFill: false, + mediaAlt: undefined, + focalPoint: undefined, + mediaWidth: undefined, + mediaSizeSlug: undefined, + } ); + } + return ( <> { mediaTextGeneralSettings } From 3b210023bdbca9812b6cee39c8738e71979b0d33 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 1 Feb 2024 07:14:14 +0100 Subject: [PATCH 02/12] Fix CS spacing issue after merge conflict --- packages/block-library/src/media-text/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 9dfb92f023c3f..e5e955aa86320 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -283,7 +283,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { > Date: Fri, 8 Mar 2024 04:09:48 +0100 Subject: [PATCH 03/12] Move the Media Width control Move the media width control and update the "crop image to fill" label to better match the changes in https://github.com/WordPress/gutenberg/pull/58447. --- packages/block-library/src/media-text/edit.js | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index e5e955aa86320..8f2ef56819bfe 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -234,6 +234,23 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { const mediaTextGeneralSettings = ( + { mediaUrl && ( + !! mediaWidth } + onDeselect={ () => setAttributes( { mediaWidth: 50 } ) } + > + + + ) } { mediaType === 'image' && ( !! imageFill } onDeselect={ () => setAttributes( { imageFill: false } ) } > setAttributes( { @@ -328,23 +345,6 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { onChange={ updateImage } /> ) } - { mediaUrl && ( - !! mediaWidth } - onDeselect={ () => setAttributes( { mediaWidth: 50 } ) } - > - - - ) } ); From fb332b8f20e9931dddcb4a850ea126c916961655 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 8 Mar 2024 04:50:48 +0100 Subject: [PATCH 04/12] CS: Remove the default value from isShownByDefault. Remove the default value (true) from isShownByDefault in the ToolsPanelItem. --- packages/block-library/src/media-text/edit.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 8f2ef56819bfe..bf798a79b392b 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -237,7 +237,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { { mediaUrl && ( !! mediaWidth } onDeselect={ () => setAttributes( { mediaWidth: 50 } ) } > @@ -253,7 +253,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { ) } !! isStackedOnMobile } onDeselect={ () => setAttributes( { isStackedOnMobile: false } ) @@ -273,7 +273,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { { mediaType === 'image' && ( !! imageFill } onDeselect={ () => setAttributes( { imageFill: false } ) } > @@ -292,7 +292,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { { imageFill && mediaUrl && mediaType === 'image' && ( !! focalPoint } onDeselect={ () => setAttributes( { focalPoint: undefined } ) @@ -315,7 +315,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { { mediaType === 'image' && ( !! mediaAlt } onDeselect={ () => setAttributes( { mediaAlt: '' } ) } > From 2142b52f3f9585d5f8bf254c085f183160cd89e4 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 8 Mar 2024 05:43:37 +0100 Subject: [PATCH 05/12] Import the constants for the ToolsPanel popover position Import and apply the constants for the dropdownMenuProps that positions the popover for the options and reset panel. --- packages/block-library/src/media-text/edit.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index bf798a79b392b..43fae4322624c 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -46,6 +46,7 @@ import { TEMPLATE, } from './constants'; import { unlock } from '../lock-unlock'; +import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../utils/constants'; const { ResolutionTool } = unlock( blockEditorPrivateApis ); @@ -233,7 +234,11 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) { }; const mediaTextGeneralSettings = ( - + { mediaUrl && ( Date: Tue, 12 Mar 2024 12:32:49 +0100 Subject: [PATCH 06/12] CS: Correct the spacing in edit.js after the merge conflict. Indent the ToolsPanelItem for the Focal Point one more tab stop. --- packages/block-library/src/media-text/edit.js | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 156d92645c137..dd6984a367214 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -335,32 +335,32 @@ function MediaTextEdit( { { imageFill && ( mediaUrl || featuredImageURL ) && mediaType === 'image' && ( - !! focalPoint } - onDeselect={ () => - setAttributes( { focalPoint: undefined } ) - } - > - - setAttributes( { focalPoint: value } ) + isShownByDefault + hasValue={ () => !! focalPoint } + onDeselect={ () => + setAttributes( { focalPoint: undefined } ) } - onDragStart={ imperativeFocalPointPreview } - onDrag={ imperativeFocalPointPreview } - /> - - ) } + > + + setAttributes( { focalPoint: value } ) + } + onDragStart={ imperativeFocalPointPreview } + onDrag={ imperativeFocalPointPreview } + /> + + ) } { mediaType === 'image' && ( mediaUrl || featuredImageURL ) && ( Date: Tue, 12 Mar 2024 12:43:25 +0100 Subject: [PATCH 07/12] Remove the condition that wraps the Media width control The condition that was used to show or hide the Media width control was removed in a previous pull request, but this was missed when trying to solve merge conflicts. --- packages/block-library/src/media-text/edit.js | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index dd6984a367214..3e50cb6b4b4dd 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -277,23 +277,21 @@ function MediaTextEdit( { resetAll={ resetAll } dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS } > - { mediaUrl && ( - !! mediaWidth } + onDeselect={ () => setAttributes( { mediaWidth: 50 } ) } + > + !! mediaWidth } - onDeselect={ () => setAttributes( { mediaWidth: 50 } ) } - > - - - ) } + value={ temporaryMediaWidth || mediaWidth } + onChange={ commitWidthChange } + min={ WIDTH_CONSTRAINT_PERCENTAGE } + max={ 100 - WIDTH_CONSTRAINT_PERCENTAGE } + /> + Date: Tue, 12 Mar 2024 13:06:48 +0100 Subject: [PATCH 08/12] Make sure that the media width resets to "50" Set the default value for mediaWidth in resetAll() to 50. Make sure that only values other than the default (50) counts as a change to the media with setting. --- packages/block-library/src/media-text/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 3e50cb6b4b4dd..ba77dde42f330 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -280,7 +280,7 @@ function MediaTextEdit( { !! mediaWidth } + hasValue={ () => mediaWidth !== 50 } onDeselect={ () => setAttributes( { mediaWidth: 50 } ) } > Date: Tue, 12 Mar 2024 13:57:11 +0100 Subject: [PATCH 09/12] Reverse the Stack on mobile setting The option is enabled by default, so it should also reset to the enabled (true) state. --- packages/block-library/src/media-text/edit.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index ba77dde42f330..936d54c59e6d5 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -295,9 +295,9 @@ function MediaTextEdit( { !! isStackedOnMobile } + hasValue={ () => ! isStackedOnMobile } onDeselect={ () => - setAttributes( { isStackedOnMobile: false } ) + setAttributes( { isStackedOnMobile: true } ) } > Date: Tue, 7 May 2024 09:23:59 +0200 Subject: [PATCH 10/12] Remove function resetAll(), add ToolsPanelItem around the alternative text control. --- packages/block-library/src/media-text/edit.js | 59 +++++++++++-------- 1 file changed, 33 insertions(+), 26 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index fda377eca7582..749c0abb8296f 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -274,7 +274,16 @@ function MediaTextEdit( { const mediaTextGeneralSettings = ( { + setAttributes( { + isStackedOnMobile: true, + imageFill: false, + mediaAlt: '', + focalPoint: undefined, + mediaWidth: 50, + mediaSizeSlug: undefined, + } ); + } } dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS } > ) } { mediaType === 'image' && mediaUrl && ! useFeaturedImage && ( - - - { __( 'Describe the purpose of the image.' ) } - -
- { __( 'Leave empty if decorative.' ) } - - } - /> + isShownByDefault + hasValue={ () => !! mediaAlt } + onDeselect={ () => setAttributes( { mediaAlt: '' } ) } + > + + + { __( + 'Describe the purpose of the image.' + ) } + +
+ { __( 'Leave empty if decorative.' ) } + + } + /> + ) } { mediaType === 'image' && ( { mediaTextGeneralSettings } From e9a2c1e2ee0cf670b46da794285f9f2f3870ef53 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 8 May 2024 05:18:10 +0200 Subject: [PATCH 11/12] Hide the resolution tool when the featured image is used --- packages/block-library/src/media-text/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 749c0abb8296f..ace5b7ac54586 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -394,10 +394,10 @@ function MediaTextEdit( { /> ) } - { mediaType === 'image' && ( + { mediaType === 'image' && ! useFeaturedImage && ( ) } From 55f6165a42dfd65887d55c66b76b66c8b7d86db0 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 20 May 2024 12:49:35 +0200 Subject: [PATCH 12/12] Restore __next40pxDefaultSize on the RangeControl --- packages/block-library/src/media-text/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index ace5b7ac54586..5901cd780c130 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -294,6 +294,7 @@ function MediaTextEdit( { >