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 <[email protected]> --------- Co-authored-by: Aki Hamano <[email protected]>
WordPress · Feb 27, 2024 · a446441 · a446441
1 parent 5191efd
commit a446441
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 (
 		<div className="block-editor-global-styles__shadow-popover-container">
@@ -43,6 +45,14 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 					activeShadow={ shadow }
 					onSelect={ onShadowChange }
 				/>
+				<div className="block-editor-global-styles__clear-shadow">
+					<Button
+						variant="tertiary"
+						onClick={ () => onShadowChange( undefined ) }
+					>
+						{ __( 'Clear' ) }
+					</Button>
+				</div>
 			</VStack>
 		</div>
 	);
@@ -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 (
 		<CompositeItem
@@ -89,7 +100,12 @@ export function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
 			) }
 			render={
 				<Button
-					className="block-editor-global-styles__shadow-indicator"
+					className={ classNames(
+						'block-editor-global-styles__shadow-indicator',
+						{
+							unset: type === 'unset',
+						}
+					) }
 					onClick={ onSelect }
 					label={ label }
 					style={ { boxShadow: shadow } }
@@ -149,3 +165,30 @@ function renderShadowToggle() {
 		);
 	};
 }
+
+export function useShadowPresets( settings ) {
+	return useMemo( () => {
+		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
@@ -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
@@ -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
@@ -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.",