@wordpress/block-editor 14.9.0 → 14.10.0

package/src/store/test/reducer.js

@@ -12,8 +12,7 @@ import {
 	createBlock,
 	privateApis,
 } from '@wordpress/blocks';
-import { combineReducers, select } from '@wordpress/data';
-import { store as preferencesStore } from '@wordpress/preferences';
+import { combineReducers } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -3576,6 +3575,7 @@ describe( 'state', () => {
 				blocks,
 				settings,
 				zoomLevel,
+				blockEditingModes,
 			} )
 		);
 
@@ -3598,15 +3598,6 @@ describe( 'state', () => {
 		describe( 'edit mode', () => {
 			let initialState;
 			beforeAll( () => {
-				select.mockImplementation( ( storeName ) => {
-					if ( storeName === preferencesStore ) {
-						return {
-							get: jest.fn( () => 'edit' ),
-						};
-					}
-					return select( storeName );
-				} );
-
 				initialState = dispatchActions(
 					[
 						{
@@ -3651,10 +3642,6 @@ describe( 'state', () => {
 				);
 			} );
 
-			afterAll( () => {
-				select.mockRestore();
-			} );
-
 			it( 'returns no block editing modes when zoomed out / navigation mode are not active and there are no synced patterns', () => {
 				expect( initialState.derivedBlockEditingModes ).toEqual(
 					new Map()
@@ -3665,15 +3652,6 @@ describe( 'state', () => {
 		describe( 'synced patterns', () => {
 			let initialState;
 			beforeAll( () => {
-				select.mockImplementation( ( storeName ) => {
-					if ( storeName === preferencesStore ) {
-						return {
-							get: jest.fn( () => 'edit' ),
-						};
-					}
-					return select( storeName );
-				} );
-
 				// Simulates how the editor typically inserts controlled blocks,
 				// - first the pattern is inserted with no inner blocks.
 				// - next the pattern is marked as a controlled block.
@@ -3818,10 +3796,6 @@ describe( 'state', () => {
 				);
 			} );
 
-			afterAll( () => {
-				select.mockRestore();
-			} );
-
 			it( 'returns the expected block editing modes for synced patterns', () => {
 				// Only the parent pattern and its own children that have bindings
 				// are in contentOnly mode. All other blocks are disabled.
@@ -3840,60 +3814,8 @@ describe( 'state', () => {
 				);
 			} );
 
-			it( 'removes block editing modes when synced patterns are removed', () => {
-				const { derivedBlockEditingModes } = dispatchActions(
-					[
-						{
-							type: 'REMOVE_BLOCKS',
-							clientIds: [ 'root-pattern' ],
-						},
-					],
-					testReducer,
-					initialState
-				);
-
-				expect( derivedBlockEditingModes ).toEqual( new Map() );
-			} );
-
-			it( 'returns the expected block editing modes for synced patterns when switching to navigation mode', () => {
-				select.mockImplementation( ( storeName ) => {
-					if ( storeName === preferencesStore ) {
-						return {
-							get: jest.fn( () => 'navigation' ),
-						};
-					}
-					return select( storeName );
-				} );
-
-				const {
-					derivedBlockEditingModes,
-					derivedNavModeBlockEditingModes,
-				} = dispatchActions(
-					[
-						{
-							type: 'SET_EDITOR_MODE',
-							mode: 'navigation',
-						},
-					],
-					testReducer,
-					initialState
-				);
-
-				expect( derivedBlockEditingModes ).toEqual(
-					new Map(
-						Object.entries( {
-							'pattern-paragraph': 'disabled',
-							'pattern-group': 'disabled',
-							'pattern-paragraph-with-overrides': 'contentOnly', // Pattern child with bindings.
-							'nested-pattern': 'disabled',
-							'nested-paragraph': 'disabled',
-							'nested-group': 'disabled',
-							'nested-paragraph-with-overrides': 'disabled',
-						} )
-					)
-				);
-
-				expect( derivedNavModeBlockEditingModes ).toEqual(
+			it( 'returns the expected block editing modes for synced patterns in navigation mode', () => {
+				expect( initialState.derivedNavModeBlockEditingModes ).toEqual(
 					new Map(
 						Object.entries( {
 							'': 'contentOnly', // Section root.
@@ -3912,15 +3834,21 @@ describe( 'state', () => {
 						} )
 					)
 				);
+			} );
 
-				select.mockImplementation( ( storeName ) => {
-					if ( storeName === preferencesStore ) {
-						return {
-							get: jest.fn( () => 'edit' ),
-						};
-					}
-					return select( storeName );
-				} );
+			it( 'removes block editing modes when synced patterns are removed', () => {
+				const { derivedBlockEditingModes } = dispatchActions(
+					[
+						{
+							type: 'REMOVE_BLOCKS',
+							clientIds: [ 'root-pattern' ],
+						},
+					],
+					testReducer,
+					initialState
+				);
+
+				expect( derivedBlockEditingModes ).toEqual( new Map() );
 			} );
 
 			it( 'returns the expected block editing modes for synced patterns when switching to zoomed out mode', () => {
@@ -3961,52 +3889,104 @@ describe( 'state', () => {
 			let initialState;
 
 			beforeAll( () => {
-				select.mockImplementation( ( storeName ) => {
-					if ( storeName === preferencesStore ) {
-						return {
-							get: jest.fn( () => 'navigation' ),
-						};
-					}
-					return select( storeName );
-				} );
-
 				initialState = dispatchActions(
 					[
 						{
 							type: 'UPDATE_SETTINGS',
 							settings: {
-								[ sectionRootClientIdKey ]: '',
+								[ sectionRootClientIdKey ]: 'section-root',
 							},
 						},
 						{
 							type: 'RESET_BLOCKS',
 							blocks: [
+								{
+									name: 'core/template-part',
+									clientId: 'header',
+									attributes: {},
+									innerBlocks: [],
+								},
 								{
 									name: 'core/group',
-									clientId: 'group-1',
+									clientId: 'section-root',
 									attributes: {},
 									innerBlocks: [
-										{
-											name: 'core/paragraph',
-											clientId: 'paragraph-1',
-											attributes: {},
-											innerBlocks: [],
-										},
 										{
 											name: 'core/group',
-											clientId: 'group-2',
+											clientId: 'group-1',
 											attributes: {},
 											innerBlocks: [
 												{
 													name: 'core/paragraph',
-													clientId: 'paragraph-2',
+													clientId: 'paragraph-1',
 													attributes: {},
 													innerBlocks: [],
 												},
+												{
+													name: 'core/group',
+													clientId: 'group-2',
+													attributes: {},
+													innerBlocks: [
+														{
+															name: 'core/paragraph',
+															clientId:
+																'paragraph-2',
+															attributes: {},
+															innerBlocks: [],
+														},
+													],
+												},
 											],
 										},
 									],
 								},
+								{
+									name: 'core/template-part',
+									clientId: 'footer',
+									attributes: {},
+									innerBlocks: [],
+								},
+							],
+						},
+						{
+							type: 'SET_HAS_CONTROLLED_INNER_BLOCKS',
+							clientId: 'header',
+							hasControlledInnerBlocks: true,
+						},
+						{
+							type: 'REPLACE_INNER_BLOCKS',
+							rootClientId: 'header',
+							blocks: [
+								{
+									name: 'core/group',
+									clientId: 'header-group',
+									attributes: {},
+									innerBlocks: [
+										{
+											name: 'core/paragraph',
+											clientId: 'header-paragraph',
+											attributes: {},
+											innerBlocks: [],
+										},
+									],
+								},
+							],
+						},
+						{
+							type: 'SET_HAS_CONTROLLED_INNER_BLOCKS',
+							clientId: 'footer',
+							hasControlledInnerBlocks: true,
+						},
+						{
+							type: 'REPLACE_INNER_BLOCKS',
+							rootClientId: 'footer',
+							blocks: [
+								{
+									name: 'core/paragraph',
+									clientId: 'footer-paragraph',
+									attributes: {},
+									innerBlocks: [],
+								},
 							],
 						},
 					],
@@ -4014,15 +3994,17 @@ describe( 'state', () => {
 				);
 			} );
 
-			afterAll( () => {
-				select.mockRestore();
-			} );
-
 			it( 'returns the expected block editing modes', () => {
 				expect( initialState.derivedNavModeBlockEditingModes ).toEqual(
 					new Map(
 						Object.entries( {
-							'': 'contentOnly', // Section root.
+							'': 'disabled',
+							header: 'contentOnly', // Template part.
+							'header-group': 'disabled', // Content block in template part.
+							'header-paragraph': 'contentOnly', // Content block in template part.
+							footer: 'contentOnly', // Template part.
+							'footer-paragraph': 'contentOnly', // Content block in template part.
+							'section-root': 'contentOnly', // Section root.
 							'group-1': 'contentOnly', // Section block.
 							'paragraph-1': 'contentOnly', // Content block in section.
 							'group-2': 'disabled', // Non-content block in section.
@@ -4032,6 +4014,49 @@ describe( 'state', () => {
 				);
 			} );
 
+			it( 'allows content blocks to be disabled explicitly using the block editing mode', () => {
+				const {
+					derivedNavModeBlockEditingModes,
+					blockEditingModes: _blockEditingModes,
+				} = dispatchActions(
+					[
+						{
+							type: 'SET_BLOCK_EDITING_MODE',
+							clientId: 'paragraph-1',
+							mode: 'disabled',
+						},
+					],
+					testReducer,
+					initialState
+				);
+
+				// Paragraph 1 is explicitly disabled and omitted from the
+				// derived block editing modes.
+				expect( _blockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'paragraph-1': 'disabled',
+						} )
+					)
+				);
+				expect( derivedNavModeBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'disabled',
+							header: 'contentOnly',
+							'header-group': 'disabled',
+							'header-paragraph': 'contentOnly',
+							footer: 'contentOnly',
+							'footer-paragraph': 'contentOnly',
+							'section-root': 'contentOnly',
+							'group-1': 'contentOnly',
+							'group-2': 'disabled',
+							'paragraph-2': 'contentOnly',
+						} )
+					)
+				);
+			} );
+
 			it( 'removes block editing modes when blocks are removed', () => {
 				const { derivedNavModeBlockEditingModes } = dispatchActions(
 					[
@@ -4047,7 +4072,13 @@ describe( 'state', () => {
 				expect( derivedNavModeBlockEditingModes ).toEqual(
 					new Map(
 						Object.entries( {
-							'': 'contentOnly',
+							'': 'disabled',
+							header: 'contentOnly', // Template part.
+							'header-group': 'disabled', // Content block in template part.
+							'header-paragraph': 'contentOnly', // Content block in template part.
+							footer: 'contentOnly', // Template part.
+							'footer-paragraph': 'contentOnly', // Content block in template part.
+							'section-root': 'contentOnly',
 							'group-1': 'contentOnly',
 							'paragraph-1': 'contentOnly',
 						} )
@@ -4060,7 +4091,7 @@ describe( 'state', () => {
 					[
 						{
 							type: 'INSERT_BLOCKS',
-							rootClientId: '',
+							rootClientId: 'section-root',
 							blocks: [
 								{
 									name: 'core/group',
@@ -4091,7 +4122,13 @@ describe( 'state', () => {
 				expect( derivedNavModeBlockEditingModes ).toEqual(
 					new Map(
 						Object.entries( {
-							'': 'contentOnly', // Section root.
+							'': 'disabled', // Section root.
+							header: 'contentOnly', // Template part.
+							'header-group': 'disabled', // Content block in template part.
+							'header-paragraph': 'contentOnly', // Content block in template part.
+							footer: 'contentOnly', // Template part.
+							'footer-paragraph': 'contentOnly', // Content block in template part.
+							'section-root': 'contentOnly', // Section root.
 							'group-1': 'contentOnly', // Section block.
 							'paragraph-1': 'contentOnly', // Content block in section.
 							'group-2': 'disabled', // Non-content block in section.
@@ -4111,7 +4148,7 @@ describe( 'state', () => {
 							type: 'MOVE_BLOCKS_TO_POSITION',
 							clientIds: [ 'group-2' ],
 							fromRootClientId: 'group-1',
-							toRootClientId: '',
+							toRootClientId: 'section-root',
 						},
 					],
 					testReducer,
@@ -4120,7 +4157,13 @@ describe( 'state', () => {
 				expect( derivedNavModeBlockEditingModes ).toEqual(
 					new Map(
 						Object.entries( {
-							'': 'contentOnly', // Section root.
+							'': 'disabled', // Section root.
+							header: 'contentOnly', // Template part.
+							'header-group': 'disabled', // Content block in template part.
+							'header-paragraph': 'contentOnly', // Content block in template part.
+							footer: 'contentOnly', // Template part.
+							'footer-paragraph': 'contentOnly', // Content block in template part.
+							'section-root': 'contentOnly', // Section root.
 							'group-1': 'contentOnly', // Section block.
 							'paragraph-1': 'contentOnly', // Content block in section.
 							'group-2': 'contentOnly', // New section block.
@@ -4148,10 +4191,16 @@ describe( 'state', () => {
 					new Map(
 						Object.entries( {
 							'': 'disabled',
-							'group-1': 'contentOnly',
-							'paragraph-1': 'contentOnly',
-							'group-2': 'contentOnly',
-							'paragraph-2': 'contentOnly',
+							header: 'contentOnly', // Template part.
+							'header-group': 'disabled', // Content block in template part.
+							'header-paragraph': 'contentOnly', // Content block in template part.
+							footer: 'contentOnly', // Template part.
+							'footer-paragraph': 'contentOnly', // Content block in template part.
+							'section-root': 'disabled',
+							'group-1': 'contentOnly', // New section root.
+							'paragraph-1': 'contentOnly', // Section and content block
+							'group-2': 'contentOnly', // Section.
+							'paragraph-2': 'contentOnly', // Content block.
 						} )
 					)
 				);
@@ -4224,49 +4273,6 @@ describe( 'state', () => {
 				);
 			} );
 
-			it( 'overrides navigation mode', () => {
-				select.mockImplementation( ( storeName ) => {
-					if ( storeName === preferencesStore ) {
-						return {
-							get: jest.fn( () => 'navigation' ),
-						};
-					}
-					return select( storeName );
-				} );
-
-				const { derivedBlockEditingModes } = dispatchActions(
-					[
-						{
-							type: 'SET_EDITOR_MODE',
-							mode: 'navigation',
-						},
-					],
-					testReducer,
-					initialState
-				);
-
-				expect( derivedBlockEditingModes ).toEqual(
-					new Map(
-						Object.entries( {
-							'': 'contentOnly', // Section root.
-							'group-1': 'contentOnly', // Section block.
-							'paragraph-1': 'disabled',
-							'group-2': 'disabled',
-							'paragraph-2': 'disabled',
-						} )
-					)
-				);
-
-				select.mockImplementation( ( storeName ) => {
-					if ( storeName === preferencesStore ) {
-						return {
-							get: jest.fn( () => 'edit' ),
-						};
-					}
-					return select( storeName );
-				} );
-			} );
-
 			it( 'removes block editing modes when blocks are removed', () => {
 				const { derivedBlockEditingModes } = dispatchActions(
 					[

package/src/store/test/selectors.js

@@ -4465,6 +4465,7 @@ describe( 'getBlockEditingMode', () => {
 			'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {},
 		},
 		blockEditingModes: new Map( [] ),
+		derivedBlockEditingModes: new Map( [] ),
 	};
 
 	const hasContentRoleAttribute = jest.fn( () => false );
@@ -4519,6 +4520,13 @@ describe( 'getBlockEditingMode', () => {
 			blockEditingModes: new Map( [
 				[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
 			] ),
+			derivedBlockEditingModes: new Map( [
+				[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ],
+				[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ],
+				[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ],
+				[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ],
+				[ '9b9c5c3f-2e46-4f02-9e14-9fed515b958s', 'disabled' ],
+			] ),
 		};
 		expect(
 			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
@@ -4545,6 +4553,12 @@ describe( 'getBlockEditingMode', () => {
 				[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'default' ],
 				[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ],
 			] ),
+			derivedBlockEditingModes: new Map( [
+				[ '6cf70164-9097-4460-bcbf-200560546988', 'disabled' ],
+				[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ],
+				[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ],
+				[ '9b9c5c3f-2e46-4f02-9e14-9fed515b958s', 'disabled' ],
+			] ),
 		};
 		expect(
 			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
@@ -4555,6 +4569,15 @@ describe( 'getBlockEditingMode', () => {
 		const state = {
 			...baseState,
 			blockEditingModes: new Map( [ [ '', 'disabled' ] ] ),
+			derivedBlockEditingModes: new Map( [
+				[ '6cf70164-9097-4460-bcbf-200560546988', 'disabled' ],
+				[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
+				[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ],
+				[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ],
+				[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ],
+				[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ],
+				[ '9b9c5c3f-2e46-4f02-9e14-9fed515b958s', 'disabled' ],
+			] ),
 		};
 		expect(
 			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )

package/src/utils/block-bindings.js

@@ -9,10 +9,105 @@ import { useDispatch, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '../store';
 import { useBlockEditContext } from '../components/block-edit';
 
+const DEFAULT_ATTRIBUTE = '__default';
+const PATTERN_OVERRIDES_SOURCE = 'core/pattern-overrides';
+const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
+	'core/paragraph': [ 'content' ],
+	'core/heading': [ 'content' ],
+	'core/image': [ 'id', 'url', 'title', 'alt' ],
+	'core/button': [ 'url', 'text', 'linkTarget', 'rel' ],
+};
+
+/**
+ * Checks if the given object is empty.
+ *
+ * @param {?Object} object The object to check.
+ *
+ * @return {boolean} Whether the object is empty.
+ */
 function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
+/**
+ * Based on the given block name, checks if it is possible to bind the block.
+ *
+ * @param {string} blockName The name of the block.
+ *
+ * @return {boolean} Whether it is possible to bind the block to sources.
+ */
+export function canBindBlock( blockName ) {
+	return blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS;
+}
+
+/**
+ * Based on the given block name and attribute name, checks if it is possible to bind the block attribute.
+ *
+ * @param {string} blockName     The name of the block.
+ * @param {string} attributeName The name of attribute.
+ *
+ * @return {boolean} Whether it is possible to bind the block attribute.
+ */
+export function canBindAttribute( blockName, attributeName ) {
+	return (
+		canBindBlock( blockName ) &&
+		BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ].includes( attributeName )
+	);
+}
+
+/**
+ * Gets the bindable attributes for a given block.
+ *
+ * @param {string} blockName The name of the block.
+ *
+ * @return {string[]} The bindable attributes for the block.
+ */
+export function getBindableAttributes( blockName ) {
+	return BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];
+}
+
+/**
+ * Checks if the block has the `__default` binding for pattern overrides.
+ *
+ * @param {?Record<string, object>} bindings A block's bindings from the metadata attribute.
+ *
+ * @return {boolean} Whether the block has the `__default` binding for pattern overrides.
+ */
+export function hasPatternOverridesDefaultBinding( bindings ) {
+	return bindings?.[ DEFAULT_ATTRIBUTE ]?.source === PATTERN_OVERRIDES_SOURCE;
+}
+
+/**
+ * Returns the bindings with the `__default` binding for pattern overrides
+ * replaced with the full-set of supported attributes. e.g.:
+ *
+ * - bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`
+ * - bindings returned: `{ content: { source: 'core/pattern-overrides' } }`
+ *
+ * @param {string}                  blockName The block name (e.g. 'core/paragraph').
+ * @param {?Record<string, object>} bindings  A block's bindings from the metadata attribute.
+ *
+ * @return {Object} The bindings with default replaced for pattern overrides.
+ */
+export function replacePatternOverridesDefaultBinding( blockName, bindings ) {
+	// The `__default` binding currently only works for pattern overrides.
+	if ( hasPatternOverridesDefaultBinding( bindings ) ) {
+		const supportedAttributes = BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];
+		const bindingsWithDefaults = {};
+		for ( const attributeName of supportedAttributes ) {
+			// If the block has mixed binding sources, retain any non pattern override bindings.
+			const bindingSource = bindings[ attributeName ]
+				? bindings[ attributeName ]
+				: { source: PATTERN_OVERRIDES_SOURCE };
+			bindingsWithDefaults[ attributeName ] = bindingSource;
+		}
+
+		return bindingsWithDefaults;
+	}
+
+	return bindings;
+}
+
 /**
  * Contains utils to update the block `bindings` metadata.
  *

package/tsconfig.json

@@ -1,10 +1,6 @@
 {
 	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
-	"compilerOptions": {
-		"rootDir": "src",
-		"declarationDir": "build-types"
-	},
 	"references": [
 		{ "path": "../a11y" },
 		{ "path": "../api-fetch" },
@@ -37,5 +33,6 @@
 	// NOTE: This package is being progressively typed. You are encouraged to
 	// expand this array with files which can be type-checked. At some point in
 	// the future, this can be simplified to an `includes` of `src/**/*`.
-	"files": [ "src/components/block-context/index.js", "src/utils/dom.js" ]
+	"files": [ "src/components/block-context/index.js", "src/utils/dom.js" ],
+	"include": []
 }