From 3a60214ec768446a640226992ba35cfe4ab30cb5 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 28 May 2024 13:12:41 +1000 Subject: [PATCH 1/9] This commit experiments with setting a default background size of 50% for uploaded images, also saving the last known value + unit value so it can be restored between toggling --- .../global-styles/background-panel.js | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index 61a3263e232ef9..161fd85a9c330b 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -22,11 +22,12 @@ import { __experimentalItemGroup as ItemGroup, __experimentalHStack as HStack, __experimentalTruncate as Truncate, + __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; import { getFilename } from '@wordpress/url'; -import { useCallback, Platform, useRef } from '@wordpress/element'; +import { useCallback, Platform, useRef, useState } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { focus } from '@wordpress/dom'; import { isBlobURL } from '@wordpress/blob'; @@ -196,6 +197,10 @@ function BackgroundImageToolsPanelItem( { inheritedValue, themeFileURIs, } ) { + const sizeValue = + style?.background?.backgroundSize || + inheritedValue?.background?.backgroundSize; + const mediaUpload = useSelect( ( select ) => select( blockEditorStore ).getSettings().mediaUpload, [] @@ -253,6 +258,12 @@ function BackgroundImageToolsPanelItem( { title: media.title || undefined, } ) ); + + if ( 'auto' === sizeValue || ! sizeValue ) { + onChange( + setImmutably( style, [ 'background', 'backgroundSize' ], '50%' ) + ); + } }; const onFilesDrop = ( filesList ) => { @@ -369,6 +380,8 @@ function BackgroundSizeToolsPanelItem( { defaultValues, themeFileURIs, } ) { + const [ lastKnownImageWidth, setLastKnownImageWidth ] = + useState( undefined ); const sizeValue = style?.background?.backgroundSize || inheritedValue?.background?.backgroundSize; @@ -441,6 +454,7 @@ function BackgroundSizeToolsPanelItem( { next === 'auto' ) { nextRepeat = undefined; + next = lastKnownImageWidth ?? '50%'; } /* @@ -449,6 +463,7 @@ function BackgroundSizeToolsPanelItem( { */ if ( ! next && currentValueForToggle === 'auto' ) { next = 'auto'; + setLastKnownImageWidth( undefined ); } onChange( @@ -458,6 +473,11 @@ function BackgroundSizeToolsPanelItem( { backgroundSize: next, } ) ); + + const imageWidth = parseQuantityAndUnitFromRawValue( next ); + if ( typeof imageWidth?.[ 0 ] !== 'undefined' && imageWidth?.[ 1 ] ) { + setLastKnownImageWidth( next ); + } }; const updateBackgroundPosition = ( next ) => { @@ -545,6 +565,7 @@ function BackgroundSizeToolsPanelItem( { size="__unstable-large" __unstableInputWidth="100px" min={ 0 } + placeholder={ __( 'Auto' ) } /> ) : null } { currentValueForToggle !== 'cover' && ( From 7d4520cdaaf3f40a9fd5d4712d9c791847be3933 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 28 May 2024 14:01:56 +1000 Subject: [PATCH 2/9] Checking for default value when uploading/selecting an image --- .../global-styles/background-panel.js | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index 161fd85a9c330b..fd198a32b5c6d2 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -195,11 +195,13 @@ function BackgroundImageToolsPanelItem( { onChange, style, inheritedValue, + defaultValues, themeFileURIs, } ) { const sizeValue = style?.background?.backgroundSize || - inheritedValue?.background?.backgroundSize; + inheritedValue?.background?.backgroundSize || + defaultValues?.backgroundSize; const mediaUpload = useSelect( ( select ) => select( blockEditorStore ).getSettings().mediaUpload, @@ -251,19 +253,20 @@ function BackgroundImageToolsPanelItem( { } onChange( - setImmutably( style, [ 'background', 'backgroundImage' ], { - url: media.url, - id: media.id, - source: 'file', - title: media.title || undefined, + setImmutably( style, [ 'background' ], { + ...style?.background, + backgroundImage: { + url: media.url, + id: media.id, + source: 'file', + title: media.title || undefined, + }, + backgroundSize: + 'auto' === sizeValue || ! sizeValue + ? '50%' + : style?.background?.backgroundSize, } ) ); - - if ( 'auto' === sizeValue || ! sizeValue ) { - onChange( - setImmutably( style, [ 'background', 'backgroundSize' ], '50%' ) - ); - } }; const onFilesDrop = ( filesList ) => { @@ -454,7 +457,7 @@ function BackgroundSizeToolsPanelItem( { next === 'auto' ) { nextRepeat = undefined; - next = lastKnownImageWidth ?? '50%'; + next = lastKnownImageWidth ?? 'auto'; } /* @@ -642,6 +645,7 @@ export default function BackgroundPanel( { isShownByDefault={ defaultControls.backgroundImage } style={ value } inheritedValue={ inheritedValue } + defaultValues={ defaultValues } themeFileURIs={ themeFileURIs } /> { shouldShowBackgroundSizeControls && ( From c44cdab533b89a0e840e0c2f50256b90a43fae94 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 28 May 2024 14:55:00 +1000 Subject: [PATCH 3/9] Rolling back setting the default to 50% - the UX is not clear. Should we default to 50% every time the user switches to auto? What about after they deliberately clear the input? Roll back defaultValues prop - unnecessary --- .../global-styles/background-panel.js | 36 ++++--------------- 1 file changed, 6 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index fd198a32b5c6d2..c68e5a5368bef8 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -22,12 +22,11 @@ import { __experimentalItemGroup as ItemGroup, __experimentalHStack as HStack, __experimentalTruncate as Truncate, - __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; import { getFilename } from '@wordpress/url'; -import { useCallback, Platform, useRef, useState } from '@wordpress/element'; +import { useCallback, Platform, useRef } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { focus } from '@wordpress/dom'; import { isBlobURL } from '@wordpress/blob'; @@ -195,14 +194,8 @@ function BackgroundImageToolsPanelItem( { onChange, style, inheritedValue, - defaultValues, themeFileURIs, } ) { - const sizeValue = - style?.background?.backgroundSize || - inheritedValue?.background?.backgroundSize || - defaultValues?.backgroundSize; - const mediaUpload = useSelect( ( select ) => select( blockEditorStore ).getSettings().mediaUpload, [] @@ -253,18 +246,11 @@ function BackgroundImageToolsPanelItem( { } onChange( - setImmutably( style, [ 'background' ], { - ...style?.background, - backgroundImage: { - url: media.url, - id: media.id, - source: 'file', - title: media.title || undefined, - }, - backgroundSize: - 'auto' === sizeValue || ! sizeValue - ? '50%' - : style?.background?.backgroundSize, + setImmutably( style, [ 'background', 'backgroundImage' ], { + url: media.url, + id: media.id, + source: 'file', + title: media.title || undefined, } ) ); }; @@ -383,8 +369,6 @@ function BackgroundSizeToolsPanelItem( { defaultValues, themeFileURIs, } ) { - const [ lastKnownImageWidth, setLastKnownImageWidth ] = - useState( undefined ); const sizeValue = style?.background?.backgroundSize || inheritedValue?.background?.backgroundSize; @@ -457,7 +441,6 @@ function BackgroundSizeToolsPanelItem( { next === 'auto' ) { nextRepeat = undefined; - next = lastKnownImageWidth ?? 'auto'; } /* @@ -466,7 +449,6 @@ function BackgroundSizeToolsPanelItem( { */ if ( ! next && currentValueForToggle === 'auto' ) { next = 'auto'; - setLastKnownImageWidth( undefined ); } onChange( @@ -476,11 +458,6 @@ function BackgroundSizeToolsPanelItem( { backgroundSize: next, } ) ); - - const imageWidth = parseQuantityAndUnitFromRawValue( next ); - if ( typeof imageWidth?.[ 0 ] !== 'undefined' && imageWidth?.[ 1 ] ) { - setLastKnownImageWidth( next ); - } }; const updateBackgroundPosition = ( next ) => { @@ -645,7 +622,6 @@ export default function BackgroundPanel( { isShownByDefault={ defaultControls.backgroundImage } style={ value } inheritedValue={ inheritedValue } - defaultValues={ defaultValues } themeFileURIs={ themeFileURIs } /> { shouldShowBackgroundSizeControls && ( From 5e6f3850a98ec2f17f9d6a4b27cda6e7d8462953 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 28 May 2024 16:22:44 +1000 Subject: [PATCH 4/9] Check for an id, which indicates that the image has been uploaded to the database, and only then use `50%` as the default for Tile --- .../src/components/global-styles/background-panel.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index c68e5a5368bef8..271f8d99a50971 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -441,6 +441,7 @@ function BackgroundSizeToolsPanelItem( { next === 'auto' ) { nextRepeat = undefined; + next = !! style?.background?.backgroundImage?.id ? '50%' : next; } /* From 3e1e3a267d08146e9940e4fbb8db2f368b9bb013 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 30 May 2024 14:34:19 +1000 Subject: [PATCH 5/9] When switching to "Tile" in the background size toggle, roll back default background size of 50%, and introduce a default background position of "50% 0" --- .../src/components/global-styles/background-panel.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index 271f8d99a50971..f6a344adc8e589 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -426,6 +426,7 @@ function BackgroundSizeToolsPanelItem( { const updateBackgroundSize = ( next ) => { // When switching to 'contain' toggle the repeat off. let nextRepeat = repeatValue; + let nextPosition = positionValue; if ( next === 'contain' ) { nextRepeat = 'no-repeat'; @@ -441,7 +442,15 @@ function BackgroundSizeToolsPanelItem( { next === 'auto' ) { nextRepeat = undefined; - next = !! style?.background?.backgroundImage?.id ? '50%' : next; + /* + * A background image uploaded and set in the editor (an image with a record id), + * receives a default background position of '50% 0', + * when the toggle switches to "Tile". This is to increase the chance that + * the image's focus point is visible. + */ + if ( !! style?.background?.backgroundImage?.id ) { + nextPosition = '50% 0'; + } } /* @@ -455,6 +464,7 @@ function BackgroundSizeToolsPanelItem( { onChange( setImmutably( style, [ 'background' ], { ...style?.background, + backgroundPosition: nextPosition, backgroundRepeat: nextRepeat, backgroundSize: next, } ) From ebfb30e36beed8b8e93b3feec33eac9c0f8a5700 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 30 May 2024 14:40:52 +1000 Subject: [PATCH 6/9] Check for existing backgroundPosition --- .../src/components/global-styles/background-panel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index f6a344adc8e589..f6023aea1bf9f6 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -448,7 +448,7 @@ function BackgroundSizeToolsPanelItem( { * when the toggle switches to "Tile". This is to increase the chance that * the image's focus point is visible. */ - if ( !! style?.background?.backgroundImage?.id ) { + if ( !! style?.background?.backgroundImage?.id && ! nextPosition ) { nextPosition = '50% 0'; } } From 32a2e6cfe5d2310456301f570ac684de5d3225e3 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 30 May 2024 14:44:04 +1000 Subject: [PATCH 7/9] Clear position values between toggling --- .../src/components/global-styles/background-panel.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index f6023aea1bf9f6..ddbd56f900a221 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -430,10 +430,12 @@ function BackgroundSizeToolsPanelItem( { if ( next === 'contain' ) { nextRepeat = 'no-repeat'; + nextPosition = undefined; } if ( next === 'cover' ) { nextRepeat = undefined; + nextPosition = undefined; } if ( From aa0019b0096a3cf88eeb146b0c49ca2a3598967f Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 30 May 2024 14:48:48 +1000 Subject: [PATCH 8/9] Don't need value check as it's always reset --- .../src/components/global-styles/background-panel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index ddbd56f900a221..61149b7f57bb33 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -450,7 +450,7 @@ function BackgroundSizeToolsPanelItem( { * when the toggle switches to "Tile". This is to increase the chance that * the image's focus point is visible. */ - if ( !! style?.background?.backgroundImage?.id && ! nextPosition ) { + if ( !! style?.background?.backgroundImage?.id ) { nextPosition = '50% 0'; } } From f2c6e317ed8e9c3878d5deb9b506279248ca87c5 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 30 May 2024 17:13:28 +1000 Subject: [PATCH 9/9] Ensure that the default position 50% 0 is set when changing/uploading images via the media library. --- .../global-styles/background-panel.js | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index 61149b7f57bb33..7f3c3ed27e667f 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -245,12 +245,22 @@ function BackgroundImageToolsPanelItem( { return; } + const sizeValue = style?.background?.backgroundSize; + const positionValue = style?.background?.backgroundPosition; + onChange( - setImmutably( style, [ 'background', 'backgroundImage' ], { - url: media.url, - id: media.id, - source: 'file', - title: media.title || undefined, + setImmutably( style, [ 'background' ], { + ...style?.background, + backgroundImage: { + url: media.url, + id: media.id, + source: 'file', + title: media.title || undefined, + }, + backgroundPosition: + ! positionValue && ( 'auto' === sizeValue || ! sizeValue ) + ? '50% 0' + : positionValue, } ) ); };