Merge branch 'trunk' into add/interactivity-api-feature-filter

.eslintrc.js

@@ -81,6 +81,7 @@ const restrictedImports = [
 			'flowRight',
 			'forEach',
 			'fromPairs',
+			'get',
 			'groupBy',
 			'has',
 			'identity',

docs/reference-guides/data/data-core-block-editor.md

@@ -485,6 +485,29 @@ _Returns_
 
 -   `Array`: ids of top-level and descendant blocks.
 
+### getDirectInsertBlock
+
+Returns the block to be directly inserted by the block appender.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+-   _rootClientId_ `?string`: Optional root client ID of block list.
+
+_Returns_
+
+-   `?WPDirectInsertBlock`: The block type to be directly inserted.
+
+_Type Definition_
+
+-   _WPDirectInsertBlock_ `Object`
+
+_Properties_
+
+-   _name_ `string`: The type of block.
+-   _attributes_ `?Object`: Attributes to pass to the newly created block.
+-   _attributesToCopy_ `?Array<string>`: Attributes to be copied from adjecent blocks when inserted.
+
 ### getDraggedBlockClientIds
 
 Returns the client ids of any blocks being directly dragged.

gutenberg.php

@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.1
  * Requires PHP: 5.6
- * Version: 16.2.0
+ * Version: 16.2.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "16.2.0",
+	"version": "16.2.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

packages/block-editor/package.json

@@ -72,7 +72,6 @@
 		"dom-scroll-into-view": "^1.2.1",
 		"fast-deep-equal": "^3.1.3",
 		"inherits": "^2.0.3",
-		"lodash": "^4.17.21",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^4.5.1",
 		"rememo": "^4.0.2",

packages/block-editor/src/components/block-toolbar/block-toolbar-menu.native.js

@@ -100,9 +100,11 @@ const BlockActionsMenu = ( {
 	} = getMoversSetup( isStackedHorizontally, moversOptions );
 
 	// Check if selected block is Groupable and/or Ungroupable.
-	const convertToGroupButtonProps = useConvertToGroupButtonProps( [
-		selectedBlockClientId,
-	] );
+	const convertToGroupButtonProps = useConvertToGroupButtonProps(
+		// `selectedBlockClientId` can be undefined in some cases where this
+		// component gets re-rendered right after the block is removed.
+		selectedBlockClientId ? [ selectedBlockClientId ] : []
+	);
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
 	const showConvertToGroupButton =
 		( isGroupable || isUngroupable ) && canRemove;

packages/block-editor/src/components/global-styles/get-block-css-selector.js

@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * Internal dependencies
  */
 import { scopeSelector } from './utils';
+import { getValueFromObjectPath } from '../../utils/object';
 
 /**
  * Determine the CSS selector for the block type and target provided, returning
@@ -69,15 +65,15 @@ export function getBlockCSSSelector(
 		if ( hasSelectors ) {
 			// Get selector from either `feature.root` or shorthand path.
 			const featureSelector =
-				get( selectors, `${ path }.root`, null ) ||
-				get( selectors, path, null );
+				getValueFromObjectPath( selectors, `${ path }.root`, null ) ||
+				getValueFromObjectPath( selectors, path, null );
 
 			// Return feature selector if found or any available fallback.
 			return featureSelector || fallbackSelector;
 		}
 
 		// Try getting old experimental supports selector value.
-		const featureSelector = get(
+		const featureSelector = getValueFromObjectPath(
 			supports,
 			`${ path }.__experimentalSelector`,
 			null
@@ -98,7 +94,7 @@ export function getBlockCSSSelector(
 
 	// Use selectors API if available.
 	if ( hasSelectors ) {
-		subfeatureSelector = get( selectors, path, null );
+		subfeatureSelector = getValueFromObjectPath( selectors, path, null );
 	}
 
 	// Only return if we have a subfeature selector.

packages/block-editor/src/components/global-styles/hooks.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import fastDeepEqual from 'fast-deep-equal/es6';
-import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,7 +15,7 @@ import { _x } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { getValueFromVariable, getPresetVariableFromValue } from './utils';
-import { setImmutably } from '../../utils/object';
+import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import { GlobalStylesContext } from './context';
 import { unlock } from '../../lock-unlock';
 
@@ -104,18 +103,19 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
 
 		if ( propertyPath ) {
 			return (
-				get( configToUse, contextualPath ) ??
-				get( configToUse, globalPath )
+				getValueFromObjectPath( configToUse, contextualPath ) ??
+				getValueFromObjectPath( configToUse, globalPath )
 			);
 		}
 
 		let result = {};
 		VALID_SETTINGS.forEach( ( setting ) => {
 			const value =
-				get(
+				getValueFromObjectPath(
 					configToUse,
 					`settings${ appendedBlockPath }.${ setting }`
-				) ?? get( configToUse, `settings.${ setting }` );
+				) ??
+				getValueFromObjectPath( configToUse, `settings.${ setting }` );
 			if ( value ) {
 				result = setImmutably( result, setting.split( '.' ), value );
 			}
@@ -176,19 +176,19 @@ export function useGlobalStyle(
 	let rawResult, result;
 	switch ( source ) {
 		case 'all':
-			rawResult = get( mergedConfig, finalPath );
+			rawResult = getValueFromObjectPath( mergedConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( mergedConfig, blockName, rawResult )
 				: rawResult;
 			break;
 		case 'user':
-			rawResult = get( userConfig, finalPath );
+			rawResult = getValueFromObjectPath( userConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( mergedConfig, blockName, rawResult )
 				: rawResult;
 			break;
 		case 'base':
-			rawResult = get( baseConfig, finalPath );
+			rawResult = getValueFromObjectPath( baseConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( baseConfig, blockName, rawResult )
 				: rawResult;

packages/block-editor/src/components/global-styles/use-global-styles-output.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -32,7 +27,11 @@ import { PresetDuotoneFilter } from '../duotone/components';
 import { getGapCSSValue } from '../../hooks/gap';
 import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
-import { kebabCase, setImmutably } from '../../utils/object';
+import {
+	getValueFromObjectPath,
+	kebabCase,
+	setImmutably,
+} from '../../utils/object';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -69,7 +68,11 @@ function compileStyleValue( uncompiledValue ) {
 function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
 	return PRESET_METADATA.reduce(
 		( declarations, { path, valueKey, valueFunc, cssVarInfix } ) => {
-			const presetByOrigin = get( blockPresets, path, [] );
+			const presetByOrigin = getValueFromObjectPath(
+				blockPresets,
+				path,
+				[]
+			);
 			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
 				if ( presetByOrigin[ origin ] ) {
 					presetByOrigin[ origin ].forEach( ( value ) => {
@@ -113,7 +116,11 @@ function getPresetsClasses( blockSelector = '*', blockPresets = {} ) {
 				return declarations;
 			}
 
-			const presetByOrigin = get( blockPresets, path, [] );
+			const presetByOrigin = getValueFromObjectPath(
+				blockPresets,
+				path,
+				[]
+			);
 			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
 				if ( presetByOrigin[ origin ] ) {
 					presetByOrigin[ origin ].forEach( ( { slug } ) => {
@@ -147,7 +154,11 @@ function getPresetsSvgFilters( blockPresets = {} ) {
 		// Duotone are the only type of filters for now.
 		( metadata ) => metadata.path.at( -1 ) === 'duotone'
 	).flatMap( ( metadata ) => {
-		const presetByOrigin = get( blockPresets, metadata.path, {} );
+		const presetByOrigin = getValueFromObjectPath(
+			blockPresets,
+			metadata.path,
+			{}
+		);
 		return [ 'default', 'theme' ]
 			.filter( ( origin ) => presetByOrigin[ origin ] )
 			.flatMap( ( origin ) =>
@@ -319,7 +330,10 @@ export function getStylesDeclarations(
 				return declarations;
 			}
 
-			const styleValue = get( blockStyles, pathToValue );
+			const styleValue = getValueFromObjectPath(
+				blockStyles,
+				pathToValue
+			);
 
 			// Root-level padding styles don't currently support strings with CSS shorthand values.
 			// This may change: https://github.com/WordPress/gutenberg/issues/40132.
@@ -334,7 +348,9 @@ export function getStylesDeclarations(
 				Object.entries( properties ).forEach( ( entry ) => {
 					const [ name, prop ] = entry;
 
-					if ( ! get( styleValue, [ prop ], false ) ) {
+					if (
+						! getValueFromObjectPath( styleValue, [ prop ], false )
+					) {
 						// Do not create a declaration
 						// for sub-properties that don't have any value.
 						return;
@@ -345,17 +361,19 @@ export function getStylesDeclarations(
 						: kebabCase( name );
 					declarations.push(
 						`${ cssProperty }: ${ compileStyleValue(
-							get( styleValue, [ prop ] )
+							getValueFromObjectPath( styleValue, [ prop ] )
 						) }`
 					);
 				} );
-			} else if ( get( blockStyles, pathToValue, false ) ) {
+			} else if (
+				getValueFromObjectPath( blockStyles, pathToValue, false )
+			) {
 				const cssProperty = key.startsWith( '--' )
 					? key
 					: kebabCase( key );
 				declarations.push(
 					`${ cssProperty }: ${ compileStyleValue(
-						get( blockStyles, pathToValue )
+						getValueFromObjectPath( blockStyles, pathToValue )
 					) }`
 				);
 			}
@@ -384,7 +402,7 @@ export function getStylesDeclarations(
 		let ruleValue = rule.value;
 		if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
 			const refPath = ruleValue.ref.split( '.' );
-			ruleValue = get( tree, refPath );
+			ruleValue = getValueFromObjectPath( tree, refPath );
 			// Presence of another ref indicates a reference to another dynamic value.
 			// Pointing to another dynamic value is not supported.
 			if ( ! ruleValue || ruleValue?.ref ) {
@@ -680,7 +698,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 	const pickPresets = ( treeToPickFrom ) => {
 		let presets = {};
 		PRESET_METADATA.forEach( ( { path } ) => {
-			const value = get( treeToPickFrom, path, false );
+			const value = getValueFromObjectPath( treeToPickFrom, path, false );
 			if ( value !== false ) {
 				presets = setImmutably( presets, path, value );
 			}

packages/block-editor/src/components/global-styles/utils.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
 import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
@@ -11,6 +10,7 @@ import {
 	getTypographyFontSizeValue,
 	getFluidTypographyOptionsFromSettings,
 } from './typography-utils';
+import { getValueFromObjectPath } from '../../utils/object';
 
 /* Supporting data. */
 export const ROOT_BLOCK_NAME = 'root';
@@ -168,8 +168,12 @@ function findInPresetsBy(
 ) {
 	// Block presets take priority above root level presets.
 	const orderedPresetsByOrigin = [
-		get( features, [ 'blocks', blockName, ...presetPath ] ),
-		get( features, presetPath ),
+		getValueFromObjectPath( features, [
+			'blocks',
+			blockName,
+			...presetPath,
+		] ),
+		getValueFromObjectPath( features, presetPath ),
 	];
 
 	for ( const presetByOrigin of orderedPresetsByOrigin ) {
@@ -282,8 +286,13 @@ function getValueFromPresetVariable(
 
 function getValueFromCustomVariable( features, blockName, variable, path ) {
 	const result =
-		get( features.settings, [ 'blocks', blockName, 'custom', ...path ] ) ??
-		get( features.settings, [ 'custom', ...path ] );
+		getValueFromObjectPath( features.settings, [
+			'blocks',
+			blockName,
+			'custom',
+			...path,
+		] ) ??
+		getValueFromObjectPath( features.settings, [ 'custom', ...path ] );
 	if ( ! result ) {
 		return variable;
 	}
@@ -303,7 +312,7 @@ export function getValueFromVariable( features, blockName, variable ) {
 	if ( ! variable || typeof variable !== 'string' ) {
 		if ( variable?.ref && typeof variable?.ref === 'string' ) {
 			const refPath = variable.ref.split( '.' );
-			variable = get( features, refPath );
+			variable = getValueFromObjectPath( features, refPath );
 			// Presence of another ref indicates a reference to another dynamic value.
 			// Pointing to another dynamic value is not supported.
 			if ( ! variable || !! variable?.ref ) {

packages/block-editor/src/components/inner-blocks/README.md

@@ -185,3 +185,13 @@ For example, a button block, deeply nested in several levels of block `X` that u
 
 -   **Type:** `Array`
 -   **Default:** - `undefined`. Determines which block types should be shown in the block inserter. For example, when inserting a block within the Navigation block we specify `core/navigation-link` and `core/navigation-link/page` as these are the most commonly used inner blocks. `prioritizedInserterBlocks` takes an array of the form {blockName}/{variationName}, where {variationName} is optional.
+
+### `defaultBlock`
+
+- **Type:** `Array`
+- **Default:** - `undefined`. Determines which block type should be inserted by default and any attributes that should be set by default when the block is inserted. Takes an array in the form of `[ blockname, {blockAttributes} ]`.
+
+### `directInsert`
+
+- **Type:** `Boolean`
+- **Default:** - `undefined`. Determines whether the default block should be inserted directly into the InnerBlocks area by the block appender.