@wordpress/block-editor 12.19.3 → 12.19.5

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -22,7 +22,7 @@ import { store as blockEditorStore } from '../../../store';
 export function useEventHandlers( { clientId, isSelected } ) {
 	const { getBlockRootClientId, getBlockIndex } =
 		useSelect( blockEditorStore );
-	const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore );
+	const { insertAfterBlock, removeBlock } = useDispatch( blockEditorStore );
 
 	return useRefEffect(
 		( node ) => {
@@ -57,11 +57,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 				event.preventDefault();
 
 				if ( keyCode === ENTER ) {
-					insertDefaultBlock(
-						{},
-						getBlockRootClientId( clientId ),
-						getBlockIndex( clientId ) + 1
-					);
+					insertAfterBlock( clientId );
 				} else {
 					removeBlock( clientId );
 				}
@@ -90,7 +86,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			isSelected,
 			getBlockRootClientId,
 			getBlockIndex,
-			insertDefaultBlock,
+			insertAfterBlock,
 			removeBlock,
 		]
 	);

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

@@ -54,7 +54,11 @@ export function BlockPreview( {
 		[]
 	);
 	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		() => ( {
+			...originalSettings,
+			focusMode: false, // Disable "Spotlight mode".
+			__unstableIsPreviewMode: true,
+		} ),
 		[ originalSettings ]
 	);
 	const renderedBlocks = useMemo(
@@ -117,6 +121,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 		() => ( {
 			...originalSettings,
 			styles: undefined, // Clear styles included by the parent settings, as they are already output by the parent's EditorStyles.
+			focusMode: false, // Disable "Spotlight mode".
 			__unstableIsPreviewMode: true,
 		} ),
 		[ originalSettings ]

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -39,8 +39,12 @@ const POPOVER_PROPS = {
 	placement: 'bottom-start',
 };
 
-function CopyMenuItem( { blocks, onCopy, label } ) {
-	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
+function CopyMenuItem( { clientIds, onCopy, label } ) {
+	const { getBlocksByClientId } = useSelect( blockEditorStore );
+	const ref = useCopyToClipboard(
+		() => serialize( getBlocksByClientId( clientIds ) ),
+		onCopy
+	);
 	const copyMenuItemLabel = label ? label : __( 'Copy' );
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
@@ -239,7 +243,7 @@ export function BlockSettingsDropdown( {
 			{ ( {
 				canCopyStyles,
 				canDuplicate,
-				canInsertDefaultBlock,
+				canInsertBlock,
 				canMove,
 				canRemove,
 				onDuplicate,
@@ -249,7 +253,6 @@ export function BlockSettingsDropdown( {
 				onCopy,
 				onPasteStyles,
 				onMoveTo,
-				blocks,
 			} ) => (
 				<DropdownMenu
 					icon={ moreVertical }
@@ -286,7 +289,7 @@ export function BlockSettingsDropdown( {
 									'core/block-editor/insert-after',
 									event
 								) &&
-								canInsertDefaultBlock
+								canInsertBlock
 							) {
 								event.preventDefault();
 								setOpenedBlockSettingsMenu( undefined );
@@ -296,7 +299,7 @@ export function BlockSettingsDropdown( {
 									'core/block-editor/insert-before',
 									event
 								) &&
-								canInsertDefaultBlock
+								canInsertBlock
 							) {
 								event.preventDefault();
 								setOpenedBlockSettingsMenu( undefined );
@@ -327,7 +330,7 @@ export function BlockSettingsDropdown( {
 									/>
 								) }
 								<CopyMenuItem
-									blocks={ blocks }
+									clientIds={ clientIds }
 									onCopy={ onCopy }
 								/>
 								{ canDuplicate && (
@@ -342,7 +345,7 @@ export function BlockSettingsDropdown( {
 										{ __( 'Duplicate' ) }
 									</MenuItem>
 								) }
-								{ canInsertDefaultBlock && (
+								{ canInsertBlock && (
 									<>
 										<MenuItem
 											onClick={ pipe(
@@ -368,7 +371,7 @@ export function BlockSettingsDropdown( {
 							{ canCopyStyles && (
 								<MenuGroup>
 									<CopyMenuItem
-										blocks={ blocks }
+										clientIds={ clientIds }
 										onCopy={ onCopy }
 										label={ __( 'Copy styles' ) }
 									/>

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

@@ -35,6 +35,8 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
+import BlockBindingsIndicator from '../block-bindings-toolbar-indicator';
+import { canBindBlock } from '../../hooks/use-bindings-attributes';
 
 /**
  * Renders the block toolbar.
@@ -60,8 +62,10 @@ export function PrivateBlockToolbar( {
 		blockClientIds,
 		isDefaultEditingMode,
 		blockType,
+		blockName,
 		shouldShowVisualToolbar,
 		showParentSelector,
+		isUsingBindings,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -71,6 +75,7 @@ export function PrivateBlockToolbar( {
 			isBlockValid,
 			getBlockRootClientId,
 			getBlockEditingMode,
+			getBlockAttributes,
 		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -81,20 +86,21 @@ export function PrivateBlockToolbar( {
 		const parentBlockType = getBlockType( parentBlockName );
 		const _isDefaultEditingMode =
 			getBlockEditingMode( selectedBlockClientId ) === 'default';
+		const _blockName = getBlockName( selectedBlockClientId );
 		const isValid = selectedBlockClientIds.every( ( id ) =>
 			isBlockValid( id )
 		);
 		const isVisual = selectedBlockClientIds.every(
 			( id ) => getBlockMode( id ) === 'visual'
 		);
+		const _isUsingBindings = !! getBlockAttributes( selectedBlockClientId )
+			?.metadata?.bindings;
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
 			isDefaultEditingMode: _isDefaultEditingMode,
-			blockType:
-				selectedBlockClientId &&
-				getBlockType( getBlockName( selectedBlockClientId ) ),
-
+			blockName: _blockName,
+			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
 			rootClientId: blockRootClientId,
 			showParentSelector:
@@ -107,6 +113,7 @@ export function PrivateBlockToolbar( {
 				) &&
 				selectedBlockClientIds.length === 1 &&
 				_isDefaultEditingMode,
+			isUsingBindings: _isUsingBindings,
 		};
 	}, [] );
 
@@ -165,6 +172,9 @@ export function PrivateBlockToolbar( {
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
+				{ isUsingBindings && canBindBlock( blockName ) && (
+					<BlockBindingsIndicator />
+				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					isDefaultEditingMode && (
 						<div

package/src/components/block-toolbar/style.scss

@@ -207,17 +207,18 @@
 		}
 	}
 
-	.block-editor-block-mover .block-editor-block-mover__move-button-container {
-		width: auto;
-
-		@include break-small() {
+	.block-editor-block-mover {
+		.block-editor-block-mover__move-button-container {
+			width: auto;
 			position: relative;
+		}
 
-			&::before {
+		&:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
+			@include break-small() {
 				content: "";
 				height: $border-width;
 				width: 100%;
-				background: $gray-900;
+				background: $gray-200;
 				position: absolute;
 				top: 50%;
 				left: 50%;
@@ -226,6 +227,10 @@
 				transform: translate(-50%, 0);
 				margin-top: -$border-width * 0.5;
 			}
+
+			@include break-medium {
+				background: $gray-900;
+			}
 		}
 	}
 

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 (
@@ -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/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 ] );
+}

package/src/components/global-styles/style.scss

@@ -2,10 +2,24 @@
 	fill: currentColor;
 }
 
+// @todo: Ideally, popover, swatch size, and gap values should be CSS variables
+// to apply precise grid layouts.
+// https://github.com/WordPress/gutenberg/blob/954ecae571abbddc113d3a4bd8e1a72230180554/packages/block-editor/src/components/duotone-control/style.scss#L3-L9
 .block-editor-global-styles__shadow-popover-container {
 	width: 230px;
 }
 
+.block-editor-global-styles__shadow__list {
+	display: flex;
+	gap: 12px;
+	flex-wrap: wrap;
+	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;
@@ -21,14 +35,6 @@
 	}
 }
 
-// wrapper to clip the shadow beyond 6px
-.block-editor-global-styles__shadow-indicator-wrapper {
-	padding: $grid-unit-15 * 0.5;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
 	color: $gray-800;
@@ -37,8 +43,25 @@
 	cursor: pointer;
 	padding: 0;
 
-	height: $button-size-small;
-	width: $button-size-small;
+	height: $button-size-small + 2 * $border-width;
+	width: $button-size-small + 2 * $border-width;
+	box-sizing: border-box;
+
+	transform: scale(1);
+	transition: transform 0.1s ease;
+	will-change: transform;
+
+	&:focus {
+		border: #{ $border-width * 2 } solid $gray-700;
+	}
+
+	&: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 {

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -11,10 +11,10 @@ import { __ } from '@wordpress/i18n';
 import BlockStyles from '../block-styles';
 import DefaultStylePicker from '../default-style-picker';
 import InspectorControls from '../inspector-controls';
-import { getBorderPanelLabel } from '../../hooks/border';
+import { useBorderPanelLabel } from '../../hooks/border';
 
 const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
-	const borderPanelLabel = getBorderPanelLabel( { blockName } );
+	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 
 	return (
 		<>

package/src/components/link-control/link-preview.js

@@ -16,8 +16,9 @@ import { useCopyToClipboard } from '@wordpress/compose';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
 import { Icon, globe, info, linkOff, edit, copySmall } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -33,6 +34,12 @@ export default function LinkPreview( {
 	hasUnlinkControl = false,
 	onRemove,
 } ) {
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
+
 	// Avoid fetching if rich previews are not desired.
 	const showRichPreviews = hasRichPreviews ? value?.url : null;
 
@@ -139,7 +146,7 @@ export default function LinkPreview( {
 					label={ sprintf(
 						// Translators: %s is a placeholder for the link URL and an optional colon, (if a Link URL is present).
 						__( 'Copy link%s' ), // Ends up looking like "Copy link: https://example.com".
-						isEmptyURL ? '' : ': ' + value.url
+						isEmptyURL || showIconLabels ? '' : ': ' + value.url
 					) }
 					ref={ ref }
 					disabled={ isEmptyURL }

package/src/components/link-control/style.scss

@@ -34,6 +34,15 @@ $block-editor-link-control-number-of-actions: 1;
 				content: attr(aria-label);
 			}
 		}
+
+		.block-editor-link-control__search-item-top {
+			gap: $grid-unit-10;
+
+			.components-button.has-icon {
+				min-width: inherit;
+				width: min-content;
+			}
+		}
 	}
 }