@wordpress/block-editor 14.4.0 → 14.6.0

package/src/components/list-view/branch.js

@@ -5,7 +5,7 @@ import {
 	__experimentalTreeGridRow as TreeGridRow,
 	__experimentalTreeGridCell as TreeGridCell,
 } from '@wordpress/components';
-import { memo } from '@wordpress/element';
+import { memo, useRef } from '@wordpress/element';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 
 /**
@@ -123,6 +123,8 @@ function ListViewBranch( props ) {
 		draggedClientIds,
 	} = useListViewContext();
 
+	const nextPositionRef = useRef();
+
 	if ( ! canParentExpand ) {
 		return null;
 	}
@@ -133,7 +135,7 @@ function ListViewBranch( props ) {
 	const blockCount = filteredBlocks.length;
 	// The appender means an extra row in List View, so add 1 to the row count.
 	const rowCount = showAppender ? blockCount + 1 : blockCount;
-	let nextPosition = listPosition;
+	nextPositionRef.current = listPosition;
 
 	return (
 		<>
@@ -141,7 +143,7 @@ function ListViewBranch( props ) {
 				const { clientId, innerBlocks } = block;
 
 				if ( index > 0 ) {
-					nextPosition += countBlocks(
+					nextPositionRef.current += countBlocks(
 						filteredBlocks[ index - 1 ],
 						expandedState,
 						draggedClientIds,
@@ -165,7 +167,7 @@ function ListViewBranch( props ) {
 					} );
 
 				const { itemInView } = fixedListWindow;
-				const blockInView = itemInView( nextPosition );
+				const blockInView = itemInView( nextPositionRef.current );
 
 				const position = index + 1;
 				const updatedPath =
@@ -218,7 +220,7 @@ function ListViewBranch( props ) {
 								showBlockMovers={ showBlockMovers }
 								path={ updatedPath }
 								isExpanded={ isDragged ? false : shouldExpand }
-								listPosition={ nextPosition }
+								listPosition={ nextPositionRef.current }
 								selectedClientIds={ selectedClientIds }
 								isSyncedBranch={ syncedBranch }
 								displacement={ displacement }
@@ -239,7 +241,7 @@ function ListViewBranch( props ) {
 								showBlockMovers={ showBlockMovers }
 								level={ level + 1 }
 								path={ updatedPath }
-								listPosition={ nextPosition + 1 }
+								listPosition={ nextPositionRef.current + 1 }
 								fixedListWindow={ fixedListWindow }
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }

package/src/components/list-view/index.js

@@ -185,8 +185,7 @@ function ListViewComponent(
 		if ( selectedClientIds?.length ) {
 			focusListItem( selectedClientIds[ 0 ], elementRef?.current );
 		}
-		// Disable reason: Only focus on the selected item when the list view is mounted.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Only focus on the selected item when the list view is mounted.
 	}, [] );
 
 	const expand = useCallback(

package/src/components/media-replace-flow/test/index.js

@@ -110,7 +110,7 @@ describe( 'General media replace flow', () => {
 		);
 
 		const mediaURLInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 			expanded: false,
 		} );
 

package/src/components/provider/index.js

@@ -46,9 +46,7 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 		return (
 			<SlotFillProvider passthrough>
-				{ ! settings?.__unstableIsPreviewMode && (
-					<KeyboardShortcuts.Register />
-				) }
+				{ ! settings?.isPreviewMode && <KeyboardShortcuts.Register /> }
 				<BlockRefsProvider>{ children }</BlockRefsProvider>
 			</SlotFillProvider>
 		);

package/src/components/provider/test/experimental-provider.js

@@ -5,7 +5,7 @@ import { render } from '@testing-library/react';
 /**
  * WordPress dependencies
  */
-import { useRegistry } from '@wordpress/data';
+import { useRegistry, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -21,6 +21,20 @@ const HasEditorSetting = ( props ) => {
 	return <p>Test.</p>;
 };
 
+const PreviewModeGetter = () => {
+	const previewModeKeys = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+		return {
+			// This property will be removed in the future. There is a test that asserts we're throwing a deprecation warning.
+			__unstableIsPreviewMode: settings.__unstableIsPreviewMode,
+			isPreviewMode: settings.isPreviewMode,
+		};
+	}, [] );
+
+	return <>{ JSON.stringify( previewModeKeys ) }</>;
+};
+
 describe( 'BlockEditorProvider', () => {
 	let registry;
 	const setRegistry = ( reg ) => {
@@ -58,6 +72,34 @@ describe( 'BlockEditorProvider', () => {
 		const settings = registry.select( blockEditorStore ).getSettings();
 		expect( settings ).toHaveProperty( 'stableSetting' );
 	} );
+	it( 'preserves deprecated getters incoming from the settings reducer', async () => {
+		const consoleWarn = jest
+			.spyOn( global.console, 'warn' )
+			.mockImplementation();
+
+		const { container } = render(
+			<BlockEditorProvider
+				settings={ {
+					isPreviewMode: true,
+				} }
+			>
+				<PreviewModeGetter />
+			</BlockEditorProvider>
+		);
+
+		expect( container ).toHaveTextContent(
+			JSON.stringify( {
+				__unstableIsPreviewMode: true,
+				isPreviewMode: true,
+			} )
+		);
+
+		expect( consoleWarn ).toHaveBeenCalledWith(
+			'__unstableIsPreviewMode is deprecated since version 6.8. Please use isPreviewMode instead.'
+		);
+
+		consoleWarn.mockRestore();
+	} );
 } );
 
 describe( 'ExperimentalBlockEditorProvider', () => {

package/src/components/responsive-block-control/style.scss

@@ -1,6 +1,5 @@
 @mixin screen-reader-text() {
 	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
 	clip-path: inset(50%);
 	height: 1px;
 	margin: -1px;

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useRef } from '@wordpress/element';
+import { useMemo, useRef, useInsertionEffect } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -35,7 +35,9 @@ const allEventListeners = [
 
 export function useEventListeners( props ) {
 	const propsRef = useRef( props );
-	propsRef.current = props;
+	useInsertionEffect( () => {
+		propsRef.current = props;
+	} );
 	const refEffects = useMemo(
 		() => allEventListeners.map( ( refEffect ) => refEffect( propsRef ) ),
 		[ propsRef ]

package/src/components/rich-text/index.native.js

@@ -212,7 +212,6 @@ export function RichTextWrapper(
 				selectionChangeEnd
 			);
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ clientId, identifier ]
 	);
 
@@ -368,7 +367,6 @@ export function RichTextWrapper(
 				onChange( insert( value, '\n' ) );
 			}
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
 			onReplace,
 			onSplit,

package/src/components/rich-text/style.scss

@@ -9,12 +9,17 @@
 		margin-bottom: $grid-unit-10;
 		box-shadow: none;
 		outline: none;
+		border-radius: $radius-small;
 	}
 
 	.components-toolbar {
 		border-radius: $radius-small;
 	}
 
+	.components-toolbar-group {
+		background: none;
+	}
+
 	.components-toolbar__control,
 	.components-dropdown-menu__toggle {
 		min-width: $block-toolbar-height;

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

@@ -7,7 +7,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -89,8 +89,8 @@ export default function SpacingSizesControl( {
 		ALL_SIDES.includes( view ) && showSideInLabel ? LABELS[ view ] : '';
 
 	const label = sprintf(
-		// translators: 2. Type of spacing being modified (Padding, margin, etc). 1: The side of the block being modified (top, bottom, left etc.).
-		__( '%1$s %2$s' ),
+		// translators: 1: The side of the block being modified (top, bottom, left etc.). 2. Type of spacing being modified (padding, margin, etc).
+		_x( '%1$s %2$s', 'spacing' ),
 		labelProp,
 		sideLabel
 	).trim();

package/src/components/spacing-sizes-control/input-controls/spacing-input-control.js

@@ -14,7 +14,7 @@ import {
 import { useSelect } from '@wordpress/data';
 import { useState, useMemo } from '@wordpress/element';
 import { usePrevious } from '@wordpress/compose';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 
 /**
@@ -124,7 +124,7 @@ export default function SpacingInputControl( {
 			...spacingSizes,
 			{
 				name: ! isMixed
-					? // translators: A custom measurement, eg. a number followed by a unit like 12px.
+					? // translators: %s: A custom measurement, e.g. a number followed by a unit like 12px.
 					  sprintf( __( 'Custom (%s)' ), value )
 					: __( 'Mixed' ),
 				slug: 'custom',
@@ -200,8 +200,8 @@ export default function SpacingInputControl( {
 	const typeLabel = showSideInLabel ? type?.toLowerCase() : type;
 
 	const ariaLabel = sprintf(
-		// translators: 1: The side of the block being modified (top, bottom, left, All sides etc.). 2. Type of spacing being modified (Padding, margin, etc)
-		__( '%1$s %2$s' ),
+		// translators: 1: The side of the block being modified (top, bottom, left etc.). 2. Type of spacing being modified (padding, margin, etc).
+		_x( '%1$s %2$s', 'spacing' ),
 		sideLabel,
 		typeLabel
 	).trim();

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

@@ -3,20 +3,10 @@
  */
 import { Button, Tooltip } from '@wordpress/components';
 import { link, linkOff } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 export default function LinkedButton( { isLinked, ...props } ) {
-	const label = isLinked
-		? sprintf(
-				// translators: 1. Type of spacing being modified (padding, margin, etc).
-				__( 'Unlink %1$s' ),
-				props.label.toLowerCase()
-		  ).trim()
-		: sprintf(
-				// translators: 1. Type of spacing being modified (padding, margin, etc).
-				__( 'Link %1$s' ),
-				props.label.toLowerCase()
-		  ).trim();
+	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
 
 	return (
 		<Tooltip text={ label }>

package/src/components/tool-selector/index.js

@@ -18,7 +18,6 @@ import { Icon, edit as editIcon } from '@wordpress/icons';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
 const selectIcon = (
 	<SVG
@@ -36,9 +35,7 @@ function ToolSelector( props, ref ) {
 		( select ) => select( blockEditorStore ).__unstableGetEditorMode(),
 		[]
 	);
-	const { __unstableSetEditorMode } = unlock(
-		useDispatch( blockEditorStore )
-	);
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 
 	return (
 		<Dropdown
@@ -67,7 +64,9 @@ function ToolSelector( props, ref ) {
 							value={
 								mode === 'navigation' ? 'navigation' : 'edit'
 							}
-							onSelect={ __unstableSetEditorMode }
+							onSelect={ ( newMode ) => {
+								__unstableSetEditorMode( newMode );
+							} }
 							choices={ [
 								{
 									value: 'navigation',
@@ -78,6 +77,7 @@ function ToolSelector( props, ref ) {
 										</>
 									),
 									info: __( 'Focus on content.' ),
+									'aria-label': __( 'Write' ),
 								},
 								{
 									value: 'edit',
@@ -88,6 +88,7 @@ function ToolSelector( props, ref ) {
 										</>
 									),
 									info: __( 'Edit layout and styles.' ),
+									'aria-label': __( 'Design' ),
 								},
 							] }
 						/>

package/src/components/url-input/index.js

@@ -196,7 +196,7 @@ class URLInput extends Component {
 				if ( !! suggestions.length ) {
 					this.props.debouncedSpeak(
 						sprintf(
-							/* translators: %s: number of results. */
+							/* translators: %d: number of results. */
 							_n(
 								'%d result found, use up and down arrow keys to navigate.',
 								'%d results found, use up and down arrow keys to navigate.',

package/src/components/use-block-commands/index.js

@@ -113,7 +113,7 @@ export const useTransformCommands = () => {
 		const { name, title, icon } = transformation;
 		return {
 			name: 'core/block-editor/transform-to-' + name.replace( '/', '-' ),
-			// translators: %s: block title/name.
+			/* translators: %s: Block or block variation name. */
 			label: sprintf( __( 'Transform to %s' ), title ),
 			icon: <BlockIcon icon={ icon } />,
 			callback: ( { close } ) => {

package/src/components/use-block-drop-zone/index.js

@@ -287,7 +287,7 @@ function isInsertionPoint( targetToCheck, ownerDocument ) {
 	return !! (
 		defaultView &&
 		targetToCheck instanceof defaultView.HTMLElement &&
-		targetToCheck.dataset.isInsertionPoint
+		targetToCheck.closest( '[data-is-insertion-point]' )
 	);
 }
 
@@ -330,7 +330,7 @@ export default function useBlockDropZone( {
 		getAllowedBlocks,
 		isDragging,
 		isGroupable,
-		isZoomOutMode,
+		isZoomOut,
 		getSectionRootClientId,
 	} = unlock( useSelect( blockEditorStore ) );
 	const {
@@ -383,7 +383,7 @@ export default function useBlockDropZone( {
 				// do not allow dropping as the drop target is not within the root (that which is
 				// treated as "the content" by Zoom Out Mode).
 				if (
-					isZoomOutMode() &&
+					isZoomOut() &&
 					sectionRootClientId !== targetRootClientId
 				) {
 					return;
@@ -439,7 +439,7 @@ export default function useBlockDropZone( {
 				const [ targetIndex, operation, nearestSide ] =
 					dropTargetPosition;
 
-				if ( isZoomOutMode() && operation !== 'insert' ) {
+				if ( isZoomOut() && operation !== 'insert' ) {
 					return;
 				}
 
@@ -514,7 +514,7 @@ export default function useBlockDropZone( {
 				getDraggedBlockClientIds,
 				getBlockType,
 				getSectionRootClientId,
-				isZoomOutMode,
+				isZoomOut,
 				getBlocks,
 				getBlockListSettings,
 				dropZoneElement,

package/src/components/use-block-drop-zone/index.native.js

@@ -132,7 +132,6 @@ export default function useBlockDropZone( {
 	const getSortedBlocksLayouts = useCallback( () => {
 		return getBlockLayoutsOrderedByYCoord( blocksLayouts.current );
 		// We use the value of `blocksLayouts` as the dependency.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ blocksLayouts.current ] );
 
 	const isRTL = getSettings().isRTL;

package/src/components/use-moving-animation/index.js

@@ -61,7 +61,6 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 			previous: ref.current && getAbsolutePosition( ref.current ),
 			prevRect: ref.current && ref.current.getBoundingClientRect(),
 		} ),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ triggerAnimationOnChange ]
 	);
 

package/src/components/use-resize-canvas/index.js

@@ -43,11 +43,9 @@ export default function useResizeCanvas( deviceType ) {
 		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
 	};
 
-	const marginValue = () => ( window.innerHeight < 800 ? 36 : 64 );
-
 	const contentInlineStyles = ( device ) => {
 		const height = device === 'Mobile' ? '768px' : '1024px';
-		const marginVertical = marginValue() + 'px';
+		const marginVertical = '40px';
 		const marginHorizontal = 'auto';
 
 		switch ( device ) {

package/src/components/use-settings/index.js

@@ -32,7 +32,6 @@ export function useSettings( ...paths ) {
 				clientId,
 				...paths
 			),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ clientId, ...paths ]
 	);
 }

package/src/components/writing-flow/index.js

@@ -47,19 +47,21 @@ export function useWritingFlow() {
 			useRefEffect(
 				( node ) => {
 					node.tabIndex = 0;
+					node.dataset.hasMultiSelection = hasMultiSelection;
 
 					if ( ! hasMultiSelection ) {
-						return;
+						return () => {
+							delete node.dataset.hasMultiSelection;
+						};
 					}
 
-					node.classList.add( 'has-multi-selection' );
 					node.setAttribute(
 						'aria-label',
 						__( 'Multiple selected blocks' )
 					);
 
 					return () => {
-						node.classList.remove( 'has-multi-selection' );
+						delete node.dataset.hasMultiSelection;
 						node.removeAttribute( 'aria-label' );
 					};
 				},

package/src/components/writing-flow/use-tab-nav.js

@@ -19,10 +19,16 @@ export default function useTabNav() {
 	const focusCaptureBeforeRef = useRef();
 	const focusCaptureAfterRef = useRef();
 
-	const { hasMultiSelection, getSelectedBlockClientId, getBlockCount } =
-		useSelect( blockEditorStore );
+	const {
+		hasMultiSelection,
+		getSelectedBlockClientId,
+		getBlockCount,
+		getBlockOrder,
+		getLastFocus,
+		getSectionRootClientId,
+		isZoomOut,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { setLastFocus } = unlock( useDispatch( blockEditorStore ) );
-	const { getLastFocus } = unlock( useSelect( blockEditorStore ) );
 
 	// Reference that holds the a flag for enabling or disabling
 	// capturing on the focus capture elements.
@@ -45,6 +51,24 @@ export default function useTabNav() {
 					)
 					.focus();
 			}
+		}
+		// In "compose" mode without a selected ID, we want to place focus on the section root when tabbing to the canvas.
+		else if ( isZoomOut() ) {
+			const sectionRootClientId = getSectionRootClientId();
+			const sectionBlocks = getBlockOrder( sectionRootClientId );
+
+			// If we have section within the section root, focus the first one.
+			if ( sectionBlocks.length ) {
+				container.current
+					.querySelector( `[data-block="${ sectionBlocks[ 0 ] }"]` )
+					.focus();
+			}
+			// If we don't have any section blocks, focus the section root.
+			else {
+				container.current
+					.querySelector( `[data-block="${ sectionRootClientId }"]` )
+					.focus();
+			}
 		} else {
 			const canvasElement =
 				container.current.ownerDocument === event.target.ownerDocument
@@ -61,7 +85,6 @@ export default function useTabNav() {
 				const next = isBefore
 					? tabbables[ 0 ]
 					: tabbables[ tabbables.length - 1 ];
-
 				next.focus();
 			}
 		}

package/src/hooks/block-bindings.js

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	getBlockBindingsSource,
 	getBlockBindingsSources,
+	getBlockType,
 } from '@wordpress/blocks';
 import {
 	__experimentalItemGroup as ItemGroup,
@@ -29,10 +30,11 @@ import {
 import { unlock } from '../lock-unlock';
 import InspectorControls from '../components/inspector-controls';
 import BlockContext from '../components/block-context';
+import { useBlockEditContext } from '../components/block-edit';
 import { useBlockBindingsUtils } from '../utils/block-bindings';
 import { store as blockEditorStore } from '../store';
 
-const { DropdownMenuV2 } = unlock( componentsPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
 
 const EMPTY_OBJECT = {};
 
@@ -50,45 +52,60 @@ const useToolsPanelDropdownMenuProps = () => {
 };
 
 function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
+	const { clientId } = useBlockEditContext();
 	const registeredSources = getBlockBindingsSources();
 	const { updateBlockBindings } = useBlockBindingsUtils();
 	const currentKey = binding?.args?.key;
+	const attributeType = useSelect(
+		( select ) => {
+			const { name: blockName } =
+				select( blockEditorStore ).getBlock( clientId );
+			const _attributeType =
+				getBlockType( blockName ).attributes?.[ attribute ]?.type;
+			return _attributeType === 'rich-text' ? 'string' : _attributeType;
+		},
+		[ clientId, attribute ]
+	);
 	return (
 		<>
 			{ Object.entries( fieldsList ).map( ( [ name, fields ], i ) => (
 				<Fragment key={ name }>
-					<DropdownMenuV2.Group>
+					<Menu.Group>
 						{ Object.keys( fieldsList ).length > 1 && (
-							<DropdownMenuV2.GroupLabel>
+							<Menu.GroupLabel>
 								{ registeredSources[ name ].label }
-							</DropdownMenuV2.GroupLabel>
+							</Menu.GroupLabel>
 						) }
-						{ Object.entries( fields ).map( ( [ key, args ] ) => (
-							<DropdownMenuV2.RadioItem
-								key={ key }
-								onChange={ () =>
-									updateBlockBindings( {
-										[ attribute ]: {
-											source: name,
-											args: { key },
-										},
-									} )
-								}
-								name={ attribute + '-binding' }
-								value={ key }
-								checked={ key === currentKey }
-							>
-								<DropdownMenuV2.ItemLabel>
-									{ args?.label }
-								</DropdownMenuV2.ItemLabel>
-								<DropdownMenuV2.ItemHelpText>
-									{ args?.value }
-								</DropdownMenuV2.ItemHelpText>
-							</DropdownMenuV2.RadioItem>
-						) ) }
-					</DropdownMenuV2.Group>
+						{ Object.entries( fields )
+							.filter(
+								( [ , args ] ) => args?.type === attributeType
+							)
+							.map( ( [ key, args ] ) => (
+								<Menu.RadioItem
+									key={ key }
+									onChange={ () =>
+										updateBlockBindings( {
+											[ attribute ]: {
+												source: name,
+												args: { key },
+											},
+										} )
+									}
+									name={ attribute + '-binding' }
+									value={ key }
+									checked={ key === currentKey }
+								>
+									<Menu.ItemLabel>
+										{ args?.label }
+									</Menu.ItemLabel>
+									<Menu.ItemHelpText>
+										{ args?.value }
+									</Menu.ItemHelpText>
+								</Menu.RadioItem>
+							) ) }
+					</Menu.Group>
 					{ i !== Object.keys( fieldsList ).length - 1 && (
-						<DropdownMenuV2.Separator />
+						<Menu.Separator />
 					) }
 				</Fragment>
 			) ) }
@@ -158,7 +175,7 @@ function EditableBlockBindingsPanelItems( {
 							} );
 						} }
 					>
-						<DropdownMenuV2
+						<Menu
 							placement={
 								isMobile ? 'bottom-start' : 'left-start'
 							}
@@ -178,7 +195,7 @@ function EditableBlockBindingsPanelItems( {
 								attribute={ attribute }
 								binding={ binding }
 							/>
-						</DropdownMenuV2>
+						</Menu>
 					</ToolsPanelItem>
 				);
 			} ) }

package/src/hooks/contrast-checker.js

@@ -21,7 +21,6 @@ export default function BlockColorContrastChecker( { clientId } ) {
 
 	// There are so many things that can change the color of a block
 	// So we perform this check on every render.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => {
 		if ( ! blockEl ) {
 			return;