Skip to content

Global Styles: explore a cascade popover for inherited-value overrides #80993

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
JosVelasco wants to merge 1 commit into
base: trunk
Choose a base branch
from
Draft

Global Styles: explore a cascade popover for inherited-value overrides #80993

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions packages/block-editor/src/components/background-image-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import { getResolvedValue } from '@wordpress/global-styles-engine';
*/
import { hasBackgroundImageValue } from '../global-styles/background-panel';
import {
InheritanceResetButton,
InheritanceOriginButton,
isGlobalStylesInheritanceEnabled,
} from '../global-styles/inheritance';
import { setImmutably } from '../../utils/object';
Expand Down Expand Up @@ -232,15 +232,16 @@ function BackgroundControlsPanel( {
/>
{ onReset &&
( hasLocalOverride ? (
<InheritanceResetButton
<InheritanceOriginButton
className="block-editor-global-styles-background-panel__reset"
onResetToInherited={ () => {
stylePath="background.backgroundImage"
label={ __( 'Background image' ) }
onReset={ () => {
onReset();
// Close the dropdown if open.
if ( isOpen ) {
onToggle();
}
// Focus the toggle button.
focusToggleButton( containerRef );
} }
/>
Expand Down
5 changes: 4 additions & 1 deletion packages/block-editor/src/components/block-inspector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -531,7 +531,10 @@ const BlockInspectorSingleBlock = ( {
<InspectorControls.Slot group="list" ref={ listViewRef } />
<ListViewContentPopover listViewRef={ listViewRef } />
{ ! isSectionBlock && (
<StyleInspectorSlots blockName={ blockName } />
<StyleInspectorSlots
blockName={ blockName }
clientId={ renderedBlockClientId }
/>
) }
</>
) }
Expand Down
23 changes: 12 additions & 11 deletions packages/block-editor/src/components/colors-gradients/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,16 +129,13 @@ $swatch-gap: 12px;
}
}

// Space for the indicator and the contrast warning is reserved
// unconditionally. Widening the label only when no warning is showing made
// it reflow every time the selected colour crossed the contrast threshold.
.block-editor-panel-color-gradient-settings__color-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - ($button-size-next-default-40px + $grid-unit-05));
}

// Reserve extra space for the always-visible contrast warning icon,
// which sits alongside the hover-revealed reset button.
> button.has-contrast-warning .block-editor-panel-color-gradient-settings__color-name {
max-width: calc(100% - ($button-size-next-default-40px + $button-size-small + $grid-unit));
}
}
Expand Down Expand Up @@ -176,11 +173,15 @@ $swatch-gap: 12px;
opacity: 1;
}

// While a contrast warning is in effect the warning icon occupies the
// far-right slot, so the reset button shifts left to sit beside it.
.block-editor-panel-color-gradient-settings__dropdown.has-contrast-warning + & {
right: $button-size-small + $grid-unit-05;
}
}

// While an override indicator is present it holds the far-right slot, so the
// contrast warning sits inboard of it. Keying this off the indicator rather
// than the warning is what keeps the indicator still: it never moves when the
// selected colour crosses the contrast threshold, and no space is reserved
// beside it when no warning is showing.
.has-local-override-from-global-styles .block-editor-panel-color-gradient-settings__contrast-warning {
right: $button-size-small + $grid-unit-05;
}

// Icon-only "Low contrast" warning shown to the right of the color
Expand Down
3 changes: 3 additions & 0 deletions packages/block-editor/src/components/global-styles/background-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,7 @@ export default function BackgroundImagePanel( {
{ showBackgroundColorControl && (
<ColorGradientDropdownItem
label={ __( 'Color' ) }
stylePath="color.background"
hasValue={ () => hasBackgroundColorValue( value ) }
resetValue={ resetBackgroundColor }
isShownByDefault={ defaultControls.backgroundColor }
Expand Down Expand Up @@ -433,6 +434,7 @@ export default function BackgroundImagePanel( {
{ showBackgroundGradientControl && (
<ColorGradientDropdownItem
label={ __( 'Gradient' ) }
stylePath="background.backgroundGradient"
hasValue={ () => hasBackgroundGradientValue( value ) }
resetValue={ resetGradient }
isShownByDefault={ defaultControls.gradient }
Expand Down Expand Up @@ -478,6 +480,7 @@ export default function BackgroundImagePanel( {
{ showLegacyColorGradientControl && (
<ColorGradientDropdownItem
label={ __( 'Gradient' ) }
stylePath="color.gradient"
hasValue={ () => hasLegacyColorGradientValue( value ) }
resetValue={ resetLegacyColorGradient }
isShownByDefault={ defaultControls.gradient }
Expand Down
3 changes: 3 additions & 0 deletions packages/block-editor/src/components/global-styles/border-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -391,6 +391,7 @@ export default function BorderPanel( {
>
{ ( showBorderWidth || showBorderColor ) && (
<InheritanceToolsPanelItem
stylePath="border"
{ ...inheritanceProps(
isBorderPlaceholder,
isDefinedBorder( value?.border ) &&
Expand Down Expand Up @@ -440,6 +441,7 @@ export default function BorderPanel( {
) }
{ showBorderRadius && (
<InheritanceToolsPanelItem
stylePath="border.radius"
{ ...inheritanceProps(
isBorderRadiusPlaceholder,
hasBorderRadius() && inheritedBorderRadius !== undefined
Expand All @@ -462,6 +464,7 @@ export default function BorderPanel( {
) }
{ hasShadowControl && (
<InheritanceToolsPanelItem
stylePath="shadow"
{ ...inheritanceProps(
isShadowPlaceholder,
hasShadow() && inheritedShadow !== undefined
Expand Down
10 changes: 6 additions & 4 deletions packages/block-editor/src/components/global-styles/color-gradient-dropdown-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import ColorGradientControl from '../colors-gradients/control';
import { unlock } from '../../lock-unlock';
import {
getInheritanceProps,
InheritanceResetButton,
InheritanceOriginButton,
InheritanceToolsPanelItem,
isGlobalStylesInheritanceEnabled,
} from './inheritance';
Expand Down Expand Up @@ -203,6 +203,7 @@ function ColorGradientTab( {
// Typography panels for consistent color-style controls.
export default function ColorGradientDropdownItem( {
label,
stylePath,
hasValue,
resetValue,
isShownByDefault,
Expand Down Expand Up @@ -263,14 +264,15 @@ export default function ColorGradientDropdownItem( {
</Button>
{ hasValue() &&
( hasLocalOverride ? (
<InheritanceResetButton
<InheritanceOriginButton
className="block-editor-panel-color-gradient-settings__reset"
onResetToInherited={ () => {
stylePath={ stylePath }
label={ label }
onReset={ () => {
resetValue();
if ( isOpen ) {
onToggle();
}
colorGradientDropdownButtonRef.current?.focus();
} }
/>
) : (
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/global-styles/color-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,6 +301,7 @@ export default function ColorPanel( {
const items = [
showLinkPanel && {
key: 'link',
stylePath: 'elements.link.color.text',
label: __( 'Link' ),
hasValue: hasLink,
resetValue: resetLink,
Expand Down Expand Up @@ -461,6 +462,7 @@ export default function ColorPanel( {

items.push( {
key: name,
stylePath: `elements.${ name }.color.text`,
label: elementLabel,
hasValue: hasElement,
resetValue: resetElement,
Expand Down
9 changes: 9 additions & 0 deletions packages/block-editor/src/components/global-styles/dimensions-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -760,6 +760,7 @@ export default function DimensionsPanel( {
) }
{ showContentSizeControl && (
<InheritanceToolsPanelItem
stylePath="layout.contentSize"
{ ...inheritanceProps(
isContentSizePlaceholder,
hasUserSetContentSizeValue() &&
Expand Down Expand Up @@ -806,6 +807,7 @@ export default function DimensionsPanel( {
) }
{ showWideSizeControl && (
<InheritanceToolsPanelItem
stylePath="layout.wideSize"
{ ...inheritanceProps(
isWideSizePlaceholder,
hasUserSetWideSizeValue() &&
Expand Down Expand Up @@ -849,6 +851,7 @@ export default function DimensionsPanel( {
) }
{ showPaddingControl && (
<InheritanceToolsPanelItem
stylePath="spacing.padding"
hasValue={ hasPaddingValue }
label={ __( 'Padding' ) }
hasInlineEndToggle={ hasSpacingToggle(
Expand Down Expand Up @@ -903,6 +906,7 @@ export default function DimensionsPanel( {
) }
{ showMarginControl && (
<InheritanceToolsPanelItem
stylePath="spacing.margin"
hasValue={ hasMarginValue }
label={ __( 'Margin' ) }
hasInlineEndToggle={ hasSpacingToggle(
Expand Down Expand Up @@ -966,6 +970,7 @@ export default function DimensionsPanel( {
) }
{ showGapControl && (
<InheritanceToolsPanelItem
stylePath="spacing.blockGap"
hasValue={ hasGapValue }
label={ __( 'Block spacing' ) }
hasInlineEndToggle={ isAxialGap }
Expand Down Expand Up @@ -1042,6 +1047,7 @@ export default function DimensionsPanel( {
) }
{ showMinHeightControl && (
<InheritanceToolsPanelItem
stylePath="dimensions.minHeight"
{ ...inheritanceProps(
isMinHeightPlaceholder,
hasMinHeightValue() &&
Expand Down Expand Up @@ -1077,6 +1083,7 @@ export default function DimensionsPanel( {
) }
{ showMinWidthControl && (
<InheritanceToolsPanelItem
stylePath="dimensions.minWidth"
{ ...inheritanceProps(
isMinWidthPlaceholder,
hasMinWidthValue() &&
Expand Down Expand Up @@ -1111,6 +1118,7 @@ export default function DimensionsPanel( {
) }
{ showHeightControl && (
<InheritanceToolsPanelItem
stylePath="dimensions.height"
{ ...inheritanceProps(
isHeightPlaceholder,
hasHeightValue() && inheritedHeightValue !== undefined
Expand Down Expand Up @@ -1138,6 +1146,7 @@ export default function DimensionsPanel( {
) }
{ showWidthControl && (
<InheritanceToolsPanelItem
stylePath="dimensions.width"
{ ...inheritanceProps(
isWidthPlaceholder,
hasWidthValue() && inheritedWidthValue !== undefined
Expand Down
8 changes: 5 additions & 3 deletions packages/block-editor/src/components/global-styles/filters-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import { setImmutably } from '../../utils/object';
import {
getInheritanceProps,
InheritanceToolsPanelItem,
InheritanceResetButton,
InheritanceOriginButton,
isGlobalStylesInheritanceEnabled,
} from './inheritance';

Expand Down Expand Up @@ -162,9 +162,11 @@ const renderToggle = ( duotone, resetConfig ) =>
</Button>
{ hasLocalValue &&
( hasLocalOverride ? (
<InheritanceResetButton
<InheritanceOriginButton
className="block-editor-panel-duotone-settings__reset"
onResetToInherited={ handleReset }
stylePath="filter.duotone"
label={ __( 'Duotone' ) }
onReset={ onReset }
/>
) : (
<Button
Expand Down
Loading
Loading