@wordpress/block-editor 14.5.0 → 14.6.0

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

@@ -27,7 +27,6 @@ export default function useTabNav() {
 		getLastFocus,
 		getSectionRootClientId,
 		isZoomOut,
-		__unstableGetEditorMode,
 	} = unlock( useSelect( blockEditorStore ) );
 	const { setLastFocus } = unlock( useDispatch( blockEditorStore ) );
 
@@ -54,7 +53,7 @@ export default function useTabNav() {
 			}
 		}
 		// In "compose" mode without a selected ID, we want to place focus on the section root when tabbing to the canvas.
-		else if ( __unstableGetEditorMode() === 'zoom-out' && isZoomOut() ) {
+		else if ( isZoomOut() ) {
 			const sectionRootClientId = getSectionRootClientId();
 			const sectionBlocks = getBlockOrder( sectionRootClientId );
 

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;

package/src/hooks/duotone.js

@@ -302,12 +302,12 @@ function useDuotoneStyles( {
 			// `inline-block` is used instead of `none` to ensure that scroll
 			// position is not affected, as `none` results in the editor
 			// scrolling to the top of the block.
-			blockElement.style.display = 'inline-block';
+			blockElement.style.setProperty( 'display', 'inline-block' );
 			// Simply accessing el.offsetHeight flushes layout and style changes
 			// in WebKit without having to wait for setTimeout.
 			// eslint-disable-next-line no-unused-expressions
 			blockElement.offsetHeight;
-			blockElement.style.display = display;
+			blockElement.style.setProperty( 'display', display );
 		}
 		// `colors` must be a dependency so this effect runs when the colors
 		// change in Safari.

package/src/hooks/style.js

@@ -376,10 +376,14 @@ const elementTypes = [
 	},
 ];
 
+// Used for generating the instance ID
+const STYLE_BLOCK_PROPS_REFERENCE = {};
+
 function useBlockProps( { name, style } ) {
-	const blockElementsContainerIdentifier = `wp-elements-${ useInstanceId(
-		useBlockProps
-	) }`;
+	const blockElementsContainerIdentifier = useInstanceId(
+		STYLE_BLOCK_PROPS_REFERENCE,
+		'wp-elements'
+	);
 
 	const baseElementSelector = `.${ blockElementsContainerIdentifier }`;
 	const blockElementStyles = style?.elements;

package/src/hooks/use-zoom-out.js

@@ -2,62 +2,42 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
+
 /**
  * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
  *
  * @param {boolean} zoomOut If we should enter into zoomOut mode or not
  */
 export function useZoomOut( zoomOut = true ) {
-	const { __unstableSetEditorMode, setZoomLevel } = unlock(
+	const { setZoomLevel, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
-	const { __unstableGetEditorMode } = unlock( useSelect( blockEditorStore ) );
-
-	const originalEditingModeRef = useRef( null );
-	const mode = __unstableGetEditorMode();
+	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
 
 	useEffect( () => {
-		// Only set this on mount so we know what to return to when we unmount.
-		if ( ! originalEditingModeRef.current ) {
-			originalEditingModeRef.current = mode;
-		}
+		const isZoomOutOnMount = isZoomOut();
 
 		return () => {
-			// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
-			if (
-				__unstableGetEditorMode() === 'zoom-out' &&
-				__unstableGetEditorMode() !== originalEditingModeRef.current
-			) {
-				__unstableSetEditorMode( originalEditingModeRef.current );
-				setZoomLevel( 100 );
+			if ( isZoomOutOnMount ) {
+				setZoomLevel( 'auto-scaled' );
+			} else {
+				resetZoomLevel();
 			}
 		};
 	}, [] );
 
-	// The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode.
 	useEffect( () => {
-		if ( zoomOut && mode !== 'zoom-out' ) {
-			__unstableSetEditorMode( 'zoom-out' );
-			setZoomLevel( 50 );
-		} else if (
-			! zoomOut &&
-			__unstableGetEditorMode() === 'zoom-out' &&
-			originalEditingModeRef.current !== mode
-		) {
-			__unstableSetEditorMode( originalEditingModeRef.current );
-			setZoomLevel( 100 );
+		if ( zoomOut ) {
+			setZoomLevel( 'auto-scaled' );
+		} else {
+			resetZoomLevel();
 		}
-	}, [
-		__unstableGetEditorMode,
-		__unstableSetEditorMode,
-		zoomOut,
-		setZoomLevel,
-	] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes.
+	}, [ zoomOut, setZoomLevel, resetZoomLevel ] );
 }

package/src/index.js

@@ -13,7 +13,6 @@ export {
 	getGapCSSValue as __experimentalGetGapCSSValue,
 	getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
 	useCachedTruthy,
-	useZoomOut,
 	useStyleOverride,
 } from './hooks';
 export * from './components';

package/src/private-apis.js

@@ -24,6 +24,7 @@ import {
 	useLayoutClasses,
 	useLayoutStyles,
 	__unstableBlockStyleVariationOverridesWithConfig,
+	useZoomOut,
 } from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
@@ -32,7 +33,6 @@ import { usesContextKey } from './components/rich-text/format-edit';
 import { ExperimentalBlockCanvas } from './components/block-canvas';
 import { getDuotoneFilter } from './components/duotone/utils';
 import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
-import { useZoomOutModeExit } from './components/block-list/use-block-props/use-zoom-out-mode-exit';
 import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
@@ -48,7 +48,8 @@ import { PrivatePublishDateTimePicker } from './components/publish-date-time-pic
 import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
 import useBlockDisplayTitle from './components/block-title/use-block-display-title';
 import TabbedSidebar from './components/tabbed-sidebar';
-
+import __unstableCommentIconFill from './components/collab/block-comment-icon-slot';
+import __unstableCommentIconToolbarFill from './components/collab/block-comment-icon-toolbar-slot';
 /**
  * Private @wordpress/block-editor APIs.
  */
@@ -79,7 +80,7 @@ lock( privateApis, {
 	TextAlignmentControl,
 	usesContextKey,
 	useFlashEditableBlocks,
-	useZoomOutModeExit,
+	useZoomOut,
 	globalStylesDataKey,
 	globalStylesLinksDataKey,
 	selectBlockPatternsKey,
@@ -94,4 +95,6 @@ lock( privateApis, {
 	__unstableBlockStyleVariationOverridesWithConfig,
 	setBackgroundStyleDefaults,
 	sectionRootClientIdKey,
+	__unstableCommentIconFill,
+	__unstableCommentIconToolbarFill,
 } );

package/src/store/actions.js

@@ -1669,62 +1669,13 @@ export const setNavigationMode =
  */
 export const __unstableSetEditorMode =
 	( mode ) =>
-	( { dispatch, select, registry } ) => {
-		// When switching to zoom-out mode, we need to select the parent section
-		if ( mode === 'zoom-out' ) {
-			const firstSelectedClientId = select.getBlockSelectionStart();
-
-			const sectionRootClientId = select.getSectionRootClientId();
-
-			if ( firstSelectedClientId ) {
-				let sectionClientId;
-
-				if ( sectionRootClientId ) {
-					const sectionClientIds =
-						select.getBlockOrder( sectionRootClientId );
-
-					// If the selected block is a section block, use it.
-					if ( sectionClientIds?.includes( firstSelectedClientId ) ) {
-						sectionClientId = firstSelectedClientId;
-					} else {
-						// If the selected block is not a section block, find
-						// the parent section that contains the selected block.
-						sectionClientId = select
-							.getBlockParents( firstSelectedClientId )
-							.find( ( parent ) =>
-								sectionClientIds.includes( parent )
-							);
-					}
-				} else {
-					sectionClientId = select.getBlockHierarchyRootClientId(
-						firstSelectedClientId
-					);
-				}
-
-				if ( sectionClientId ) {
-					dispatch.selectBlock( sectionClientId );
-				} else {
-					dispatch.clearSelectedBlock();
-				}
-			}
-		}
-
+	( { registry } ) => {
 		registry.dispatch( preferencesStore ).set( 'core', 'editorTool', mode );
 
 		if ( mode === 'navigation' ) {
-			speak(
-				__(
-					'You are currently in navigation mode. Navigate blocks using the Tab key and Arrow keys. Use Left and Right Arrow keys to move between nesting levels. To exit navigation mode and edit the selected block, press Enter.'
-				)
-			);
+			speak( __( 'You are currently in Write mode.' ) );
 		} else if ( mode === 'edit' ) {
-			speak(
-				__(
-					'You are currently in edit mode. To return to the navigation mode, press Escape.'
-				)
-			);
-		} else if ( mode === 'zoom-out' ) {
-			speak( __( 'You are currently in zoom-out mode.' ) );
+			speak( __( 'You are currently in Design mode.' ) );
 		}
 	};
 

package/src/store/defaults.js

@@ -167,7 +167,8 @@ export const SETTINGS_DEFAULTS = {
 	__mobileEnablePageTemplates: false,
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
-	__unstableIsPreviewMode: false,
+
+	isPreviewMode: false,
 
 	// These settings will be completely revamped in the future.
 	// The goal is to evolve this into an API which will instruct

package/src/store/private-actions.js

@@ -2,6 +2,9 @@
  * WordPress dependencies
  */
 import { Platform } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+import { speak } from '@wordpress/a11y';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -39,14 +42,32 @@ export function __experimentalUpdateSettings(
 	settings,
 	{ stripExperimentalSettings = false, reset = false } = {}
 ) {
-	let cleanSettings = settings;
+	let incomingSettings = settings;
+
+	if ( Object.hasOwn( incomingSettings, '__unstableIsPreviewMode' ) ) {
+		deprecated(
+			"__unstableIsPreviewMode argument in wp.data.dispatch('core/block-editor').updateSettings",
+			{
+				since: '6.8',
+				alternative: 'isPreviewMode',
+			}
+		);
+
+		incomingSettings = { ...incomingSettings };
+		incomingSettings.isPreviewMode =
+			incomingSettings.__unstableIsPreviewMode;
+		delete incomingSettings.__unstableIsPreviewMode;
+	}
+
+	let cleanSettings = incomingSettings;
+
 	// There are no plugins in the mobile apps, so there is no
 	// need to strip the experimental settings:
 	if ( stripExperimentalSettings && Platform.OS === 'web' ) {
 		cleanSettings = {};
-		for ( const key in settings ) {
+		for ( const key in incomingSettings ) {
 			if ( ! privateSettings.includes( key ) ) {
-				cleanSettings[ key ] = settings[ key ];
+				cleanSettings[ key ] = incomingSettings[ key ];
 			}
 		}
 	}
@@ -404,12 +425,54 @@ export const modifyContentLockBlock =
  * @param {number} zoom the new zoom level
  * @return {Object} Action object.
  */
-export function setZoomLevel( zoom = 100 ) {
-	return {
-		type: 'SET_ZOOM_LEVEL',
-		zoom,
+export const setZoomLevel =
+	( zoom = 100 ) =>
+	( { select, dispatch } ) => {
+		// When switching to zoom-out mode, we need to select the parent section
+		if ( zoom !== 100 ) {
+			const firstSelectedClientId = select.getBlockSelectionStart();
+			const sectionRootClientId = select.getSectionRootClientId();
+
+			if ( firstSelectedClientId ) {
+				let sectionClientId;
+
+				if ( sectionRootClientId ) {
+					const sectionClientIds =
+						select.getBlockOrder( sectionRootClientId );
+
+					// If the selected block is a section block, use it.
+					if ( sectionClientIds?.includes( firstSelectedClientId ) ) {
+						sectionClientId = firstSelectedClientId;
+					} else {
+						// If the selected block is not a section block, find
+						// the parent section that contains the selected block.
+						sectionClientId = select
+							.getBlockParents( firstSelectedClientId )
+							.find( ( parent ) =>
+								sectionClientIds.includes( parent )
+							);
+					}
+				} else {
+					sectionClientId = select.getBlockHierarchyRootClientId(
+						firstSelectedClientId
+					);
+				}
+
+				if ( sectionClientId ) {
+					dispatch.selectBlock( sectionClientId );
+				} else {
+					dispatch.clearSelectedBlock();
+				}
+
+				speak( __( 'You are currently in zoom-out mode.' ) );
+			}
+		}
+
+		dispatch( {
+			type: 'SET_ZOOM_LEVEL',
+			zoom,
+		} );
 	};
-}
 
 /**
  * Resets the Zoom state.

package/src/store/private-selectors.js

@@ -117,6 +117,7 @@ export const getEnabledClientIdsTree = createSelector(
 		state.settings.templateLock,
 		state.blockListSettings,
 		state.editorMode,
+		state.zoomLevel,
 		getSectionRootClientId( state ),
 	]
 );
@@ -571,17 +572,6 @@ export const getBlockStyles = createSelector(
 	]
 );
 
-/**
- * Returns whether zoom out mode is enabled.
- *
- * @param {Object} state Editor state.
- *
- * @return {boolean} Is zoom out mode enabled.
- */
-export function isZoomOutMode( state ) {
-	return state.editorMode === 'zoom-out';
-}
-
 /**
  * Retrieves the client ID of the block which contains the blocks
  * acting as "sections" in the editor. This is typically the "main content"
@@ -596,23 +586,23 @@ export function getSectionRootClientId( state ) {
 }
 
 /**
- * Returns the zoom out state.
+ * Returns whether the editor is considered zoomed out.
  *
  * @param {Object} state Global application state.
- * @return {boolean} The zoom out state.
+ * @return {boolean} Whether the editor is zoomed.
  */
-export function getZoomLevel( state ) {
-	return state.zoomLevel;
+export function isZoomOut( state ) {
+	return state.zoomLevel === 'auto-scaled' || state.zoomLevel < 100;
 }
 
 /**
- * Returns whether the editor is considered zoomed out.
+ * Returns whether the zoom level.
  *
  * @param {Object} state Global application state.
- * @return {boolean} Whether the editor is zoomed.
+ * @return {number|"auto-scaled"} Zoom level.
  */
-export function isZoomOut( state ) {
-	return getZoomLevel( state ) < 100;
+export function getZoomLevel( state ) {
+	return state.zoomLevel;
 }
 
 /**

package/src/store/reducer.js

@@ -8,6 +8,7 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  */
 import { pipe } from '@wordpress/compose';
 import { combineReducers, select } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 import { store as blocksStore } from '@wordpress/blocks';
 /**
  * Internal dependencies
@@ -1660,17 +1661,30 @@ export function template( state = { isValid: true }, action ) {
  */
 export function settings( state = SETTINGS_DEFAULTS, action ) {
 	switch ( action.type ) {
-		case 'UPDATE_SETTINGS':
-			if ( action.reset ) {
-				return {
-					...SETTINGS_DEFAULTS,
-					...action.settings,
-				};
-			}
-			return {
-				...state,
-				...action.settings,
-			};
+		case 'UPDATE_SETTINGS': {
+			const updatedSettings = action.reset
+				? {
+						...SETTINGS_DEFAULTS,
+						...action.settings,
+				  }
+				: {
+						...state,
+						...action.settings,
+				  };
+
+			Object.defineProperty( updatedSettings, '__unstableIsPreviewMode', {
+				get() {
+					deprecated( '__unstableIsPreviewMode', {
+						since: '6.8',
+						alternative: 'isPreviewMode',
+					} );
+
+					return this.isPreviewMode;
+				},
+			} );
+
+			return updatedSettings;
+		}
 	}
 
 	return state;