Move Shadow controls to Border panel

packages/block-editor/src/components/block-inspector/index.js

@@ -30,6 +30,7 @@ import PositionControls from '../inspector-controls-tabs/position-controls-panel
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 import BlockInfo from '../block-info-slot-fill';
 import BlockQuickNavigation from '../block-quick-navigation';
+import { getBorderPanelLabel } from '../../hooks/border';
 
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const contentClientIds = useSelect(
@@ -139,7 +140,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 						/>
 						<InspectorControls.Slot
 							group="border"
-							label={ __( 'Border' ) }
+							label={ getBorderPanelLabel( {
+								blockName: selectedBlockName,
+							} ) }
 						/>
 						<InspectorControls.Slot group="styles" />
 					</>
@@ -248,6 +251,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 		[ blockName ]
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const borderPanelLabel = getBorderPanelLabel( { blockName } );
 
 	return (
 		<div className="block-editor-block-inspector">
@@ -300,18 +304,14 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					/>
 					<InspectorControls.Slot
 						group="border"
-						label={ __( 'Border' ) }
+						label={ borderPanelLabel }
 					/>
 					<InspectorControls.Slot group="styles" />
 					<InspectorControls.Slot
 						group="background"
 						label={ __( 'Background' ) }
 					/>
 					<PositionControls />
-					<InspectorControls.Slot
-						group="effects"
-						label={ __( 'Effects' ) }
-					/>
 					<div>
 						<AdvancedControls />
 					</div>

packages/block-editor/src/components/global-styles/border-panel.js

@@ -7,6 +7,8 @@ import {
 	__experimentalIsDefinedBorder as isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalItemGroup as ItemGroup,
+	BaseControl,
 } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -17,13 +19,22 @@ import { __ } from '@wordpress/i18n';
 import BorderRadiusControl from '../border-radius-control';
 import { useColorsPerOrigin } from './hooks';
 import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
+import { mergeOrigins } 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;
+}
 
 export function useHasBorderPanel( settings ) {
 	const controls = [
 		useHasBorderColorControl( settings ),
 		useHasBorderRadiusControl( settings ),
 		useHasBorderStyleControl( settings ),
 		useHasBorderWidthControl( settings ),
+		useHasShadowControl( settings ),
 	];
 
 	return controls.some( Boolean );
@@ -51,6 +62,7 @@ function BorderToolsPanel( {
 	value,
 	panelId,
 	children,
+	label,
 } ) {
 	const resetAll = () => {
 		const updatedValue = resetAllFilter( value );
@@ -59,7 +71,7 @@ function BorderToolsPanel( {
 
 	return (
 		<ToolsPanel
-			label={ __( 'Border' ) }
+			label={ label }
 			resetAll={ resetAll }
 			panelId={ panelId }
 			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
@@ -73,6 +85,7 @@ const DEFAULT_CONTROLS = {
 	radius: true,
 	color: true,
 	width: true,
+	shadow: false,
 };
 
 export default function BorderPanel( {
@@ -82,6 +95,7 @@ export default function BorderPanel( {
 	inheritedValue = value,
 	settings,
 	panelId,
+	name,
 	defaultControls = DEFAULT_CONTROLS,
 } ) {
 	const colors = useColorsPerOrigin( settings );
@@ -136,6 +150,29 @@ export default function BorderPanel( {
 		}
 		return !! borderValues;
 	};
+	const hasShadowControl = useHasShadowControl( settings );
+
+	// Shadow
+	const shadow = decodeValue( inheritedValue?.shadow );
+	const shadowPresets = settings?.shadow?.presets;
+	const mergedShadowPresets = shadowPresets
+		? mergeOrigins( shadowPresets )
+		: [];
+	const setShadow = ( newValue ) => {
+		const slug = mergedShadowPresets?.find(
+			( { shadow: shadowName } ) => shadowName === newValue
+		)?.slug;
+
+		onChange(
+			setImmutably(
+				value,
+				[ 'shadow' ],
+				slug ? `var:preset|shadow|${ slug }` : newValue || undefined
+			)
+		);
+	};
+	const hasShadow = () => !! value?.shadow;
+	const resetShadow = () => setShadow( undefined );
 
 	const resetBorder = () => {
 		if ( hasBorderRadius() ) {
@@ -173,18 +210,30 @@ export default function BorderPanel( {
 		return {
 			...previousValue,
 			border: undefined,
+			shadow: undefined,
 		};
 	}, [] );
 
 	const showBorderByDefault =
 		defaultControls?.color || defaultControls?.width;
 
+	const label = getBorderPanelLabel( {
+		blockName: name,
+		hasShadowControl,
+		hasBorderControl:
+			showBorderColor ||
+			showBorderStyle ||
+			showBorderWidth ||
+			showBorderRadius,
+	} );
+
 	return (
 		<Wrapper
 			resetAllFilter={ resetAllFilter }
 			value={ value }
 			onChange={ onChange }
 			panelId={ panelId }
+			label={ label }
 		>
 			{ ( showBorderWidth || showBorderColor ) && (
 				<ToolsPanelItem
@@ -204,6 +253,8 @@ export default function BorderPanel( {
 						value={ border }
 						__experimentalIsRenderedInSidebar={ true }
 						size={ '__unstable-large' }
+						hideLabelFromVision={ ! hasShadowControl }
+						label={ __( 'Border' ) }
 					/>
 				</ToolsPanelItem>
 			) }
@@ -223,6 +274,26 @@ export default function BorderPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasShadowControl && (
+				<ToolsPanelItem
+					label={ __( 'Shadow' ) }
+					hasValue={ hasShadow }
+					onDeselect={ resetShadow }
+					isShownByDefault={ defaultControls.shadow }
+					panelId={ panelId }
+				>
+					<BaseControl.VisualLabel as="legend">
+						{ __( 'Shadow' ) }
+					</BaseControl.VisualLabel>
+					<ItemGroup isBordered isSeparated>
+						<ShadowPopover
+							shadow={ shadow }
+							onShadowChange={ setShadow }
+							settings={ settings }
+						/>
+					</ItemGroup>
+				</ToolsPanelItem>
+			) }
 		</Wrapper>
 	);
 }