@wordpress/block-editor 14.3.1 → 14.3.3

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

@@ -19,7 +19,6 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import { getBlockClientId, isInSameBlock } from '../../utils/dom';
 import { store as blockEditorStore } from '../../store';
-import { getSelectionRoot } from './utils';
 
 /**
  * Returns true if the element should consider edge navigation upon a keyboard
@@ -191,7 +190,8 @@ export default function useArrowNav() {
 				return;
 			}
 
-			const { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;
+			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
+				event;
 			const isUp = keyCode === UP;
 			const isDown = keyCode === DOWN;
 			const isLeft = keyCode === LEFT;
@@ -233,11 +233,6 @@ export default function useArrowNav() {
 				return;
 			}
 
-			const target =
-				ownerDocument.activeElement === node
-					? getSelectionRoot( ownerDocument )
-					: event.target;
-
 			// Abort if our current target is not a candidate for navigation
 			// (e.g. preserve native input behaviors).
 			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
@@ -279,7 +274,6 @@ export default function useArrowNav() {
 				( altKey ? isHorizontalEdge( target, isReverseDir ) : true ) &&
 				! keepCaretInsideBlock
 			) {
-				node.contentEditable = false;
 				const closestTabbable = getClosestTabbable(
 					target,
 					isReverse,
@@ -303,7 +297,6 @@ export default function useArrowNav() {
 				isHorizontalEdge( target, isReverseDir ) &&
 				! keepCaretInsideBlock
 			) {
-				node.contentEditable = false;
 				const closestTabbable = getClosestTabbable(
 					target,
 					isReverseDir,

package/src/components/writing-flow/use-input.js

@@ -16,7 +16,6 @@ import {
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { getSelectionRoot } from './utils';
 
 /**
  * Handles input for selections across blocks.
@@ -50,24 +49,7 @@ export default function useInput() {
 			// DOM. This will cause React errors (and the DOM should only be
 			// altered in a controlled fashion).
 			if ( node.contentEditable === 'true' ) {
-				const selection = node.ownerDocument.defaultView.getSelection();
-				const range = selection.rangeCount
-					? selection.getRangeAt( 0 )
-					: null;
-				const root = getSelectionRoot( node.ownerDocument );
-
-				// If selection is contained within a nested editable, allow
-				// input. We need to ensure that selection is maintained.
-				if ( root ) {
-					node.contentEditable = false;
-					root.focus();
-					selection.removeAllRanges();
-					if ( range ) {
-						selection.addRange( range );
-					}
-				} else {
-					event.preventDefault();
-				}
+				event.preventDefault();
 			}
 		}
 
@@ -77,23 +59,6 @@ export default function useInput() {
 			}
 
 			if ( ! hasMultiSelection() ) {
-				const { ownerDocument } = node;
-				if ( node === ownerDocument.activeElement ) {
-					if ( event.key === 'End' || event.key === 'Home' ) {
-						const selectionRoot = getSelectionRoot( ownerDocument );
-						const selection =
-							ownerDocument.defaultView.getSelection();
-						selection.selectAllChildren( selectionRoot );
-						const method =
-							event.key === 'End'
-								? 'collapseToEnd'
-								: 'collapseToStart';
-						selection[ method ]();
-						event.preventDefault();
-						return;
-					}
-				}
-
 				if ( event.keyCode === ENTER ) {
 					if ( event.shiftKey || __unstableIsFullySelected() ) {
 						return;

package/src/components/writing-flow/use-select-all.js

@@ -10,7 +10,6 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { getSelectionRoot } from './utils';
 
 export default function useSelectAll() {
 	const { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =
@@ -24,27 +23,12 @@ export default function useSelectAll() {
 				return;
 			}
 
-			const selectionRoot = getSelectionRoot( node.ownerDocument );
 			const selectedClientIds = getSelectedBlockClientIds();
 
-			// Abort if there is selection, but it is not within a block.
-			if ( selectionRoot && ! selectedClientIds.length ) {
-				return;
-			}
-
 			if (
-				selectionRoot &&
 				selectedClientIds.length < 2 &&
-				! isEntirelySelected( selectionRoot )
+				! isEntirelySelected( event.target )
 			) {
-				if ( node === node.ownerDocument.activeElement ) {
-					event.preventDefault();
-					node.ownerDocument.defaultView
-						.getSelection()
-						.selectAllChildren( selectionRoot );
-					return;
-				}
-
 				return;
 			}
 
@@ -61,7 +45,6 @@ export default function useSelectAll() {
 					node.ownerDocument.defaultView
 						.getSelection()
 						.removeAllRanges();
-					node.contentEditable = 'false';
 					selectBlock( rootClientId );
 				}
 				return;

package/src/components/writing-flow/use-selection-observer.js

@@ -107,12 +107,8 @@ function getRichTextElement( node ) {
 export default function useSelectionObserver() {
 	const { multiSelect, selectBlock, selectionChange } =
 		useDispatch( blockEditorStore );
-	const {
-		getBlockParents,
-		getBlockSelectionStart,
-		isMultiSelecting,
-		getSelectedBlockClientId,
-	} = useSelect( blockEditorStore );
+	const { getBlockParents, getBlockSelectionStart, isMultiSelecting } =
+		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
@@ -195,17 +191,10 @@ export default function useSelectionObserver() {
 					return;
 				}
 
-				setContentEditableWrapper(
-					node,
-					!! ( startClientId && endClientId )
-				);
-
 				const isSingularSelection = startClientId === endClientId;
 				if ( isSingularSelection ) {
 					if ( ! isMultiSelecting() ) {
-						if ( getSelectedBlockClientId() !== startClientId ) {
-							selectBlock( startClientId );
-						}
+						selectBlock( startClientId );
 					} else {
 						multiSelect( startClientId, startClientId );
 					}

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

@@ -116,33 +116,3 @@ function toPlainText( html ) {
 	// Merge any consecutive line breaks
 	return plainText.replace( /\n\n+/g, '\n\n' );
 }
-
-/**
- * Gets the current content editable root element based on the selection.
- * @param {Document} ownerDocument
- * @return {Element|undefined} The content editable root element.
- */
-export function getSelectionRoot( ownerDocument ) {
-	const { defaultView } = ownerDocument;
-	const { anchorNode, focusNode } = defaultView.getSelection();
-
-	if ( ! anchorNode || ! focusNode ) {
-		return;
-	}
-
-	const anchorElement = (
-		anchorNode.nodeType === anchorNode.ELEMENT_NODE
-			? anchorNode
-			: anchorNode.parentElement
-	).closest( '[contenteditable]' );
-
-	if ( ! anchorElement ) {
-		return;
-	}
-
-	if ( ! anchorElement.contains( focusNode ) ) {
-		return;
-	}
-
-	return anchorElement;
-}

package/src/hooks/layout.js

@@ -11,8 +11,8 @@ import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
-	Button,
-	ButtonGroup,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ToggleControl,
 	PanelBody,
 	privateApis as componentsPrivateApis,
@@ -315,21 +315,26 @@ export default {
 
 function LayoutTypeSwitcher( { type, onChange } ) {
 	return (
-		<ButtonGroup>
+		<ToggleGroupControl
+			__next40pxDefaultSize
+			isBlock
+			label={ __( 'Layout type' ) }
+			__nextHasNoMarginBottom
+			hideLabelFromVision
+			isAdaptiveWidth
+			value={ type }
+			onChange={ onChange }
+		>
 			{ getLayoutTypes().map( ( { name, label } ) => {
 				return (
-					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+					<ToggleGroupControlOption
 						key={ name }
-						isPressed={ type === name }
-						onClick={ () => onChange( name ) }
-					>
-						{ label }
-					</Button>
+						value={ name }
+						label={ label }
+					/>
 				);
 			} ) }
-		</ButtonGroup>
+		</ToggleGroupControl>
 	);
 }
 

package/src/hooks/use-bindings-attributes.js

@@ -103,11 +103,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 		const sources = useSelect( ( select ) =>
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources()
 		);
-		const { name, clientId } = props;
-		const hasParentPattern = !! props.context[ 'pattern/overrides' ];
-		const hasPatternOverridesDefaultBinding =
-			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
-				?.source === 'core/pattern-overrides';
+		const { name, clientId, context, setAttributes } = props;
 		const blockBindings = useMemo(
 			() =>
 				replacePatternOverrideDefaultBindings(
@@ -121,6 +117,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 		// used purposely here to ensure `boundAttributes` is updated whenever
 		// there are attribute updates.
 		// `source.getValues` may also call a selector via `registry.select`.
+		const updatedContext = {};
 		const boundAttributes = useSelect( () => {
 			if ( ! blockBindings ) {
 				return;
@@ -139,6 +136,11 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 					continue;
 				}
 
+				// Populate context.
+				for ( const key of source.usesContext || [] ) {
+					updatedContext[ key ] = blockContext[ key ];
+				}
+
 				blockBindingsBySource.set( source, {
 					...blockBindingsBySource.get( source ),
 					[ attributeName ]: {
@@ -149,27 +151,17 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 
 			if ( blockBindingsBySource.size ) {
 				for ( const [ source, bindings ] of blockBindingsBySource ) {
-					// Populate context.
-					const context = {};
-
-					if ( source.usesContext?.length ) {
-						for ( const key of source.usesContext ) {
-							context[ key ] = blockContext[ key ];
-						}
-					}
-
 					// Get values in batch if the source supports it.
 					let values = {};
 					if ( ! source.getValues ) {
 						Object.keys( bindings ).forEach( ( attr ) => {
-							// Default to the `key` or the source label when `getValues` doesn't exist
-							values[ attr ] =
-								bindings[ attr ].args?.key || source.label;
+							// Default to the the source label when `getValues` doesn't exist.
+							values[ attr ] = source.label;
 						} );
 					} else {
 						values = source.getValues( {
 							registry,
-							context,
+							context: updatedContext,
 							clientId,
 							bindings,
 						} );
@@ -191,9 +183,19 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 			}
 
 			return attributes;
-		}, [ blockBindings, name, clientId, blockContext, registry, sources ] );
-
-		const { setAttributes } = props;
+		}, [
+			blockBindings,
+			name,
+			clientId,
+			updatedContext,
+			registry,
+			sources,
+		] );
+
+		const hasParentPattern = !! updatedContext[ 'pattern/overrides' ];
+		const hasPatternOverridesDefaultBinding =
+			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
+				?.source === 'core/pattern-overrides';
 
 		const _setAttributes = useCallback(
 			( nextAttributes ) => {
@@ -237,18 +239,9 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 							source,
 							bindings,
 						] of blockBindingsBySource ) {
-							// Populate context.
-							const context = {};
-
-							if ( source.usesContext?.length ) {
-								for ( const key of source.usesContext ) {
-									context[ key ] = blockContext[ key ];
-								}
-							}
-
 							source.setValues( {
 								registry,
-								context,
+								context: updatedContext,
 								clientId,
 								bindings,
 							} );
@@ -278,7 +271,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 				blockBindings,
 				name,
 				clientId,
-				blockContext,
+				updatedContext,
 				setAttributes,
 				sources,
 				hasPatternOverridesDefaultBinding,
@@ -292,6 +285,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 					{ ...props }
 					attributes={ { ...props.attributes, ...boundAttributes } }
 					setAttributes={ _setAttributes }
+					context={ { ...context, ...updatedContext } }
 				/>
 			</>
 		);

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

@@ -8,46 +8,40 @@ import { useEffect, useRef } 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.
+ * A hook used to set the zoomed out view, invoking the hook sets the mode.
  *
- * @param {boolean} zoomOut If we should enter into zoomOut mode or not
+ * @param {boolean} zoomOut If we should zoom out or not.
  */
 export function useZoomOut( zoomOut = true ) {
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-	const { __unstableGetEditorMode } = useSelect( blockEditorStore );
+	const { setZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
 
-	const originalEditingModeRef = useRef( null );
-	const mode = __unstableGetEditorMode();
+	const originalIsZoomOutRef = useRef( null );
 
 	useEffect( () => {
 		// Only set this on mount so we know what to return to when we unmount.
-		if ( ! originalEditingModeRef.current ) {
-			originalEditingModeRef.current = mode;
+		if ( ! originalIsZoomOutRef.current ) {
+			originalIsZoomOutRef.current = 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 );
-			}
-		};
-	}, [] );
-
-	// 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' );
+		// The effect opens the zoom-out view if we want it open and the canvas is not currently zoomed-out.
+		if ( zoomOut && isZoomOut() === false ) {
+			setZoomLevel( 50 );
 		} else if (
 			! zoomOut &&
-			__unstableGetEditorMode() === 'zoom-out' &&
-			originalEditingModeRef.current !== mode
+			isZoomOut() &&
+			originalIsZoomOutRef.current !== isZoomOut()
 		) {
-			__unstableSetEditorMode( originalEditingModeRef.current );
+			setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 );
 		}
-	}, [ __unstableGetEditorMode, __unstableSetEditorMode, zoomOut ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes.
+
+		return () => {
+			if ( isZoomOut() && isZoomOut() !== originalIsZoomOutRef.current ) {
+				setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 );
+			}
+		};
+	}, [ isZoomOut, setZoomLevel, zoomOut ] );
 }

package/src/store/private-actions.js

@@ -383,3 +383,26 @@ export const modifyContentLockBlock =
 			focusModeToRevert
 		);
 	};
+
+/**
+ * Sets the zoom level.
+ *
+ * @param {number} zoom the new zoom level
+ * @return {Object} Action object.
+ */
+export function setZoomLevel( zoom = 100 ) {
+	return {
+		type: 'SET_ZOOM_LEVEL',
+		zoom,
+	};
+}
+
+/**
+ * Resets the Zoom state.
+ * @return {Object} Action object.
+ */
+export function resetZoomLevel() {
+	return {
+		type: 'RESET_ZOOM_LEVEL',
+	};
+}

package/src/store/private-selectors.js

@@ -560,3 +560,23 @@ export function isZoomOutMode( state ) {
 export function getSectionRootClientId( state ) {
 	return state.settings?.[ sectionRootClientIdKey ];
 }
+
+/**
+ * Returns the zoom out state.
+ *
+ * @param {Object} state Global application state.
+ * @return {boolean} The zoom out state.
+ */
+export function getZoomLevel( state ) {
+	return state.zoomLevel;
+}
+
+/**
+ * Returns whether the editor is considered zoomed out.
+ *
+ * @param {Object} state Global application state.
+ * @return {boolean} Whether the editor is zoomed.
+ */
+export function isZoomOut( state ) {
+	return getZoomLevel( state ) < 100;
+}

package/src/store/reducer.js

@@ -2085,6 +2085,25 @@ export function hoveredBlockClientId( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer setting zoom out state.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function zoomLevel( state = 100, action ) {
+	switch ( action.type ) {
+		case 'SET_ZOOM_LEVEL':
+			return action.zoom;
+		case 'RESET_ZOOM_LEVEL':
+			return 100;
+	}
+
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2118,6 +2137,7 @@ const combinedReducers = combineReducers( {
 	openedBlockSettingsMenu,
 	registeredInserterMediaCategories,
 	hoveredBlockClientId,
+	zoomLevel,
 } );
 
 function withAutomaticChangeReset( reducer ) {

package/src/store/selectors.js

@@ -2467,7 +2467,7 @@ export const __experimentalGetPatternsByBlockTypes = createRegistrySelector(
  * Determines the items that appear in the available pattern transforms list.
  *
  * For now we only handle blocks without InnerBlocks and take into account
- * the `__experimentalRole` property of blocks' attributes for the transformation.
+ * the `role` property of blocks' attributes for the transformation.
  *
  * We return the first set of possible eligible block patterns,
  * by checking the `blockTypes` property. We still have to recurse through
@@ -2489,7 +2489,7 @@ export const __experimentalGetPatternTransformItems = createRegistrySelector(
 				}
 				/**
 				 * For now we only handle blocks without InnerBlocks and take into account
-				 * the `__experimentalRole` property of blocks' attributes for the transformation.
+				 * the `role` property of blocks' attributes for the transformation.
 				 * Note that the blocks have been retrieved through `getBlock`, which doesn't
 				 * return the inner blocks of an inner block controller, so we still need
 				 * to check for this case too.
@@ -2926,6 +2926,7 @@ export const getBlockEditingMode = createRegistrySelector(
 			if ( clientId === null ) {
 				clientId = '';
 			}
+
 			// In zoom-out mode, override the behavior set by
 			// __unstableSetBlockEditingMode to only allow editing the top-level
 			// sections.
@@ -2943,9 +2944,13 @@ export const getBlockEditingMode = createRegistrySelector(
 					state,
 					sectionRootClientId
 				);
-				if ( ! sectionsClientIds?.includes( clientId ) ) {
-					return 'disabled';
+
+				// Sections are always contentOnly.
+				if ( sectionsClientIds?.includes( clientId ) ) {
+					return 'contentOnly';
 				}
+
+				return 'disabled';
 			}
 
 			const blockEditingMode = state.blockEditingModes.get( clientId );
@@ -2959,10 +2964,10 @@ export const getBlockEditingMode = createRegistrySelector(
 			const templateLock = getTemplateLock( state, rootClientId );
 			if ( templateLock === 'contentOnly' ) {
 				const name = getBlockName( state, clientId );
-				const isContent =
-					select( blocksStore ).__experimentalHasContentRoleAttribute(
-						name
-					);
+				const { hasContentRoleAttribute } = unlock(
+					select( blocksStore )
+				);
+				const isContent = hasContentRoleAttribute( name );
 				return isContent ? 'contentOnly' : 'disabled';
 			}
 			const parentMode = getBlockEditingMode( state, rootClientId );

package/src/store/test/private-selectors.js

@@ -124,10 +124,10 @@ describe( 'private selectors', () => {
 			blockEditingModes: new Map( [] ),
 		};
 
-		const __experimentalHasContentRoleAttribute = jest.fn( () => false );
+		const hasContentRoleAttribute = jest.fn( () => false );
 		getBlockEditingMode.registry = {
 			select: jest.fn( () => ( {
-				__experimentalHasContentRoleAttribute,
+				hasContentRoleAttribute,
 			} ) ),
 		};
 

package/src/store/test/selectors.js

@@ -15,6 +15,7 @@ import { select, dispatch } from '@wordpress/data';
  */
 import * as selectors from '../selectors';
 import { store } from '../';
+import { lock } from '../../lock-unlock';
 
 const {
 	getBlockName,
@@ -4372,11 +4373,14 @@ describe( 'getBlockEditingMode', () => {
 		blockEditingModes: new Map( [] ),
 	};
 
-	const __experimentalHasContentRoleAttribute = jest.fn( () => false );
+	const hasContentRoleAttribute = jest.fn( () => false );
+
+	const fauxPrivateAPIs = {};
+
+	lock( fauxPrivateAPIs, { hasContentRoleAttribute } );
+
 	getBlockEditingMode.registry = {
-		select: jest.fn( () => ( {
-			__experimentalHasContentRoleAttribute,
-		} ) ),
+		select: jest.fn( () => fauxPrivateAPIs ),
 	};
 
 	it( 'should return default by default', () => {
@@ -4480,7 +4484,7 @@ describe( 'getBlockEditingMode', () => {
 				},
 			},
 		};
-		__experimentalHasContentRoleAttribute.mockReturnValueOnce( false );
+		hasContentRoleAttribute.mockReturnValueOnce( false );
 		expect(
 			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
 		).toBe( 'disabled' );
@@ -4496,7 +4500,7 @@ describe( 'getBlockEditingMode', () => {
 				},
 			},
 		};
-		__experimentalHasContentRoleAttribute.mockReturnValueOnce( true );
+		hasContentRoleAttribute.mockReturnValueOnce( true );
 		expect(
 			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
 		).toBe( 'contentOnly' );