@wordpress/block-editor 14.5.0 → 14.6.0

package/src/components/link-control/test/index.js

@@ -373,7 +373,9 @@ describe( 'Basic rendering', () => {
 				/>
 			);
 
-			const linkPreview = screen.getByLabelText( 'Currently selected' );
+			const linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			const isPreviewError = linkPreview.classList.contains( 'is-error' );
 			expect( isPreviewError ).toBe( true );
@@ -834,7 +836,9 @@ describe( 'Manual link entry', () => {
 
 			render( <LinkControlConsumer /> );
 
-			let linkPreview = screen.getByLabelText( 'Currently selected' );
+			let linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			expect( linkPreview ).toBeInTheDocument();
 
@@ -868,7 +872,9 @@ describe( 'Manual link entry', () => {
 			// Cancel the editing process.
 			await user.click( cancelButton );
 
-			linkPreview = screen.getByLabelText( 'Currently selected' );
+			linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			expect( linkPreview ).toBeInTheDocument();
 
@@ -1076,7 +1082,9 @@ describe( 'Default search suggestions', () => {
 
 		// Click the "Edit/Change" button and check initial suggestions are not
 		// shown.
-		const currentLinkUI = screen.getByLabelText( 'Currently selected' );
+		const currentLinkUI = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 		const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', {
 			name: 'Edit link',
 		} );
@@ -1230,8 +1238,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Check for loading indicator.
 			const loadingIndicator = screen.getByText( 'Creating…' );
-			const currentLinkLabel =
-				screen.queryByLabelText( 'Currently selected' );
+			const currentLinkLabel = screen.queryByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			expect( currentLinkLabel ).not.toBeInTheDocument();
 			expect( loadingIndicator ).toBeVisible();
@@ -1242,8 +1251,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			// Resolve the `createSuggestion` promise.
 			resolver();
 
-			const currentLink =
-				await screen.findByLabelText( 'Currently selected' );
+			const currentLink = await screen.findByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			expect( currentLink ).toHaveTextContent( entityNameText );
 			expect( currentLink ).toHaveTextContent( '/?p=123' );
@@ -1291,7 +1301,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 		await user.click( createButton );
 
-		const currentLink = screen.getByLabelText( 'Currently selected' );
+		const currentLink = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		expect( currentLink ).toHaveTextContent( 'Some new page to create' );
 		expect( currentLink ).toHaveTextContent( '/?p=123' );
@@ -1350,7 +1362,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		triggerEnter( searchInput );
 
 		expect(
-			await screen.findByLabelText( 'Currently selected' )
+			await screen.findByRole( 'group', {
+				name: 'Manage link',
+			} )
 		).toHaveTextContent( entityNameText );
 	} );
 
@@ -1529,7 +1543,9 @@ describe( 'Selecting links', () => {
 
 		render( <LinkControlConsumer /> );
 
-		const currentLink = screen.getByLabelText( 'Currently selected' );
+		const currentLink = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 		const currentLinkAnchor = screen.getByRole( 'link', {
 			name: `${ selectedLink.title } (opens in a new tab)`,
 		} );
@@ -1559,7 +1575,9 @@ describe( 'Selecting links', () => {
 		render( <LinkControlConsumer /> );
 
 		// Required in order to select the button below.
-		let currentLinkUI = screen.getByLabelText( 'Currently selected' );
+		let currentLinkUI = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 		const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', {
 			name: 'Edit link',
 		} );
@@ -1570,7 +1588,9 @@ describe( 'Selecting links', () => {
 		const searchInput = screen.getByRole( 'combobox', {
 			name: 'Search or type URL',
 		} );
-		currentLinkUI = screen.queryByLabelText( 'Currently selected' );
+		currentLinkUI = screen.queryByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		// We should be back to showing the search input.
 		expect( searchInput ).toBeVisible();
@@ -1733,8 +1753,9 @@ describe( 'Selecting links', () => {
 				triggerEnter( searchInput );
 
 				// Check that the suggestion selected via is now shown as selected.
-				const currentLink =
-					screen.getByLabelText( 'Currently selected' );
+				const currentLink = screen.getByRole( 'group', {
+					name: 'Manage link',
+				} );
 				const currentLinkAnchor = screen.getByRole( 'link', {
 					name: `${ selectedLink.title } (opens in a new tab)`,
 				} );
@@ -2127,7 +2148,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
 
@@ -2148,7 +2171,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 	} );
@@ -2165,7 +2190,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
@@ -2197,7 +2224,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
@@ -2221,7 +2250,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
@@ -2256,7 +2287,9 @@ describe( 'Rich link previews', () => {
 
 			render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-			const linkPreview = screen.getByLabelText( 'Currently selected' );
+			const linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			await waitFor( () =>
 				expect( linkPreview ).toHaveClass( 'is-rich' )
@@ -2281,7 +2314,9 @@ describe( 'Rich link previews', () => {
 
 			render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-			const linkPreview = screen.getByLabelText( 'Currently selected' );
+			const linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			expect( linkPreview ).toHaveClass( 'is-fetching' );
 
@@ -2300,7 +2335,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		expect( linkPreview ).toHaveClass( 'is-fetching' );
 		expect( linkPreview ).not.toHaveClass( 'is-rich' );
@@ -2313,7 +2350,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		expect( linkPreview ).toHaveClass( 'is-fetching' );
 

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

@@ -15,6 +15,7 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { useListViewContext } from './context';
 import Inserter from '../inserter';
 import AriaReferencedText from './aria-referenced-text';
+import { unlock } from '../../lock-unlock';
 
 export const Appender = forwardRef(
 	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
@@ -23,13 +24,11 @@ export const Appender = forwardRef(
 		const instanceId = useInstanceId( Appender );
 		const hideInserter = useSelect(
 			( select ) => {
-				const { getTemplateLock, __unstableGetEditorMode } =
-					select( blockEditorStore );
-
-				return (
-					!! getTemplateLock( clientId ) ||
-					__unstableGetEditorMode() === 'zoom-out'
+				const { getTemplateLock, isZoomOut } = unlock(
+					select( blockEditorStore )
 				);
+
+				return !! getTemplateLock( clientId ) || isZoomOut();
 			},
 			[ clientId ]
 		);

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/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/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/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 { resetZoomLevel, __unstableSetEditorMode } = unlock(
-		useDispatch( blockEditorStore )
-	);
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 
 	return (
 		<Dropdown
@@ -68,7 +65,6 @@ function ToolSelector( props, ref ) {
 								mode === 'navigation' ? 'navigation' : 'edit'
 							}
 							onSelect={ ( newMode ) => {
-								resetZoomLevel();
 								__unstableSetEditorMode( newMode );
 							} }
 							choices={ [

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-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' );
 					};
 				},