@wordpress/block-editor 12.23.0 → 12.25.0

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

@@ -90,11 +90,6 @@
 		}
 	}
 
-	.block-editor-block-toolbar .components-toolbar-group,
-	.block-editor-block-toolbar .components-toolbar {
-		border-right-color: $gray-200;
-	}
-
 	& > .block-editor-block-toolbar {
 		flex-grow: initial;
 		width: initial;
@@ -109,14 +104,16 @@
 
 		// Parent selector dot divider
 		&::after {
-			content: "\00B7";
+			align-items: center;
+			background-color: $gray-900;
+			border-radius: 100%;
+			content: "";
+			display: inline-flex;
+			height: 2px;
 			position: absolute;
-			font-size: 16px;
 			right: 0;
-			height: $button-size-compact;
-			top: 0;
-			display: inline-flex;
-			align-items: center;
+			top: $grid-unit-20 - $border-width;
+			width: 2px;
 		}
 	}
 }

package/src/components/block-toolbar/use-has-block-toolbar.js

@@ -15,35 +15,42 @@ import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls
  * @return {boolean} Whether the block toolbar component will be rendered.
  */
 export function useHasBlockToolbar() {
-	const hasAnyBlockControls = useHasAnyBlockControls();
-	return useSelect(
+	const { isToolbarEnabled, isDefaultEditingMode } = useSelect(
 		( select ) => {
 			const {
 				getBlockEditingMode,
 				getBlockName,
-				getSelectedBlockClientIds,
+				getBlockSelectionStart,
 			} = select( blockEditorStore );
 
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-			const isDefaultEditingMode =
-				getBlockEditingMode( selectedBlockClientId ) === 'default';
+			// we only care about the 1st selected block
+			// for the toolbar, so we use getBlockSelectionStart
+			// instead of getSelectedBlockClientIds
+			const selectedBlockClientId = getBlockSelectionStart();
+
 			const blockType =
 				selectedBlockClientId &&
 				getBlockType( getBlockName( selectedBlockClientId ) );
-			const isToolbarEnabled =
-				blockType &&
-				hasBlockSupport( blockType, '__experimentalToolbar', true );
 
-			if (
-				! isToolbarEnabled ||
-				( ! isDefaultEditingMode && ! hasAnyBlockControls )
-			) {
-				return false;
-			}
-
-			return true;
+			return {
+				isToolbarEnabled:
+					blockType &&
+					hasBlockSupport( blockType, '__experimentalToolbar', true ),
+				isDefaultEditingMode:
+					getBlockEditingMode( selectedBlockClientId ) === 'default',
+			};
 		},
-		[ hasAnyBlockControls ]
+		[]
 	);
+
+	const hasAnyBlockControls = useHasAnyBlockControls();
+
+	if (
+		! isToolbarEnabled ||
+		( ! isDefaultEditingMode && ! hasAnyBlockControls )
+	) {
+		return false;
+	}
+
+	return true;
 }

package/src/components/block-tools/block-selection-button.js

@@ -63,6 +63,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				getNextBlockClientId,
 				getPreviousBlockClientId,
 				canRemoveBlock,
+				canMoveBlock,
 			} = select( blockEditorStore );
 			const { getActiveBlockVariation, getBlockType } =
 				select( blocksStore );
@@ -107,6 +108,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				isNextBlockTemplatePart,
 				isPrevBlockTemplatePart,
 				canRemove: canRemoveBlock( clientId, rootClientId ),
+				canMove: canMoveBlock( clientId, rootClientId ),
 			};
 		},
 		[ clientId, rootClientId ]
@@ -120,6 +122,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 		isNextBlockTemplatePart,
 		isPrevBlockTemplatePart,
 		canRemove,
+		canMove,
 	} = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 	const ref = useRef();
@@ -278,6 +281,9 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 	);
 
 	const dragHandleLabel = __( 'Drag' );
+	const showBlockDraggable =
+		( canMove && editorMode === 'navigation' ) ||
+		( editorMode === 'zoom-out' && canMove && ! isBlockTemplatePart );
 
 	return (
 		<div className={ classNames }>
@@ -288,20 +294,8 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				<FlexItem>
 					<BlockIcon icon={ icon } showColors />
 				</FlexItem>
-				<FlexItem>
-					{ editorMode === 'zoom-out' && ! isBlockTemplatePart && (
-						<BlockMover
-							clientIds={ [ clientId ] }
-							hideDragHandle
-							isBlockMoverUpButtonDisabled={
-								isPrevBlockTemplatePart
-							}
-							isBlockMoverDownButtonDisabled={
-								isNextBlockTemplatePart
-							}
-						/>
-					) }
-					{ editorMode === 'navigation' && (
+				{ showBlockDraggable && (
+					<FlexItem>
 						<BlockDraggable clientIds={ [ clientId ] }>
 							{ ( draggableProps ) => (
 								<Button
@@ -316,41 +310,59 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 								/>
 							) }
 						</BlockDraggable>
-					) }
-				</FlexItem>
-				{ editorMode === 'zoom-out' && (
+					</FlexItem>
+				) }
+				{ editorMode === 'zoom-out' && ! isBlockTemplatePart && (
+					<FlexItem>
+						<BlockMover
+							clientIds={ [ clientId ] }
+							hideDragHandle
+							isBlockMoverUpButtonDisabled={
+								isPrevBlockTemplatePart
+							}
+							isBlockMoverDownButtonDisabled={
+								isNextBlockTemplatePart
+							}
+						/>
+					</FlexItem>
+				) }
+				{ canMove && canRemove && editorMode === 'zoom-out' && (
 					<Shuffle clientId={ clientId } as={ Button } />
 				) }
 				{ canRemove &&
 					editorMode === 'zoom-out' &&
 					! isBlockTemplatePart && (
-						<ToolbarButton
-							icon={ trash }
-							label="Delete"
-							onClick={ () => {
-								removeBlock( clientId );
-							} }
-						/>
+						<FlexItem>
+							<ToolbarButton
+								icon={ trash }
+								label="Delete"
+								onClick={ () => {
+									removeBlock( clientId );
+								} }
+							/>
+						</FlexItem>
 					) }
-				<FlexItem>
-					<Button
-						ref={ ref }
-						onClick={
-							editorMode === 'navigation'
-								? () => setNavigationMode( false )
-								: undefined
-						}
-						onKeyDown={ onKeyDown }
-						label={ label }
-						showTooltip={ false }
-						className="block-selection-button_select-button"
-					>
-						<BlockTitle
-							clientId={ clientId }
-							maximumLength={ 35 }
-						/>
-					</Button>
-				</FlexItem>
+				{ editorMode === 'navigation' && (
+					<FlexItem>
+						<Button
+							ref={ ref }
+							onClick={
+								editorMode === 'navigation'
+									? () => setNavigationMode( false )
+									: undefined
+							}
+							onKeyDown={ onKeyDown }
+							label={ label }
+							showTooltip={ false }
+							className="block-selection-button_select-button"
+						>
+							<BlockTitle
+								clientId={ clientId }
+								maximumLength={ 35 }
+							/>
+						</Button>
+					</FlexItem>
+				) }
 			</Flex>
 		</div>
 	);

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

@@ -85,7 +85,9 @@ export default function BlockTools( {
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	function onKeyDown( event ) {
-		if ( event.defaultPrevented ) return;
+		if ( event.defaultPrevented ) {
+			return;
+		}
 
 		if ( isMatch( 'core/block-editor/move-up', event ) ) {
 			const clientIds = getSelectedBlockClientIds();

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

@@ -8,7 +8,6 @@ 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.
@@ -16,58 +15,44 @@ import { useHasBlockToolbar } from '../block-toolbar/use-has-block-toolbar';
  * @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 );
 
-	return useSelect(
-		( select ) => {
-			const {
-				getSelectedBlockClientId,
-				getFirstMultiSelectedBlockClientId,
-				getBlock,
-				getSettings,
-				hasMultiSelection,
-				__unstableGetEditorMode,
-				isTyping,
-			} = select( blockEditorStore );
+		const clientId =
+			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
-			const clientId =
-				getSelectedBlockClientId() ||
-				getFirstMultiSelectedBlockClientId();
+		const block = getBlock( clientId ) || { name: '', attributes: {} };
+		const editorMode = __unstableGetEditorMode();
+		const hasSelectedBlock = clientId && block?.name;
+		const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( block );
+		const _showEmptyBlockSideInserter =
+			clientId &&
+			! isTyping() &&
+			editorMode === 'edit' &&
+			isEmptyDefaultBlock;
+		const maybeShowBreadcrumb =
+			hasSelectedBlock &&
+			! hasMultiSelection() &&
+			( editorMode === 'navigation' || editorMode === 'zoom-out' );
 
-			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 =
+		return {
+			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
+			showBreadcrumb:
+				! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
+			showBlockToolbarPopover:
+				! getSettings().hasFixedToolbar &&
+				! _showEmptyBlockSideInserter &&
 				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 ]
-	);
+				! isEmptyDefaultBlock &&
+				! maybeShowBreadcrumb,
+		};
+	}, [] );
 }

package/src/components/block-tools/zoom-out-mode-inserters.js

@@ -10,11 +10,15 @@ import { useEffect, useState } from '@wordpress/element';
 import BlockPopoverInbetween from '../block-popover/inbetween';
 import { store as blockEditorStore } from '../../store';
 import Inserter from '../inserter';
+import { unlock } from '../../lock-unlock';
 
 function ZoomOutModeInserters( { __unstableContentRef } ) {
 	const [ isReady, setIsReady ] = useState( false );
 	const blockOrder = useSelect( ( select ) => {
-		return select( blockEditorStore ).getBlockOrder();
+		const { sectionRootClientId } = unlock(
+			select( blockEditorStore ).getSettings()
+		);
+		return select( blockEditorStore ).getBlockOrder( sectionRootClientId );
 	}, [] );
 
 	// Defer the initial rendering to avoid the jumps due to the animation.

package/src/components/block-variation-picker/content.scss

@@ -1,89 +1,39 @@
-.block-editor-block-variation-picker {
-	.components-placeholder__instructions {
-		// Defer to vertical margins applied by template picker options.
-		margin-bottom: 0;
-	}
-
-	.components-placeholder__fieldset {
-		// Options will render horizontally, but the immediate children of the
-		// fieldset are the options and the skip button, oriented vertically.
-		flex-direction: column;
-	}
-
-	&.has-many-variations .components-placeholder__fieldset {
-		// Allow options to occupy a greater amount of the available space if
-		// many options exist.
-		max-width: 90%;
-	}
-}
-
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
+.block-editor-block-variation-picker__variations,
+.block-editor-block-variation-picker__skip,
+.wp-block-group-placeholder__variations {
+	list-style: none;
 	display: flex;
 	justify-content: flex-start;
 	flex-direction: row;
 	flex-wrap: wrap;
 	width: 100%;
-	margin: $grid-unit-20 0;
 	padding: 0;
-	list-style: none;
+	margin: 0;
+	gap: $grid-unit-10;
+	font-size: $helptext-font-size;
 
-	> li {
-		list-style: none;
-		margin: $grid-unit-10 ( $grid-unit-10 + $grid-unit-15 ) 0 0;
-		flex-shrink: 1;
-		width: 75px;
-		text-align: center;
-
-		button {
-			display: inline-flex;
-			margin-right: 0;
-		}
+	svg {
+		fill: $gray-400 !important;
 	}
 
-	.block-editor-block-variation-picker__variation {
-		padding: $grid-unit-10;
+	.components-button {
+		padding: 4px;
 	}
 
-	.block-editor-block-variation-picker__variation-label {
-		font-family: $default-font;
-		font-size: 12px;
-		display: block;
-		line-height: 1.4;
+	.components-button:hover {
+		background: none !important; // !important to simplify the selector.
 	}
-}
 
-.block-editor-block-variation-picker__variation {
-	width: 100%;
-
-	&.components-button.has-icon {
-		// Override default styles inherited from <Button /> to center
-		// icon horizontally.
-		justify-content: center;
-		width: auto;
-
-		&.is-secondary {
-			background-color: $white;
-		}
-	}
-
-	&.components-button {
-		// Override default styles inherited from <Button /> to allow button
-		// to grow vertically.
-		height: auto;
-		padding: 0;
-	}
-
-	&::before {
-		// Use `padding-bottom` trick to style element as perfect square.
-		content: "";
-		padding-bottom: 100%;
-	}
-
-	&:first-child {
-		margin-left: 0;
+	.components-button:hover svg {
+		fill: var(--wp-admin-theme-color) !important;
 	}
 
-	&:last-child {
-		margin-right: 0;
+	& > li {
+		width: auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: $grid-unit-05;
 	}
 }
+

package/src/components/block-variation-picker/index.js

@@ -13,7 +13,7 @@ import { layout } from '@wordpress/icons';
 function BlockVariationPicker( {
 	icon = layout,
 	label = __( 'Choose variation' ),
-	instructions = __( 'Select a variation to start with.' ),
+	instructions = __( 'Select a variation to start with:' ),
 	variations,
 	onSelect,
 	allowSkip,
@@ -42,7 +42,8 @@ function BlockVariationPicker( {
 				{ variations.map( ( variation ) => (
 					<li key={ variation.name }>
 						<Button
-							variant="secondary"
+							__next40pxDefaultSize
+							variant="tertiary"
 							icon={
 								variation.icon && variation.icon.src
 									? variation.icon.src

package/src/components/block-variation-transforms/index.js

@@ -116,7 +116,9 @@ function VariationsToggleGroupControl( {
 				{ variations.map( ( variation ) => (
 					<ToggleGroupControlOptionIcon
 						key={ variation.name }
-						icon={ variation.icon }
+						icon={
+							<BlockIcon icon={ variation.icon } showColors />
+						}
 						value={ variation.name }
 						label={
 							selectedValue === variation.name
@@ -178,7 +180,9 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	};
 
 	// Skip rendering if there are no variations
-	if ( ! variations?.length ) return null;
+	if ( ! variations?.length ) {
+		return null;
+	}
 
 	const baseClass = 'block-editor-block-variation-transforms';
 

package/src/components/button-block-appender/index.native.js

@@ -9,6 +9,7 @@ import { View } from 'react-native';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
 import { Icon, plusCircleFilled } from '@wordpress/icons';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,6 +24,20 @@ function ButtonBlockAppender( {
 	isFloating = false,
 	onAddBlock,
 } ) {
+	const onAppenderPress = useCallback(
+		( onToggle ) => () => {
+			if ( onAddBlock ) {
+				onAddBlock();
+				return;
+			}
+
+			if ( onToggle ) {
+				onToggle();
+			}
+		},
+		[ onAddBlock ]
+	);
+
 	const appenderStyle = {
 		...styles.appender,
 		...getStylesFromColorScheme(
@@ -44,7 +59,7 @@ function ButtonBlockAppender( {
 				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
 					<Button
 						testID="appender-button"
-						onClick={ onAddBlock || onToggle }
+						onClick={ onAppenderPress( onToggle ) }
 						aria-expanded={ isOpen }
 						disabled={ disabled }
 						fixedRatio={ false }

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

@@ -31,7 +31,7 @@
 	// 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(.wp-site-blocks) & {
-		> :first-child:first-child {
+		> :first-child {
 			margin-block-start: 0;
 			margin-block-end: 0;
 		}

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

@@ -9,7 +9,7 @@ import a11yPlugin from 'colord/plugins/a11y';
  * WordPress dependencies
  */
 import { SVG } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -67,7 +67,7 @@ function useDarkThemeBodyClassName( styles, scope ) {
 	);
 }
 
-export default function EditorStyles( { styles, scope } ) {
+function EditorStyles( { styles, scope } ) {
 	const overrides = useSelect(
 		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
 		[]
@@ -124,3 +124,5 @@ export default function EditorStyles( { styles, scope } ) {
 		</>
 	);
 }
+
+export default memo( EditorStyles );

package/src/components/floating-toolbar/index.native.js

@@ -47,8 +47,9 @@ const FloatingToolbar = ( {
 	}, [ showFloatingToolbar ] );
 
 	useEffect( () => {
-		if ( showFloatingToolbar )
+		if ( showFloatingToolbar ) {
 			setPreviousSelection( { clientId: selectedClientId, parentId } );
+		}
 	}, [ selectedClientId ] );
 
 	const translationRange =
@@ -115,7 +116,9 @@ export default compose( [
 
 		const selectedClientId = getSelectedBlockClientId();
 
-		if ( ! selectedClientId ) return;
+		if ( ! selectedClientId ) {
+			return;
+		}
 
 		const rootBlockId = getBlockHierarchyRootClientId( selectedClientId );