@wordpress/block-editor 12.18.2 → 12.19.1

package/src/store/selectors.js

@@ -10,6 +10,7 @@ import {
 	getBlockType,
 	getBlockTypes,
 	getBlockVariations,
+	getHookedBlocks,
 	hasBlockSupport,
 	getPossibleBlockTransformations,
 	parse,
@@ -157,12 +158,13 @@ export function getBlock( state, clientId ) {
 
 export const __unstableGetBlockWithoutInnerBlocks = createSelector(
 	( state, clientId ) => {
-		if ( ! state.blocks.byClientId.has( clientId ) ) {
+		const block = state.blocks.byClientId.get( clientId );
+		if ( ! block ) {
 			return null;
 		}
 
 		return {
-			...state.blocks.byClientId.get( clientId ),
+			...block,
 			attributes: getBlockAttributes( state, clientId ),
 		};
 	},
@@ -251,24 +253,37 @@ export const __unstableGetClientIdsTree = createSelector(
  * given. Returned ids are ordered first by the order of the ids given, then
  * by the order that they appear in the editor.
  *
- * @param {Object}          state     Global application state.
- * @param {string|string[]} clientIds Client ID(s) for which descendant blocks are to be returned.
+ * @param {Object}          state   Global application state.
+ * @param {string|string[]} rootIds Client ID(s) for which descendant blocks are to be returned.
  *
  * @return {Array} Client IDs of descendants.
  */
 export const getClientIdsOfDescendants = createSelector(
-	( state, clientIds ) => {
-		const givenIds = Array.isArray( clientIds ) ? clientIds : [ clientIds ];
-		const collectedIds = [];
-		for ( const givenId of givenIds ) {
-			for ( const descendantId of getBlockOrder( state, givenId ) ) {
-				collectedIds.push(
-					descendantId,
-					...getClientIdsOfDescendants( state, descendantId )
-				);
+	( state, rootIds ) => {
+		rootIds = Array.isArray( rootIds ) ? [ ...rootIds ] : [ rootIds ];
+		const ids = [];
+
+		// Add the descendants of the root blocks first.
+		for ( const rootId of rootIds ) {
+			const order = state.blocks.order.get( rootId );
+			if ( order ) {
+				ids.push( ...order );
 			}
 		}
-		return collectedIds;
+
+		let index = 0;
+
+		// Add the descendants of the descendants, recursively.
+		while ( index < ids.length ) {
+			const id = ids[ index ];
+			const order = state.blocks.order.get( id );
+			if ( order ) {
+				ids.splice( index + 1, 0, ...order );
+			}
+			index++;
+		}
+
+		return ids;
 	},
 	( state ) => [ state.blocks.order ]
 );
@@ -282,19 +297,8 @@ export const getClientIdsOfDescendants = createSelector(
  *
  * @return {Array} ids of top-level and descendant blocks.
  */
-export const getClientIdsWithDescendants = createSelector(
-	( state ) => {
-		const collectedIds = [];
-		for ( const topLevelId of getBlockOrder( state ) ) {
-			collectedIds.push(
-				topLevelId,
-				...getClientIdsOfDescendants( state, topLevelId )
-			);
-		}
-		return collectedIds;
-	},
-	( state ) => [ state.blocks.order ]
-);
+export const getClientIdsWithDescendants = ( state ) =>
+	getClientIdsOfDescendants( state, '' );
 
 /**
  * Returns the total number of blocks, or the total number of blocks with a specific name in a post.
@@ -311,10 +315,14 @@ export const getGlobalBlockCount = createSelector(
 		if ( ! blockName ) {
 			return clientIds.length;
 		}
-		return clientIds.reduce( ( accumulator, clientId ) => {
+		let count = 0;
+		for ( const clientId of clientIds ) {
 			const block = state.blocks.byClientId.get( clientId );
-			return block.name === blockName ? accumulator + 1 : accumulator;
-		}, 0 );
+			if ( block.name === blockName ) {
+				count++;
+			}
+		}
+		return count;
 	},
 	( state ) => [ state.blocks.order, state.blocks.byClientId ]
 );
@@ -540,9 +548,7 @@ export function getSelectedBlock( state ) {
  * @return {?string} Root client ID, if exists
  */
 export function getBlockRootClientId( state, clientId ) {
-	return state.blocks.parents.has( clientId )
-		? state.blocks.parents.get( clientId )
-		: null;
+	return state.blocks.parents.get( clientId ) ?? null;
 }
 
 /**
@@ -558,8 +564,7 @@ export const getBlockParents = createSelector(
 	( state, clientId, ascending = false ) => {
 		const parents = [];
 		let current = clientId;
-		while ( !! state.blocks.parents.get( current ) ) {
-			current = state.blocks.parents.get( current );
+		while ( ( current = state.blocks.parents.get( current ) ) ) {
 			parents.push( current );
 		}
 
@@ -1565,14 +1570,30 @@ const canInsertBlockTypeUnmemoized = (
 		return false;
 	}
 
-	const parentAllowedBlocks = parentBlockListSettings?.allowedBlocks;
-	const hasParentAllowedBlock = checkAllowList(
-		parentAllowedBlocks,
+	const parentName = getBlockName( state, rootClientId );
+	const parentBlockType = getBlockType( parentName );
+
+	// Look at the `blockType.allowedBlocks` field to determine whether this is an allowed child block.
+	const parentAllowedChildBlocks = parentBlockType?.allowedBlocks;
+	let hasParentAllowedBlock = checkAllowList(
+		parentAllowedChildBlocks,
 		blockName
 	);
 
+	// The `allowedBlocks` block list setting can further limit which blocks are allowed children.
+	if ( hasParentAllowedBlock !== false ) {
+		const parentAllowedBlocks = parentBlockListSettings?.allowedBlocks;
+		const hasParentListAllowedBlock = checkAllowList(
+			parentAllowedBlocks,
+			blockName
+		);
+		// Never downgrade the result from `true` to `null`
+		if ( hasParentListAllowedBlock !== null ) {
+			hasParentAllowedBlock = hasParentListAllowedBlock;
+		}
+	}
+
 	const blockAllowedParentBlocks = blockType.parent;
-	const parentName = getBlockName( state, rootClientId );
 	const hasBlockAllowedParent = checkAllowList(
 		blockAllowedParentBlocks,
 		parentName
@@ -1916,9 +1937,16 @@ const buildBlockTypeItem =
 			blockType.name,
 			'inserter'
 		);
+
+		const ignoredHookedBlocks = [
+			...new Set( Object.values( getHookedBlocks( id ) ).flat() ),
+		];
+
 		return {
 			...blockItemBase,
-			initialAttributes: {},
+			initialAttributes: ignoredHookedBlocks.length
+				? { metadata: { ignoredHookedBlocks } }
+				: {},
 			description: blockType.description,
 			category: blockType.category,
 			keywords: blockType.keywords,
@@ -2737,13 +2765,10 @@ export const __unstableGetContentLockingParent = createSelector(
 	( state, clientId ) => {
 		let current = clientId;
 		let result;
-		while ( state.blocks.parents.has( current ) ) {
-			current = state.blocks.parents.get( current );
+		while ( ( current = state.blocks.parents.get( current ) ) ) {
 			if (
-				( current &&
-					getBlockName( state, current ) === 'core/block' ) ||
-				( current &&
-					getTemplateLock( state, current ) === 'contentOnly' )
+				getBlockName( state, current ) === 'core/block' ||
+				getTemplateLock( state, current ) === 'contentOnly'
 			) {
 				result = current;
 			}
@@ -2869,8 +2894,9 @@ export function __unstableIsWithinBlockOverlay( state, clientId ) {
 export const getBlockEditingMode = createRegistrySelector(
 	( select ) =>
 		( state, clientId = '' ) => {
-			if ( state.blockEditingModes.has( clientId ) ) {
-				return state.blockEditingModes.get( clientId );
+			const blockEditingMode = state.blockEditingModes.get( clientId );
+			if ( blockEditingMode ) {
+				return blockEditingMode;
 			}
 			if ( ! clientId ) {
 				return 'default';

package/src/store/test/get-block-settings.js

@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter, removeFilter } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { getBlockSettings } from '../get-block-settings';
+
+describe( 'getBlockSettings', () => {
+	it( 'uses block setting', () => {
+		const state = {
+			settings: {
+				__experimentalFeatures: {
+					blocks: {
+						'core/test-block': {
+							layout: {
+								contentSize: '840px',
+							},
+						},
+					},
+				},
+			},
+			blocks: {
+				byClientId: new Map( [
+					[
+						'block-1',
+						{
+							name: 'core/test-block',
+						},
+					],
+				] ),
+				parents: new Map( [ [ 'block-1', '' ] ] ),
+			},
+		};
+
+		expect(
+			getBlockSettings( state, 'block-1', 'layout.contentSize' )
+		).toEqual( [ '840px' ] );
+	} );
+
+	it( 'uses blockEditor.useSetting.before hook override', () => {
+		const state = {
+			settings: {
+				__experimentalFeatures: {
+					blocks: {
+						'core/test-block': {
+							layout: {
+								contentSize: '840px',
+							},
+						},
+					},
+				},
+			},
+			blocks: {
+				byClientId: new Map( [
+					[
+						'block-1',
+						{
+							name: 'core/test-block',
+						},
+					],
+				] ),
+				parents: new Map( [ [ 'block-1', '' ] ] ),
+			},
+		};
+
+		addFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before',
+			( result, path, clientId, blockName ) => {
+				if ( blockName === 'core/test-block' ) {
+					return '960px';
+				}
+
+				return result;
+			}
+		);
+
+		expect(
+			getBlockSettings( state, 'block-1', 'layout.contentSize' )
+		).toEqual( [ '960px' ] );
+
+		removeFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before'
+		);
+	} );
+} );

package/src/store/test/private-actions.js

@@ -6,6 +6,8 @@ import {
 	showBlockInterface,
 	__experimentalUpdateSettings,
 	setOpenedBlockSettingsMenu,
+	startDragging,
+	stopDragging,
 } from '../private-actions';
 
 describe( 'private actions', () => {
@@ -95,4 +97,20 @@ describe( 'private actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'startDragging', () => {
+		it( 'should return the START_DRAGGING action', () => {
+			expect( startDragging() ).toEqual( {
+				type: 'START_DRAGGING',
+			} );
+		} );
+	} );
+
+	describe( 'stopDragging', () => {
+		it( 'should return the STOP_DRAGGING action', () => {
+			expect( stopDragging() ).toEqual( {
+				type: 'STOP_DRAGGING',
+			} );
+		} );
+	} );
 } );

package/src/store/test/private-selectors.js

@@ -7,6 +7,7 @@ import {
 	isBlockSubtreeDisabled,
 	getEnabledClientIdsTree,
 	getEnabledBlockParents,
+	isDragging,
 } from '../private-selectors';
 import { getBlockEditingMode } from '../selectors';
 
@@ -477,4 +478,22 @@ describe( 'private selectors', () => {
 			] );
 		} );
 	} );
+
+	describe( 'isDragging', () => {
+		it( 'should return true if the dragging state is true', () => {
+			const state = {
+				isDragging: true,
+			};
+
+			expect( isDragging( state ) ).toBe( true );
+		} );
+
+		it( 'should return false if the dragging state is false', () => {
+			const state = {
+				isDragging: false,
+			};
+
+			expect( isDragging( state ) ).toBe( false );
+		} );
+	} );
 } );

package/src/store/test/reducer.js

@@ -21,6 +21,7 @@ import {
 	blocks,
 	isBlockInterfaceHidden,
 	isTyping,
+	isDragging,
 	draggedBlocks,
 	selection,
 	initialPosition,
@@ -2445,6 +2446,24 @@ describe( 'state', () => {
 		} );
 	} );
 
+	describe( 'isDragging', () => {
+		it( 'should set the dragging flag to true', () => {
+			const state = isDragging( false, {
+				type: 'START_DRAGGING',
+			} );
+
+			expect( state ).toBe( true );
+		} );
+
+		it( 'should set the dragging flag to false', () => {
+			const state = isDragging( true, {
+				type: 'STOP_DRAGGING',
+			} );
+
+			expect( state ).toBe( false );
+		} );
+	} );
+
 	describe( 'draggedBlocks', () => {
 		it( 'should store the dragged client ids when a user starts dragging blocks', () => {
 			const clientIds = [ 'block-1', 'block-2', 'block-3' ];

package/build/components/global-styles/effects-panel.js

@@ -1,219 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = EffectsPanel;
-exports.useHasEffectsPanel = useHasEffectsPanel;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _components = require("@wordpress/components");
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-var _icons = require("@wordpress/icons");
-var _useSettings = require("../use-settings");
-var _utils = require("./utils");
-var _object = require("../../utils/object");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-function useHasEffectsPanel(settings) {
-  const hasShadowControl = useHasShadowControl(settings);
-  return hasShadowControl;
-}
-function useHasShadowControl(settings) {
-  return !!settings?.shadow;
-}
-function EffectsToolsPanel({
-  resetAllFilter,
-  onChange,
-  value,
-  panelId,
-  children
-}) {
-  const resetAll = () => {
-    const updatedValue = resetAllFilter(value);
-    onChange(updatedValue);
-  };
-  return (0, _react.createElement)(_components.__experimentalToolsPanel, {
-    label: (0, _i18n.__)('Effects'),
-    resetAll: resetAll,
-    panelId: panelId,
-    dropdownMenuProps: _utils.TOOLSPANEL_DROPDOWNMENU_PROPS
-  }, children);
-}
-const DEFAULT_CONTROLS = {
-  shadow: true
-};
-function EffectsPanel({
-  as: Wrapper = EffectsToolsPanel,
-  value,
-  onChange,
-  inheritedValue = value,
-  settings,
-  panelId,
-  defaultControls = DEFAULT_CONTROLS
-}) {
-  const decodeValue = rawValue => (0, _utils.getValueFromVariable)({
-    settings
-  }, '', rawValue);
-
-  // Shadow
-  const hasShadowEnabled = useHasShadowControl(settings);
-  const shadow = decodeValue(inheritedValue?.shadow);
-  const shadowPresets = settings?.shadow?.presets;
-  const mergedShadowPresets = shadowPresets ? (0, _useSettings.mergeOrigins)(shadowPresets) : [];
-  const setShadow = newValue => {
-    const slug = mergedShadowPresets?.find(({
-      shadow: shadowName
-    }) => shadowName === newValue)?.slug;
-    onChange((0, _object.setImmutably)(value, ['shadow'], slug ? `var:preset|shadow|${slug}` : newValue || undefined));
-  };
-  const hasShadow = () => !!value?.shadow;
-  const resetShadow = () => setShadow(undefined);
-  const resetAllFilter = (0, _element.useCallback)(previousValue => {
-    return {
-      ...previousValue,
-      shadow: undefined
-    };
-  }, []);
-  return (0, _react.createElement)(Wrapper, {
-    resetAllFilter: resetAllFilter,
-    value: value,
-    onChange: onChange,
-    panelId: panelId
-  }, hasShadowEnabled && (0, _react.createElement)(_components.__experimentalToolsPanelItem, {
-    label: (0, _i18n.__)('Shadow'),
-    hasValue: hasShadow,
-    onDeselect: resetShadow,
-    isShownByDefault: defaultControls.shadow,
-    panelId: panelId
-  }, (0, _react.createElement)(_components.__experimentalItemGroup, {
-    isBordered: true,
-    isSeparated: true
-  }, (0, _react.createElement)(ShadowPopover, {
-    shadow: shadow,
-    onShadowChange: setShadow,
-    settings: settings
-  }))));
-}
-const ShadowPopover = ({
-  shadow,
-  onShadowChange,
-  settings
-}) => {
-  const popoverProps = {
-    placement: 'left-start',
-    offset: 36,
-    shift: true
-  };
-  return (0, _react.createElement)(_components.Dropdown, {
-    popoverProps: popoverProps,
-    className: "block-editor-global-styles-effects-panel__shadow-dropdown",
-    renderToggle: renderShadowToggle(),
-    renderContent: () => (0, _react.createElement)(_components.__experimentalDropdownContentWrapper, {
-      paddingSize: "medium"
-    }, (0, _react.createElement)(ShadowPopoverContainer, {
-      shadow: shadow,
-      onShadowChange: onShadowChange,
-      settings: settings
-    }))
-  });
-};
-function renderShadowToggle() {
-  return ({
-    onToggle,
-    isOpen
-  }) => {
-    const toggleProps = {
-      onClick: onToggle,
-      className: (0, _classnames.default)({
-        'is-open': isOpen
-      }),
-      'aria-expanded': isOpen
-    };
-    return (0, _react.createElement)(_components.Button, {
-      ...toggleProps
-    }, (0, _react.createElement)(_components.__experimentalHStack, {
-      justify: "flex-start"
-    }, (0, _react.createElement)(_icons.Icon, {
-      className: "block-editor-global-styles-effects-panel__toggle-icon",
-      icon: _icons.shadow,
-      size: 24
-    }), (0, _react.createElement)(_components.FlexItem, null, (0, _i18n.__)('Shadow'))));
-  };
-}
-function ShadowPopoverContainer({
-  shadow,
-  onShadowChange,
-  settings
-}) {
-  const defaultShadows = settings?.shadow?.presets?.default;
-  const themeShadows = settings?.shadow?.presets?.theme;
-  const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
-  const shadows = [...(defaultPresetsEnabled ? defaultShadows : []), ...(themeShadows || [])];
-  return (0, _react.createElement)("div", {
-    className: "block-editor-global-styles-effects-panel__shadow-popover-container"
-  }, (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 4
-  }, (0, _react.createElement)(_components.__experimentalHeading, {
-    level: 5
-  }, (0, _i18n.__)('Shadow')), (0, _react.createElement)(ShadowPresets, {
-    presets: shadows,
-    activeShadow: shadow,
-    onSelect: onShadowChange
-  })));
-}
-function ShadowPresets({
-  presets,
-  activeShadow,
-  onSelect
-}) {
-  return !presets ? null : (0, _react.createElement)(_components.__experimentalGrid, {
-    columns: 6,
-    gap: 0,
-    align: "center",
-    justify: "center"
-  }, presets.map(({
-    name,
-    slug,
-    shadow
-  }) => (0, _react.createElement)(ShadowIndicator, {
-    key: slug,
-    label: name,
-    isActive: shadow === activeShadow,
-    onSelect: () => onSelect(shadow === activeShadow ? undefined : shadow),
-    shadow: shadow
-  })));
-}
-function ShadowIndicator({
-  label,
-  isActive,
-  onSelect,
-  shadow
-}) {
-  return (0, _react.createElement)("div", {
-    className: "block-editor-global-styles-effects-panel__shadow-indicator-wrapper"
-  }, (0, _react.createElement)(_components.Button, {
-    className: "block-editor-global-styles-effects-panel__shadow-indicator",
-    onClick: onSelect,
-    label: label,
-    style: {
-      boxShadow: shadow
-    },
-    showTooltip: true
-  }, isActive && (0, _react.createElement)(_icons.Icon, {
-    icon: _icons.check
-  })));
-}
-//# sourceMappingURL=effects-panel.js.map

package/build/components/global-styles/effects-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_i18n","_element","_icons","_useSettings","_utils","_object","useHasEffectsPanel","settings","hasShadowControl","useHasShadowControl","shadow","EffectsToolsPanel","resetAllFilter","onChange","value","panelId","children","resetAll","updatedValue","_react","createElement","__experimentalToolsPanel","label","__","dropdownMenuProps","TOOLSPANEL_DROPDOWNMENU_PROPS","DEFAULT_CONTROLS","EffectsPanel","as","Wrapper","inheritedValue","defaultControls","decodeValue","rawValue","getValueFromVariable","hasShadowEnabled","shadowPresets","presets","mergedShadowPresets","mergeOrigins","setShadow","newValue","slug","find","shadowName","setImmutably","undefined","hasShadow","resetShadow","useCallback","previousValue","__experimentalToolsPanelItem","hasValue","onDeselect","isShownByDefault","__experimentalItemGroup","isBordered","isSeparated","ShadowPopover","onShadowChange","popoverProps","placement","offset","shift","Dropdown","className","renderToggle","renderShadowToggle","renderContent","__experimentalDropdownContentWrapper","paddingSize","ShadowPopoverContainer","onToggle","isOpen","toggleProps","onClick","classnames","Button","__experimentalHStack","justify","Icon","icon","shadowIcon","size","FlexItem","defaultShadows","default","themeShadows","theme","defaultPresetsEnabled","defaultPresets","shadows","__experimentalVStack","spacing","__experimentalHeading","level","ShadowPresets","activeShadow","onSelect","__experimentalGrid","columns","gap","align","map","name","ShadowIndicator","key","isActive","style","boxShadow","showTooltip","check"],"sources":["@wordpress/block-editor/src/components/global-styles/effects-panel.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalGrid as Grid,\n\t__experimentalHeading as Heading,\n\tFlexItem,\n\tDropdown,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useCallback } from '@wordpress/element';\nimport { shadow as shadowIcon, Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { mergeOrigins } from '../use-settings';\nimport { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';\nimport { setImmutably } from '../../utils/object';\n\nexport function useHasEffectsPanel( settings ) {\n\tconst hasShadowControl = useHasShadowControl( settings );\n\treturn hasShadowControl;\n}\n\nfunction useHasShadowControl( settings ) {\n\treturn !! settings?.shadow;\n}\n\nfunction EffectsToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n} ) {\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ __( 'Effects' ) }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\tdropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\tshadow: true,\n};\n\nexport default function EffectsPanel( {\n\tas: Wrapper = EffectsToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n} ) {\n\tconst decodeValue = ( rawValue ) =>\n\t\tgetValueFromVariable( { settings }, '', rawValue );\n\n\t// Shadow\n\tconst hasShadowEnabled = useHasShadowControl( settings );\n\tconst shadow = decodeValue( inheritedValue?.shadow );\n\tconst shadowPresets = settings?.shadow?.presets;\n\tconst mergedShadowPresets = shadowPresets\n\t\t? mergeOrigins( shadowPresets )\n\t\t: [];\n\tconst setShadow = ( newValue ) => {\n\t\tconst slug = mergedShadowPresets?.find(\n\t\t\t( { shadow: shadowName } ) => shadowName === newValue\n\t\t)?.slug;\n\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'shadow' ],\n\t\t\t\tslug ? `var:preset|shadow|${ slug }` : newValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasShadow = () => !! value?.shadow;\n\tconst resetShadow = () => setShadow( undefined );\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tshadow: undefined,\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t{ hasShadowEnabled && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Shadow' ) }\n\t\t\t\t\thasValue={ hasShadow }\n\t\t\t\t\tonDeselect={ resetShadow }\n\t\t\t\t\tisShownByDefault={ defaultControls.shadow }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t<ShadowPopover\n\t\t\t\t\t\t\tshadow={ shadow }\n\t\t\t\t\t\t\tonShadowChange={ setShadow }\n\t\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ItemGroup>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n\nconst ShadowPopover = ( { shadow, onShadowChange, settings } ) => {\n\tconst popoverProps = {\n\t\tplacement: 'left-start',\n\t\toffset: 36,\n\t\tshift: true,\n\t};\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName=\"block-editor-global-styles-effects-panel__shadow-dropdown\"\n\t\t\trenderToggle={ renderShadowToggle() }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t\t<ShadowPopoverContainer\n\t\t\t\t\t\tshadow={ shadow }\n\t\t\t\t\t\tonShadowChange={ onShadowChange }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n};\n\nfunction renderShadowToggle() {\n\treturn ( { onToggle, isOpen } ) => {\n\t\tconst toggleProps = {\n\t\t\tonClick: onToggle,\n\t\t\tclassName: classnames( { 'is-open': isOpen } ),\n\t\t\t'aria-expanded': isOpen,\n\t\t};\n\n\t\treturn (\n\t\t\t<Button { ...toggleProps }>\n\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tclassName=\"block-editor-global-styles-effects-panel__toggle-icon\"\n\t\t\t\t\t\ticon={ shadowIcon }\n\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t/>\n\t\t\t\t\t<FlexItem>{ __( 'Shadow' ) }</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t);\n\t};\n}\n\nfunction ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {\n\tconst defaultShadows = settings?.shadow?.presets?.default;\n\tconst themeShadows = settings?.shadow?.presets?.theme;\n\tconst defaultPresetsEnabled = settings?.shadow?.defaultPresets;\n\n\tconst shadows = [\n\t\t...( defaultPresetsEnabled ? defaultShadows : [] ),\n\t\t...( themeShadows || [] ),\n\t];\n\n\treturn (\n\t\t<div className=\"block-editor-global-styles-effects-panel__shadow-popover-container\">\n\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t<Heading level={ 5 }>{ __( 'Shadow' ) }</Heading>\n\t\t\t\t<ShadowPresets\n\t\t\t\t\tpresets={ shadows }\n\t\t\t\t\tactiveShadow={ shadow }\n\t\t\t\t\tonSelect={ onShadowChange }\n\t\t\t\t/>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nfunction ShadowPresets( { presets, activeShadow, onSelect } ) {\n\treturn ! presets ? null : (\n\t\t<Grid columns={ 6 } gap={ 0 } align=\"center\" justify=\"center\">\n\t\t\t{ presets.map( ( { name, slug, shadow } ) => (\n\t\t\t\t<ShadowIndicator\n\t\t\t\t\tkey={ slug }\n\t\t\t\t\tlabel={ name }\n\t\t\t\t\tisActive={ shadow === activeShadow }\n\t\t\t\t\tonSelect={ () =>\n\t\t\t\t\t\tonSelect( shadow === activeShadow ? undefined : shadow )\n\t\t\t\t\t}\n\t\t\t\t\tshadow={ shadow }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Grid>\n\t);\n}\n\nfunction ShadowIndicator( { label, isActive, onSelect, shadow } ) {\n\treturn (\n\t\t<div className=\"block-editor-global-styles-effects-panel__shadow-indicator-wrapper\">\n\t\t\t<Button\n\t\t\t\tclassName=\"block-editor-global-styles-effects-panel__shadow-indicator\"\n\t\t\t\tonClick={ onSelect }\n\t\t\t\tlabel={ label }\n\t\t\t\tstyle={ { boxShadow: shadow } }\n\t\t\t\tshowTooltip\n\t\t\t>\n\t\t\t\t{ isActive && <Icon icon={ check } /> }\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}