@wordpress/block-editor 12.18.2 → 12.19.1

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

@@ -0,0 +1,225 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE,
+	hasBlockSupport,
+} from '@wordpress/blocks';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { getValueFromObjectPath } from '../utils/object';
+import { getBlockName, getSettings, getBlockAttributes } from './selectors';
+
+const blockedPaths = [
+	'color',
+	'border',
+	'dimensions',
+	'typography',
+	'spacing',
+];
+
+const deprecatedFlags = {
+	'color.palette': ( settings ) => settings.colors,
+	'color.gradients': ( settings ) => settings.gradients,
+	'color.custom': ( settings ) =>
+		settings.disableCustomColors === undefined
+			? undefined
+			: ! settings.disableCustomColors,
+	'color.customGradient': ( settings ) =>
+		settings.disableCustomGradients === undefined
+			? undefined
+			: ! settings.disableCustomGradients,
+	'typography.fontSizes': ( settings ) => settings.fontSizes,
+	'typography.customFontSize': ( settings ) =>
+		settings.disableCustomFontSizes === undefined
+			? undefined
+			: ! settings.disableCustomFontSizes,
+	'typography.lineHeight': ( settings ) => settings.enableCustomLineHeight,
+	'spacing.units': ( settings ) => {
+		if ( settings.enableCustomUnits === undefined ) {
+			return;
+		}
+
+		if ( settings.enableCustomUnits === true ) {
+			return [ 'px', 'em', 'rem', 'vh', 'vw', '%' ];
+		}
+
+		return settings.enableCustomUnits;
+	},
+	'spacing.padding': ( settings ) => settings.enableCustomSpacing,
+};
+
+const prefixedFlags = {
+	/*
+	 * These were only available in the plugin
+	 * and can be removed when the minimum WordPress version
+	 * for the plugin is 5.9.
+	 */
+	'border.customColor': 'border.color',
+	'border.customStyle': 'border.style',
+	'border.customWidth': 'border.width',
+	'typography.customFontStyle': 'typography.fontStyle',
+	'typography.customFontWeight': 'typography.fontWeight',
+	'typography.customLetterSpacing': 'typography.letterSpacing',
+	'typography.customTextDecorations': 'typography.textDecoration',
+	'typography.customTextTransforms': 'typography.textTransform',
+	/*
+	 * These were part of WordPress 5.8 and we need to keep them.
+	 */
+	'border.customRadius': 'border.radius',
+	'spacing.customMargin': 'spacing.margin',
+	'spacing.customPadding': 'spacing.padding',
+	'typography.customLineHeight': 'typography.lineHeight',
+};
+
+/**
+ * Remove `custom` prefixes for flags that did not land in 5.8.
+ *
+ * This provides continued support for `custom` prefixed properties. It will
+ * be removed once third party devs have had sufficient time to update themes,
+ * plugins, etc.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/34485
+ *
+ * @param {string} path Path to desired value in settings.
+ * @return {string}     The value for defined setting.
+ */
+const removeCustomPrefixes = ( path ) => {
+	return prefixedFlags[ path ] || path;
+};
+
+/**
+ * For settings like `color.palette`, which have a value that is an object
+ * with `default`, `theme`, `custom`, with field values that are arrays of
+ * items, merge these three arrays into one and return it. The calculation
+ * is memoized so that identical input values produce identical output.
+ * @param {Object} value Object to merge
+ * @return {Array} Array of merged items
+ */
+export function mergeOrigins( value ) {
+	let result = mergeCache.get( value );
+	if ( ! result ) {
+		result = [ 'default', 'theme', 'custom' ].flatMap(
+			( key ) => value[ key ] ?? []
+		);
+		mergeCache.set( value, result );
+	}
+	return result;
+}
+const mergeCache = new WeakMap();
+
+/**
+ * For settings like `color.palette`, which have a value that is an object
+ * with `default`, `theme`, `custom`, with field values that are arrays of
+ * items, see if any of the three origins have values.
+ *
+ * @param {Object} value Object to check
+ * @return {boolean} Whether the object has values in any of the three origins
+ */
+export function hasMergedOrigins( value ) {
+	return [ 'default', 'theme', 'custom' ].some(
+		( key ) => value?.[ key ]?.length
+	);
+}
+
+export function getBlockSettings( state, clientId, ...paths ) {
+	const blockName = getBlockName( state, clientId );
+	const candidates = [];
+
+	if ( clientId ) {
+		let id = clientId;
+		do {
+			const name = getBlockName( state, id );
+			if ( hasBlockSupport( name, '__experimentalSettings', false ) ) {
+				candidates.push( id );
+			}
+		} while ( ( id = state.blocks.parents.get( id ) ) );
+	}
+
+	return paths.map( ( path ) => {
+		if ( blockedPaths.includes( path ) ) {
+			// eslint-disable-next-line no-console
+			console.warn(
+				'Top level useSetting paths are disabled. Please use a subpath to query the information needed.'
+			);
+			return undefined;
+		}
+
+		// 0. Allow third parties to filter the block's settings at runtime.
+		let result = applyFilters(
+			'blockEditor.useSetting.before',
+			undefined,
+			path,
+			clientId,
+			blockName
+		);
+
+		if ( undefined !== result ) {
+			return result;
+		}
+
+		const normalizedPath = removeCustomPrefixes( path );
+
+		// 1. Take settings from the block instance or its ancestors.
+		// Start from the current block and work our way up the ancestors.
+		for ( const candidateClientId of candidates ) {
+			const candidateAtts = getBlockAttributes(
+				state,
+				candidateClientId
+			);
+			result =
+				getValueFromObjectPath(
+					candidateAtts.settings?.blocks?.[ blockName ],
+					normalizedPath
+				) ??
+				getValueFromObjectPath(
+					candidateAtts.settings,
+					normalizedPath
+				);
+			if ( result !== undefined ) {
+				// Stop the search for more distant ancestors and move on.
+				break;
+			}
+		}
+
+		// 2. Fall back to the settings from the block editor store (__experimentalFeatures).
+		const settings = getSettings( state );
+		if ( result === undefined && blockName ) {
+			result = getValueFromObjectPath(
+				settings.__experimentalFeatures?.blocks?.[ blockName ],
+				normalizedPath
+			);
+		}
+
+		if ( result === undefined ) {
+			result = getValueFromObjectPath(
+				settings.__experimentalFeatures,
+				normalizedPath
+			);
+		}
+
+		// Return if the setting was found in either the block instance or the store.
+		if ( result !== undefined ) {
+			if ( PATHS_WITH_MERGE[ normalizedPath ] ) {
+				return mergeOrigins( result );
+			}
+			return result;
+		}
+
+		// 3. Otherwise, use deprecated settings.
+		const deprecatedSettingsValue =
+			deprecatedFlags[ normalizedPath ]?.( settings );
+		if ( deprecatedSettingsValue !== undefined ) {
+			return deprecatedSettingsValue;
+		}
+
+		// 4. Fallback for typography.dropCap:
+		// This is only necessary to support typography.dropCap.
+		// when __experimentalFeatures are not present (core without plugin).
+		// To remove when __experimentalFeatures are ported to core.
+		return normalizedPath === 'typography.dropCap' ? true : undefined;
+	} );
+}

package/src/store/private-actions.js

@@ -131,12 +131,28 @@ export const privateRemoveBlocks =
 			// corresponding to "important" blocks, i.e. blocks that require a
 			// removal prompt.
 			const queue = [ ...clientIds ];
+			let messageType = 'templates';
 			while ( queue.length ) {
 				const clientId = queue.shift();
 				const blockName = select.getBlockName( clientId );
 				if ( rules[ blockName ] ) {
 					blockNamesForPrompt.add( blockName );
 				}
+
+				if ( rules[ 'bindings/core/pattern-overrides' ] ) {
+					const blockAttributes =
+						select.getBlockAttributes( clientId );
+					if (
+						blockAttributes?.metadata?.bindings &&
+						JSON.stringify(
+							blockAttributes.metadata.bindings
+						).includes( 'core/pattern-overrides' )
+					) {
+						blockNamesForPrompt.add( blockName );
+						messageType = 'patternOverrides';
+					}
+				}
+
 				const innerBlocks = select.getBlockOrder( clientId );
 				queue.push( ...innerBlocks );
 			}
@@ -148,7 +164,8 @@ export const privateRemoveBlocks =
 					displayBlockRemovalPrompt(
 						clientIds,
 						selectPrevious,
-						Array.from( blockNamesForPrompt )
+						Array.from( blockNamesForPrompt ),
+						messageType
 					)
 				);
 				return;
@@ -211,19 +228,22 @@ export const ensureDefaultBlock =
  * @param {string[]}        blockNamesForPrompt Names of the blocks that
  *                                              triggered the need for
  *                                              confirmation before removal.
+ * @param {string}          messageType         The type of message to display.
  *
  * @return {Object} Action object.
  */
 function displayBlockRemovalPrompt(
 	clientIds,
 	selectPrevious,
-	blockNamesForPrompt
+	blockNamesForPrompt,
+	messageType
 ) {
 	return {
 		type: 'DISPLAY_BLOCK_REMOVAL_PROMPT',
 		clientIds,
 		selectPrevious,
 		blockNamesForPrompt,
+		messageType,
 	};
 }
 
@@ -370,3 +390,25 @@ export function registerBlockBindingsSource( source ) {
 		lockAttributesEditing: source.lockAttributesEditing,
 	};
 }
+
+/**
+ * Returns an action object used in signalling that the user has begun to drag.
+ *
+ * @return {Object} Action object.
+ */
+export function startDragging() {
+	return {
+		type: 'START_DRAGGING',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the user has stopped dragging.
+ *
+ * @return {Object} Action object.
+ */
+export function stopDragging() {
+	return {
+		type: 'STOP_DRAGGING',
+	};
+}

package/src/store/private-selectors.js

@@ -20,9 +20,11 @@ import {
 } from './selectors';
 import { checkAllowListRecursive, getAllPatternsDependants } from './utils';
 import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
-import { store } from './';
+import { STORE_NAME } from './constants';
 import { unlock } from '../lock-unlock';
 
+export { getBlockSettings } from './get-block-settings';
+
 /**
  * Returns true if the block interface is hidden, or false otherwise.
  *
@@ -44,37 +46,49 @@ export function getLastInsertedBlocksClientIds( state ) {
 	return state?.lastBlockInserted?.clientIds;
 }
 
+export function getBlockWithoutAttributes( state, clientId ) {
+	return state.blocks.byClientId.get( clientId );
+}
+
 /**
- * Returns true if the block with the given client ID and all of its descendants
+ * Returns true if all of the descendants of a block with the given client ID
  * have an editing mode of 'disabled', or false otherwise.
  *
  * @param {Object} state    Global application state.
  * @param {string} clientId The block client ID.
  *
- * @return {boolean} Whether the block and its descendants are disabled.
+ * @return {boolean} Whether the block descendants are disabled.
  */
-export const isBlockSubtreeDisabled = createSelector(
-	( state, clientId ) => {
-		const isChildSubtreeDisabled = ( childClientId ) => {
-			return (
-				getBlockEditingMode( state, childClientId ) === 'disabled' &&
-				getBlockOrder( state, childClientId ).every(
-					isChildSubtreeDisabled
-				)
-			);
-		};
+export const isBlockSubtreeDisabled = ( state, clientId ) => {
+	const isChildSubtreeDisabled = ( childClientId ) => {
 		return (
-			getBlockEditingMode( state, clientId ) === 'disabled' &&
-			getBlockOrder( state, clientId ).every( isChildSubtreeDisabled )
+			getBlockEditingMode( state, childClientId ) === 'disabled' &&
+			getBlockOrder( state, childClientId ).every(
+				isChildSubtreeDisabled
+			)
 		);
-	},
-	( state ) => [
-		state.blocks.parents,
-		state.blocks.order,
-		state.blockEditingModes,
-		state.blockListSettings,
-	]
-);
+	};
+	return getBlockOrder( state, clientId ).every( isChildSubtreeDisabled );
+};
+
+function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
+	const blockOrder = getBlockOrder( state, rootClientId );
+	const result = [];
+
+	for ( const clientId of blockOrder ) {
+		const innerBlocks = getEnabledClientIdsTreeUnmemoized(
+			state,
+			clientId
+		);
+		if ( getBlockEditingMode( state, clientId ) !== 'disabled' ) {
+			result.push( { clientId, innerBlocks } );
+		} else {
+			result.push( ...innerBlocks );
+		}
+	}
+
+	return result;
+}
 
 /**
  * Returns a tree of block objects with only clientID and innerBlocks set.
@@ -86,19 +100,7 @@ export const isBlockSubtreeDisabled = createSelector(
  * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
  */
 export const getEnabledClientIdsTree = createSelector(
-	( state, rootClientId = '' ) => {
-		return getBlockOrder( state, rootClientId ).flatMap( ( clientId ) => {
-			if ( getBlockEditingMode( state, clientId ) !== 'disabled' ) {
-				return [
-					{
-						clientId,
-						innerBlocks: getEnabledClientIdsTree( state, clientId ),
-					},
-				];
-			}
-			return getEnabledClientIdsTree( state, clientId );
-		} );
-	},
+	getEnabledClientIdsTreeUnmemoized,
 	( state ) => [
 		state.blocks.order,
 		state.blockEditingModes,
@@ -265,7 +267,7 @@ export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
 	createSelector(
 		( state, rootClientId = null ) => {
 			const { getAllPatterns, __experimentalGetParsedPattern } = unlock(
-				select( store )
+				select( STORE_NAME )
 			);
 			const patterns = getAllPatterns();
 			const { allowedBlockTypes } = getSettings( state );
@@ -323,7 +325,7 @@ export const getAllPatterns = createRegistrySelector( ( select ) =>
 		return [
 			...userPatterns,
 			...__experimentalBlockPatterns,
-			...unlock( select( store ) ).getFetchedPatterns(),
+			...unlock( select( STORE_NAME ) ).getFetchedPatterns(),
 		].filter(
 			( x, index, arr ) =>
 				index === arr.findIndex( ( y ) => x.name === y.name )
@@ -349,3 +351,16 @@ export function getAllBlockBindingsSources( state ) {
 export function getBlockBindingsSource( state, sourceName ) {
 	return state.blockBindingsSources[ sourceName ];
 }
+
+/**
+ * Returns true if the user is dragging anything, or false otherwise. It is possible for a
+ * user to be dragging data from outside of the editor, so this selector is separate from
+ * the `isDraggingBlocks` selector which only returns true if the user is dragging blocks.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether user is dragging.
+ */
+export function isDragging( state ) {
+	return state.isDragging;
+}

package/src/store/reducer.js

@@ -1246,6 +1246,27 @@ export function isTyping( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning dragging state. It is possible for a user to be dragging
+ * data from outside of the editor, so this state is separate from `draggedBlocks`.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function isDragging( state = false, action ) {
+	switch ( action.type ) {
+		case 'START_DRAGGING':
+			return true;
+
+		case 'STOP_DRAGGING':
+			return false;
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning dragged block client id.
  *
@@ -1500,11 +1521,17 @@ export function isSelectionEnabled( state = true, action ) {
 function removalPromptData( state = false, action ) {
 	switch ( action.type ) {
 		case 'DISPLAY_BLOCK_REMOVAL_PROMPT':
-			const { clientIds, selectPrevious, blockNamesForPrompt } = action;
+			const {
+				clientIds,
+				selectPrevious,
+				blockNamesForPrompt,
+				messageType,
+			} = action;
 			return {
 				clientIds,
 				selectPrevious,
 				blockNamesForPrompt,
+				messageType,
 			};
 		case 'CLEAR_BLOCK_REMOVAL_PROMPT':
 			return false;
@@ -2030,7 +2057,7 @@ function blockBindingsSources( state = {}, action ) {
 			[ action.sourceName ]: {
 				label: action.sourceLabel,
 				useSource: action.useSource,
-				lockAttributesEditing: action.lockAttributesEditing,
+				lockAttributesEditing: action.lockAttributesEditing ?? true,
 			},
 		};
 	}
@@ -2048,6 +2075,7 @@ function blockPatterns( state = [], action ) {
 
 const combinedReducers = combineReducers( {
 	blocks,
+	isDragging,
 	isTyping,
 	isBlockInterfaceHidden,
 	draggedBlocks,