@wordpress/block-editor 14.4.0 → 14.6.0

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
@@ -40,6 +41,7 @@ import {
 	getSectionRootClientId,
 	isSectionBlock,
 	getParentSectionBlock,
+	isZoomOut,
 } from './private-selectors';
 
 /**
@@ -540,6 +542,39 @@ export function getSelectedBlockClientId( state ) {
  *
  * @param {Object} state Global application state.
  *
+ * @example
+ *
+ *```js
+ * import { select } from '@wordpress/data'
+ * import { store as blockEditorStore } from '@wordpress/block-editor'
+ *
+ * // Set initial active block client ID
+ * let activeBlockClientId = null
+ *
+ * const getActiveBlockData = () => {
+ * 	const activeBlock = select(blockEditorStore).getSelectedBlock()
+ *
+ * 	if (activeBlock && activeBlock.clientId !== activeBlockClientId) {
+ * 		activeBlockClientId = activeBlock.clientId
+ *
+ * 		// Get active block name and attributes
+ * 		const activeBlockName = activeBlock.name
+ * 		const activeBlockAttributes = activeBlock.attributes
+ *
+ * 		// Log active block name and attributes
+ * 		console.log(activeBlockName, activeBlockAttributes)
+ * 		}
+ * 	}
+ *
+ * 	// Subscribe to changes in the editor
+ * 	// wp.data.subscribe(() => {
+ * 		// getActiveBlockData()
+ * 	// })
+ *
+ * 	// Update active block data on click
+ * 	// onclick="getActiveBlockData()"
+ *```
+ *
  * @return {?Object} Selected block.
  */
 export function getSelectedBlock( state ) {
@@ -1551,12 +1586,18 @@ export function getTemplateLock( state, rootClientId ) {
  * @param {string|Object} blockNameOrType The block type object, e.g., the response
  *                                        from the block directory; or a string name of
  *                                        an installed block type, e.g.' core/paragraph'.
+ * @param {Set}           checkedBlocks   Set of block names that have already been checked.
  *
  * @return {boolean} Whether the given block type is allowed to be inserted.
  */
-const isBlockVisibleInTheInserter = ( state, blockNameOrType ) => {
+const isBlockVisibleInTheInserter = (
+	state,
+	blockNameOrType,
+	checkedBlocks = new Set()
+) => {
 	let blockType;
 	let blockName;
+
 	if ( blockNameOrType && 'object' === typeof blockNameOrType ) {
 		blockType = blockNameOrType;
 		blockName = blockNameOrType.name;
@@ -1564,6 +1605,7 @@ const isBlockVisibleInTheInserter = ( state, blockNameOrType ) => {
 		blockType = getBlockType( blockNameOrType );
 		blockName = blockNameOrType;
 	}
+
 	if ( ! blockType ) {
 		return false;
 	}
@@ -1579,17 +1621,29 @@ const isBlockVisibleInTheInserter = ( state, blockNameOrType ) => {
 		return false;
 	}
 
+	if ( checkedBlocks.has( blockName ) ) {
+		return false;
+	}
+
+	checkedBlocks.add( blockName );
+
 	// If parent blocks are not visible, child blocks should be hidden too.
-	if ( !! blockType.parent?.length ) {
+	if ( Array.isArray( blockType.parent ) ) {
 		return blockType.parent.some(
 			( name ) =>
-				isBlockVisibleInTheInserter( state, name ) ||
+				( blockName !== name &&
+					isBlockVisibleInTheInserter(
+						state,
+						name,
+						checkedBlocks
+					) ) ||
 				// Exception for blocks with post-content parent,
 				// the root level is often consider as "core/post-content".
 				// This exception should only apply to the post editor ideally though.
 				name === 'core/post-content'
 		);
 	}
+
 	return true;
 };
 
@@ -2384,6 +2438,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 +2474,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 +2753,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 +2763,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.
@@ -2873,10 +2937,8 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 		return true;
 	}
 
-	const editorMode = __unstableGetEditorMode( state );
-
 	// In zoom-out mode, the block overlay is always active for section level blocks.
-	if ( editorMode === 'zoom-out' ) {
+	if ( isZoomOut( state ) ) {
 		const sectionRootClientId = getSectionRootClientId( state );
 		if ( sectionRootClientId ) {
 			const sectionClientIds = getBlockOrder(
@@ -2975,8 +3037,7 @@ export const getBlockEditingMode = createRegistrySelector(
 			// In zoom-out mode, override the behavior set by
 			// __unstableSetBlockEditingMode to only allow editing the top-level
 			// sections.
-			const editorMode = __unstableGetEditorMode( state );
-			if ( editorMode === 'zoom-out' ) {
+			if ( isZoomOut( state ) ) {
 				const sectionRootClientId = getSectionRootClientId( state );
 
 				if ( clientId === '' /* ROOT_CONTAINER_CLIENT_ID */ ) {
@@ -2998,6 +3059,7 @@ export const getBlockEditingMode = createRegistrySelector(
 				return 'disabled';
 			}
 
+			const editorMode = __unstableGetEditorMode( state );
 			if ( editorMode === 'navigation' ) {
 				const sectionRootClientId = getSectionRootClientId( state );
 

package/src/store/test/actions.js

@@ -1125,6 +1125,47 @@ describe( 'actions', () => {
 		} );
 	} );
 
+	describe( 'updateSettings', () => {
+		it( 'warns when setting the deprecated __unstableIsPreviewMode property and sets the stable property instead', () => {
+			const consoleWarn = jest
+				.spyOn( global.console, 'warn' )
+				.mockImplementation();
+
+			const store = createRegistry().registerStore(
+				blockEditorStoreName,
+				{
+					actions,
+					selectors,
+					reducer,
+				}
+			);
+
+			store.dispatch(
+				updateSettings( {
+					__unstableIsPreviewMode: true,
+				} )
+			);
+
+			expect( consoleWarn ).toHaveBeenCalledWith(
+				"__unstableIsPreviewMode argument in wp.data.dispatch('core/block-editor').updateSettings is deprecated since version 6.8. Please use isPreviewMode instead."
+			);
+
+			consoleWarn.mockClear();
+
+			expect( store.getState().settings.__unstableIsPreviewMode ).toBe(
+				true
+			);
+
+			expect( store.getState().settings.isPreviewMode ).toBe( true );
+
+			expect( consoleWarn ).toHaveBeenCalledWith(
+				'__unstableIsPreviewMode is deprecated since version 6.8. Please use isPreviewMode instead.'
+			);
+
+			consoleWarn.mockRestore();
+		} );
+	} );
+
 	describe( 'registerInserterMediaCategory', () => {
 		describe( 'should log errors when invalid', () => {
 			it( 'valid object', () => {

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

@@ -32,6 +32,7 @@ import {
 	insertionPoint,
 	template,
 	blockListSettings,
+	settings,
 	lastBlockAttributesChange,
 	lastBlockInserted,
 	blockEditingModes,
@@ -3070,6 +3071,28 @@ describe( 'state', () => {
 		} );
 	} );
 
+	describe( 'settings', () => {
+		it( 'should warn about __unstableIsPreviewMode deprecation', () => {
+			const consoleWarn = jest
+				.spyOn( global.console, 'warn' )
+				.mockImplementation();
+
+			const settingsObject = settings( undefined, {
+				type: 'UPDATE_SETTINGS',
+				reset: true,
+			} );
+
+			expect( settingsObject.__unstableIsPreviewMode ).toBeDefined();
+			expect( settingsObject.isPreviewMode ).toBeDefined();
+
+			expect( consoleWarn ).toHaveBeenCalledWith(
+				'__unstableIsPreviewMode is deprecated since version 6.8. Please use isPreviewMode instead.'
+			);
+
+			consoleWarn.mockRestore();
+		} );
+	} );
+
 	describe( 'blockListSettings', () => {
 		it( 'should add new settings', () => {
 			const original = deepFreeze( {} );

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

@@ -118,6 +118,22 @@ function isElementVisible( element ) {
 	return true;
 }
 
+/**
+ * Checks if the element is scrollable.
+ *
+ * @param {Element} element Element.
+ * @return {boolean} True if the element is scrollable.
+ */
+function isScrollable( element ) {
+	const style = window.getComputedStyle( element );
+	return (
+		style.overflowX === 'auto' ||
+		style.overflowX === 'scroll' ||
+		style.overflowY === 'auto' ||
+		style.overflowY === 'scroll'
+	);
+}
+
 /**
  * Returns the rect of the element including all visible nested elements.
  *
@@ -136,19 +152,23 @@ function isElementVisible( element ) {
  */
 export function getVisibleElementBounds( element ) {
 	const viewport = element.ownerDocument.defaultView;
+
 	if ( ! viewport ) {
 		return new window.DOMRectReadOnly();
 	}
 
 	let bounds = element.getBoundingClientRect();
-
 	const stack = [ element ];
 	let currentElement;
 
 	while ( ( currentElement = stack.pop() ) ) {
 		for ( const child of currentElement.children ) {
 			if ( isElementVisible( child ) ) {
-				const childBounds = child.getBoundingClientRect();
+				let childBounds = child.getBoundingClientRect();
+				// If the parent is scrollable, use parent's scrollable bounds.
+				if ( isScrollable( currentElement ) ) {
+					childBounds = currentElement.getBoundingClientRect();
+				}
 				bounds = rectUnion( bounds, childBounds );
 				stack.push( child );
 			}

package/src/utils/get-font-styles-and-weights.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _x, __, sprintf } from '@wordpress/i18n';
+import { _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -173,7 +173,7 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 					? weightName
 					: sprintf(
 							/* translators: 1: Font weight name. 2: Font style name. */
-							__( '%1$s %2$s' ),
+							_x( '%1$s %2$s', 'font' ),
 							weightName,
 							styleName
 					  );

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