From 6e7b73248d1d0fbb35a7671cc16b6482d55b9db5 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 17 Sep 2026 12:09:29 +0900 Subject: [PATCH 1/6] Block Editor: remove experimental ZStack from the duotone filter label --- .../components/global-styles/filters-panel.jsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/filters-panel.jsx b/packages/block-editor/src/components/global-styles/filters-panel.jsx index a7e7e562b0734e..960d5fc60ec7b5 100644 --- a/packages/block-editor/src/components/global-styles/filters-panel.jsx +++ b/packages/block-editor/src/components/global-styles/filters-panel.jsx @@ -2,7 +2,6 @@ import clsx from 'clsx'; import { __experimentalToolsPanel as ToolsPanel, __experimentalHStack as HStack, // eslint-disable-line @wordpress/use-recommended-components - __experimentalZStack as ZStack, // eslint-disable-line @wordpress/use-recommended-components __experimentalDropdownContentWrapper as DropdownContentWrapper, MenuGroup, ColorIndicator, @@ -102,15 +101,13 @@ const popoverProps = { const LabeledColorIndicator = ( { indicator, label } ) => ( - - - { indicator === 'unset' || ! indicator ? ( - - ) : ( - - ) } - - + + { indicator === 'unset' || ! indicator ? ( + + ) : ( + + ) } + Date: Thu, 17 Sep 2026 12:10:47 +0900 Subject: [PATCH 2/6] Changelog: note the Filters panel ZStack removal --- packages/block-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index afaec59250d146..87e7a0e64f8213 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -4,6 +4,7 @@ ### Internal +- Remove the unused experimental `ZStack` around the Duotone labeled swatch in the Filters panel ([#83061](https://github.com/WordPress/gutenberg/pull/83061)). - Remove the `crossorigin` MutationObserver. Under `Document-Isolation-Policy: isolate-and-credentialless` cross-origin resources load without the attribute, and adding it broke any resource served without CORS headers ([#82614](https://github.com/WordPress/gutenberg/pull/82614)). ### New Features From c64703532aa9ef053c5bd3dd4813319bfa25ad97 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 18 Sep 2026 22:01:38 +0900 Subject: [PATCH 3/6] Block Editor: replace HStack and Flex in the Duotone filter label The remaining denylisted layout wrappers around the Filters panel swatch were a single-child Flex and an HStack that Stack already covers. --- packages/block-editor/CHANGELOG.md | 2 +- .../global-styles/filters-panel.jsx | 30 ++++++++++--------- .../src/components/global-styles/style.scss | 13 ++++++++ tools/eslint/suppressions.json | 3 -- 4 files changed, 30 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 87e7a0e64f8213..39f89ad970ce00 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -4,7 +4,7 @@ ### Internal -- Remove the unused experimental `ZStack` around the Duotone labeled swatch in the Filters panel ([#83061](https://github.com/WordPress/gutenberg/pull/83061)). +- Replace experimental `ZStack`, `HStack`, `Flex`, and `FlexItem` around the Duotone labeled swatch in the Filters panel ([#83061](https://github.com/WordPress/gutenberg/pull/83061)). - Remove the `crossorigin` MutationObserver. Under `Document-Isolation-Policy: isolate-and-credentialless` cross-origin resources load without the attribute, and adding it broke any resource served without CORS headers ([#82614](https://github.com/WordPress/gutenberg/pull/82614)). ### New Features diff --git a/packages/block-editor/src/components/global-styles/filters-panel.jsx b/packages/block-editor/src/components/global-styles/filters-panel.jsx index 960d5fc60ec7b5..dd574e6f29d25b 100644 --- a/packages/block-editor/src/components/global-styles/filters-panel.jsx +++ b/packages/block-editor/src/components/global-styles/filters-panel.jsx @@ -1,17 +1,15 @@ import clsx from 'clsx'; import { __experimentalToolsPanel as ToolsPanel, - __experimentalHStack as HStack, // eslint-disable-line @wordpress/use-recommended-components __experimentalDropdownContentWrapper as DropdownContentWrapper, MenuGroup, ColorIndicator, DuotonePicker, DuotoneSwatch, Dropdown, - Flex, - FlexItem, Button, } from '@wordpress/components'; +import { Stack } from '@wordpress/ui'; import { __, _x } from '@wordpress/i18n'; import { useCallback, useMemo, useRef } from '@wordpress/element'; import { reset as resetIcon } from '@wordpress/icons'; @@ -100,21 +98,25 @@ const popoverProps = { }; const LabeledColorIndicator = ( { indicator, label } ) => ( - - - { indicator === 'unset' || ! indicator ? ( - - ) : ( - - ) } - - + { indicator === 'unset' || ! indicator ? ( + + ) : ( + + ) } + { label } - - + + ); const renderToggle = ( duotone, resetConfig ) => diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss index 40d0d34ace7a45..0d5ffa736a42cf 100644 --- a/packages/block-editor/src/components/global-styles/style.scss +++ b/packages/block-editor/src/components/global-styles/style.scss @@ -57,6 +57,19 @@ } } +.block-editor-panel-duotone-settings__label-row { + width: 100%; + min-width: 0; +} + +.block-editor-panel-duotone-settings__label { + display: block; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .block-editor-global-styles__shadow-editor__remove-button { position: absolute; right: 0; diff --git a/tools/eslint/suppressions.json b/tools/eslint/suppressions.json index 96ee7fb8e92ac5..c8b1c52fc41862 100644 --- a/tools/eslint/suppressions.json +++ b/tools/eslint/suppressions.json @@ -1116,9 +1116,6 @@ } }, "packages/block-editor/src/components/global-styles/filters-panel.jsx": { - "@wordpress/use-recommended-components": { - "count": 2 - }, "react/jsx-filename-extension": { "count": 1 } From a68551beaf61b5e6ab675fef816bc06954b17d59 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 19 Sep 2026 01:40:16 +0900 Subject: [PATCH 4/6] Block Editor: drop ellipsis CSS from the Duotone filter label Those rules were not part of HStack or FlexItem. Keep only the layout replacements. --- packages/block-editor/src/components/global-styles/style.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss index 0d5ffa736a42cf..2369d750d3613f 100644 --- a/packages/block-editor/src/components/global-styles/style.scss +++ b/packages/block-editor/src/components/global-styles/style.scss @@ -65,9 +65,6 @@ .block-editor-panel-duotone-settings__label { display: block; min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } .block-editor-global-styles__shadow-editor__remove-button { From e99c797a8678180df478271e8564793f9256e438 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 19 Sep 2026 01:50:26 +0900 Subject: [PATCH 5/6] Block Editor: fold Duotone label min-width into the row rule The label is a flex item, so display:block was redundant. HStack applied min-width:0 to every child. --- .../block-editor/src/components/global-styles/style.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss index 2369d750d3613f..ac94f8228f11f8 100644 --- a/packages/block-editor/src/components/global-styles/style.scss +++ b/packages/block-editor/src/components/global-styles/style.scss @@ -60,11 +60,10 @@ .block-editor-panel-duotone-settings__label-row { width: 100%; min-width: 0; -} -.block-editor-panel-duotone-settings__label { - display: block; - min-width: 0; + > * { + min-width: 0; + } } .block-editor-global-styles__shadow-editor__remove-button { From 063b3c2891ac5a72f835dd2c6fe281919b4e9001 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 19 Sep 2026 01:52:13 +0900 Subject: [PATCH 6/6] Block Editor: keep the Duotone label class for min-width Only display:block was redundant. Put min-width:0 back on the label class. --- .../block-editor/src/components/global-styles/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss index ac94f8228f11f8..fa07f6d7180e76 100644 --- a/packages/block-editor/src/components/global-styles/style.scss +++ b/packages/block-editor/src/components/global-styles/style.scss @@ -60,10 +60,10 @@ .block-editor-panel-duotone-settings__label-row { width: 100%; min-width: 0; +} - > * { - min-width: 0; - } +.block-editor-panel-duotone-settings__label { + min-width: 0; } .block-editor-global-styles__shadow-editor__remove-button {