@wordpress/block-editor 14.11.0 → 14.13.0

package/src/components/inserter/menu.js

@@ -54,15 +54,17 @@ function InserterMenu(
 	},
 	ref
 ) {
-	const isZoomOutMode = useSelect(
-		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
-		[]
-	);
-	const hasSectionRootClientId = useSelect(
-		( select ) =>
-			!! unlock( select( blockEditorStore ) ).getSectionRootClientId(),
-		[]
-	);
+	const { isZoomOutMode, hasSectionRootClientId } = useSelect( ( select ) => {
+		const { isZoomOut, getSectionRootClientId } = unlock(
+			select( blockEditorStore )
+		);
+
+		return {
+			isZoomOutMode: isZoomOut(),
+			hasSectionRootClientId: !! getSectionRootClientId(),
+		};
+	}, [] );
+
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );

package/src/components/inserter/no-results.js

@@ -2,15 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Icon, blockDefault } from '@wordpress/icons';
 
 function InserterNoResults() {
 	return (
 		<div className="block-editor-inserter__no-results">
-			<Icon
-				className="block-editor-inserter__no-results-icon"
-				icon={ blockDefault }
-			/>
 			<p>{ __( 'No results found.' ) }</p>
 		</div>
 	);

package/src/components/inserter/quick-inserter.js

@@ -21,6 +21,7 @@ import { store as blockEditorStore } from '../../store';
 
 const SEARCH_THRESHOLD = 6;
 const SHOWN_BLOCK_TYPES = 6;
+const SHOWN_BLOCK_PATTERNS = 2;
 
 export default function QuickInserter( {
 	onSelect,
@@ -106,7 +107,9 @@ export default function QuickInserter( {
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
-					maxBlockPatterns={ 0 }
+					maxBlockPatterns={
+						!! filterValue ? SHOWN_BLOCK_PATTERNS : 0
+					}
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }
 					selectBlockOnInsert={ selectBlockOnInsert }

package/src/components/inserter/search-results.js

@@ -84,7 +84,9 @@ function InserterSearchResults( {
 	] = useBlockTypesState( destinationRootClientId, onInsertBlocks, isQuick );
 	const [ patterns, , onClickPattern ] = usePatternsState(
 		onInsertBlocks,
-		destinationRootClientId
+		destinationRootClientId,
+		undefined,
+		isQuick
 	);
 
 	const filteredBlockPatterns = useMemo( () => {

package/src/components/inserter/style.scss

@@ -83,8 +83,9 @@ $block-inserter-tabs-height: 44px;
 	border: none;
 	outline: none;
 	padding: 0;
-	transition: color 0.2s ease;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: color 0.2s ease;
+	}
 }
 
 .block-editor-inserter__menu {
@@ -167,10 +168,6 @@ $block-inserter-tabs-height: 44px;
 	text-align: center;
 }
 
-.block-editor-inserter__no-results-icon {
-	fill: $gray-600;
-}
-
 .block-editor-inserter__child-blocks {
 	padding: 0 $grid-unit-20;
 }
@@ -563,8 +560,9 @@ $block-inserter-tabs-height: 44px;
 		outline-color: var(--wp-admin-theme-color);
 		outline-width: var(--wp-admin-border-width-focus);
 		outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
-		transition: outline 0.1s linear;
-		@include reduce-motion("transition");
+		@media not ( prefers-reduced-motion ) {
+			transition: outline 0.1s linear;
+		}
 	}
 }
 

package/src/components/inserter-list-item/style.scss

@@ -43,8 +43,9 @@
 	cursor: pointer;
 	background: transparent;
 	word-break: break-word;
-	transition: all 0.05s ease-in-out;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: all 0.05s ease-in-out;
+	}
 	position: relative;
 	height: auto;
 
@@ -97,8 +98,9 @@
 .block-editor-block-types-list__item-icon {
 	padding: 12px 20px;
 	color: $gray-900;
-	transition: all 0.05s ease-in-out;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: all 0.05s ease-in-out;
+	}
 
 	.block-editor-block-icon {
 		margin-left: auto;
@@ -106,8 +108,9 @@
 	}
 
 	svg {
-		transition: all 0.15s ease-out;
-		@include reduce-motion("transition");
+		@media not ( prefers-reduced-motion ) {
+			transition: all 0.15s ease-out;
+		}
 	}
 
 	.block-editor-block-types-list__list-item[draggable="true"] & {

package/src/components/inspector-controls-tabs/position-controls-panel.js

@@ -2,11 +2,11 @@
  * WordPress dependencies
  */
 import {
-	PanelBody,
 	__experimentalUseSlotFills as useSlotFills,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { useLayoutEffect, useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -15,40 +15,75 @@ import { __ } from '@wordpress/i18n';
 import InspectorControlsGroups from '../inspector-controls/groups';
 import { default as InspectorControls } from '../inspector-controls';
 import { store as blockEditorStore } from '../../store';
+import { useToolsPanelDropdownMenuProps } from '../global-styles/utils';
+import { cleanEmptyObject } from '../../hooks/utils';
 
 const PositionControlsPanel = () => {
-	const [ initialOpen, setInitialOpen ] = useState();
+	const { selectedClientIds, selectedBlocks, hasPositionAttribute } =
+		useSelect( ( select ) => {
+			const { getBlocksByClientId, getSelectedBlockClientIds } =
+				select( blockEditorStore );
 
-	// Determine whether the panel should be expanded.
-	const { multiSelectedBlocks } = useSelect( ( select ) => {
-		const { getBlocksByClientId, getSelectedBlockClientIds } =
-			select( blockEditorStore );
-		const clientIds = getSelectedBlockClientIds();
-		return {
-			multiSelectedBlocks: getBlocksByClientId( clientIds ),
-		};
-	}, [] );
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const _selectedBlocks = getBlocksByClientId(
+				selectedBlockClientIds
+			);
 
-	useLayoutEffect( () => {
-		// If any selected block has a position set, open the panel by default.
-		// The first block's value will still be used within the control though.
-		if ( initialOpen === undefined ) {
-			setInitialOpen(
-				multiSelectedBlocks.some(
+			return {
+				selectedClientIds: selectedBlockClientIds,
+				selectedBlocks: _selectedBlocks,
+				hasPositionAttribute: _selectedBlocks?.some(
 					( { attributes } ) => !! attributes?.style?.position?.type
-				)
-			);
+				),
+			};
+		}, [] );
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	function resetPosition() {
+		if ( ! selectedClientIds?.length || ! selectedBlocks?.length ) {
+			return;
 		}
-	}, [ initialOpen, multiSelectedBlocks, setInitialOpen ] );
+
+		const attributesByClientId = Object.fromEntries(
+			selectedBlocks?.map( ( { clientId, attributes } ) => [
+				clientId,
+				{
+					style: cleanEmptyObject( {
+						...attributes?.style,
+						position: {
+							...attributes?.style?.position,
+							type: undefined,
+							top: undefined,
+							right: undefined,
+							bottom: undefined,
+							left: undefined,
+						},
+					} ),
+				},
+			] )
+		);
+
+		updateBlockAttributes( selectedClientIds, attributesByClientId, true );
+	}
 
 	return (
-		<PanelBody
+		<ToolsPanel
 			className="block-editor-block-inspector__position"
-			title={ __( 'Position' ) }
-			initialOpen={ initialOpen ?? false }
+			label={ __( 'Position' ) }
+			resetAll={ resetPosition }
+			dropdownMenuProps={ dropdownMenuProps }
 		>
-			<InspectorControls.Slot group="position" />
-		</PanelBody>
+			<ToolsPanelItem
+				isShownByDefault={ hasPositionAttribute }
+				label={ __( 'Position' ) }
+				hasValue={ () => hasPositionAttribute }
+				onDeselect={ resetPosition }
+			>
+				<InspectorControls.Slot group="position" />
+			</ToolsPanelItem>
+		</ToolsPanel>
 	);
 };
 

package/src/components/keyboard-shortcuts/index.js

@@ -29,7 +29,7 @@ function KeyboardShortcutsRegister() {
 			category: 'block',
 			description: __( 'Remove the selected block(s).' ),
 			keyCombination: {
-				modifier: 'shift',
+				modifier: 'primaryShift',
 				character: 'backspace',
 			},
 		} );

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

@@ -289,8 +289,10 @@ $block-editor-link-control-number-of-actions: 1;
 			right: 0;
 			bottom: 0;
 			border-radius: 100%;
-			animation: loadingpulse 1s linear infinite;
-			animation-delay: 0.5s; // avoid animating for fast network responses
+			@media not ( prefers-reduced-motion ) {
+				animation: loadingpulse 1s linear infinite;
+				animation-delay: 0.5s; // avoid animating for fast network responses
+			}
 		}
 	}
 }
@@ -381,16 +383,19 @@ $block-editor-link-control-number-of-actions: 1;
 		// Point downwards when open (same as list view expander)
 		&[aria-expanded="true"] svg {
 			visibility: visible;
-			transition: transform 0.1s ease;
+			@media not ( prefers-reduced-motion ) {
+				transition: transform 0.1s ease;
+			}
 			transform: rotate(90deg);
-			@include reduce-motion("transition");
+
 		}
 		// Point rightwards when closed (same as list view expander)
 		&[aria-expanded="false"] svg {
 			visibility: visible;
 			transform: rotate(0deg);
-			transition: transform 0.1s ease;
-			@include reduce-motion("transition");
+			@media not ( prefers-reduced-motion ) {
+				transition: transform 0.1s ease;
+			}
 		}
 	}
 }

package/src/components/list-view/style.scss

@@ -158,21 +158,27 @@
 	// without attaching the transition to the list view leaf itself. This prevents rows
 	// from animating too much once the user has dropped the block.
 	&.is-displacement-normal {
-		transition: transform 0.2s;
+		@media not ( prefers-reduced-motion ) {
+			transition: transform 0.2s;
+		}
 		transform: translateY(0);
-		@include reduce-motion("transition");
+
 	}
 
 	&.is-displacement-up {
-		transition: transform 0.2s;
+		@media not ( prefers-reduced-motion ) {
+			transition: transform 0.2s;
+		}
 		transform: translateY(-32px);
-		@include reduce-motion("transition");
+
 	}
 
 	&.is-displacement-down {
-		transition: transform 0.2s;
+		@media not ( prefers-reduced-motion ) {
+			transition: transform 0.2s;
+		}
 		transform: translateY(32px);
-		@include reduce-motion("transition");
+
 	}
 
 	// Collapse multi-selections down into a single row space while dragging. The following
@@ -180,23 +186,30 @@
 	// when displacing up and down. The result is that there should only ever be a single row's
 	// worth of space for the visual indicator of where a block will be placed when dropped.
 	&.is-after-dragged-blocks {
-		transition: transform 0.2s;
+
+		@media not ( prefers-reduced-motion ) {
+			transition: transform 0.2s;
+		}
 		transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
-		@include reduce-motion("transition");
+
 	}
 
 	&.is-after-dragged-blocks.is-displacement-up {
-		transition: transform 0.2s;
+		@media not ( prefers-reduced-motion ) {
+			transition: transform 0.2s;
+		}
 		transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
-		@include reduce-motion("transition");
+
 	}
 
 	&.is-after-dragged-blocks.is-displacement-down {
-		transition: transform 0.2s;
+		@media not ( prefers-reduced-motion ) {
+			transition: transform 0.2s;
+		}
 		transform:
 			translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) *
 			-1));
-		@include reduce-motion("transition");
+
 	}
 
 	// To ensure displaced rows behave correctly, ensure that blocks that are currently being dragged
@@ -233,7 +246,9 @@
 		font-weight: 400;
 		margin: 0;
 		text-decoration: none;
-		transition: box-shadow 0.1s linear;
+		@media not ( prefers-reduced-motion ) {
+			transition: box-shadow 0.1s linear;
+		}
 
 		.components-modal__content & {
 			padding-left: 0;
@@ -496,9 +511,10 @@ $block-navigation-max-indent: 8;
 .block-editor-list-view__expander
 svg {
 	visibility: visible;
-	transition: transform 0.2s ease;
+	@media not ( prefers-reduced-motion ) {
+		transition: transform 0.2s ease;
+	}
 	transform: rotate(90deg);
-	@include reduce-motion("transition");
 }
 
 // Point rightwards when closed
@@ -507,8 +523,9 @@ svg {
 svg {
 	visibility: visible;
 	transform: rotate(0deg);
-	transition: transform 0.2s ease;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: transform 0.2s ease;
+	}
 }
 
 .block-editor-list-view-drop-indicator {

package/src/components/rich-text/event-listeners/delete.js

@@ -6,7 +6,7 @@ import { isCollapsed, isEmpty } from '@wordpress/rich-text';
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
-		const { keyCode, shiftKey } = event;
+		const { keyCode, shiftKey, ctrlKey, metaKey } = event;
 
 		if ( event.defaultPrevented ) {
 			return;
@@ -30,8 +30,8 @@ export default ( props ) => ( element ) => {
 				return;
 			}
 
-			// Exclude shift+backspace as they are shortcuts for deleting blocks.
-			if ( shiftKey ) {
+			// Exclude (command|ctrl)+shift+backspace as they are shortcuts for deleting blocks.
+			if ( shiftKey && ( ctrlKey || metaKey ) ) {
 				return;
 			}
 

package/src/components/spacing-sizes-control/README.md

@@ -0,0 +1,93 @@
+# Spacing Sizes Control
+
+The SpacingSizesControl component provides a flexible user interface for controlling spacing values in blocks, allowing users to modify values for different sides. It supports three viewing modes:
+
+1. Single: Control one side at a time.
+2. Axial: Control horizontal and vertical sides together.
+3. Custom: Control each side separately.
+
+## Usage
+
+```jsx
+import { __experimentalSpacingSizesControl as SpacingSizesControl } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+function Example() {
+	const [ sides, setSides ] = useState( {
+		top: '0px',
+		right: '0px',
+		bottom: '0px',
+		left: '0px',
+	} );
+
+	return (
+		<SpacingSizesControl
+			values={ sides }
+			onChange={ setSides }
+			label="Sides"
+		/>
+	);
+}
+```
+
+## Props
+
+### `inputProps`
+
+-   Type: `Object`
+-   Required: No
+-   Description: Additional props to pass to the input controls.
+
+### `label`
+
+-   Type: `String`
+-   Required: Yes
+-   Description: Label for the control.
+
+### `minimumCustomValue`
+
+-   Type: `Number`
+-   Default: 0
+-   Description: Minimum value allowed for custom input.
+
+### `onChange`
+
+-   Type: `Function`
+-   Required: Yes
+-   Description: Callback function called when spacing values change. Receives an object containing the updated values.
+
+### `onMouseOut`
+
+-   Type: `Function`
+-   Required: No
+-   Description: Callback function called when mouse leaves the control.
+
+### `onMouseOver`
+
+-   Type: `Function`
+-   Required: No
+-   Description: Callback function called when mouse enters the control.
+
+### `showSideInLabel`
+
+-   Type: `Boolean`
+-   Default: true
+-   Description: Whether to show the side (top, right, etc.) in the control label.
+
+### `sides`
+
+-   Type: `Array`
+-   Default: ALL_SIDES (top, right, bottom, left)
+-   Description: Array of sides that can be controlled.
+
+### `useSelect`
+
+-   Type: `Boolean`
+-   Required: No
+-   Description: Whether to use a select control for predefined values.
+
+### `values`
+
+-   Type: `Object`
+-   Required: No
+-   Description: Object containing the current spacing values for each side.

package/src/components/spacing-sizes-control/index.js

@@ -12,11 +12,11 @@ import { _x, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import useSpacingSizes from './hooks/use-spacing-sizes';
 import AxialInputControls from './input-controls/axial';
 import SeparatedInputControls from './input-controls/separated';
 import SingleInputControl from './input-controls/single';
 import LinkedButton from './linked-button';
-import useSpacingSizes from './hooks/use-spacing-sizes';
 import {
 	ALL_SIDES,
 	DEFAULT_VALUES,
@@ -25,6 +25,49 @@ import {
 	getInitialView,
 } from './utils';
 
+/**
+ * A flexible control for managing spacing values in the block editor. Supports single, axial,
+ * and separated input controls for different spacing configurations with automatic view selection
+ * based on current values and available sides.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/spacing-sizes-control/README.md
+ *
+ * @example
+ * ```jsx
+ * import { __experimentalSpacingSizesControl as SpacingSizesControl } from '@wordpress/block-editor';
+ * import { useState } from '@wordpress/element';
+ *
+ * function Example() {
+ *   const [ sides, setSides ] = useState( {
+ *     top: '0px',
+ *     right: '0px',
+ *     bottom: '0px',
+ *     left: '0px',
+ *   } );
+ *
+ *   return (
+ *     <SpacingSizesControl
+ *       values={ sides }
+ *       onChange={ setSides }
+ *       label="Sides"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param {Object}   props                    Component props.
+ * @param {Object}   props.inputProps         Additional props for input controls.
+ * @param {string}   props.label              Label for the control.
+ * @param {number}   props.minimumCustomValue Minimum value for custom input.
+ * @param {Function} props.onChange           Called when spacing values change.
+ * @param {Function} props.onMouseOut         Called when mouse leaves the control.
+ * @param {Function} props.onMouseOver        Called when mouse enters the control.
+ * @param {boolean}  props.showSideInLabel    Show side in control label.
+ * @param {Array}    props.sides              Available sides for control.
+ * @param {boolean}  props.useSelect          Use select control for predefined values.
+ * @param {Object}   props.values             Current spacing values.
+ * @return {Element}                         Spacing sizes control component.
+ */
 export default function SpacingSizesControl( {
 	inputProps,
 	label: labelProp,

package/src/components/spacing-sizes-control/linked-button.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Button, Tooltip } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { link, linkOff } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -9,14 +9,12 @@ export default function LinkedButton( { isLinked, ...props } ) {
 	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
 
 	return (
-		<Tooltip text={ label }>
-			<Button
-				{ ...props }
-				size="small"
-				icon={ isLinked ? link : linkOff }
-				iconSize={ 24 }
-				aria-label={ label }
-			/>
-		</Tooltip>
+		<Button
+			{ ...props }
+			size="small"
+			icon={ isLinked ? link : linkOff }
+			iconSize={ 24 }
+			label={ label }
+		/>
 	);
 }