@wordpress/block-editor 14.5.0 → 14.7.0

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.js

@@ -233,7 +233,14 @@ export function RichTextWrapper(
 				bindingsLabel: _bindingsLabel,
 			};
 		},
-		[ blockBindings, identifier, blockName, blockContext, adjustedValue ]
+		[
+			blockBindings,
+			identifier,
+			blockName,
+			adjustedValue,
+			clientId,
+			blockContext,
+		]
 	);
 
 	const shouldDisableEditing = readOnly || disableBoundBlock;

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/tabbed-sidebar/index.js

@@ -33,7 +33,7 @@ function TabbedSidebar(
 						icon={ closeSmall }
 						label={ closeButtonLabel }
 						onClick={ () => onClose() }
-						size="small"
+						size="compact"
 					/>
 
 					<Tabs.TabList

package/src/components/tabbed-sidebar/style.scss

@@ -11,7 +11,7 @@
 	border-bottom: $border-width solid $gray-300;
 	display: flex;
 	justify-content: space-between;
-	padding-right: $grid-unit-15;
+	padding-right: $grid-unit-10;
 }
 
 

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.',
@@ -533,10 +533,9 @@ class URLInput extends Component {
 			<Popover placement="bottom" focusOnMount={ false }>
 				<div
 					{ ...suggestionsListProps }
-					className={ clsx(
-						'block-editor-url-input__suggestions',
-						`${ className }__suggestions`
-					) }
+					className={ clsx( 'block-editor-url-input__suggestions', {
+						[ `${ className }__suggestions` ]: className,
+					} ) }
 				>
 					{ suggestions.map( ( suggestion, index ) => (
 						<Button