@wordpress/block-editor 12.20.0 → 12.21.0

package/src/components/block-tools/empty-block-inserter.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import BlockPopover from '../block-popover';
+import BlockPopoverCover from '../block-popover/cover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import Inserter from '../inserter';
 import useSelectedBlockToolProps from './use-selected-block-tool-props';
@@ -28,9 +28,8 @@ export default function EmptyBlockInserter( {
 	} );
 
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ capturingClientId || clientId }
-			__unstableCoverTarget
 			bottomClientId={ lastClientId }
 			className={ classnames(
 				'block-editor-block-list__block-side-inserter-popover',
@@ -39,8 +38,6 @@ export default function EmptyBlockInserter( {
 				}
 			) }
 			__unstableContentRef={ __unstableContentRef }
-			resize={ false }
-			shift={ false }
 			{ ...popoverProps }
 		>
 			<div className="block-editor-block-list__empty-block-inserter">
@@ -51,6 +48,6 @@ export default function EmptyBlockInserter( {
 					__experimentalIsQuick
 				/>
 			</div>
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }

package/src/components/block-tools/index.js

@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
-import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -20,14 +19,13 @@ import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
 import { store as blockEditorStore } from '../../store';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
+import { useShowBlockTools } from './use-show-block-tools';
 
 function selector( select ) {
 	const {
 		getSelectedBlockClientId,
 		getFirstMultiSelectedBlockClientId,
-		getBlock,
 		getSettings,
-		hasMultiSelection,
 		__unstableGetEditorMode,
 		isTyping,
 	} = select( blockEditorStore );
@@ -35,36 +33,13 @@ function selector( select ) {
 	const clientId =
 		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
-	const { name = '', attributes = {} } = getBlock( clientId ) || {};
 	const editorMode = __unstableGetEditorMode();
-	const hasSelectedBlock = clientId && name;
-	const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( {
-		name,
-		attributes,
-	} );
-	const _showEmptyBlockSideInserter =
-		clientId &&
-		! isTyping() &&
-		editorMode === 'edit' &&
-		isUnmodifiedDefaultBlock( { name, attributes } );
-	const maybeShowBreadcrumb =
-		hasSelectedBlock &&
-		! hasMultiSelection() &&
-		( editorMode === 'navigation' || editorMode === 'zoom-out' );
 
 	return {
 		clientId,
 		hasFixedToolbar: getSettings().hasFixedToolbar,
 		isTyping: isTyping(),
 		isZoomOutMode: editorMode === 'zoom-out',
-		showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
-		showBreadcrumb: ! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
-		showBlockToolbar:
-			! getSettings().hasFixedToolbar &&
-			! _showEmptyBlockSideInserter &&
-			hasSelectedBlock &&
-			! isEmptyDefaultBlock &&
-			! maybeShowBreadcrumb,
 	};
 }
 
@@ -82,18 +57,20 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const {
-		clientId,
-		hasFixedToolbar,
-		isTyping,
-		isZoomOutMode,
-		showEmptyBlockSideInserter,
-		showBreadcrumb,
-		showBlockToolbar,
-	} = useSelect( selector, [] );
+	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode } = useSelect(
+		selector,
+		[]
+	);
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
+
+	const {
+		showEmptyBlockSideInserter,
+		showBreadcrumb,
+		showBlockToolbarPopover,
+	} = useShowBlockTools();
+
 	const {
 		duplicateBlocks,
 		removeBlocks,
@@ -186,7 +163,7 @@ export default function BlockTools( {
 					/>
 				) }
 
-				{ showBlockToolbar && (
+				{ showBlockToolbarPopover && (
 					<BlockToolbarPopover
 						__unstableContentRef={ __unstableContentRef }
 						clientId={ clientId }

package/src/components/block-tools/use-show-block-tools.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useHasBlockToolbar } from '../block-toolbar/use-has-block-toolbar';
+
+/**
+ * Source of truth for which block tools are showing in the block editor.
+ *
+ * @return {Object} Object of which block tools will be shown.
+ */
+export function useShowBlockTools() {
+	const hasBlockToolbar = useHasBlockToolbar();
+
+	return useSelect(
+		( select ) => {
+			const {
+				getSelectedBlockClientId,
+				getFirstMultiSelectedBlockClientId,
+				getBlock,
+				getSettings,
+				hasMultiSelection,
+				__unstableGetEditorMode,
+				isTyping,
+			} = select( blockEditorStore );
+
+			const clientId =
+				getSelectedBlockClientId() ||
+				getFirstMultiSelectedBlockClientId();
+
+			const { name = '', attributes = {} } = getBlock( clientId ) || {};
+			const editorMode = __unstableGetEditorMode();
+			const hasSelectedBlock = clientId && name;
+			const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( {
+				name,
+				attributes,
+			} );
+			const _showEmptyBlockSideInserter =
+				clientId &&
+				! isTyping() &&
+				editorMode === 'edit' &&
+				isUnmodifiedDefaultBlock( { name, attributes } );
+			const maybeShowBreadcrumb =
+				hasSelectedBlock &&
+				! hasMultiSelection() &&
+				( editorMode === 'navigation' || editorMode === 'zoom-out' );
+
+			return {
+				showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
+				showBreadcrumb:
+					! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
+				showBlockToolbarPopover:
+					hasBlockToolbar &&
+					! getSettings().hasFixedToolbar &&
+					! _showEmptyBlockSideInserter &&
+					hasSelectedBlock &&
+					! isEmptyDefaultBlock &&
+					! maybeShowBreadcrumb,
+				showFixedToolbar:
+					editorMode !== 'zoom-out' &&
+					hasBlockToolbar &&
+					getSettings().hasFixedToolbar,
+			};
+		},
+		[ hasBlockToolbar ]
+	);
+}

package/src/components/caption/index.native.js

@@ -53,7 +53,7 @@ const Caption = ( {
 			__unstableOnSplitAtEnd={ () =>
 				insertBlocksAfter( createBlock( 'core/paragraph' ) )
 			}
-			deleteEnter={ true }
+			deleteEnter
 		/>
 	</View>
 );

package/src/components/child-layout-control/index.js

@@ -74,7 +74,7 @@ export default function ChildLayoutControl( {
 								flexSize: newFlexSize,
 							} );
 						} }
-						isBlock={ true }
+						isBlock
 					>
 						<ToggleGroupControlOption
 							key={ 'fit' }

package/src/components/color-palette/control.js

@@ -14,7 +14,7 @@ export default function ColorPaletteControl( {
 			onColorChange={ onChange }
 			colorValue={ value }
 			gradients={ [] }
-			disableCustomGradients={ true }
+			disableCustomGradients
 		/>
 	);
 }

package/src/components/colors-gradients/control.js

@@ -133,7 +133,7 @@ function ColorGradientControlInner( {
 					{ canChooseAColor && canChooseAGradient && (
 						<div>
 							<Tabs
-								initialTabId={
+								defaultTabId={
 									gradientValue
 										? TAB_IDS.gradient
 										: !! canChooseAColor && TAB_IDS.color

package/src/components/colors-gradients/test/control.js

@@ -64,7 +64,7 @@ describe( 'ColorPaletteControl', () => {
 				] }
 				gradients={ [] }
 				disableCustomColors={ false }
-				disableCustomGradients={ true }
+				disableCustomGradients
 				onColorChange={ noop }
 				onGradientChange={ noop }
 			/>
@@ -102,7 +102,7 @@ describe( 'ColorPaletteControl', () => {
 						slug: 'light-green-cyan-to-vivid-green-cyan',
 					},
 				] }
-				disableCustomColors={ true }
+				disableCustomColors
 				disableCustomGradients={ false }
 				onColorChange={ noop }
 				onGradientChange={ noop }

package/src/components/contrast-checker/test/index.js

@@ -221,7 +221,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
-				isLargeText={ true }
+				isLargeText
 			/>
 		);
 
@@ -263,7 +263,7 @@ describe( 'ContrastChecker', () => {
 				backgroundColor="#C44B4B"
 				textColor="#000000"
 				fontSize={ 23 }
-				isLargeText={ true }
+				isLargeText
 			/>
 		);
 
@@ -363,7 +363,7 @@ describe( 'ContrastChecker', () => {
 				backgroundColor={ backgroundColor }
 				textColor={ textColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -378,7 +378,7 @@ describe( 'ContrastChecker', () => {
 				textColor={ 'rgba(0,0,0,0.9)' }
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -399,7 +399,7 @@ describe( 'ContrastChecker', () => {
 				linkColor={ 'rgba(0,0,0,0.9)' }
 				textColor={ textColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -420,7 +420,7 @@ describe( 'ContrastChecker', () => {
 				textColor={ textColor }
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -437,7 +437,7 @@ describe( 'ContrastChecker', () => {
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -454,7 +454,7 @@ describe( 'ContrastChecker', () => {
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -477,7 +477,7 @@ describe( 'ContrastChecker', () => {
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -498,7 +498,7 @@ describe( 'ContrastChecker', () => {
 				linkColor={ 'rgba(0,0,0,0.7)' }
 				textColor={ 'rgba(0,0,0,0.7)' }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 

package/src/components/default-block-appender/content.scss

@@ -29,12 +29,15 @@
 	// In "constrained" layout containers, the first and last paragraphs have their margins zeroed out.
 	// In the case of this appender, it needs to apply those same rules to avoid layout shifts.
 	// Such shifts happen when the bottom margin of the Title block has been set to less than the default 1em margin of paragraphs.
-	:where(body .is-layout-constrained) & {
+	:where(body .is-layout-constrained) &,
+	:where(.wp-site-blocks) & {
 		> :first-child:first-child {
 			margin-block-start: 0;
+			margin-block-end: 0;
 		}
 
-		// Since this particular appender will only ever appear on an entirely empty document, we don't account for last-child.
+		// Since this appender will only ever appear on an entirely empty document, we don't account for last-child.
+		// This is also because it will never be the last child, the block inserter that sits in this appender is the last child.
 	}
 
 	// Dropzone.

package/src/components/global-styles/border-panel.js

@@ -21,23 +21,24 @@ import { useColorsPerOrigin } from './hooks';
 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';
+import { useBorderPanelLabel } from '../../hooks/border';
+import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
 
-function useHasShadowControl( settings ) {
-	return !! settings?.shadow;
+export function useHasBorderPanel( settings ) {
+	const controls = Object.values( useHasBorderPanelControls( settings ) );
+	return controls.some( Boolean );
 }
 
-export function useHasBorderPanel( settings ) {
-	const controls = [
-		useHasBorderColorControl( settings ),
-		useHasBorderRadiusControl( settings ),
-		useHasBorderStyleControl( settings ),
-		useHasBorderWidthControl( settings ),
-		useHasShadowControl( settings ),
-	];
+export function useHasBorderPanelControls( settings ) {
+	const controls = {
+		hasBorderColor: useHasBorderColorControl( settings ),
+		hasBorderRadius: useHasBorderRadiusControl( settings ),
+		hasBorderStyle: useHasBorderStyleControl( settings ),
+		hasBorderWidth: useHasBorderWidthControl( settings ),
+		hasShadow: useHasShadowControl( settings ),
+	};
 
-	return controls.some( Boolean );
+	return controls;
 }
 
 function useHasBorderColorControl( settings ) {
@@ -56,6 +57,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,
@@ -215,14 +221,16 @@ export default function BorderPanel( {
 	const showBorderByDefault =
 		defaultControls?.color || defaultControls?.width;
 
-	const label = getBorderPanelLabel( {
+	const hasBorderControl =
+		showBorderColor ||
+		showBorderStyle ||
+		showBorderWidth ||
+		showBorderRadius;
+
+	const label = useBorderPanelLabel( {
 		blockName: name,
 		hasShadowControl,
-		hasBorderControl:
-			showBorderColor ||
-			showBorderStyle ||
-			showBorderWidth ||
-			showBorderRadius,
+		hasBorderControl,
 	} );
 
 	return (
@@ -243,13 +251,13 @@ export default function BorderPanel( {
 				>
 					<BorderBoxControl
 						colors={ colors }
-						enableAlpha={ true }
+						enableAlpha
 						enableStyle={ showBorderStyle }
 						onChange={ onBorderChange }
 						popoverOffset={ 40 }
 						popoverPlacement="left-start"
 						value={ border }
-						__experimentalIsRenderedInSidebar={ true }
+						__experimentalIsRenderedInSidebar
 						size={ '__unstable-large' }
 						hideLabelFromVision={ ! hasShadowControl }
 						label={ __( 'Border' ) }
@@ -280,9 +288,12 @@ export default function BorderPanel( {
 					isShownByDefault={ defaultControls.shadow }
 					panelId={ panelId }
 				>
-					<BaseControl.VisualLabel as="legend">
-						{ __( 'Shadow' ) }
-					</BaseControl.VisualLabel>
+					{ hasBorderControl ? (
+						<BaseControl.VisualLabel as="legend">
+							{ __( 'Shadow' ) }
+						</BaseControl.VisualLabel>
+					) : null }
+
 					<ItemGroup isBordered isSeparated>
 						<ShadowPopover
 							shadow={ shadow }

package/src/components/global-styles/color-panel.js

@@ -259,7 +259,7 @@ function ColorPanelDropdown( {
 								/>
 							) }
 							{ tabs.length > 1 && (
-								<Tabs initialTabId={ currentTab?.key }>
+								<Tabs defaultTabId={ currentTab?.key }>
 									<Tabs.TabList>
 										{ tabs.map( ( tab ) => (
 											<Tabs.Tab

package/src/components/global-styles/image-settings-panel.js

@@ -62,7 +62,7 @@ export default function ImageSettingsPanel( {
 					hasValue={ () => !! value?.lightbox }
 					label={ __( 'Expand on click' ) }
 					onDeselect={ resetLightbox }
-					isShownByDefault={ true }
+					isShownByDefault
 					panelId={ panelId }
 				>
 					<ToggleControl

package/src/components/global-styles/index.js

@@ -19,7 +19,11 @@ export {
 	default as DimensionsPanel,
 	useHasDimensionsPanel,
 } from './dimensions-panel';
-export { default as BorderPanel, useHasBorderPanel } from './border-panel';
+export {
+	default as BorderPanel,
+	useHasBorderPanel,
+	useHasBorderPanelControls,
+} from './border-panel';
 export { default as ColorPanel, useHasColorPanel } from './color-panel';
 export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
 export {

package/src/components/global-styles/shadow-panel-components.js

@@ -5,28 +5,36 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
-	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Button,
 	FlexItem,
 	Dropdown,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
 import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
+
 /**
  * External dependencies
  */
 import classNames from 'classnames';
 
-export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
-	const defaultShadows = settings?.shadow?.presets?.default || [];
-	const themeShadows = settings?.shadow?.presets?.theme || [];
-	const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
 
-	const shadows = [
-		...( defaultPresetsEnabled ? defaultShadows : [] ),
-		...themeShadows,
-	];
+/**
+ * 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 = [];
+
+export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
+	const shadows = useShadowPresets( settings );
 
 	return (
 		<div className="block-editor-global-styles__shadow-popover-container">
@@ -37,42 +45,76 @@ 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>
 	);
 }
 
 export function ShadowPresets( { presets, activeShadow, onSelect } ) {
+	const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
+		unlock( componentsPrivateApis );
+	const compositeStore = useCompositeStore();
 	return ! presets ? null : (
-		<Grid columns={ 6 } gap={ 0 } align="center" justify="center">
+		<Composite
+			store={ compositeStore }
+			role="listbox"
+			className="block-editor-global-styles__shadow__list"
+			aria-label={ __( 'Drop shadows' ) }
+		>
 			{ presets.map( ( { name, slug, shadow } ) => (
 				<ShadowIndicator
 					key={ slug }
 					label={ name }
 					isActive={ shadow === activeShadow }
+					type={ slug === 'unset' ? 'unset' : 'preset' }
 					onSelect={ () =>
 						onSelect( shadow === activeShadow ? undefined : shadow )
 					}
 					shadow={ shadow }
 				/>
 			) ) }
-		</Grid>
+		</Composite>
 	);
 }
 
-export function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
+export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
+	const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
 	return (
-		<div className="block-editor-global-styles__shadow-indicator-wrapper">
-			<Button
-				className="block-editor-global-styles__shadow-indicator"
-				onClick={ onSelect }
-				label={ label }
-				style={ { boxShadow: shadow } }
-				showTooltip
-			>
-				{ isActive && <Icon icon={ check } /> }
-			</Button>
-		</div>
+		<CompositeItem
+			role="option"
+			aria-label={ label }
+			aria-selected={ isActive }
+			className={ classNames(
+				'block-editor-global-styles__shadow__item',
+				{
+					'is-active': isActive,
+				}
+			) }
+			render={
+				<Button
+					className={ classNames(
+						'block-editor-global-styles__shadow-indicator',
+						{
+							unset: type === 'unset',
+						}
+					) }
+					onClick={ onSelect }
+					label={ label }
+					style={ { boxShadow: shadow } }
+					showTooltip
+				>
+					{ isActive && <Icon icon={ check } /> }
+				</Button>
+			}
+		/>
 	);
 }
 
@@ -123,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 ] );
+}