@wordpress/block-editor 13.4.0 → 14.1.0

package/src/components/block-list/use-block-props/use-block-refs.js

@@ -1,13 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	useContext,
-	useMemo,
-	useRef,
-	useState,
-	useLayoutEffect,
-} from '@wordpress/element';
+import { useContext, useState, useLayoutEffect } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -16,7 +10,7 @@ import { useRefEffect } from '@wordpress/compose';
 import { BlockRefs } from '../../provider/block-refs-provider';
 
 /** @typedef {import('@wordpress/element').RefCallback} RefCallback */
-/** @typedef {import('@wordpress/element').RefObject} RefObject */
+/** @typedef {import('@wordpress/element').Ref} Ref */
 
 /**
  * Provides a ref to the BlockRefs context.
@@ -36,31 +30,33 @@ export function useBlockRefProvider( clientId ) {
 	);
 }
 
+function assignRef( ref, value ) {
+	if ( typeof ref === 'function' ) {
+		ref( value );
+	} else if ( ref ) {
+		ref.current = value;
+	}
+}
+
 /**
- * Gets a ref pointing to the current block element. Continues to return the same
- * stable ref object even if the `clientId` argument changes. This hook is not
- * reactive, i.e., it won't trigger a rerender of the calling component if the
- * ref value changes. For reactive use cases there is the `useBlockElement` hook.
- *
- * @param {string} clientId The client ID to get a ref for.
+ * Tracks the DOM element for the block identified by `clientId` and assigns it to the `ref`
+ * whenever it changes.
  *
- * @return {RefObject} A ref containing the element.
+ * @param {string} clientId The client ID to track.
+ * @param {Ref}    ref      The ref object/callback to assign to.
  */
-function useBlockRef( clientId ) {
+export function useBlockElementRef( clientId, ref ) {
 	const { refsMap } = useContext( BlockRefs );
-	const latestClientId = useRef();
-	latestClientId.current = clientId;
-
-	// Always return an object, even if no ref exists for a given client ID, so
-	// that `current` works at a later point.
-	return useMemo(
-		() => ( {
-			get current() {
-				return refsMap.get( latestClientId.current ) ?? null;
-			},
-		} ),
-		[ refsMap ]
-	);
+	useLayoutEffect( () => {
+		assignRef( ref, refsMap.get( clientId ) );
+		const unsubscribe = refsMap.subscribe( clientId, () =>
+			assignRef( ref, refsMap.get( clientId ) )
+		);
+		return () => {
+			unsubscribe();
+			assignRef( ref, null );
+		};
+	}, [ refsMap, clientId, ref ] );
 }
 
 /**
@@ -71,20 +67,8 @@ function useBlockRef( clientId ) {
  *
  * @return {Element|null} The block's wrapper element.
  */
-function useBlockElement( clientId ) {
-	const { refsMap } = useContext( BlockRefs );
+export function useBlockElement( clientId ) {
 	const [ blockElement, setBlockElement ] = useState( null );
-	// Delay setting the resulting `blockElement` until an effect. If the block element
-	// changes (i.e., the block is unmounted and re-mounted), this allows enough time
-	// for the ref callbacks to clean up the old element and set the new one.
-	useLayoutEffect( () => {
-		setBlockElement( refsMap.get( clientId ) );
-		return refsMap.subscribe( clientId, () =>
-			setBlockElement( refsMap.get( clientId ) )
-		);
-	}, [ refsMap, clientId ] );
+	useBlockElementRef( clientId, setBlockElement );
 	return blockElement;
 }
-
-export { useBlockRef as __unstableUseBlockRef };
-export { useBlockElement as __unstableUseBlockElement };

package/src/components/block-list/use-in-between-inserter.js

@@ -25,6 +25,7 @@ export function useInBetweenInserter() {
 		getBlockIndex,
 		isMultiSelecting,
 		getSelectedBlockClientIds,
+		getSettings,
 		getTemplateLock,
 		__unstableIsWithinBlockOverlay,
 		getBlockEditingMode,
@@ -88,9 +89,11 @@ export function useInBetweenInserter() {
 					return;
 				}
 
+				const blockListSettings = getBlockListSettings( rootClientId );
 				const orientation =
-					getBlockListSettings( rootClientId )?.orientation ||
-					'vertical';
+					blockListSettings?.orientation || 'vertical';
+				const captureToolbars =
+					!! blockListSettings?.__experimentalCaptureToolbars;
 				const offsetTop = event.clientY;
 				const offsetLeft = event.clientX;
 
@@ -135,9 +138,18 @@ export function useInBetweenInserter() {
 					return;
 				}
 
-				// Don't show the inserter when hovering above (conflicts with
-				// block toolbar) or inside selected block(s).
-				if ( getSelectedBlockClientIds().includes( clientId ) ) {
+				// Don't show the inserter if the following conditions are met,
+				// as it conflicts with the block toolbar:
+				// 1. when hovering above or inside selected block(s)
+				// 2. when the orientation is vertical
+				// 3. when the __experimentalCaptureToolbars is not enabled
+				// 4. when the Top Toolbar is not disabled
+				if (
+					getSelectedBlockClientIds().includes( clientId ) &&
+					orientation === 'vertical' &&
+					! captureToolbars &&
+					! getSettings().hasFixedToolbar
+				) {
 					return;
 				}
 				const elementRect = element.getBoundingClientRect();

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

@@ -69,7 +69,11 @@ function BlockMover( {
 		[ clientIds ]
 	);
 
-	if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
+	if (
+		! canMove ||
+		( isFirst && isLast && ! rootClientId ) ||
+		( hideDragHandle && isManualGrid )
+	) {
 		return null;
 	}
 
@@ -85,7 +89,6 @@ function BlockMover( {
 						<Button
 							icon={ dragHandle }
 							className="block-editor-block-mover__drag-handle"
-							aria-hidden="true"
 							label={ __( 'Drag' ) }
 							// Should not be able to tab to drag handle as this
 							// button can only be used with a pointer device.

package/src/components/block-popover/cover.js

@@ -6,7 +6,7 @@ import { useEffect, useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import { PrivateBlockPopover } from '.';
 
 function BlockPopoverCover(

package/src/components/block-popover/inbetween.js

@@ -20,7 +20,7 @@ import { isRTL } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;

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

@@ -18,7 +18,7 @@ import {
 /**
  * Internal dependencies
  */
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;

package/src/components/block-settings-menu/block-mode-toggle.js

@@ -4,8 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
 import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,13 +13,23 @@ import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
 
-export function BlockModeToggle( {
-	blockType,
-	mode,
-	onToggleMode,
-	small = false,
-	isCodeEditingEnabled = true,
-} ) {
+export default function BlockModeToggle( { clientId, onToggle = noop } ) {
+	const { blockType, mode, isCodeEditingEnabled } = useSelect(
+		( select ) => {
+			const { getBlock, getBlockMode, getSettings } =
+				select( blockEditorStore );
+			const block = getBlock( clientId );
+
+			return {
+				mode: getBlockMode( clientId ),
+				blockType: block ? getBlockType( block.name ) : null,
+				isCodeEditingEnabled: getSettings().codeEditingEnabled,
+			};
+		},
+		[ clientId ]
+	);
+	const { toggleBlockMode } = useDispatch( blockEditorStore );
+
 	if (
 		! blockType ||
 		! hasBlockSupport( blockType, 'html', true ) ||
@@ -32,26 +41,14 @@ export function BlockModeToggle( {
 	const label =
 		mode === 'visual' ? __( 'Edit as HTML' ) : __( 'Edit visually' );
 
-	return <MenuItem onClick={ onToggleMode }>{ ! small && label }</MenuItem>;
+	return (
+		<MenuItem
+			onClick={ () => {
+				toggleBlockMode( clientId );
+				onToggle();
+			} }
+		>
+			{ label }
+		</MenuItem>
+	);
 }
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => {
-		const { getBlock, getBlockMode, getSettings } =
-			select( blockEditorStore );
-		const block = getBlock( clientId );
-		const isCodeEditingEnabled = getSettings().codeEditingEnabled;
-
-		return {
-			mode: getBlockMode( clientId ),
-			blockType: block ? getBlockType( block.name ) : null,
-			isCodeEditingEnabled,
-		};
-	} ),
-	withDispatch( ( dispatch, { onToggle = noop, clientId } ) => ( {
-		onToggleMode() {
-			dispatch( blockEditorStore ).toggleBlockMode( clientId );
-			onToggle();
-		},
-	} ) ),
-] )( BlockModeToggle );

package/src/components/block-settings-menu/test/block-mode-toggle.js

@@ -3,16 +3,32 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { BlockModeToggle } from '../block-mode-toggle';
+import BlockModeToggle from '../block-mode-toggle';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupUseSelectMock( mode, blockType, codeEditingEnabled = true ) {
+	useSelect.mockImplementation( () => {
+		return {
+			mode,
+			blockType,
+			isCodeEditingEnabled: codeEditingEnabled,
+		};
+	} );
+}
 
 describe( 'BlockModeToggle', () => {
 	it( "should not render the HTML mode button if the block doesn't support it", () => {
-		render(
-			<BlockModeToggle blockType={ { supports: { html: false } } } />
-		);
+		setupUseSelectMock( undefined, { supports: { html: false } } );
+		render( <BlockModeToggle /> );
 
 		expect(
 			screen.queryByRole( 'menuitem', { name: 'Edit as HTML' } )
@@ -20,12 +36,8 @@ describe( 'BlockModeToggle', () => {
 	} );
 
 	it( 'should render the HTML mode button', () => {
-		render(
-			<BlockModeToggle
-				blockType={ { supports: { html: true } } }
-				mode="visual"
-			/>
-		);
+		setupUseSelectMock( 'visual', { supports: { html: true } } );
+		render( <BlockModeToggle /> );
 
 		expect(
 			screen.getByRole( 'menuitem', { name: 'Edit as HTML' } )
@@ -33,12 +45,8 @@ describe( 'BlockModeToggle', () => {
 	} );
 
 	it( 'should render the Visual mode button', () => {
-		render(
-			<BlockModeToggle
-				blockType={ { supports: { html: true } } }
-				mode="html"
-			/>
-		);
+		setupUseSelectMock( 'html', { supports: { html: true } } );
+		render( <BlockModeToggle /> );
 
 		expect(
 			screen.getByRole( 'menuitem', { name: 'Edit visually' } )
@@ -46,13 +54,8 @@ describe( 'BlockModeToggle', () => {
 	} );
 
 	it( 'should not render the Visual mode button if code editing is disabled', () => {
-		render(
-			<BlockModeToggle
-				blockType={ { supports: { html: true } } }
-				mode="html"
-				isCodeEditingEnabled={ false }
-			/>
-		);
+		setupUseSelectMock( 'html', { supports: { html: true } }, false );
+		render( <BlockModeToggle /> );
 
 		expect(
 			screen.queryByRole( 'menuitem', { name: 'Edit visually' } )

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

@@ -37,7 +37,7 @@ import BlockTitle from '../block-title';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 import BlockDraggable from '../block-draggable';
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 
 /**
  * Block selection button component, displaying the label of the block. If the block
@@ -259,7 +259,6 @@ function BlockSelectionButton( { clientId, rootClientId }, ref ) {
 								<Button
 									icon={ dragHandle }
 									className="block-selection-button_drag-handle"
-									aria-hidden="true"
 									label={ dragHandleLabel }
 									// Should not be able to tab to drag handle as this
 									// button can only be used with a pointer device.

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

@@ -251,12 +251,11 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ window.__experimentalEnableZoomedOutPatternsTab &&
-					isZoomOutMode && (
-						<ZoomOutModeInserters
-							__unstableContentRef={ __unstableContentRef }
-						/>
-					) }
+				{ isZoomOutMode && (
+					<ZoomOutModeInserters
+						__unstableContentRef={ __unstableContentRef }
+					/>
+				) }
 			</InsertionPointOpenRef.Provider>
 		</div>
 	);

package/src/components/block-tools/insertion-point.js

@@ -38,6 +38,7 @@ function InbetweenInsertionPointPopover( {
 		isInserterShown,
 		isDistractionFree,
 		isNavigationMode,
+		isZoomOutMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockOrder,
@@ -48,6 +49,7 @@ function InbetweenInsertionPointPopover( {
 			getNextBlockClientId,
 			getSettings,
 			isNavigationMode: _isNavigationMode,
+			__unstableGetEditorMode,
 		} = select( blockEditorStore );
 		const insertionPoint = getBlockInsertionPoint();
 		const order = getBlockOrder( insertionPoint.rootClientId );
@@ -79,6 +81,7 @@ function InbetweenInsertionPointPopover( {
 			isNavigationMode: _isNavigationMode(),
 			isDistractionFree: settings.isDistractionFree,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 	const { getBlockEditingMode } = useSelect( blockEditorStore );
@@ -145,6 +148,14 @@ function InbetweenInsertionPointPopover( {
 		return null;
 	}
 
+	// Zoom out mode should only show the insertion point for the insert operation.
+	// Other operations such as "group" are when the editor tries to create a row
+	// block by grouping the block being dragged with the block it's being dropped
+	// onto.
+	if ( isZoomOutMode && operation !== 'insert' ) {
+		return null;
+	}
+
 	const orientationClassname =
 		orientation === 'horizontal' || operation === 'group'
 			? 'is-horizontal'

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

@@ -231,7 +231,7 @@
 		}
 
 		.block-editor-block-parent-selector__button {
-			border: 1px solid $gray-900;
+			border: $border-width solid $gray-900;
 			padding-right: 6px;
 			padding-left: 6px;
 			background-color: $white;

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -15,7 +15,7 @@ import {
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import { hasStickyOrFixedPositionValue } from '../../hooks/position';
 
 const COMMON_PROPS = {

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

@@ -20,6 +20,7 @@ export function useShowBlockTools() {
 			getSelectedBlockClientId,
 			getFirstMultiSelectedBlockClientId,
 			getBlock,
+			getBlockMode,
 			getSettings,
 			hasMultiSelection,
 			__unstableGetEditorMode,
@@ -33,7 +34,9 @@ export function useShowBlockTools() {
 		const editorMode = __unstableGetEditorMode();
 		const hasSelectedBlock = !! clientId && !! block;
 		const isEmptyDefaultBlock =
-			hasSelectedBlock && isUnmodifiedDefaultBlock( block );
+			hasSelectedBlock &&
+			isUnmodifiedDefaultBlock( block ) &&
+			getBlockMode( clientId ) !== 'html';
 		const _showEmptyBlockSideInserter =
 			clientId &&
 			! isTyping() &&

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
 /**
@@ -16,40 +16,44 @@ function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
 		hasSelection,
+		blockInsertionPoint,
 		blockOrder,
-		insertionPoint,
+		blockInsertionPointVisible,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
 		hoveredBlockClientId,
+		inserterSearchInputRef,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
+			getBlockInsertionPoint,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
 			getHoveredBlockClientId,
-		} = select( blockEditorStore );
+			isBlockInsertionPointVisible,
+			getInserterSearchInputRef,
+		} = unlock( select( blockEditorStore ) );
+
 		const { sectionRootClientId: root } = unlock( getSettings() );
-		// To do: move ZoomOutModeInserters to core/editor.
-		// Or we perhaps we should move the insertion point state to the
-		// block-editor store. I'm not sure what it was ever moved to the editor
-		// store, because all the inserter components all live in the
-		// block-editor package.
-		// eslint-disable-next-line @wordpress/data-no-store-string-literals
-		const editor = select( 'core/editor' );
+
 		return {
 			hasSelection: !! getSelectionStart().clientId,
+			blockInsertionPoint: getBlockInsertionPoint(),
 			blockOrder: getBlockOrder( root ),
-			insertionPoint: unlock( editor ).getInsertionPoint(),
+			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
 			hoveredBlockClientId: getHoveredBlockClientId(),
+			inserterSearchInputRef: getInserterSearchInputRef(),
 		};
 	}, [] );
 
+	const { showInsertionPoint } = useDispatch( blockEditorStore );
+
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
 		const timeout = setTimeout( () => {
@@ -65,14 +69,8 @@ function ZoomOutModeInserters() {
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		const shouldRenderInserter = insertionPoint.insertionIndex !== index;
-
 		const shouldRenderInsertionPoint =
-			insertionPoint.insertionIndex === index;
-
-		if ( ! shouldRenderInserter && ! shouldRenderInsertionPoint ) {
-			return null;
-		}
+			blockInsertionPointVisible && blockInsertionPoint.index === index;
 
 		const previousClientId = clientId;
 		const nextClientId = blockOrder[ index ];
@@ -104,7 +102,7 @@ function ZoomOutModeInserters() {
 						className="block-editor-block-list__insertion-point-indicator"
 					/>
 				) }
-				{ shouldRenderInserter && (
+				{ ! shouldRenderInsertionPoint && (
 					<ZoomOutModeInserterButton
 						isVisible={ isSelected || isHovered }
 						onClick={ () => {
@@ -114,6 +112,10 @@ function ZoomOutModeInserters() {
 								tab: 'patterns',
 								category: 'all',
 							} );
+							showInsertionPoint( sectionRootClientId, index, {
+								operation: 'insert',
+							} );
+							inserterSearchInputRef?.current?.focus();
 						} }
 					/>
 				) }

package/src/components/block-tools/zoom-out-toolbar.js

@@ -100,7 +100,6 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 						<Button
 							icon={ dragHandle }
 							className="block-selection-button_drag-handle zoom-out-toolbar-button"
-							aria-hidden="true"
 							label={ __( 'Drag' ) }
 							iconSize={ 24 }
 							size="compact"

package/src/components/block-variation-transforms/style.scss

@@ -3,7 +3,7 @@
 	width: 100%;
 
 	.components-dropdown-menu__toggle {
-		border: 1px solid $gray-700;
+		border: $border-width solid $gray-700;
 		border-radius: $radius-block-ui;
 		min-height: 30px;
 		width: 100%;

package/src/components/border-radius-control/index.js

@@ -104,6 +104,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							units={ units }
 						/>
 						<RangeControl
+							__next40pxDefaultSize
 							label={ __( 'Border radius' ) }
 							hideLabelFromVision
 							className="components-border-radius-control__range-control"

package/src/components/border-radius-control/style.scss

@@ -20,16 +20,6 @@
 		.components-border-radius-control__range-control {
 			flex: 1;
 			margin-right: $grid-unit-15;
-
-			> div {
-				height: 40px;
-				display: flex;
-				align-items: center;
-			}
-		}
-
-		> span {
-			flex: 0 0 auto;
 		}
 	}
 

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

@@ -52,7 +52,7 @@
 			left: 0;
 			pointer-events: none;
 			border: $border-width dashed currentColor;
-			@include placeholder-style();
+			border-radius: $radius-block-ui;
 		}
 
 		.block-editor-inserter {

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

@@ -174,6 +174,8 @@ function FlexControls( {
 						} );
 					} }
 					value={ flexSize }
+					label={ flexResetLabel }
+					hideLabelFromVision
 				/>
 			) }
 		</VStack>

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

@@ -45,7 +45,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
@@ -220,7 +220,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                           aria-label="Color: red"
                           aria-selected="true"
                           class="components-button components-circular-option-picker__option"
-                          data-active-item=""
+                          data-active-item="true"
                           id="components-circular-option-picker-0-0"
                           role="option"
                           style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"