From e0d9f857fcb5fcef0ec95471ab5514c553ec7461 Mon Sep 17 00:00:00 2001 From: Madhu Dollu Date: Mon, 26 Feb 2024 13:15:13 +0530 Subject: [PATCH] Disable core shadow presets by default, let themes opt-in (#58766) * disable core presets by default, let themes opt-in * add shadow/defaultPresets to appearance tools optins * update unit tests related to appearance tools * Update packages/block-editor/src/components/global-styles/shadow-panel-components.js Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --------- Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --- .../theme-json-reference/theme-json-living.md | 2 +- lib/class-wp-theme-json-gutenberg.php | 1 + lib/theme.json | 2 +- .../components/global-styles/border-panel.js | 11 ++-- .../global-styles/shadow-panel-components.js | 63 ++++++++++++++++--- .../src/components/global-styles/style.scss | 8 +++ phpunit/class-wp-theme-json-test.php | 6 ++ schemas/json/theme.json | 2 +- 8 files changed, 77 insertions(+), 18 deletions(-) diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 189fe6d2f01a06..0b800757b4ecd0 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -72,7 +72,7 @@ Settings related to shadows. | Property | Type | Default | Props | | --- | --- | --- |--- | -| defaultPresets | boolean | true | | +| defaultPresets | boolean | false | | | presets | array | | name, shadow, slug | --- diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 82e5503a6b225d..0d03a89bd1d3c6 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -670,6 +670,7 @@ public static function get_element_class_name( $element ) { array( 'spacing', 'margin' ), array( 'spacing', 'padding' ), array( 'typography', 'lineHeight' ), + array( 'shadow', 'defaultPresets' ), ); /** diff --git a/lib/theme.json b/lib/theme.json index c2ed7fdca39ed5..5f261e2c120043 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -191,7 +191,7 @@ "text": true }, "shadow": { - "defaultPresets": true, + "defaultPresets": false, "presets": [ { "name": "Natural", diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js index f8144f1545aebe..5829d90cdf3359 100644 --- a/packages/block-editor/src/components/global-styles/border-panel.js +++ b/packages/block-editor/src/components/global-styles/border-panel.js @@ -22,11 +22,7 @@ import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils'; import { overrideOrigins } from '../../store/get-block-settings'; import { setImmutably } from '../../utils/object'; import { getBorderPanelLabel } from '../../hooks/border'; -import { ShadowPopover } from './shadow-panel-components'; - -function useHasShadowControl( settings ) { - return !! settings?.shadow; -} +import { ShadowPopover, useShadowPresets } from './shadow-panel-components'; export function useHasBorderPanel( settings ) { const controls = [ @@ -56,6 +52,11 @@ function useHasBorderWidthControl( settings ) { return settings?.border?.width; } +function useHasShadowControl( settings ) { + const shadows = useShadowPresets( settings ); + return !! settings?.shadow && shadows.length > 0; +} + function BorderToolsPanel( { resetAllFilter, onChange, diff --git a/packages/block-editor/src/components/global-styles/shadow-panel-components.js b/packages/block-editor/src/components/global-styles/shadow-panel-components.js index 0dc2367e7eda2f..0a8028488993f1 100644 --- a/packages/block-editor/src/components/global-styles/shadow-panel-components.js +++ b/packages/block-editor/src/components/global-styles/shadow-panel-components.js @@ -12,6 +12,7 @@ import { Dropdown, privateApis as componentsPrivateApis, } from '@wordpress/components'; +import { useMemo } from '@wordpress/element'; import { shadow as shadowIcon, Icon, check } from '@wordpress/icons'; /** @@ -24,15 +25,16 @@ import classNames from 'classnames'; */ import { unlock } from '../../lock-unlock'; -export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) { - const defaultShadows = settings?.shadow?.presets?.default || []; - const themeShadows = settings?.shadow?.presets?.theme || []; - const defaultPresetsEnabled = settings?.shadow?.defaultPresets; +/** + * Shared reference to an empty array for cases where it is important to avoid + * returning a new array reference on every invocation. + * + * @type {Array} + */ +const EMPTY_ARRAY = []; - const shadows = [ - ...( defaultPresetsEnabled ? defaultShadows : [] ), - ...themeShadows, - ]; +export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) { + const shadows = useShadowPresets( settings ); return (
@@ -43,6 +45,14 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) { activeShadow={ shadow } onSelect={ onShadowChange } /> +
+ +
); @@ -64,6 +74,7 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) { key={ slug } label={ name } isActive={ shadow === activeShadow } + type={ slug === 'unset' ? 'unset' : 'preset' } onSelect={ () => onSelect( shadow === activeShadow ? undefined : shadow ) } @@ -74,7 +85,7 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) { ); } -export function ShadowIndicator( { label, isActive, onSelect, shadow } ) { +export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) { const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis ); return ( { + if ( ! settings?.shadow ) { + return EMPTY_ARRAY; + } + + const defaultPresetsEnabled = settings?.shadow?.defaultPresets; + const { default: defaultShadows, theme: themeShadows } = + settings?.shadow?.presets ?? {}; + const unsetShadow = { + name: __( 'Unset' ), + slug: 'unset', + shadow: 'none', + }; + + const shadowPresets = [ + ...( ( defaultPresetsEnabled && defaultShadows ) || EMPTY_ARRAY ), + ...( themeShadows || EMPTY_ARRAY ), + ]; + if ( shadowPresets.length ) { + shadowPresets.unshift( unsetShadow ); + } + + return shadowPresets; + }, [ settings ] ); +} diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss index a47af6cd35e996..d357d2e65ab72a 100644 --- a/packages/block-editor/src/components/global-styles/style.scss +++ b/packages/block-editor/src/components/global-styles/style.scss @@ -16,6 +16,10 @@ padding-bottom: $grid-unit-10; } +.block-editor-global-styles__clear-shadow { + text-align: right; +} + .block-editor-global-styles-filters-panel__dropdown, .block-editor-global-styles__shadow-dropdown { display: block; @@ -54,6 +58,10 @@ &:hover { transform: scale(1.2); } + + &.unset { + background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); + } } .block-editor-global-styles-advanced-panel__custom-css-input textarea { diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index f474177dc17b5a..376eaaff4a2051 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -282,6 +282,9 @@ public function test_get_settings_appearance_true_opts_in() { 'typography' => array( 'lineHeight' => true, ), + 'shadow' => array( + 'defaultPresets' => true, + ), 'blocks' => array( 'core/paragraph' => array( 'typography' => array( @@ -321,6 +324,9 @@ public function test_get_settings_appearance_true_opts_in() { 'typography' => array( 'lineHeight' => false, ), + 'shadow' => array( + 'defaultPresets' => true, + ), ), ), ); diff --git a/schemas/json/theme.json b/schemas/json/theme.json index a5b54de97ed70f..a9823f6cc6534b 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -77,7 +77,7 @@ "defaultPresets": { "description": "Allow users to choose shadows from the default shadow presets.", "type": "boolean", - "default": true + "default": false }, "presets": { "description": "Shadow presets for the shadow picker.\nGenerates a single custom property (`--wp--preset--shadow--{slug}`) per preset value.",