From d6b2b5248d915ac41c2ccd26740e1da917a6eb20 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 10 Oct 2023 15:00:17 +0200 Subject: [PATCH 1/5] Apply the classname prop to `ToolsPanelItem` only when it s not a placeholder --- .../src/tools-panel/tools-panel-item/hook.ts | 10 ++++------ .../components/src/tools-panel/tools-panel/README.md | 3 +++ packages/components/src/tools-panel/types.ts | 2 ++ 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.ts b/packages/components/src/tools-panel/tools-panel-item/hook.ts index 95958ae9f48608..23701afdfcfd07 100644 --- a/packages/components/src/tools-panel/tools-panel-item/hook.ts +++ b/packages/components/src/tools-panel/tools-panel-item/hook.ts @@ -176,18 +176,16 @@ export function useToolsPanelItem( const cx = useCx(); const classes = useMemo( () => { - const placeholderStyle = - shouldRenderPlaceholder && - ! isShown && - styles.ToolsPanelItemPlaceholder; + const shouldApplyPlaceholderStyles = + shouldRenderPlaceholder && ! isShown; const firstItemStyle = firstDisplayedItem === label && __experimentalFirstVisibleItemClass; const lastItemStyle = lastDisplayedItem === label && __experimentalLastVisibleItemClass; return cx( styles.ToolsPanelItem, - placeholderStyle, - className, + shouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder, + ! shouldApplyPlaceholderStyles && className, firstItemStyle, lastItemStyle ); diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md index 6802a6436875ad..0ee251592d67b1 100644 --- a/packages/components/src/tools-panel/tools-panel/README.md +++ b/packages/components/src/tools-panel/tools-panel/README.md @@ -191,5 +191,8 @@ A function to call when the `Reset all` menu option is selected. As an argument, Advises the `ToolsPanel` that all of its `ToolsPanelItem` children should render placeholder content (instead of `null`) when they are toggled off and hidden. +Note that placeholder items won't apply the `className` that would be +normally applied to a visible `ToolsPanelItem` via the `className` prop. + - Required: No - Default: `false` diff --git a/packages/components/src/tools-panel/types.ts b/packages/components/src/tools-panel/types.ts index 183ed3254fe80a..3156137e580442 100644 --- a/packages/components/src/tools-panel/types.ts +++ b/packages/components/src/tools-panel/types.ts @@ -50,6 +50,8 @@ export type ToolsPanelProps = { /** * Advises the `ToolsPanel` that its child `ToolsPanelItem`s should render * placeholder content instead of null when they are toggled off and hidden. + * Note that placeholder items won't apply the `className` that would be + * normally applied to a visible `ToolsPanelItem` via the `className` prop. * * @default false */ From 8b321a18430d193f7979b4a5c6def3e8825b3e58 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 10 Oct 2023 15:00:58 +0200 Subject: [PATCH 2/5] Color Gradient panel: use new selctors to select first and last items --- .../src/components/colors-gradients/style.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index 8b36f04b835526..d3d0241200222e 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -77,14 +77,20 @@ $swatch-gap: 12px; border-right: 1px solid $gray-300; border-bottom: 1px solid $gray-300; - &.first { + // Identify the first instance as the item that is not a subsequent item to an + // item with the same class. The `~` selector is used instead of `+` to take + // into account any potential `ToolsPanelItem` placeholder item. + &:not(& ~ &) { margin-top: $grid-unit-30; border-top-left-radius: $radius-block-ui; border-top-right-radius: $radius-block-ui; border-top: 1px solid $gray-300; } - &.last { + // Identify the last instance as an item without any subsequent siblings + // with the same class. The `~` selector is used instead of `+` to take + // into account any potential `ToolsPanelItem` placeholder item. + &:not(:has(~ &)) { border-bottom-left-radius: $radius-block-ui; border-bottom-right-radius: $radius-block-ui; } From ef3f04086960f31997f76abe63a6040c82072d52 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 10 Oct 2023 15:09:32 +0200 Subject: [PATCH 3/5] Add fallback for browsers not yet supporting the `:has()` selector --- .../src/components/colors-gradients/style.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index d3d0241200222e..cccce186353b44 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -95,6 +95,15 @@ $swatch-gap: 12px; border-bottom-right-radius: $radius-block-ui; } + // Less accurate fallback to detect the last instance of this item + // for older browsers not yet supporting the `:has()` selector. + @supports not selector(:has(*)) { + &.last { + border-bottom-left-radius: $radius-block-ui; + border-bottom-right-radius: $radius-block-ui; + } + } + > div, > div > button { border-radius: inherit; From 85f1db9ba66223412fccdeb797be497d75c6830f Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 11 Oct 2023 11:54:25 +0200 Subject: [PATCH 4/5] Use nth-child notation instead of :has and sibling selector --- .../components/colors-gradients/style.scss | 21 ++++--------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index cccce186353b44..6cade124b7fe46 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -77,33 +77,20 @@ $swatch-gap: 12px; border-right: 1px solid $gray-300; border-bottom: 1px solid $gray-300; - // Identify the first instance as the item that is not a subsequent item to an - // item with the same class. The `~` selector is used instead of `+` to take - // into account any potential `ToolsPanelItem` placeholder item. - &:not(& ~ &) { + // Identify the first visible instance as placeholder items will not have this class. + &:nth-child(1 of &) { margin-top: $grid-unit-30; border-top-left-radius: $radius-block-ui; border-top-right-radius: $radius-block-ui; border-top: 1px solid $gray-300; } - // Identify the last instance as an item without any subsequent siblings - // with the same class. The `~` selector is used instead of `+` to take - // into account any potential `ToolsPanelItem` placeholder item. - &:not(:has(~ &)) { + // Identify the last visible instance as placeholder items will not have this class. + &:nth-last-child(1 of &) { border-bottom-left-radius: $radius-block-ui; border-bottom-right-radius: $radius-block-ui; } - // Less accurate fallback to detect the last instance of this item - // for older browsers not yet supporting the `:has()` selector. - @supports not selector(:has(*)) { - &.last { - border-bottom-left-radius: $radius-block-ui; - border-bottom-right-radius: $radius-block-ui; - } - } - > div, > div > button { border-radius: inherit; From ec5857132d7f427a88f430c54b083077839b9bda Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 11 Oct 2023 11:57:50 +0200 Subject: [PATCH 5/5] CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 0605bda1a47e51..b3c01c4db2c70a 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Enhancements - `Notice`: Remove margins from `Notice` component ([#54800](https://github.com/WordPress/gutenberg/pull/54800)). +- `ToolsPanel`: do not apply the `className` to prop to `ToolsPanelItem` components when rendered as placeholders ([#55207](https://github.com/WordPress/gutenberg/pull/55207)). - `ColorPalette`/`ToggleGroupControl/ToggleGroupControlOptionBase`: add `type="button"` attribute to native `