From b873ef9ec330adf7b4164efc4be1dae544298452 Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 27 May 2024 15:22:26 +1000 Subject: [PATCH 1/3] Background image: add functionality to remove a theme's default, site-wide background image in the editor by settings the value to `background-image: none` --- .../global-styles/background-panel.js | 55 ++++++++++++------- .../global-styles/background-panel.js | 2 - 2 files changed, 35 insertions(+), 22 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 b8c3b6358ab5f..d3f92a38ad65f 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -100,7 +100,7 @@ function backgroundSizeHelpText( value ) { if ( value === 'contain' ) { return __( 'Image is contained without distortion.' ); } - return __( 'Specify a fixed width.' ); + return __( 'Image has a fixed width.' ); } /** @@ -421,6 +421,14 @@ function BackgroundSizeToolsPanelItem( { nextRepeat = undefined; } + /* + * Next will be null when the input is cleared, + * in which case the value should be 'auto'. + */ + if ( ! next && currentValueForToggle === 'auto' ) { + next = 'auto'; + } + onChange( setImmutably( style, [ 'background' ], { ...style?.background, @@ -484,7 +492,9 @@ function BackgroundSizeToolsPanelItem( { value={ currentValueForToggle } onChange={ updateBackgroundSize } isBlock - help={ backgroundSizeHelpText( sizeValue ) } + help={ backgroundSizeHelpText( + sizeValue || defaultValues?.backgroundSize + ) } > - { currentValueForToggle !== undefined && - currentValueForToggle !== 'cover' && - currentValueForToggle !== 'contain' ? ( - - ) : null } - { currentValueForToggle !== 'cover' && ( - - ) } + + { currentValueForToggle !== undefined && + currentValueForToggle !== 'cover' && + currentValueForToggle !== 'contain' ? ( + + ) : null } + { currentValueForToggle !== 'cover' && ( + + ) } + ); } diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js index 0ad74e0cd0bdd..8a372587bc66e 100644 --- a/packages/edit-site/src/components/global-styles/background-panel.js +++ b/packages/edit-site/src/components/global-styles/background-panel.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -59,7 +58,6 @@ export default function BackgroundPanel() { value={ style } onChange={ setStyle } settings={ settings } - headerLabel={ __( 'Background' ) } defaultValues={ BACKGROUND_DEFAULT_VALUES } defaultControls={ defaultControls } themeFileURIs={ _links?.[ 'wp:theme-file' ] } From 5f40475019245550a6d1f46e1107c4ec791bf98f Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 27 May 2024 15:22:26 +1000 Subject: [PATCH 2/3] Background image: harmonize headings, update copy including changing the label "Fixed" to "Tile", using horizontal layout for image size and repeat, fixing bug where width input is cleared and the size defaults to "cover" --- .../global-styles/background-panel.js | 55 ++++++++++++------- .../global-styles/background-panel.js | 2 - 2 files changed, 35 insertions(+), 22 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 b8c3b6358ab5f..d3f92a38ad65f 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -100,7 +100,7 @@ function backgroundSizeHelpText( value ) { if ( value === 'contain' ) { return __( 'Image is contained without distortion.' ); } - return __( 'Specify a fixed width.' ); + return __( 'Image has a fixed width.' ); } /** @@ -421,6 +421,14 @@ function BackgroundSizeToolsPanelItem( { nextRepeat = undefined; } + /* + * Next will be null when the input is cleared, + * in which case the value should be 'auto'. + */ + if ( ! next && currentValueForToggle === 'auto' ) { + next = 'auto'; + } + onChange( setImmutably( style, [ 'background' ], { ...style?.background, @@ -484,7 +492,9 @@ function BackgroundSizeToolsPanelItem( { value={ currentValueForToggle } onChange={ updateBackgroundSize } isBlock - help={ backgroundSizeHelpText( sizeValue ) } + help={ backgroundSizeHelpText( + sizeValue || defaultValues?.backgroundSize + ) } > - { currentValueForToggle !== undefined && - currentValueForToggle !== 'cover' && - currentValueForToggle !== 'contain' ? ( - - ) : null } - { currentValueForToggle !== 'cover' && ( - - ) } + + { currentValueForToggle !== undefined && + currentValueForToggle !== 'cover' && + currentValueForToggle !== 'contain' ? ( + + ) : null } + { currentValueForToggle !== 'cover' && ( + + ) } + ); } diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js index 0ad74e0cd0bdd..8a372587bc66e 100644 --- a/packages/edit-site/src/components/global-styles/background-panel.js +++ b/packages/edit-site/src/components/global-styles/background-panel.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -59,7 +58,6 @@ export default function BackgroundPanel() { value={ style } onChange={ setStyle } settings={ settings } - headerLabel={ __( 'Background' ) } defaultValues={ BACKGROUND_DEFAULT_VALUES } defaultControls={ defaultControls } themeFileURIs={ _links?.[ 'wp:theme-file' ] } From eac172314bd29697cd05fb68ee1088ee4a962825 Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 27 May 2024 15:55:16 +1000 Subject: [PATCH 3/3] Make sure the visually hidden labels are correct - use either the image title or image filename. Where there is no image URL, then show no background image selected --- .../src/components/global-styles/background-panel.js | 10 +++++----- 1 file changed, 5 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 d3f92a38ad65f..ba6225a3acbd6 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -172,13 +172,13 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) { { imgLabel } - { filename + { imgUrl ? sprintf( /* translators: %s: file name */ - __( 'Selected image: %s' ), - filename + __( 'Background image: %s' ), + filename || imgLabel ) - : __( 'No image selected' ) } + : __( 'No background image selected' ) } @@ -302,7 +302,7 @@ function BackgroundImageToolsPanelItem( { name={