@wordpress/block-editor 16.1.0 → 16.2.0

package/src/hooks/use-spacing-props.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getInlineStyles } from './style';
 
 // This utility is intended to assist where the serialization of the spacing

package/src/hooks/use-typography-props.js

@@ -1,22 +1,8 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
+import { kebabCase } from '@wordpress/kebab-case';
 import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
-import { unlock } from '../lock-unlock';
-
-const { kebabCase } = unlock( componentsPrivateApis );
 
 /*
  * This utility is intended to assist where the serialization of the typography

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

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 

package/src/hooks/utils.js

@@ -1,20 +1,9 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { getBlockSupport } from '@wordpress/blocks';
 import { memo, useMemo, useEffect, useId, useState } from '@wordpress/element';
 import { useDispatch, useRegistry } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
 import {
 	useBlockEditContext,
 	mayDisplayControlsKey,

package/src/index.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import './hooks';
 export {
 	getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,

package/src/layouts/constrained.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
@@ -19,10 +16,6 @@ import {
 	justifyRight,
 } from '@wordpress/icons';
 import { getCSSRules } from '@wordpress/style-engine';
-
-/**
- * Internal dependencies
- */
 import { useSettings } from '../components/use-settings';
 import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';
 import { getGapCSSValue } from '../hooks/gap';

package/src/layouts/flex.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __, _x } from '@wordpress/i18n';
 import {
 	justifyLeft,
@@ -23,10 +20,6 @@ import {
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import { appendSelectors, getBlockGapCSS } from './utils';
 import { getGapCSSValue, getGapBoxControlValueFromStyle } from '../hooks/gap';
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';

package/src/layouts/flow.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { getBlockGapCSS, getAlignmentsInfo } from './utils';
 import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';

package/src/layouts/grid.js

@@ -1,8 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
-
 import {
 	BaseControl,
 	Flex,
@@ -17,10 +13,6 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { appendSelectors, getBlockGapCSS } from './utils';
 import { getGapCSSValue, getGapBoxControlValueFromStyle } from '../hooks/gap';
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';

package/src/layouts/index.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import flex from './flex';
 import flow from './flow';
 import constrained from './constrained';

package/src/layouts/test/constrained.js

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import constrained from '../constrained';
 
 const ConstrainedLayoutInspectorControls = constrained.inspectorControls;

package/src/layouts/test/flex.js

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import flex from '../flex';
 
 const FlexLayoutInspectorControls = flex.inspectorControls;

package/src/layouts/test/flow.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import flow from '../flow';
 
 describe( 'getLayoutStyle', () => {

package/src/layouts/test/grid.js

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import grid from '../grid';
 
 const GridLayoutInspectorControls = grid.inspectorControls;

package/src/layouts/test/utils.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { appendSelectors, getBlockGapCSS } from '../utils';
 
 const layoutDefinitions = {

package/src/layouts/utils.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { LAYOUT_DEFINITIONS } from './definitions';
 
 /**

package/src/lock-unlock.ts

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
 
 export const { lock, unlock } =

package/src/private-apis.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock, unlock } from './lock-unlock';

package/src/store/actions.js

@@ -1,7 +1,4 @@
 /* eslint no-console: [ 'error', { allow: [ 'error', 'warn' ] } ] */
-/**
- * WordPress dependencies
- */
 import {
 	cloneBlock,
 	cloneSanitizedBlock,
@@ -22,10 +19,6 @@ 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
- */
 import {
 	retrieveSelectedAttribute,
 	findRichTextAttributeKey,
@@ -36,6 +29,7 @@ import {
 	privateRemoveBlocks,
 	editContentOnlySection,
 } from './private-actions';
+import { getSiblingBlockAttributes } from '../utils/sibling-block-attributes';
 
 /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
@@ -328,13 +322,31 @@ export const multiSelect =
 		} );
 
 		const blockCount = select.getSelectedBlockCount();
+		const nestedBlockCount = select.getClientIdsOfDescendants(
+			select.getMultiSelectedBlockClientIds()
+		).length;
 
 		speak(
-			sprintf(
-				/* translators: %s: number of selected blocks */
-				_n( '%s block selected.', '%s blocks selected.', blockCount ),
-				blockCount
-			),
+			nestedBlockCount
+				? sprintf(
+						/* translators: 1: number of selected blocks. 2: number of blocks including nested blocks. */
+						_n(
+							'%1$s block selected, %2$s including nested blocks.',
+							'%1$s blocks selected, %2$s including nested blocks.',
+							blockCount
+						),
+						blockCount,
+						blockCount + nestedBlockCount
+				  )
+				: sprintf(
+						/* translators: %s: number of selected blocks */
+						_n(
+							'%s block selected.',
+							'%s blocks selected.',
+							blockCount
+						),
+						blockCount
+				  ),
 			'assertive'
 		);
 	};
@@ -393,18 +405,26 @@ export const replaceBlocks =
 				return;
 			}
 		}
+		const blocksWithTemplates = applyBlockTypeTemplates( blocks );
 		// We're batching these two actions because an extra `undo/redo` step can
 		// be created, based on whether we insert a default block or not.
 		registry.batch( () => {
 			dispatch( {
 				type: 'REPLACE_BLOCKS',
 				clientIds,
-				blocks,
+				blocks: blocksWithTemplates,
 				time: Date.now(),
 				indexToSelect,
 				initialPosition,
 				meta,
 			} );
+			selectBlockTypeTemplate(
+				select,
+				dispatch,
+				blocks,
+				blocksWithTemplates,
+				initialPosition
+			);
 			// To avoid a focus loss when removing the last block, assure there is
 			// always a default block if the last of the blocks have been removed.
 			dispatch.ensureDefaultBlock();
@@ -550,6 +570,89 @@ export function insertBlock(
 	);
 }
 
+/**
+ * Applies block type templates to empty blocks. When a block type declares a
+ * `template` in its settings, an empty block of that type receives the
+ * template's child blocks at creation, so insertion needs no follow-up
+ * template synchronization.
+ *
+ * @param {Object[]} blocks        Block objects.
+ * @param {Set}      expandedTypes Block names whose templates are already
+ *                                 being expanded higher up the tree. A
+ *                                 template that transitively contains its
+ *                                 own block type would otherwise expand
+ *                                 forever; the nested occurrence stays
+ *                                 empty instead.
+ *
+ * @return {Object[]} Block objects with templates applied.
+ */
+function applyBlockTypeTemplates( blocks, expandedTypes = new Set() ) {
+	let hasChanges = false;
+	const result = blocks.map( ( block ) => {
+		let { innerBlocks } = block;
+		if ( innerBlocks?.length ) {
+			innerBlocks = applyBlockTypeTemplates( innerBlocks, expandedTypes );
+		} else if ( ! expandedTypes.has( block.name ) ) {
+			const { template } = getBlockType( block.name ) ?? {};
+			if ( template?.length ) {
+				innerBlocks = applyBlockTypeTemplates(
+					synchronizeBlocksWithTemplate( [], template ),
+					new Set( expandedTypes ).add( block.name )
+				);
+			}
+		}
+		if ( innerBlocks === block.innerBlocks ) {
+			return block;
+		}
+		hasChanges = true;
+		return { ...block, innerBlocks };
+	} );
+	return hasChanges ? result : blocks;
+}
+
+/**
+ * Moves the selection into the first inner leaf block of a freshly
+ * scaffolded block, when the block ended up selected and its block type
+ * opts in with `templateInsertUpdatesSelection`. Expects the state to
+ * reflect the insertion, and applies the same selection a template
+ * insertion updates the selection to.
+ *
+ * @param {Function}  select              Store select function.
+ * @param {Function}  dispatch            Store dispatch function.
+ * @param {Object[]}  originalBlocks      Block objects before templates were applied.
+ * @param {Object[]}  blocksWithTemplates Block objects after templates were applied.
+ * @param {0|-1|null} initialPosition     Initial focus position.
+ */
+function selectBlockTypeTemplate(
+	select,
+	dispatch,
+	originalBlocks,
+	blocksWithTemplates,
+	initialPosition
+) {
+	const selectedClientId = select.getSelectedBlockClientId();
+	if ( ! selectedClientId ) {
+		return;
+	}
+	const index = blocksWithTemplates.findIndex(
+		( block ) => block.clientId === selectedClientId
+	);
+	if (
+		index === -1 ||
+		blocksWithTemplates[ index ] === originalBlocks[ index ] ||
+		! blocksWithTemplates[ index ].innerBlocks.length ||
+		! getBlockType( blocksWithTemplates[ index ].name )
+			?.templateInsertUpdatesSelection
+	) {
+		return;
+	}
+	let block = blocksWithTemplates[ index ];
+	while ( block.innerBlocks[ 0 ] ) {
+		block = block.innerBlocks[ 0 ];
+	}
+	dispatch.selectBlock( block.clientId, initialPosition );
+}
+
 /**
  * Action that inserts an array of blocks, optionally at a specific index respective a root block list.
  *
@@ -574,7 +677,7 @@ export const insertBlocks =
 		initialPosition = 0,
 		meta
 	) =>
-	( { select, dispatch } ) => {
+	( { select, dispatch, registry } ) => {
 		if ( initialPosition !== null && typeof initialPosition === 'object' ) {
 			meta = initialPosition;
 			initialPosition = 0;
@@ -599,15 +702,26 @@ export const insertBlocks =
 			}
 		}
 		if ( allowedBlocks.length ) {
-			dispatch( {
-				type: 'INSERT_BLOCKS',
-				blocks: allowedBlocks,
-				index,
-				rootClientId,
-				time: Date.now(),
-				updateSelection,
-				initialPosition: updateSelection ? initialPosition : null,
-				meta,
+			const blocksWithTemplates =
+				applyBlockTypeTemplates( allowedBlocks );
+			registry.batch( () => {
+				dispatch( {
+					type: 'INSERT_BLOCKS',
+					blocks: blocksWithTemplates,
+					index,
+					rootClientId,
+					time: Date.now(),
+					updateSelection,
+					initialPosition: updateSelection ? initialPosition : null,
+					meta,
+				} );
+				selectBlockTypeTemplate(
+					select,
+					dispatch,
+					allowedBlocks,
+					blocksWithTemplates,
+					initialPosition
+				);
 			} );
 		}
 	};
@@ -956,14 +1070,19 @@ export const __unstableSplitSelection =
 			else if ( ! select.getBlockOrder( selectionA.clientId ).length ) {
 				function createEmpty() {
 					const defaultBlockName = getDefaultBlockName();
-					return select.canInsertBlockType(
-						defaultBlockName,
-						anchorRootClientId
-					)
-						? createBlock( defaultBlockName )
-						: createBlock(
-								select.getBlockName( selectionA.clientId )
-						  );
+					if (
+						select.canInsertBlockType(
+							defaultBlockName,
+							anchorRootClientId
+						)
+					) {
+						return createBlock( defaultBlockName );
+					}
+					const name = select.getBlockName( selectionA.clientId );
+					return createBlock(
+						name,
+						getSiblingBlockAttributes( name, blockAttributes )
+					);
 				}
 
 				const length = blockAttributes[ attributeKeyA ].length;
@@ -1800,19 +1919,14 @@ export const insertBeforeBlock =
 			return dispatch.insertDefaultBlock( {}, rootClientId, blockIndex );
 		}
 
-		const copiedAttributes = {};
-		if ( directInsertBlock.attributesToCopy ) {
-			const attributes = select.getBlockAttributes( clientId );
-			directInsertBlock.attributesToCopy.forEach( ( key ) => {
-				if ( attributes[ key ] ) {
-					copiedAttributes[ key ] = attributes[ key ];
-				}
-			} );
-		}
-
 		const block = createBlock( directInsertBlock.name, {
 			...directInsertBlock.attributes,
-			...copiedAttributes,
+			...( select.getBlockName( clientId ) === directInsertBlock.name
+				? getSiblingBlockAttributes(
+						directInsertBlock.name,
+						select.getBlockAttributes( clientId )
+				  )
+				: {} ),
 		} );
 		return dispatch.insertBlock( block, blockIndex, rootClientId );
 	};
@@ -1843,19 +1957,14 @@ export const insertAfterBlock =
 			);
 		}
 
-		const copiedAttributes = {};
-		if ( directInsertBlock.attributesToCopy ) {
-			const attributes = select.getBlockAttributes( clientId );
-			directInsertBlock.attributesToCopy.forEach( ( key ) => {
-				if ( attributes[ key ] ) {
-					copiedAttributes[ key ] = attributes[ key ];
-				}
-			} );
-		}
-
 		const block = createBlock( directInsertBlock.name, {
 			...directInsertBlock.attributes,
-			...copiedAttributes,
+			...( select.getBlockName( clientId ) === directInsertBlock.name
+				? getSiblingBlockAttributes(
+						directInsertBlock.name,
+						select.getBlockAttributes( clientId )
+				  )
+				: {} ),
 		} );
 		return dispatch.insertBlock( block, blockIndex + 1, rootClientId );
 	};

package/src/store/defaults.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __, _x } from '@wordpress/i18n';
 
 export const PREFERENCES_DEFAULTS = {
@@ -26,6 +23,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {string}        titlePlaceholder                       Empty title placeholder
  * @property {boolean}       canLockBlocks                          Whether the user can manage Block Lock state
  * @property {boolean}       codeEditingEnabled                     Whether or not the user can switch to the code editor
+ * @property {boolean}       blockStatesEditingEnabled              Whether or not block style states editing is enabled
  * @property {boolean}       generateAnchors                        Enable/Disable auto anchor generation for Heading blocks
  * @property {boolean}       enableOpenverseMediaCategory           Enable/Disable the Openverse media category in the inserter.
  * @property {boolean}       clearBlockSelection                    Whether the block editor should clear selection on mousedown when a block is not clicked.
@@ -157,6 +155,9 @@ export const SETTINGS_DEFAULTS = {
 	// Allows to disable block locking interface.
 	canLockBlocks: true,
 
+	// Allows to disable the block-level style states interface.
+	blockStatesEditingEnabled: true,
+
 	// Whether the user can edit custom CSS (requires edit_css capability).
 	// Defaults to false for safety - PHP passes true when user has capability.
 	canEditCSS: false,

package/src/store/get-block-settings.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import {
 	__EXPERIMENTAL_PATHS_WITH_OVERRIDE as PATHS_WITH_OVERRIDE,
 	hasBlockSupport,
 } from '@wordpress/blocks';
 import { applyFilters } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
 import { getValueFromObjectPath } from '../utils/object';
 import { getBlockName, getSettings, getBlockAttributes } from './selectors';
 

package/src/store/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { createReduxStore, registerStore } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import reducer from './reducer';
 import * as selectors from './selectors';
 import * as privateActions from './private-actions';

package/src/store/private-actions.js

@@ -1,9 +1,7 @@
-/**
- * WordPress dependencies
- */
 import deprecated from '@wordpress/deprecated';
 import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
+import { getBlockType, isUnmodifiedBlock } from '@wordpress/blocks';
 
 const castArray = ( maybeArray ) =>
 	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
@@ -166,14 +164,44 @@ export const privateRemoveBlocks =
 			}
 		}
 
+		// When the removal covers all the inner blocks of an otherwise
+		// unmodified container, remove the container as well: an empty
+		// husk requiring a second removal is never the intention.
+		let removeRoot = false;
+		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
+		// A wrapper that only exists as a slot of a larger block (a column
+		// in columns) keeps its place: emptying it must not reshape the
+		// parent layout.
+		if (
+			rootClientId &&
+			! getBlockType( select.getBlockName( rootClientId ) )?.parent
+				?.length
+		) {
+			const blockOrder = select.getBlockOrder( rootClientId );
+			removeRoot =
+				blockOrder.length === clientIds.length &&
+				blockOrder.every( ( clientId ) =>
+					clientIds.includes( clientId )
+				) &&
+				isUnmodifiedBlock(
+					select.__unstableGetBlockWithoutInnerBlocks( rootClientId )
+				);
+		}
+
 		if ( selectPrevious ) {
-			dispatch.selectPreviousBlock( clientIds[ 0 ], selectPrevious );
+			dispatch.selectPreviousBlock(
+				removeRoot ? rootClientId : clientIds[ 0 ],
+				selectPrevious
+			);
 		}
 
 		// We're batching these two actions because an extra `undo/redo` step can
 		// be created, based on whether we insert a default block or not.
 		registry.batch( () => {
-			dispatch( { type: 'REMOVE_BLOCKS', clientIds } );
+			dispatch( {
+				type: 'REMOVE_BLOCKS',
+				clientIds: removeRoot ? [ rootClientId ] : clientIds,
+			} );
 			// To avoid a focus loss when removing the last block, assure there is
 			// always a default block if the last of the blocks have been removed.
 			dispatch( ensureDefaultBlock() );