@wordpress/block-editor 13.4.0 → 14.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.4.0",
+	"version": "14.0.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,35 +36,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.4.0",
-		"@wordpress/api-fetch": "^7.4.0",
-		"@wordpress/blob": "^4.4.0",
-		"@wordpress/blocks": "^13.4.0",
-		"@wordpress/commands": "^1.4.0",
-		"@wordpress/components": "^28.4.0",
-		"@wordpress/compose": "^7.4.0",
-		"@wordpress/data": "^10.4.0",
-		"@wordpress/date": "^5.4.0",
-		"@wordpress/deprecated": "^4.4.0",
-		"@wordpress/dom": "^4.4.0",
-		"@wordpress/element": "^6.4.0",
-		"@wordpress/escape-html": "^3.4.0",
-		"@wordpress/hooks": "^4.4.0",
-		"@wordpress/html-entities": "^4.4.0",
-		"@wordpress/i18n": "^5.4.0",
-		"@wordpress/icons": "^10.4.0",
-		"@wordpress/is-shallow-equal": "^5.4.0",
-		"@wordpress/keyboard-shortcuts": "^5.4.0",
-		"@wordpress/keycodes": "^4.4.0",
-		"@wordpress/notices": "^5.4.0",
-		"@wordpress/preferences": "^4.4.0",
-		"@wordpress/private-apis": "^1.4.0",
-		"@wordpress/rich-text": "^7.4.0",
-		"@wordpress/style-engine": "^2.4.0",
-		"@wordpress/token-list": "^3.4.0",
-		"@wordpress/url": "^4.4.0",
-		"@wordpress/warning": "^3.4.0",
-		"@wordpress/wordcount": "^4.4.0",
+		"@wordpress/a11y": "^4.5.0",
+		"@wordpress/api-fetch": "^7.5.0",
+		"@wordpress/blob": "^4.5.0",
+		"@wordpress/blocks": "^13.5.0",
+		"@wordpress/commands": "^1.5.0",
+		"@wordpress/components": "^28.5.0",
+		"@wordpress/compose": "^7.5.0",
+		"@wordpress/data": "^10.5.0",
+		"@wordpress/date": "^5.5.0",
+		"@wordpress/deprecated": "^4.5.0",
+		"@wordpress/dom": "^4.5.0",
+		"@wordpress/element": "^6.5.0",
+		"@wordpress/escape-html": "^3.5.0",
+		"@wordpress/hooks": "^4.5.0",
+		"@wordpress/html-entities": "^4.5.0",
+		"@wordpress/i18n": "^5.5.0",
+		"@wordpress/icons": "^10.5.0",
+		"@wordpress/is-shallow-equal": "^5.5.0",
+		"@wordpress/keyboard-shortcuts": "^5.5.0",
+		"@wordpress/keycodes": "^4.5.0",
+		"@wordpress/notices": "^5.5.0",
+		"@wordpress/preferences": "^4.5.0",
+		"@wordpress/private-apis": "^1.5.0",
+		"@wordpress/rich-text": "^7.5.0",
+		"@wordpress/style-engine": "^2.5.0",
+		"@wordpress/token-list": "^3.5.0",
+		"@wordpress/url": "^4.5.0",
+		"@wordpress/warning": "^3.5.0",
+		"@wordpress/wordcount": "^4.5.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "363edb39b8dda8727f652e42cbb8497732693ed2"
+	"gitHead": "c3101ab024e2bfc85d525c6d247e0d57cafc9fd9"
 }

package/src/autocompleters/style.scss

@@ -4,6 +4,10 @@
 	.block-editor-block-icon {
 		margin-right: $grid-unit-10;
 	}
+
+	&[aria-selected="true"] .block-editor-block-icon {
+		color: inherit !important;
+	}
 }
 
 .block-editor-autocompleters__link {

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

@@ -5,6 +5,7 @@ import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { chevronRightSmall, Icon } from '@wordpress/icons';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,7 +13,7 @@ import { chevronRightSmall, Icon } from '@wordpress/icons';
 import BlockTitle from '../block-title';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElementRef } from '../block-list/use-block-props/use-block-refs';
 import getEditorRegion from '../../utils/get-editor-region';
 
 /**
@@ -41,7 +42,8 @@ function BlockBreadcrumb( { rootLabelText } ) {
 
 	// We don't care about this specific ref, but this is a way
 	// to get a ref within the editor canvas so we can focus it later.
-	const blockRef = useBlockRef( clientId );
+	const blockRef = useRef();
+	useBlockElementRef( clientId, blockRef );
 
 	/*
 	 * Disable reason: The `list` ARIA role is redundant but

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

@@ -4,4 +4,5 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
+	@include editor-canvas-resize-animation;
 }

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

@@ -13,7 +13,7 @@ import { throttle } from '@wordpress/compose';
 import BlockDraggableChip from './draggable-chip';
 import useScrollWhenDragging from './use-scroll-when-dragging';
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import { isDropTargetValid } from '../use-block-drop-zone';
 
 const BlockDraggable = ( {
@@ -82,8 +82,8 @@ const BlockDraggable = ( {
 	}, [] );
 
 	// Find the root of the editor iframe.
-	const blockRef = useBlockRef( clientIds[ 0 ] );
-	const editorRoot = blockRef.current?.closest( 'body' );
+	const blockEl = useBlockElement( clientIds[ 0 ] );
+	const editorRoot = blockEl?.closest( 'body' );
 
 	/*
 	 * Add a dragover event listener to the editor root to track the blocks being dragged over.

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-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-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/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/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,8 +16,9 @@ function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
 		hasSelection,
+		blockInsertionPoint,
 		blockOrder,
-		insertionPoint,
+		blockInsertionPointVisible,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
@@ -25,23 +26,19 @@ function ZoomOutModeInserters() {
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
+			getBlockInsertionPoint,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
 			getHoveredBlockClientId,
+			isBlockInsertionPointVisible,
 		} = 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,
@@ -50,6 +47,8 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
+	const { showInsertionPoint } = useDispatch( blockEditorStore );
+
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
 		const timeout = setTimeout( () => {
@@ -65,14 +64,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 +97,7 @@ function ZoomOutModeInserters() {
 						className="block-editor-block-list__insertion-point-indicator"
 					/>
 				) }
-				{ shouldRenderInserter && (
+				{ ! shouldRenderInsertionPoint && (
 					<ZoomOutModeInserterButton
 						isVisible={ isSelected || isHovered }
 						onClick={ () => {
@@ -114,6 +107,9 @@ function ZoomOutModeInserters() {
 								tab: 'patterns',
 								category: 'all',
 							} );
+							showInsertionPoint( sectionRootClientId, index, {
+								operation: 'insert',
+							} );
 						} }
 					/>
 				) }

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/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);"

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
 
 /**
  * Internal dependencies
@@ -12,7 +13,7 @@ const noop = () => {};
 
 describe( 'ColorPaletteControl', () => {
 	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
-		render(
+		await render(
 			<ColorGradientControl
 				label="Test Color Gradient"
 				colorValue="#f00"

package/src/components/dimensions-tool/scale-tool.js

@@ -105,6 +105,7 @@ export default function ScaleTool( {
 			panelId={ panelId }
 		>
 			<ToggleGroupControl
+				__nextHasNoMarginBottom
 				label={ __( 'Scale' ) }
 				isBlock
 				help={ scaleHelp[ displayValue ] }

package/src/components/font-family/README.md

@@ -24,6 +24,7 @@ const MyFontFamilyControl = () => {
 			onChange={ ( newFontFamily ) => {
 				setFontFamily( newFontFamily );
 			} }
+			__nextHasNoMarginBottom
 		/>
 	);
 };
@@ -69,3 +70,10 @@ The current font family value.
 - Default: ''
 
 The rest of the props are passed down to the underlying `<SelectControl />` instance.
+
+#### `__nextHasNoMarginBottom`
+
+-   **Type:** `boolean`
+-   **Default:** `false`
+
+Start opting into the new margin-free styles that will become the default in a future version.

package/src/components/font-family/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { SelectControl } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -10,6 +11,8 @@ import { __ } from '@wordpress/i18n';
 import { useSettings } from '../use-settings';
 
 export default function FontFamilyControl( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMarginBottom = false,
 	value = '',
 	onChange,
 	fontFamilies,
@@ -33,8 +36,21 @@ export default function FontFamilyControl( {
 			};
 		} ),
 	];
+
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated(
+			'Bottom margin styles for wp.blockEditor.FontFamilyControl',
+			{
+				since: '6.7',
+				version: '7.0',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
+			}
+		);
+	}
+
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			label={ __( 'Font' ) }
 			options={ options }
 			value={ value }

package/src/components/font-family/stories/index.story.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontFamilyControl from '..';
+
+export default {
+	component: FontFamilyControl,
+	title: 'BlockEditor/FontFamilyControl',
+};
+
+export const Default = {
+	render: function Template( props ) {
+		const [ value, setValue ] = useState();
+		return (
+			<FontFamilyControl
+				onChange={ setValue }
+				value={ value }
+				{ ...props }
+			/>
+		);
+	},
+	args: {
+		fontFamilies: [
+			{
+				fontFace: [
+					{
+						fontFamily: 'Inter',
+						fontStretch: 'normal',
+						fontStyle: 'normal',
+						fontWeight: '200 900',
+						src: [
+							'file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf',
+						],
+					},
+				],
+				fontFamily: '"Inter", sans-serif',
+				name: 'Inter',
+				slug: 'inter',
+			},
+			{
+				fontFamily:
+					'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+				name: 'System Font',
+				slug: 'system-font',
+			},
+		],
+		__nextHasNoMarginBottom: true,
+	},
+};