@wordpress/block-editor 12.3.7 → 12.3.8

package/src/components/block-removal-warning-modal/index.js

@@ -16,38 +16,26 @@ import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-// In certain editing contexts, we'd like to prevent accidental removal of
-// important blocks. For example, in the site editor, the Query Loop block is
-// deemed important. In such cases, we'll ask the user for confirmation that
-// they intended to remove such block(s).
-//
-// @see https://github.com/WordPress/gutenberg/pull/51145
-export const blockTypePromptMessages = {
-	'core/query': __( 'Query Loop displays a list of posts or pages.' ),
-	'core/post-content': __(
-		'Post Content displays the content of a post or page.'
-	),
-};
-
-export function BlockRemovalWarningModal() {
+export function BlockRemovalWarningModal( { rules } ) {
 	const { clientIds, selectPrevious, blockNamesForPrompt } = useSelect(
 		( select ) =>
 			unlock( select( blockEditorStore ) ).getRemovalPromptData()
 	);
 
 	const {
-		clearRemovalPrompt,
-		toggleRemovalPromptSupport,
+		clearBlockRemovalPrompt,
+		setBlockRemovalRules,
 		privateRemoveBlocks,
 	} = unlock( useDispatch( blockEditorStore ) );
 
-	// Signalling the removal prompt is in place.
+	// Load block removal rules, simultaneously signalling that the block
+	// removal prompt is in place.
 	useEffect( () => {
-		toggleRemovalPromptSupport( true );
+		setBlockRemovalRules( rules );
 		return () => {
-			toggleRemovalPromptSupport( false );
+			setBlockRemovalRules();
 		};
-	}, [ toggleRemovalPromptSupport ] );
+	}, [ rules, setBlockRemovalRules ] );
 
 	if ( ! blockNamesForPrompt ) {
 		return;
@@ -55,25 +43,23 @@ export function BlockRemovalWarningModal() {
 
 	const onConfirmRemoval = () => {
 		privateRemoveBlocks( clientIds, selectPrevious, /* force */ true );
-		clearRemovalPrompt();
+		clearBlockRemovalPrompt();
 	};
 
 	return (
 		<Modal
 			title={ __( 'Are you sure?' ) }
-			onRequestClose={ clearRemovalPrompt }
+			onRequestClose={ clearBlockRemovalPrompt }
 			style={ {
 				maxWidth: '40rem',
 			} }
 		>
 			{ blockNamesForPrompt.length === 1 ? (
-				<p>{ blockTypePromptMessages[ blockNamesForPrompt[ 0 ] ] }</p>
+				<p>{ rules[ blockNamesForPrompt[ 0 ] ] }</p>
 			) : (
 				<ul style={ { listStyleType: 'disc', paddingLeft: '1rem' } }>
 					{ blockNamesForPrompt.map( ( name ) => (
-						<li key={ name }>
-							{ blockTypePromptMessages[ name ] }
-						</li>
+						<li key={ name }>{ rules[ name ] }</li>
 					) ) }
 				</ul>
 			) }
@@ -83,7 +69,7 @@ export function BlockRemovalWarningModal() {
 					: __( 'Removing this block is not advised.' ) }
 			</p>
 			<HStack justify="right">
-				<Button variant="tertiary" onClick={ clearRemovalPrompt }>
+				<Button variant="tertiary" onClick={ clearBlockRemovalPrompt }>
 					{ __( 'Cancel' ) }
 				</Button>
 				<Button variant="primary" onClick={ onConfirmRemoval }>

package/src/components/colors-gradients/control.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import {
 	BaseControl,
 	__experimentalVStack as VStack,
@@ -28,12 +29,12 @@ const colorsAndGradientKeys = [
 
 const TAB_COLOR = {
 	name: 'color',
-	title: 'Solid',
+	title: __( 'Solid' ),
 	value: 'color',
 };
 const TAB_GRADIENT = {
 	name: 'gradient',
-	title: 'Gradient',
+	title: __( 'Gradient' ),
 	value: 'gradient',
 };
 

package/src/components/global-styles/dimensions-panel.js

@@ -207,18 +207,24 @@ export default function DimensionsPanel( {
 	// in global styles but not in block inspector.
 	includeLayoutControls = false,
 } ) {
+	const { dimensions, spacing } = settings;
+
 	const decodeValue = ( rawValue ) => {
 		if ( rawValue && typeof rawValue === 'object' ) {
 			return Object.keys( rawValue ).reduce( ( acc, key ) => {
 				acc[ key ] = getValueFromVariable(
-					{ settings },
+					{ settings: { dimensions, spacing } },
 					'',
 					rawValue[ key ]
 				);
 				return acc;
 			}, {} );
 		}
-		return getValueFromVariable( { settings }, '', rawValue );
+		return getValueFromVariable(
+			{ settings: { dimensions, spacing } },
+			'',
+			rawValue
+		);
 	};
 
 	const showSpacingPresetsControl = useHasSpacingPresets( settings );

package/src/components/iframe/index.js

@@ -88,11 +88,14 @@ function Iframe( {
 	forwardedRef: ref,
 	...props
 } ) {
-	const { styles = '', scripts = '' } = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings().__unstableResolvedAssets,
-		[]
-	);
+	const { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return {
+			resolvedAssets: settings.__unstableResolvedAssets,
+			isPreviewMode: settings.__unstableIsPreviewMode,
+		};
+	}, [] );
+	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const compatStyles = useCompatibilityStyles();
@@ -140,11 +143,13 @@ function Iframe( {
 					compatStyle.cloneNode( true )
 				);
 
-				// eslint-disable-next-line no-console
-				console.warn(
-					`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,
-					compatStyle
-				);
+				if ( ! isPreviewMode ) {
+					// eslint-disable-next-line no-console
+					console.warn(
+						`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,
+						compatStyle
+					);
+				}
 			}
 
 			iFrameDocument.addEventListener(

package/src/components/iframe/use-compatibility-styles.js

@@ -45,6 +45,11 @@ export function useCompatibilityStyles() {
 					return accumulator;
 				}
 
+				// Don't try to add styles without ID. Styles enqueued via the WP dependency system will always have IDs.
+				if ( ! ownerNode.id ) {
+					return accumulator;
+				}
+
 				function matchFromRules( _cssRules ) {
 					return Array.from( _cssRules ).find(
 						( {

package/src/components/index.js

@@ -164,8 +164,3 @@ export { default as __experimentalInspectorPopoverHeader } from './inspector-pop
 
 export { default as BlockEditorProvider } from './provider';
 export { default as useSetting } from './use-setting';
-
-/*
- * The following rename hint component can be removed in 6.4.
- */
-export { default as ReusableBlocksRenameHint } from './inserter/reusable-block-rename-hint';

package/src/components/inserter/reusable-block-rename-hint.js

@@ -10,7 +10,24 @@ import { close } from '@wordpress/icons';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 const PREFERENCE_NAME = 'isResuableBlocksrRenameHintVisible';
+/*
+ * This hook was added in 6.3 to help users with the transition from Reusable blocks to Patterns.
+ * It is only exported for use in the reusable-blocks package as well as block-editor.
+ * It will be removed in 6.4. and should not be used in any new code.
+ */
+export function useReusableBlocksRenameHint() {
+	return useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+}
 
+/*
+ * This component was added in 6.3 to help users with the transition from Reusable blocks to Patterns.
+ * It is only exported for use in the reusable-blocks package as well as block-editor.
+ * It will be removed in 6.4. and should not be used in any new code.
+ */
 export default function ReusableBlocksRenameHint() {
 	const isReusableBlocksRenameHint = useSelect(
 		( select ) =>

package/src/components/rich-text/get-rich-text-values.js

@@ -78,10 +78,20 @@ function addValuesForElements( children, ...args ) {
 	}
 }
 
+function _getSaveElement( name, attributes, innerBlocks ) {
+	return getSaveElement(
+		name,
+		attributes,
+		innerBlocks.map( ( block ) =>
+			_getSaveElement( block.name, block.attributes, block.innerBlocks )
+		)
+	);
+}
+
 function addValuesForBlocks( values, blocks ) {
 	for ( let i = 0; i < blocks.length; i++ ) {
 		const { name, attributes, innerBlocks } = blocks[ i ];
-		const saveElement = getSaveElement( name, attributes );
+		const saveElement = _getSaveElement( name, attributes, innerBlocks );
 		addValuesForElement( saveElement, values, innerBlocks );
 	}
 }

package/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js

@@ -10,7 +10,7 @@ import useSetting from '../../use-setting';
 
 export default function useSpacingSizes() {
 	const spacingSizes = [
-		{ name: 0, slug: '0', side: 0 },
+		{ name: 0, slug: '0', size: 0 },
 		...( useSetting( 'spacing.spacingSizes' ) || [] ),
 	];
 

package/src/components/spacing-sizes-control/input-controls/axial.js

@@ -2,7 +2,12 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { LABELS, ICONS, hasAxisSupport } from '../utils';
+import {
+	LABELS,
+	ICONS,
+	getPresetValueFromCustomValue,
+	hasAxisSupport,
+} from '../utils';
 
 const groupedSides = [ 'vertical', 'horizontal' ];
 
@@ -20,7 +25,17 @@ export default function AxialInputControls( {
 		if ( ! onChange ) {
 			return;
 		}
-		const nextValues = { ...values };
+
+		// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+		const nextValues = {
+			...Object.keys( values ).reduce( ( acc, key ) => {
+				acc[ key ] = getPresetValueFromCustomValue(
+					values[ key ],
+					spacingSizes
+				);
+				return acc;
+			}, {} ),
+		};
 
 		if ( side === 'vertical' ) {
 			nextValues.top = next;

package/src/components/spacing-sizes-control/input-controls/separated.js

@@ -2,7 +2,12 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { ALL_SIDES, LABELS, ICONS } from '../utils';
+import {
+	ALL_SIDES,
+	LABELS,
+	ICONS,
+	getPresetValueFromCustomValue,
+} from '../utils';
 
 export default function SeparatedInputControls( {
 	minimumCustomValue,
@@ -20,7 +25,17 @@ export default function SeparatedInputControls( {
 		: ALL_SIDES;
 
 	const createHandleOnChange = ( side ) => ( next ) => {
-		const nextValues = { ...values };
+		// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+		const nextValues = {
+			...Object.keys( values ).reduce( ( acc, key ) => {
+				acc[ key ] = getPresetValueFromCustomValue(
+					values[ key ],
+					spacingSizes
+				);
+				return acc;
+			}, {} ),
+		};
+
 		nextValues[ side ] = next;
 
 		onChange( nextValues );

package/src/components/spacing-sizes-control/input-controls/single.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { LABELS } from '../utils';
+import { LABELS, getPresetValueFromCustomValue } from '../utils';
 
 export default function SingleInputControl( {
 	minimumCustomValue,
@@ -16,7 +16,17 @@ export default function SingleInputControl( {
 	values,
 } ) {
 	const createHandleOnChange = ( currentSide ) => ( next ) => {
-		const nextValues = { ...values };
+		// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+		const nextValues = {
+			...Object.keys( values ).reduce( ( acc, key ) => {
+				acc[ key ] = getPresetValueFromCustomValue(
+					values[ key ],
+					spacingSizes
+				);
+				return acc;
+			}, {} ),
+		};
+
 		nextValues[ currentSide ] = next;
 
 		onChange( nextValues );

package/src/components/spacing-sizes-control/utils.js

@@ -102,7 +102,7 @@ export function getCustomValueFromPreset( value, spacingSizes ) {
  */
 export function getPresetValueFromCustomValue( value, spacingSizes ) {
 	// Return value as-is if it is already a preset;
-	if ( isValueSpacingPreset( value ) ) {
+	if ( isValueSpacingPreset( value ) || value === '0' ) {
 		return value;
 	}
 

package/src/private-apis.js

@@ -18,6 +18,10 @@ import { BlockRemovalWarningModal } from './components/block-removal-warning-mod
 import { useLayoutClasses, useLayoutStyles } from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
+import {
+	default as ReusableBlocksRenameHint,
+	useReusableBlocksRenameHint,
+} from './components/inserter/reusable-block-rename-hint';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -41,4 +45,6 @@ lock( privateApis, {
 	useLayoutStyles,
 	DimensionsTool,
 	ResolutionTool,
+	ReusableBlocksRenameHint,
+	useReusableBlocksRenameHint,
 } );

package/src/store/index.js

@@ -43,3 +43,13 @@ const registeredStore = registerStore( STORE_NAME, {
 } );
 unlock( registeredStore ).registerPrivateActions( privateActions );
 unlock( registeredStore ).registerPrivateSelectors( privateSelectors );
+
+// TODO: Remove once we switch to the `register` function (see above).
+//
+// Until then, private functions also need to be attached to the original
+// `store` descriptor in order to avoid unit tests failing, which could happen
+// when tests create new registries in which they register stores.
+//
+// @see https://github.com/WordPress/gutenberg/pull/51145#discussion_r1239999590
+unlock( store ).registerPrivateActions( privateActions );
+unlock( store ).registerPrivateSelectors( privateSelectors );

package/src/store/private-actions.js

@@ -3,11 +3,6 @@
  */
 import { Platform } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import { blockTypePromptMessages } from '../components/block-removal-warning-modal';
-
 const castArray = ( maybeArray ) =>
 	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
 
@@ -155,35 +150,22 @@ export const privateRemoveBlocks =
 		// confirmation that they intended to remove such block(s). However,
 		// the editor instance is responsible for presenting those confirmation
 		// prompts to the user. Any instance opting into removal prompts must
-		// register using `toggleRemovalPromptSupport()`.
+		// register using `setBlockRemovalRules()`.
 		//
 		// @see https://github.com/WordPress/gutenberg/pull/51145
-		if (
-			! forceRemove &&
-			// FIXME: Without this existence check, the unit tests for
-			// `__experimentalDeleteReusableBlock` in
-			// `packages/reusable-blocks/src/store/test/actions.js` fail due to
-			// the fact that the `registry` object passed to the thunk actions
-			// doesn't include this private action. This needs to be
-			// investigated to understand whether it's a real smell or if it's
-			// because not all store code has been updated to accommodate
-			// private selectors.
-			select.isRemovalPromptSupported &&
-			select.isRemovalPromptSupported()
-		) {
+		const rules = ! forceRemove && select.getBlockRemovalRules();
+		if ( rules ) {
 			const blockNamesForPrompt = new Set();
 
 			// Given a list of client IDs of blocks that the user intended to
 			// remove, perform a tree search (BFS) to find all block names
 			// corresponding to "important" blocks, i.e. blocks that require a
 			// removal prompt.
-			//
-			// @see blockTypePromptMessages
 			const queue = [ ...clientIds ];
 			while ( queue.length ) {
 				const clientId = queue.shift();
 				const blockName = select.getBlockName( clientId );
-				if ( blockTypePromptMessages[ blockName ] ) {
+				if ( rules[ blockName ] ) {
 					blockNamesForPrompt.add( blockName );
 				}
 				const innerBlocks = select.getBlockOrder( clientId );
@@ -194,7 +176,7 @@ export const privateRemoveBlocks =
 			// skip any other steps (thus postponing actual removal).
 			if ( blockNamesForPrompt.size ) {
 				dispatch(
-					displayRemovalPrompt(
+					displayBlockRemovalPrompt(
 						clientIds,
 						selectPrevious,
 						Array.from( blockNamesForPrompt )
@@ -246,7 +228,7 @@ export const ensureDefaultBlock =
  * Returns an action object used in signalling that a block removal prompt must
  * be displayed.
  *
- * Contrast with `toggleRemovalPromptSupport`.
+ * Contrast with `setBlockRemovalRules`.
  *
  * @param {string|string[]} clientIds           Client IDs of blocks to remove.
  * @param {boolean}         selectPrevious      True if the previous block
@@ -254,16 +236,19 @@ export const ensureDefaultBlock =
  *                                              (if no previous block exists)
  *                                              should be selected
  *                                              when a block is removed.
- * @param {string[]}        blockNamesForPrompt Names of blocks requiring user
+ * @param {string[]}        blockNamesForPrompt Names of the blocks that
+ *                                              triggered the need for
+ *                                              confirmation before removal.
+ *
  * @return {Object} Action object.
  */
-export function displayRemovalPrompt(
+function displayBlockRemovalPrompt(
 	clientIds,
 	selectPrevious,
 	blockNamesForPrompt
 ) {
 	return {
-		type: 'DISPLAY_REMOVAL_PROMPT',
+		type: 'DISPLAY_BLOCK_REMOVAL_PROMPT',
 		clientIds,
 		selectPrevious,
 		blockNamesForPrompt,
@@ -277,24 +262,36 @@ export function displayRemovalPrompt(
  *
  * @return {Object} Action object.
  */
-export function clearRemovalPrompt() {
+export function clearBlockRemovalPrompt() {
 	return {
-		type: 'CLEAR_REMOVAL_PROMPT',
+		type: 'CLEAR_BLOCK_REMOVAL_PROMPT',
 	};
 }
 
 /**
- * Returns an action object used in signalling that a removal prompt display
- * mechanism is available or unavailable in the current editor.
+ * Returns an action object used to set up any rules that a block editor may
+ * provide in order to prevent a user from accidentally removing certain
+ * blocks. These rules are then used to display a confirmation prompt to the
+ * user. For instance, in the Site Editor, the Query Loop block is important
+ * enough to warrant such confirmation.
+ *
+ * IMPORTANT: Registering rules implicitly signals to the `privateRemoveBlocks`
+ * action that the editor will be responsible for displaying block removal
+ * prompts and confirming deletions. This action is meant to be used by
+ * component `BlockRemovalWarningModal` only.
+ *
+ * The data is a record whose keys are block types (e.g. 'core/query') and
+ * whose values are the explanation to be shown to users (e.g. 'Query Loop
+ * displays a list of posts or pages.').
  *
- * Contrast with `displayRemovalPrompt`.
+ * Contrast with `displayBlockRemovalPrompt`.
  *
- * @param {boolean} status Whether a prompt display mechanism exists.
+ * @param {Record<string,string>|false} rules Block removal rules.
  * @return {Object} Action object.
  */
-export function toggleRemovalPromptSupport( status = true ) {
+export function setBlockRemovalRules( rules = false ) {
 	return {
-		type: 'TOGGLE_REMOVAL_PROMPT_SUPPORT',
-		status,
+		type: 'SET_BLOCK_REMOVAL_RULES',
+		rules,
 	};
 }

package/src/store/private-selectors.js

@@ -202,6 +202,6 @@ export function getRemovalPromptData( state ) {
  *
  * @return {boolean} Whether removal prompt exists.
  */
-export function isRemovalPromptSupported( state ) {
-	return state.isRemovalPromptSupported;
+export function getBlockRemovalRules( state ) {
+	return state.blockRemovalRules;
 }

package/src/store/reducer.js

@@ -1480,14 +1480,14 @@ export function isSelectionEnabled( state = true, action ) {
  */
 function removalPromptData( state = false, action ) {
 	switch ( action.type ) {
-		case 'DISPLAY_REMOVAL_PROMPT':
+		case 'DISPLAY_BLOCK_REMOVAL_PROMPT':
 			const { clientIds, selectPrevious, blockNamesForPrompt } = action;
 			return {
 				clientIds,
 				selectPrevious,
 				blockNamesForPrompt,
 			};
-		case 'CLEAR_REMOVAL_PROMPT':
+		case 'CLEAR_BLOCK_REMOVAL_PROMPT':
 			return false;
 	}
 
@@ -1495,17 +1495,25 @@ function removalPromptData( state = false, action ) {
 }
 
 /**
- * Reducer prompt availability state.
+ * Reducer returning any rules that a block editor may provide in order to
+ * prevent a user from accidentally removing certain blocks. These rules are
+ * then used to display a confirmation prompt to the user. For instance, in the
+ * Site Editor, the Query Loop block is important enough to warrant such
+ * confirmation.
+ *
+ * The data is a record whose keys are block types (e.g. 'core/query') and
+ * whose values are the explanation to be shown to users (e.g. 'Query Loop
+ * displays a list of posts or pages.').
  *
  * @param {boolean} state  Current state.
  * @param {Object}  action Dispatched action.
  *
- * @return {boolean} Updated state.
+ * @return {Record<string,string>} Updated state.
  */
-function isRemovalPromptSupported( state = false, action ) {
+function blockRemovalRules( state = false, action ) {
 	switch ( action.type ) {
-		case 'TOGGLE_REMOVAL_PROMPT_SUPPORT':
-			return action.status;
+		case 'SET_BLOCK_REMOVAL_RULES':
+			return action.rules;
 	}
 
 	return state;
@@ -1924,7 +1932,7 @@ const combinedReducers = combineReducers( {
 	blockVisibility,
 	blockEditingModes,
 	removalPromptData,
-	isRemovalPromptSupported,
+	blockRemovalRules,
 } );
 
 function withAutomaticChangeReset( reducer ) {

package/src/store/test/actions.js

@@ -617,6 +617,7 @@ describe( 'actions', () => {
 			const select = {
 				getBlockRootClientId: () => undefined,
 				canRemoveBlocks: () => true,
+				getBlockRemovalRules: () => false,
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				selectPreviousBlock: jest.fn(),
@@ -727,6 +728,7 @@ describe( 'actions', () => {
 			const select = {
 				getBlockRootClientId: () => null,
 				canRemoveBlocks: () => true,
+				getBlockRemovalRules: () => false,
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				selectPreviousBlock: jest.fn(),
@@ -751,6 +753,7 @@ describe( 'actions', () => {
 			const select = {
 				getBlockRootClientId: () => null,
 				canRemoveBlocks: () => true,
+				getBlockRemovalRules: () => false,
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				selectPreviousBlock: jest.fn(),