From 9321f08829c9500d1af38d04f0937472dfced4e8 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 13 Sep 2023 15:04:34 -0400 Subject: [PATCH 1/9] Update background.js --- packages/block-editor/src/hooks/background.js | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js index 25815ad5d2cae1..59ca6f72b1cc05 100644 --- a/packages/block-editor/src/hooks/background.js +++ b/packages/block-editor/src/hooks/background.js @@ -101,7 +101,20 @@ function InspectorImagePreview( { label, url: imgUrl } ) { return ( - + + { imgUrl && ( + + ) } + - + ) } /> From f370d1ecfad5195bb2bd5ff7ba4430cd943c1ac5 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 13 Sep 2023 15:05:52 -0400 Subject: [PATCH 2/9] Update background.scss --- .../block-editor/src/hooks/background.scss | 38 ++++++++++++++++++- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/background.scss b/packages/block-editor/src/hooks/background.scss index 0ac17181990191..aa2fc77aecc727 100644 --- a/packages/block-editor/src/hooks/background.scss +++ b/packages/block-editor/src/hooks/background.scss @@ -11,7 +11,7 @@ .block-editor-hooks__background__inspector-media-replace-container { button.components-button { color: $gray-900; - box-shadow: inset 0 0 0 1px $gray-400; + box-shadow: inset 0 0 0 1px $gray-300; width: 100%; display: block; height: $grid-unit-50; @@ -36,6 +36,40 @@ } } +.block-editor-hooks__background__inspector-image-indicator { + background: #fff linear-gradient(-45deg, #0000 48%, #ddd 0, #ddd 52%, #0000 0); + border-radius: 50% !important; + box-shadow: inset 0 0 0 1px #0003; + display: block; + width: 20px; + height: 20px; + flex: none; +} + + +.block-editor-hooks__background__inspector-image-indicator-image { + background-size: cover; + border-radius: 50%; + width: 20px; + height: 20px; + display: block; + position: relative; +} + +.block-editor-hooks__background__inspector-image-indicator-image::after { + content: ""; + position: absolute; + top: -1px; + left: -1px; + bottom: -1px; + right: -1px; + border-radius: $radius-round; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + // Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible. + border: 1px solid transparent; + box-sizing: inherit; +} + .block-editor-hooks__background__inspector-media-replace-container { .components-dropdown { display: block; @@ -45,7 +79,7 @@ width: 20px; min-width: 20px; aspect-ratio: 1; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + // box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); border-radius: 50% !important; } From 85920b15c5c7b96e645a27abb28fc234fcf0aa47 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 13 Sep 2023 16:51:24 -0400 Subject: [PATCH 3/9] Update background.scss --- .../block-editor/src/hooks/background.scss | 43 ++++++------------- 1 file changed, 14 insertions(+), 29 deletions(-) diff --git a/packages/block-editor/src/hooks/background.scss b/packages/block-editor/src/hooks/background.scss index aa2fc77aecc727..3f36ce463f0dce 100644 --- a/packages/block-editor/src/hooks/background.scss +++ b/packages/block-editor/src/hooks/background.scss @@ -36,27 +36,32 @@ } } -.block-editor-hooks__background__inspector-image-indicator { - background: #fff linear-gradient(-45deg, #0000 48%, #ddd 0, #ddd 52%, #0000 0); - border-radius: 50% !important; - box-shadow: inset 0 0 0 1px #0003; +.block-editor-hooks__background__inspector-media-replace-container { + .components-dropdown { + display: block; + } +} + +.block-editor-hooks__background__inspector-image-indicator-wrapper { + background: #fff linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); // Show a diagonal line (crossed out) for empty background image. + border-radius: $radius-round !important; // Override the default border-radius inherited from FlexItem. + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); display: block; width: 20px; height: 20px; flex: none; } - -.block-editor-hooks__background__inspector-image-indicator-image { +.block-editor-hooks__background__inspector-image-indicator { background-size: cover; - border-radius: 50%; + border-radius: $radius-round; width: 20px; height: 20px; display: block; position: relative; } -.block-editor-hooks__background__inspector-image-indicator-image::after { +.block-editor-hooks__background__inspector-image-indicator::after { content: ""; position: absolute; top: -1px; @@ -65,27 +70,7 @@ right: -1px; border-radius: $radius-round; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); - // Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible. + // Show a thin outline in Windows high contrast mode, otherwise the button is invisible. border: 1px solid transparent; box-sizing: inherit; } - -.block-editor-hooks__background__inspector-media-replace-container { - .components-dropdown { - display: block; - } - - img { - width: 20px; - min-width: 20px; - aspect-ratio: 1; - // box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); - border-radius: 50% !important; - } - - .block-editor-hooks__background__inspector-readonly-logo-preview { - padding: 6px 12px; - display: flex; - height: $grid-unit-50; - } -} From e25c8f86cc9e590d240e0cce93badc4d8a584602 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 13 Sep 2023 16:52:34 -0400 Subject: [PATCH 4/9] Use variables --- packages/block-editor/src/hooks/background.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/background.scss b/packages/block-editor/src/hooks/background.scss index 3f36ce463f0dce..a42679bfe27226 100644 --- a/packages/block-editor/src/hooks/background.scss +++ b/packages/block-editor/src/hooks/background.scss @@ -11,7 +11,7 @@ .block-editor-hooks__background__inspector-media-replace-container { button.components-button { color: $gray-900; - box-shadow: inset 0 0 0 1px $gray-300; + box-shadow: inset 0 0 0 $border-width $gray-300; width: 100%; display: block; height: $grid-unit-50; @@ -45,7 +45,7 @@ .block-editor-hooks__background__inspector-image-indicator-wrapper { background: #fff linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); // Show a diagonal line (crossed out) for empty background image. border-radius: $radius-round !important; // Override the default border-radius inherited from FlexItem. - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2); display: block; width: 20px; height: 20px; @@ -69,7 +69,7 @@ bottom: -1px; right: -1px; border-radius: $radius-round; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2); // Show a thin outline in Windows high contrast mode, otherwise the button is invisible. border: 1px solid transparent; box-sizing: inherit; From 6fadbf9d9570f18ec47cde103b32841746c82289 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 13 Sep 2023 16:52:55 -0400 Subject: [PATCH 5/9] Update background.js --- packages/block-editor/src/hooks/background.js | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js index 59ca6f72b1cc05..9ec8a43e275829 100644 --- a/packages/block-editor/src/hooks/background.js +++ b/packages/block-editor/src/hooks/background.js @@ -15,7 +15,7 @@ import { } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { Platform, useCallback } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; import { getFilename } from '@wordpress/url'; @@ -96,22 +96,26 @@ export function resetBackgroundImage( { attributes = {}, setAttributes } ) { } ); } -function InspectorImagePreview( { label, url: imgUrl } ) { +function InspectorImagePreview( { label, filename, url: imgUrl } ) { const imgLabel = label || getFilename( imgUrl ); return ( { imgUrl && ( ) } @@ -245,7 +249,8 @@ function BackgroundImagePanelItem( props ) { onSelect={ onSelectMedia } name={ } @@ -267,12 +272,12 @@ function BackgroundImagePanelItem( props ) {
Date: Wed, 13 Sep 2023 17:11:10 -0400 Subject: [PATCH 6/9] Add describedby for empty state --- packages/block-editor/src/hooks/background.js | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js index 9ec8a43e275829..3628ce59b7fdf0 100644 --- a/packages/block-editor/src/hooks/background.js +++ b/packages/block-editor/src/hooks/background.js @@ -9,15 +9,17 @@ import { DropZone, FlexItem, MenuItem, + VisuallyHidden, __experimentalItemGroup as ItemGroup, __experimentalHStack as HStack, __experimentalTruncate as Truncate, } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { Platform, useCallback } from '@wordpress/element'; -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; import { getFilename } from '@wordpress/url'; +import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -96,7 +98,7 @@ export function resetBackgroundImage( { attributes = {}, setAttributes } ) { } ); } -function InspectorImagePreview( { label, filename, url: imgUrl } ) { +function InspectorImagePreview( { label, url: imgUrl } ) { const imgLabel = label || getFilename( imgUrl ); return ( @@ -111,11 +113,6 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) { style={ { backgroundImage: `url(${ imgUrl })`, } } - aria-describedby={ sprintf( - /* translators: %s: file name */ - __( 'This background image file name is %s' ), - filename - ) } /> ) } @@ -133,6 +130,7 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) { } function BackgroundImagePanelItem( props ) { + const instanceId = useInstanceId( BackgroundImagePanelItem ); const { attributes, clientId, setAttributes } = props; const { id, title, url } = @@ -270,11 +268,17 @@ function BackgroundImagePanelItem( props ) { allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] } render={ ( { open } ) => (
-