@wordpress/block-editor 14.4.0 → 14.5.0

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

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

package/src/private-apis.js

@@ -32,6 +32,7 @@ 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,
@@ -78,6 +79,7 @@ lock( privateApis, {
 	TextAlignmentControl,
 	usesContextKey,
 	useFlashEditableBlocks,
+	useZoomOutModeExit,
 	globalStylesDataKey,
 	globalStylesLinksDataKey,
 	selectBlockPatternsKey,

package/src/store/actions.js

@@ -21,6 +21,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { create, insert, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -1668,7 +1669,7 @@ export const setNavigationMode =
  */
 export const __unstableSetEditorMode =
 	( mode ) =>
-	( { dispatch, select } ) => {
+	( { dispatch, select, registry } ) => {
 		// When switching to zoom-out mode, we need to select the parent section
 		if ( mode === 'zoom-out' ) {
 			const firstSelectedClientId = select.getBlockSelectionStart();
@@ -1708,7 +1709,7 @@ export const __unstableSetEditorMode =
 			}
 		}
 
-		dispatch( { type: 'SET_EDITOR_MODE', mode } );
+		registry.dispatch( preferencesStore ).set( 'core', 'editorTool', mode );
 
 		if ( mode === 'navigation' ) {
 			speak(

package/src/store/reducer.js

@@ -1786,22 +1786,6 @@ export const blockListSettings = ( state = {}, action ) => {
 	return state;
 };
 
-/**
- * Reducer returning which mode is enabled.
- *
- * @param {string} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {string} Updated state.
- */
-export function editorMode( state = 'edit', action ) {
-	if ( action.type === 'SET_EDITOR_MODE' ) {
-		return action.mode;
-	}
-
-	return state;
-}
-
 /**
  * Reducer return an updated state representing the most recent block attribute
  * update. The state is structured as an object where the keys represent the
@@ -2117,7 +2101,6 @@ const combinedReducers = combineReducers( {
 	preferences,
 	lastBlockAttributesChange,
 	lastFocus,
-	editorMode,
 	expandedBlock,
 	highlightedBlock,
 	lastBlockInserted,

package/src/store/selectors.js

@@ -16,6 +16,7 @@ import { symbol } from '@wordpress/icons';
 import { create, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 import { createSelector, createRegistrySelector } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -2384,6 +2385,21 @@ const getAllowedPatternsDependants = ( select ) => ( state, rootClientId ) => [
 	...getInsertBlockTypeDependants( state, rootClientId ),
 ];
 
+const patternsWithParsedBlocks = new WeakMap();
+function enhancePatternWithParsedBlocks( pattern ) {
+	let enhancedPattern = patternsWithParsedBlocks.get( pattern );
+	if ( ! enhancedPattern ) {
+		enhancedPattern = {
+			...pattern,
+			get blocks() {
+				return getParsedPattern( pattern ).blocks;
+			},
+		};
+		patternsWithParsedBlocks.set( pattern, enhancedPattern );
+	}
+	return enhancedPattern;
+}
+
 /**
  * Returns the list of allowed patterns for inner blocks children.
  *
@@ -2405,14 +2421,7 @@ export const __experimentalGetAllowedPatterns = createRegistrySelector(
 				const { allowedBlockTypes } = getSettings( state );
 				const parsedPatterns = patterns
 					.filter( ( { inserter = true } ) => !! inserter )
-					.map( ( pattern ) => {
-						return {
-							...pattern,
-							get blocks() {
-								return getParsedPattern( pattern ).blocks;
-							},
-						};
-					} );
+					.map( enhancePatternWithParsedBlocks );
 
 				const availableParsedPatterns = parsedPatterns.filter(
 					( pattern ) =>
@@ -2691,7 +2700,7 @@ export function __experimentalGetLastBlockAttributeChanges( state ) {
  * @return {boolean} Is navigation mode enabled.
  */
 export function isNavigationMode( state ) {
-	return state.editorMode === 'navigation';
+	return __unstableGetEditorMode( state ) === 'navigation';
 }
 
 /**
@@ -2701,9 +2710,11 @@ export function isNavigationMode( state ) {
  *
  * @return {string} the editor mode.
  */
-export function __unstableGetEditorMode( state ) {
-	return state.editorMode;
-}
+export const __unstableGetEditorMode = createRegistrySelector(
+	( select ) => () => {
+		return select( preferencesStore ).get( 'core', 'editorTool' );
+	}
+);
 
 /**
  * Returns whether block moving mode is enabled.

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

@@ -11,7 +11,7 @@ import {
 	isDragging,
 	getBlockStyles,
 } from '../private-selectors';
-import { getBlockEditingMode } from '../selectors';
+import { getBlockEditingMode, __unstableGetEditorMode } from '../selectors';
 
 describe( 'private selectors', () => {
 	describe( 'isBlockInterfaceHidden', () => {
@@ -125,11 +125,17 @@ describe( 'private selectors', () => {
 		};
 
 		const hasContentRoleAttribute = jest.fn( () => false );
+		const get = jest.fn( () => 'edit' );
 		getBlockEditingMode.registry = {
 			select: jest.fn( () => ( {
 				hasContentRoleAttribute,
 			} ) ),
 		};
+		__unstableGetEditorMode.registry = {
+			select: jest.fn( () => ( {
+				get,
+			} ) ),
+		};
 
 		it( 'should return false when top level block is not disabled', () => {
 			const state = {

package/src/store/test/selectors.js

@@ -9,6 +9,7 @@ import {
 import { RawHTML } from '@wordpress/element';
 import { symbol } from '@wordpress/icons';
 import { select, dispatch } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -4470,7 +4471,6 @@ describe( 'getBlockEditingMode', () => {
 
 	const navigationModeStateWithRootSection = {
 		...baseState,
-		editorMode: 'navigation',
 		settings: {
 			[ sectionRootClientIdKey ]: 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', // The group is the "main" container
 		},
@@ -4480,12 +4480,18 @@ describe( 'getBlockEditingMode', () => {
 
 	const fauxPrivateAPIs = {};
 
-	lock( fauxPrivateAPIs, { hasContentRoleAttribute } );
+	lock( fauxPrivateAPIs, {
+		hasContentRoleAttribute,
+	} );
 
 	getBlockEditingMode.registry = {
 		select: jest.fn( () => fauxPrivateAPIs ),
 	};
 
+	afterEach( () => {
+		dispatch( preferencesStore ).set( 'core', 'editorTool', undefined );
+	} );
+
 	it( 'should return default by default', () => {
 		expect(
 			getBlockEditingMode(
@@ -4610,6 +4616,7 @@ describe( 'getBlockEditingMode', () => {
 	} );
 
 	it( 'in navigation mode, the root section container is default', () => {
+		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
 		expect(
 			getBlockEditingMode(
 				navigationModeStateWithRootSection,
@@ -4619,6 +4626,7 @@ describe( 'getBlockEditingMode', () => {
 	} );
 
 	it( 'in navigation mode, anything outside the section container is disabled', () => {
+		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
 		expect(
 			getBlockEditingMode(
 				navigationModeStateWithRootSection,
@@ -4628,6 +4636,7 @@ describe( 'getBlockEditingMode', () => {
 	} );
 
 	it( 'in navigation mode, sections are contentOnly', () => {
+		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
 		expect(
 			getBlockEditingMode(
 				navigationModeStateWithRootSection,
@@ -4643,6 +4652,7 @@ describe( 'getBlockEditingMode', () => {
 	} );
 
 	it( 'in navigation mode, blocks with content attributes within sections are contentOnly', () => {
+		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
 		hasContentRoleAttribute.mockReturnValueOnce( true );
 		expect(
 			getBlockEditingMode(
@@ -4661,6 +4671,7 @@ describe( 'getBlockEditingMode', () => {
 	} );
 
 	it( 'in navigation mode, blocks without content attributes within sections are disabled', () => {
+		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
 		expect(
 			getBlockEditingMode(
 				navigationModeStateWithRootSection,

package/src/style.scss

@@ -30,6 +30,7 @@
 @import "./components/global-styles/style.scss";
 @import "./components/grid/style.scss";
 @import "./components/height-control/style.scss";
+@import "./components/iframe/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";
 @import "./components/inspector-controls-tabs/style.scss";

package/src/utils/block-bindings.js

@@ -32,6 +32,8 @@ function isObjectEmpty( object ) {
  *
  * @since 6.7.0 Introduced in WordPress core.
  *
+ * @param {?string} clientId Optional block client ID. If not set, it will use the current block client ID from the context.
+ *
  * @return {?WPBlockBindingsUtils} Object containing the block bindings utils.
  *
  * @example
@@ -62,8 +64,9 @@ function isObjectEmpty( object ) {
  * removeAllBlockBindings();
  * ```
  */
-export function useBlockBindingsUtils() {
-	const { clientId } = useBlockEditContext();
+export function useBlockBindingsUtils( clientId ) {
+	const { clientId: contextClientId } = useBlockEditContext();
+	const blockClientId = clientId || contextClientId;
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const { getBlockAttributes } = useRegistry().select( blockEditorStore );
 
@@ -98,7 +101,7 @@ export function useBlockBindingsUtils() {
 	 */
 	const updateBlockBindings = ( bindings ) => {
 		const { metadata: { bindings: currentBindings, ...metadata } = {} } =
-			getBlockAttributes( clientId );
+			getBlockAttributes( blockClientId );
 		const newBindings = { ...currentBindings };
 
 		Object.entries( bindings ).forEach( ( [ attribute, binding ] ) => {
@@ -118,7 +121,7 @@ export function useBlockBindingsUtils() {
 			delete newMetadata.bindings;
 		}
 
-		updateBlockAttributes( clientId, {
+		updateBlockAttributes( blockClientId, {
 			metadata: isObjectEmpty( newMetadata ) ? undefined : newMetadata,
 		} );
 	};
@@ -136,8 +139,8 @@ export function useBlockBindingsUtils() {
 	 */
 	const removeAllBlockBindings = () => {
 		const { metadata: { bindings, ...metadata } = {} } =
-			getBlockAttributes( clientId );
-		updateBlockAttributes( clientId, {
+			getBlockAttributes( blockClientId );
+		updateBlockAttributes( blockClientId, {
 			metadata: isObjectEmpty( metadata ) ? undefined : metadata,
 		} );
 	};

package/src/utils/test/use-block-bindings-utils.js

@@ -0,0 +1,174 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { dispatch, select } from '@wordpress/data';
+import {
+	createBlock,
+	getBlockTypes,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockBindingsUtils } from '../';
+
+describe( 'useBlockBindingsUtils', () => {
+	beforeAll( () => {
+		// Register all core blocks
+		registerCoreBlocks();
+	} );
+
+	let clientId;
+	beforeEach( async () => {
+		const block = createBlock( 'core/paragraph', {
+			metadata: {
+				name: 'Block name',
+				bindings: {
+					prop1: {
+						source: 'core/post-meta',
+						args: {
+							key: 'initial_key',
+						},
+					},
+					prop2: {
+						source: 'core/post-meta',
+						args: {
+							key: 'initial_key',
+						},
+					},
+				},
+			},
+		} );
+		await dispatch( blockEditorStore ).resetBlocks( [ block ] );
+		clientId = block.clientId;
+	} );
+
+	afterAll( () => {
+		// Remove blocks after all tests.
+		dispatch( blockEditorStore ).resetBlocks( [] );
+
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	it( 'should be possible to update just one connection', async () => {
+		renderHook( () => {
+			const { updateBlockBindings } = useBlockBindingsUtils( clientId );
+			updateBlockBindings( {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+			} );
+		} );
+		const { metadata } =
+			await select( blockEditorStore ).getBlockAttributes( clientId );
+		expect( metadata ).toMatchObject( {
+			// Other metadata properties shouldn't change.
+			name: 'Block name',
+			bindings: {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+				prop2: {
+					source: 'core/post-meta',
+					args: {
+						key: 'initial_key',
+					},
+				},
+			},
+		} );
+	} );
+
+	it( 'should be possible to update multiple connections at once', async () => {
+		renderHook( () => {
+			const { updateBlockBindings } = useBlockBindingsUtils( clientId );
+			updateBlockBindings( {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+				prop2: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+			} );
+		} );
+		const { metadata } =
+			await select( blockEditorStore ).getBlockAttributes( clientId );
+		expect( metadata ).toMatchObject( {
+			// Other metadata properties shouldn't change.
+			name: 'Block name',
+			bindings: {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+				prop2: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+			},
+		} );
+	} );
+
+	it( 'should be possible to remove connections', async () => {
+		renderHook( () => {
+			const { updateBlockBindings } = useBlockBindingsUtils( clientId );
+			updateBlockBindings( {
+				prop2: undefined,
+			} );
+		} );
+		const { metadata } =
+			await select( blockEditorStore ).getBlockAttributes( clientId );
+		expect( metadata ).toMatchObject( {
+			// Other metadata properties shouldn't change.
+			name: 'Block name',
+			bindings: {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'initial_key',
+					},
+				},
+			},
+		} );
+	} );
+
+	it( 'should be possible to remove all connections', async () => {
+		renderHook( () => {
+			const { removeAllBlockBindings } =
+				useBlockBindingsUtils( clientId );
+			removeAllBlockBindings();
+		} );
+		const { metadata } =
+			await select( blockEditorStore ).getBlockAttributes( clientId );
+		expect( metadata ).toMatchObject( {
+			// Other metadata properties shouldn't change.
+			name: 'Block name',
+		} );
+	} );
+} );