@wordpress/block-editor 12.2.0 → 12.3.1

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

@@ -16,7 +16,10 @@ import {
 	useRef,
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import {
+	store as keyboardShortcutsStore,
+	__unstableUseShortcutEventMatch,
+} from '@wordpress/keyboard-shortcuts';
 import { pipe, useCopyToClipboard } from '@wordpress/compose';
 
 /**
@@ -30,17 +33,15 @@ import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import { store as blockEditorStore } from '../../store';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 
-const noop = () => {};
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 function CopyMenuItem( { blocks, onCopy, label } ) {
 	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
 	const copyMenuItemBlocksLabel =
-		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy block' );
+		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy' );
 	const copyMenuItemLabel = label ? label : copyMenuItemBlocksLabel;
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
@@ -63,7 +64,6 @@ export function BlockSettingsDropdown( {
 		onlyBlock,
 		parentBlockType,
 		previousBlockClientId,
-		nextBlockClientId,
 		selectedBlockClientIds,
 	} = useSelect(
 		( select ) => {
@@ -72,7 +72,6 @@ export function BlockSettingsDropdown( {
 				getBlockName,
 				getBlockRootClientId,
 				getPreviousBlockClientId,
-				getNextBlockClientId,
 				getSelectedBlockClientIds,
 				getSettings,
 				getBlockAttributes,
@@ -98,12 +97,13 @@ export function BlockSettingsDropdown( {
 						getBlockType( parentBlockName ) ),
 				previousBlockClientId:
 					getPreviousBlockClientId( firstBlockClientId ),
-				nextBlockClientId: getNextBlockClientId( firstBlockClientId ),
 				selectedBlockClientIds: getSelectedBlockClientIds(),
 			};
 		},
 		[ firstBlockClientId ]
 	);
+	const { getBlockOrder, getSelectedBlockClientIds } =
+		useSelect( blockEditorStore );
 
 	const shortcuts = useSelect( ( select ) => {
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
@@ -120,51 +120,47 @@ export function BlockSettingsDropdown( {
 			),
 		};
 	}, [] );
+	const isMatch = __unstableUseShortcutEventMatch();
 
 	const { selectBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );
+	const hasSelectedBlocks = selectedBlockClientIds.length > 0;
 
 	const updateSelectionAfterDuplicate = useCallback(
-		__experimentalSelectBlock
-			? async ( clientIdsPromise ) => {
-					const ids = await clientIdsPromise;
-					if ( ids && ids[ 0 ] ) {
-						__experimentalSelectBlock( ids[ 0 ] );
-					}
-			  }
-			: noop,
+		async ( clientIdsPromise ) => {
+			if ( __experimentalSelectBlock ) {
+				const ids = await clientIdsPromise;
+				if ( ids && ids[ 0 ] ) {
+					__experimentalSelectBlock( ids[ 0 ], false );
+				}
+			}
+		},
 		[ __experimentalSelectBlock ]
 	);
 
-	const updateSelectionAfterRemove = useCallback(
-		__experimentalSelectBlock
-			? () => {
-					const blockToSelect =
-						previousBlockClientId ||
-						nextBlockClientId ||
-						firstParentClientId;
+	const updateSelectionAfterRemove = useCallback( () => {
+		if ( __experimentalSelectBlock ) {
+			let blockToFocus = previousBlockClientId || firstParentClientId;
 
-					if (
-						blockToSelect &&
-						// From the block options dropdown, it's possible to remove a block that is not selected,
-						// in this case, it's not necessary to update the selection since the selected block wasn't removed.
-						selectedBlockClientIds.includes( firstBlockClientId ) &&
-						// Don't update selection when next/prev block also is in the selection ( and gets removed ),
-						// In case someone selects all blocks and removes them at once.
-						! selectedBlockClientIds.includes( blockToSelect )
-					) {
-						__experimentalSelectBlock( blockToSelect );
-					}
-			  }
-			: noop,
-		[
-			__experimentalSelectBlock,
-			previousBlockClientId,
-			nextBlockClientId,
-			firstParentClientId,
-			selectedBlockClientIds,
-		]
-	);
+			// Focus the first block if there's no previous block nor parent block.
+			if ( ! blockToFocus ) {
+				blockToFocus = getBlockOrder()[ 0 ];
+			}
+
+			// Only update the selection if the original selection is removed.
+			const shouldUpdateSelection =
+				hasSelectedBlocks && getSelectedBlockClientIds().length === 0;
+
+			__experimentalSelectBlock( blockToFocus, shouldUpdateSelection );
+		}
+	}, [
+		__experimentalSelectBlock,
+		previousBlockClientId,
+		firstParentClientId,
+		getBlockOrder,
+		hasSelectedBlocks,
+		getSelectedBlockClientIds,
+	] );
 
 	const removeBlockLabel =
 		count === 1 ? __( 'Delete' ) : __( 'Delete blocks' );
@@ -193,6 +189,7 @@ export function BlockSettingsDropdown( {
 			__experimentalUpdateSelection={ ! __experimentalSelectBlock }
 		>
 			{ ( {
+				canCopyStyles,
 				canDuplicate,
 				canInsertDefaultBlock,
 				canMove,
@@ -212,6 +209,49 @@ export function BlockSettingsDropdown( {
 					className="block-editor-block-settings-menu"
 					popoverProps={ POPOVER_PROPS }
 					noIcons
+					menuProps={ {
+						/**
+						 * @param {KeyboardEvent} event
+						 */
+						onKeyDown( event ) {
+							if ( event.defaultPrevented ) return;
+
+							if (
+								isMatch( 'core/block-editor/remove', event ) &&
+								canRemove
+							) {
+								event.preventDefault();
+								updateSelectionAfterRemove( onRemove() );
+							} else if (
+								isMatch(
+									'core/block-editor/duplicate',
+									event
+								) &&
+								canDuplicate
+							) {
+								event.preventDefault();
+								updateSelectionAfterDuplicate( onDuplicate() );
+							} else if (
+								isMatch(
+									'core/block-editor/insert-after',
+									event
+								) &&
+								canInsertDefaultBlock
+							) {
+								event.preventDefault();
+								onInsertAfter();
+							} else if (
+								isMatch(
+									'core/block-editor/insert-before',
+									event
+								) &&
+								canInsertDefaultBlock
+							) {
+								event.preventDefault();
+								onInsertBefore();
+							}
+						},
+					} }
 					{ ...props }
 				>
 					{ ( { onClose } ) => (
@@ -291,16 +331,18 @@ export function BlockSettingsDropdown( {
 									</>
 								) }
 							</MenuGroup>
-							<MenuGroup>
-								<CopyMenuItem
-									blocks={ blocks }
-									onCopy={ onCopy }
-									label={ __( 'Copy styles' ) }
-								/>
-								<MenuItem onClick={ onPasteStyles }>
-									{ __( 'Paste styles' ) }
-								</MenuItem>
-							</MenuGroup>
+							{ canCopyStyles && (
+								<MenuGroup>
+									<CopyMenuItem
+										blocks={ blocks }
+										onCopy={ onCopy }
+										label={ __( 'Copy styles' ) }
+									/>
+									<MenuItem onClick={ onPasteStyles }>
+										{ __( 'Paste styles' ) }
+									</MenuItem>
+								</MenuGroup>
+							) }
 							<BlockSettingsMenuControls.Slot
 								fillProps={ {
 									onClose,

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

@@ -196,8 +196,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 						className="block-editor-block-switcher"
 						label={ blockSwitcherLabel }
 						popoverProps={ {
-							position: 'bottom right',
-							variant: 'toolbar',
+							placement: 'bottom-start',
 							className: 'block-editor-block-switcher__popover',
 						} }
 						icon={

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

@@ -110,10 +110,6 @@
 		}
 	}
 
-	.block-editor-block-lock-toolbar {
-		margin-left: -$grid-unit-15 * 0.5 !important;
-	}
-
 	// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
 	// This is best fixed by making the mover control area a proper single toolbar group.
 	.components-toolbar-group {

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

@@ -59,6 +59,7 @@ export default function BlockTools( {
 		insertAfterBlock,
 		insertBeforeBlock,
 		clearSelectedBlock,
+		selectBlock,
 		moveBlocksUp,
 		moveBlocksDown,
 	} = useDispatch( blockEditorStore );
@@ -108,7 +109,15 @@ export default function BlockTools( {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
-				clearSelectedBlock();
+
+				// If there is more than one block selected, select the first
+				// block so that focus is directed back to the beginning of the selection.
+				// In effect, to the user this feels like deselecting the multi-selection.
+				if ( clientIds.length > 1 ) {
+					selectBlock( clientIds[ 0 ] );
+				} else {
+					clearSelectedBlock();
+				}
 				event.target.ownerDocument.defaultView
 					.getSelection()
 					.removeAllRanges();

package/src/components/block-tools/selected-block-popover.js

@@ -102,6 +102,12 @@ function SelectedBlockPopover( {
 	// to it when re-mounting.
 	const initialToolbarItemIndexRef = useRef();
 
+	useEffect( () => {
+		// Resets the index whenever the active block changes so this is not
+		// persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+		initialToolbarItemIndexRef.current = undefined;
+	}, [ clientId ] );
+
 	const popoverProps = useBlockToolbarPopoverProps( {
 		contentElement: __unstableContentRef?.current,
 		clientId,

package/src/components/block-vertical-alignment-control/ui.js

@@ -57,9 +57,7 @@ function BlockVerticalAlignmentUI( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar
-		? { isCollapsed }
-		: { popoverProps: { variant: 'toolbar' } };
+	const extraProps = isToolbar ? { isCollapsed } : {};
 
 	return (
 		<UIComponent

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -78,45 +78,52 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-10>* {
-  min-width: 0;
+  min-height: 0;
 }
 
-.emotion-13 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: calc(4px * 0.5);
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-12>* {
   min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
 }
 
-.emotion-15 {
+.emotion-14 {
   display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 <div>
@@ -157,30 +164,39 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                 class="components-dropdown"
                 tabindex="-1"
               >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  aria-label="Custom color picker. The currently selected color is called "red" and has a value of "f00"."
-                  class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
+                <div
+                  class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper emotion-10 emotion-5"
                   data-wp-c16t="true"
-                  data-wp-component="Flex"
-                  style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
+                  data-wp-component="VStack"
                 >
-                  <span
-                    class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
-                    data-wp-c16t="true"
-                    data-wp-component="FlexItem"
-                  >
-                    red
-                  </span>
-                  <span
-                    class="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+                  <button
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                    aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#-f-0-0"."
+                    class="components-color-palette__custom-color-button"
+                    style="background: rgb(255, 0, 0);"
+                  />
+                  <div
+                    class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-12 emotion-5"
                     data-wp-c16t="true"
-                    data-wp-component="FlexItem"
+                    data-wp-component="VStack"
                   >
-                    f00
-                  </span>
-                </button>
+                    <span
+                      class="components-truncate components-color-palette__custom-color-name emotion-14 emotion-5"
+                      data-wp-c16t="true"
+                      data-wp-component="Truncate"
+                    >
+                      red
+                    </span>
+                    <span
+                      class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-14 emotion-5"
+                      data-wp-c16t="true"
+                      data-wp-component="Truncate"
+                    >
+                      #f00
+                    </span>
+                  </div>
+                </div>
               </div>
               <div
                 class="components-circular-option-picker"

package/src/components/color-palette/with-color-context.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -23,7 +18,8 @@ export default createHigherOrderComponent( ( WrappedComponent ) => {
 			props.disableCustomColors === undefined
 				? disableCustomColorsFeature
 				: props.disableCustomColors;
-		const hasColorsToChoose = ! isEmpty( colors ) || ! disableCustomColors;
+		const hasColorsToChoose =
+			( colors && colors.length > 0 ) || ! disableCustomColors;
 		return (
 			<WrappedComponent
 				{ ...{

package/src/components/colors/utils.js

@@ -1,11 +1,15 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
 
+/**
+ * Internal dependencies
+ */
+import { kebabCase } from '../../utils/object';
+
 extend( [ namesPlugin, a11yPlugin ] );
 
 /**

package/src/components/colors/with-colors.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -19,6 +14,7 @@ import {
 	getMostReadableColor,
 } from './utils';
 import useSetting from '../use-setting';
+import { kebabCase } from '../../utils/object';
 
 /**
  * Capitalizes the first letter in a string.

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -58,10 +57,11 @@ function ColorGradientControlInner( {
 	headingLevel,
 } ) {
 	const canChooseAColor =
-		onColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );
+		onColorChange &&
+		( ( colors && colors.length > 0 ) || ! disableCustomColors );
 	const canChooseAGradient =
 		onGradientChange &&
-		( ! isEmpty( gradients ) || ! disableCustomGradients );
+		( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );
 
 	if ( ! canChooseAColor && ! canChooseAGradient ) {
 		return null;

package/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -43,14 +42,14 @@ export const PanelColorGradientSettingsInner = ( {
 	const panelId = useInstanceId( PanelColorGradientSettingsInner );
 	const { batch } = useRegistry();
 	if (
-		isEmpty( colors ) &&
-		isEmpty( gradients ) &&
+		( ! colors || colors.length === 0 ) &&
+		( ! gradients || gradients.length === 0 ) &&
 		disableCustomColors &&
 		disableCustomGradients &&
 		settings?.every(
 			( setting ) =>
-				isEmpty( setting.colors ) &&
-				isEmpty( setting.gradients ) &&
+				( ! setting.colors || setting.colors.length === 0 ) &&
+				( ! setting.gradients || setting.gradients.length === 0 ) &&
 				( setting.disableCustomColors === undefined ||
 					setting.disableCustomColors ) &&
 				( setting.disableCustomGradients === undefined ||

package/src/components/copy-handler/index.js

@@ -100,6 +100,11 @@ export function useClipboardHandler() {
 
 	return useRefEffect( ( node ) => {
 		function handler( event ) {
+			if ( event.defaultPrevented ) {
+				// This was likely already handled in rich-text/use-paste-handler.js.
+				return;
+			}
+
 			const selectedBlockClientIds = getSelectedBlockClientIds();
 
 			if ( selectedBlockClientIds.length === 0 ) {
@@ -127,7 +132,6 @@ export function useClipboardHandler() {
 				return;
 			}
 
-			const eventDefaultPrevented = event.defaultPrevented;
 			event.preventDefault();
 
 			const isSelectionMergeable = __unstableIsSelectionMergeable();
@@ -197,10 +201,6 @@ export function useClipboardHandler() {
 					__unstableDeleteSelection();
 				}
 			} else if ( event.type === 'paste' ) {
-				if ( eventDefaultPrevented ) {
-					// This was likely already handled in rich-text/use-paste-handler.js.
-					return;
-				}
 				const {
 					__experimentalCanUserUseUnfilteredHTML:
 						canUserUseUnfilteredHTML,

package/src/components/duotone-control/index.js

@@ -36,7 +36,6 @@ function DuotoneControl( {
 			popoverProps={ {
 				className: 'block-editor-duotone-control__popover',
 				headerTitle: __( 'Duotone' ),
-				variant: 'toolbar',
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const openOnArrowDown = ( event ) => {