@wordpress/block-editor 12.6.0 → 12.8.0

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

@@ -18,13 +18,13 @@ import { Content } from './content';
  * except that it does not render the elements to a string, but instead collects
  * the values of all rich text `Content` elements.
  */
-function addValuesForElement( element, ...args ) {
+function addValuesForElement( element, values, innerBlocks ) {
 	if ( null === element || undefined === element || false === element ) {
 		return;
 	}
 
 	if ( Array.isArray( element ) ) {
-		return addValuesForElements( element, ...args );
+		return addValuesForElements( element, values, innerBlocks );
 	}
 
 	switch ( typeof element ) {
@@ -38,13 +38,12 @@ function addValuesForElement( element, ...args ) {
 	switch ( type ) {
 		case StrictMode:
 		case Fragment:
-			return addValuesForElements( props.children, ...args );
+			return addValuesForElements( props.children, values, innerBlocks );
 		case RawHTML:
 			return;
 		case InnerBlocks.Content:
-			return addValuesForBlocks( ...args );
+			return addValuesForBlocks( values, innerBlocks );
 		case Content:
-			const [ values ] = args;
 			values.push( props.value );
 			return;
 	}
@@ -52,21 +51,19 @@ function addValuesForElement( element, ...args ) {
 	switch ( typeof type ) {
 		case 'string':
 			if ( typeof props.children !== 'undefined' ) {
-				return addValuesForElements( props.children, ...args );
+				return addValuesForElements(
+					props.children,
+					values,
+					innerBlocks
+				);
 			}
 			return;
 		case 'function':
-			if (
-				type.prototype &&
-				typeof type.prototype.render === 'function'
-			) {
-				return addValuesForElement(
-					new type( props ).render(),
-					...args
-				);
-			}
-
-			return addValuesForElement( type( props ), ...args );
+			const el =
+				type.prototype && typeof type.prototype.render === 'function'
+					? new type( props ).render()
+					: type( props );
+			return addValuesForElement( el, values, innerBlocks );
 	}
 }
 
@@ -78,20 +75,17 @@ 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, innerBlocks );
+		const saveElement = getSaveElement(
+			name,
+			attributes,
+			// Instead of letting save elements use `useInnerBlocksProps.save`,
+			// force them to use InnerBlocks.Content instead so we can intercept
+			// a single component.
+			<InnerBlocks.Content />
+		);
 		addValuesForElement( saveElement, values, innerBlocks );
 	}
 }

package/src/components/rich-text/index.js

@@ -402,7 +402,7 @@ function RichTextWrapper(
 						disableLineBreaks,
 						onSplitAtEnd,
 					} ),
-					useFirefoxCompat( { value, onChange } ),
+					useFirefoxCompat(),
 					anchorRef,
 				] ) }
 				contentEditable={ true }
@@ -412,6 +412,13 @@ function RichTextWrapper(
 					props.className,
 					'rich-text'
 				) }
+				// Setting tabIndex to 0 is unnecessary, the element is already
+				// focusable because it's contentEditable. This also fixes a
+				// Safari bug where it's not possible to Shift+Click multi
+				// select blocks when Shift Clicking into an element with
+				// tabIndex because Safari will focus the element. However,
+				// Safari will correctly ignore nested contentEditable elements.
+				tabIndex={ props.tabIndex === 0 ? null : props.tabIndex }
 			/>
 		</>
 	);

package/src/components/rich-text/use-firefox-compat.js

@@ -1,21 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { SPACE } from '@wordpress/keycodes';
-import { insert } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 
-export function useFirefoxCompat( props ) {
-	const propsRef = useRef( props );
-	propsRef.current = props;
-
+export function useFirefoxCompat() {
 	const { isMultiSelecting } = useSelect( blockEditorStore );
 	return useRefEffect( ( element ) => {
 		function onFocus() {
@@ -37,29 +31,9 @@ export function useFirefoxCompat( props ) {
 			}
 		}
 
-		// If a contenteditable element is inside a button/summary element,
-		// it is not possible to type a space in Firefox. Therefore, cancel
-		// the default event and insert a space explicitly.
-		// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1822860
-		function onKeyDown( event ) {
-			if ( event.keyCode !== SPACE ) {
-				return;
-			}
-
-			if ( element.closest( 'button, summary' ) === null ) {
-				return;
-			}
-
-			const { value, onChange } = propsRef.current;
-			onChange( insert( value, ' ' ) );
-			event.preventDefault();
-		}
-
 		element.addEventListener( 'focus', onFocus );
-		element.addEventListener( 'keydown', onKeyDown );
 		return () => {
 			element.removeEventListener( 'focus', onFocus );
-			element.removeEventListener( 'keydown', onKeyDown );
 		};
 	}, [] );
 }

package/src/components/rich-text/use-format-types.js

@@ -66,21 +66,21 @@ export function useFormatTypes( {
 } ) {
 	const allFormatTypes = useSelect( formatTypesSelector, [] );
 	const formatTypes = useMemo( () => {
-		return allFormatTypes.filter( ( { name, tagName } ) => {
+		return allFormatTypes.filter( ( { name, interactive, tagName } ) => {
 			if ( allowedFormats && ! allowedFormats.includes( name ) ) {
 				return false;
 			}
 
 			if (
 				withoutInteractiveFormatting &&
-				interactiveContentTags.has( tagName )
+				( interactive || interactiveContentTags.has( tagName ) )
 			) {
 				return false;
 			}
 
 			return true;
 		} );
-	}, [ allFormatTypes, allowedFormats, interactiveContentTags ] );
+	}, [ allFormatTypes, allowedFormats, withoutInteractiveFormatting ] );
 	const keyedSelected = useSelect(
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {

package/src/components/rich-text/use-paste-handler.js

@@ -129,29 +129,6 @@ export function usePasteHandler( props ) {
 			}
 
 			const files = [ ...getFilesFromDataTransfer( clipboardData ) ];
-			const isInternal = clipboardData.getData( 'rich-text' ) === 'true';
-
-			// If the data comes from a rich text instance, we can directly use it
-			// without filtering the data. The filters are only meant for externally
-			// pasted content and remove inline styles.
-			if ( isInternal ) {
-				const pastedMultilineTag =
-					clipboardData.getData( 'rich-text-multi-line-tag' ) ||
-					undefined;
-				let pastedValue = create( {
-					html,
-					multilineTag: pastedMultilineTag,
-					multilineWrapperTags:
-						pastedMultilineTag === 'li'
-							? [ 'ul', 'ol' ]
-							: undefined,
-					preserveWhiteSpace,
-				} );
-				pastedValue = adjustLines( pastedValue, !! multilineTag );
-				addActiveFormats( pastedValue, value.activeFormats );
-				onChange( insert( value, pastedValue ) );
-				return;
-			}
 
 			if ( pastePlainText ) {
 				onChange( insert( value, create( { text: plainText } ) ) );
@@ -238,6 +215,10 @@ export function usePasteHandler( props ) {
 				mode,
 				tagName,
 				preserveWhiteSpace,
+				// If the data comes from a rich text instance, we can directly
+				// use it without filtering the data. The filters are only meant
+				// for externally pasted content and remove inline styles.
+				disableFilters: !! clipboardData.getData( 'rich-text' ),
 			} );
 
 			if ( typeof content === 'string' ) {

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

@@ -49,7 +49,15 @@ describe( 'getCustomValueFromPreset', () => {
 } );
 
 describe( 'getPresetValueFromCustomValue', () => {
-	const spacingSizes = [ { name: 'Small', slug: 20, size: '8px' } ];
+	const spacingSizes = [
+		{ name: 'Default', slug: 'default', size: undefined },
+		{ name: 'Small', slug: 20, size: '8px' },
+	];
+	it( 'should return undefined even if an undefined value exist in spacing sizes as occurs if spacingSizes has > 7 entries', () => {
+		expect( getPresetValueFromCustomValue( undefined, spacingSizes ) ).toBe(
+			undefined
+		);
+	} );
 	it( 'should return original value if a string in spacing presets var format', () => {
 		expect(
 			getPresetValueFromCustomValue(

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

@@ -101,8 +101,8 @@ export function getCustomValueFromPreset( value, spacingSizes ) {
  * @return {string} The preset value if it can be found.
  */
 export function getPresetValueFromCustomValue( value, spacingSizes ) {
-	// Return value as-is if it is already a preset;
-	if ( isValueSpacingPreset( value ) || value === '0' ) {
+	// Return value as-is if it is undefined or is already a preset, or '0';
+	if ( ! value || isValueSpacingPreset( value ) || value === '0' ) {
 		return value;
 	}
 

package/src/components/use-block-commands/index.js

@@ -0,0 +1,284 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	hasBlockSupport,
+	store as blocksStore,
+	switchToBlockType,
+	isTemplatePart,
+} from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCommandLoader } from '@wordpress/commands';
+import {
+	copy,
+	edit as remove,
+	create as add,
+	group,
+	ungroup,
+	moveTo as move,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export const useTransformCommands = () => {
+	const { clientIds } = useSelect( ( select ) => {
+		const { getSelectedBlockClientIds } = select( blockEditorStore );
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+
+		return {
+			clientIds: selectedBlockClientIds,
+		};
+	}, [] );
+	const blocks = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlocksByClientId( clientIds ),
+		[ clientIds ]
+	);
+	const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
+	const { possibleBlockTransformations, canRemove } = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlockTransformItems,
+				canRemoveBlocks,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId(
+				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
+			);
+			return {
+				possibleBlockTransformations: getBlockTransformItems(
+					blocks,
+					rootClientId
+				),
+				canRemove: canRemoveBlocks( clientIds, rootClientId ),
+			};
+		},
+		[ clientIds, blocks ]
+	);
+
+	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
+
+	function selectForMultipleBlocks( insertedBlocks ) {
+		if ( insertedBlocks.length > 1 ) {
+			multiSelect(
+				insertedBlocks[ 0 ].clientId,
+				insertedBlocks[ insertedBlocks.length - 1 ].clientId
+			);
+		}
+	}
+
+	// Simple block tranformation based on the `Block Transforms` API.
+	function onBlockTransform( name ) {
+		const newBlocks = switchToBlockType( blocks, name );
+		replaceBlocks( clientIds, newBlocks );
+		selectForMultipleBlocks( newBlocks );
+	}
+
+	/**
+	 * The `isTemplate` check is a stopgap solution here.
+	 * Ideally, the Transforms API should handle this
+	 * by allowing to exclude blocks from wildcard transformations.
+	 */
+	const hasPossibleBlockTransformations =
+		!! possibleBlockTransformations.length && canRemove && ! isTemplate;
+
+	if (
+		! clientIds ||
+		clientIds.length < 1 ||
+		! hasPossibleBlockTransformations
+	) {
+		return { isLoading: false, commands: [] };
+	}
+
+	const commands = possibleBlockTransformations.map( ( transformation ) => {
+		const { name, title, icon } = transformation;
+		return {
+			name: 'core/block-editor/transform-to-' + name.replace( '/', '-' ),
+			// translators: %s: block title/name.
+			label: sprintf( __( 'Transform to %s' ), title ),
+			icon: icon.src,
+			callback: ( { close } ) => {
+				onBlockTransform( name );
+				close();
+			},
+		};
+	} );
+
+	return { isLoading: false, commands };
+};
+
+const useActionsCommands = () => {
+	const { clientIds } = useSelect( ( select ) => {
+		const { getSelectedBlockClientIds } = select( blockEditorStore );
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+
+		return {
+			clientIds: selectedBlockClientIds,
+		};
+	}, [] );
+	const {
+		canInsertBlockType,
+		getBlockRootClientId,
+		getBlocksByClientId,
+		canMoveBlocks,
+		canRemoveBlocks,
+	} = useSelect( blockEditorStore );
+	const { getDefaultBlockName, getGroupingBlockName } =
+		useSelect( blocksStore );
+
+	const blocks = getBlocksByClientId( clientIds );
+	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+
+	const canDuplicate = blocks.every( ( block ) => {
+		return (
+			!! block &&
+			hasBlockSupport( block.name, 'multiple', true ) &&
+			canInsertBlockType( block.name, rootClientId )
+		);
+	} );
+
+	const canInsertDefaultBlock = canInsertBlockType(
+		getDefaultBlockName(),
+		rootClientId
+	);
+
+	const canMove = canMoveBlocks( clientIds, rootClientId );
+	const canRemove = canRemoveBlocks( clientIds, rootClientId );
+
+	const {
+		removeBlocks,
+		replaceBlocks,
+		duplicateBlocks,
+		insertAfterBlock,
+		insertBeforeBlock,
+		setBlockMovingClientId,
+		setNavigationMode,
+		selectBlock,
+	} = useDispatch( blockEditorStore );
+
+	const onDuplicate = () => {
+		if ( ! canDuplicate ) {
+			return;
+		}
+		return duplicateBlocks( clientIds, true );
+	};
+	const onRemove = () => {
+		if ( ! canRemove ) {
+			return;
+		}
+		return removeBlocks( clientIds, true );
+	};
+	const onAddBefore = () => {
+		if ( ! canInsertDefaultBlock ) {
+			return;
+		}
+		const clientId = Array.isArray( clientIds ) ? clientIds[ 0 ] : clientId;
+		insertBeforeBlock( clientId );
+	};
+	const onAddAfter = () => {
+		if ( ! canInsertDefaultBlock ) {
+			return;
+		}
+		const clientId = Array.isArray( clientIds )
+			? clientIds[ clientIds.length - 1 ]
+			: clientId;
+		insertAfterBlock( clientId );
+	};
+	const onMoveTo = () => {
+		if ( ! canMove ) {
+			return;
+		}
+		setNavigationMode( true );
+		selectBlock( clientIds[ 0 ] );
+		setBlockMovingClientId( clientIds[ 0 ] );
+	};
+	const onGroup = () => {
+		if ( ! blocks.length ) {
+			return;
+		}
+
+		const groupingBlockName = getGroupingBlockName();
+
+		// Activate the `transform` on `core/group` which does the conversion.
+		const newBlocks = switchToBlockType( blocks, groupingBlockName );
+
+		if ( ! newBlocks ) {
+			return;
+		}
+		replaceBlocks( clientIds, newBlocks );
+	};
+	const onUngroup = () => {
+		if ( ! blocks.length ) {
+			return;
+		}
+
+		const innerBlocks = blocks[ 0 ].innerBlocks;
+
+		if ( ! innerBlocks.length ) {
+			return;
+		}
+
+		replaceBlocks( clientIds, innerBlocks );
+	};
+
+	if ( ! clientIds || clientIds.length < 1 ) {
+		return { isLoading: false, commands: [] };
+	}
+
+	const icons = {
+		ungroup,
+		group,
+		move,
+		add,
+		remove,
+		duplicate: copy,
+	};
+
+	const commands = [
+		onUngroup,
+		onGroup,
+		onMoveTo,
+		onAddAfter,
+		onAddBefore,
+		onRemove,
+		onDuplicate,
+	].map( ( callback ) => {
+		const action = callback.name
+			.replace( 'on', '' )
+			.replace( /([a-z])([A-Z])/g, '$1 $2' );
+
+		return {
+			name: 'core/block-editor/action-' + callback.name,
+			// translators: %s: type of the command.
+			label: action,
+			icon: icons[
+				callback.name
+					.replace( 'on', '' )
+					.match( /[A-Z]{1}[a-z]*/ )
+					.toString()
+					.toLowerCase()
+			],
+			callback: ( { close } ) => {
+				callback();
+				close();
+			},
+		};
+	} );
+
+	return { isLoading: false, commands };
+};
+
+export const useBlockCommands = () => {
+	useCommandLoader( {
+		name: 'core/block-editor/blockTransforms',
+		hook: useTransformCommands,
+	} );
+	useCommandLoader( {
+		name: 'core/block-editor/blockActions',
+		hook: useActionsCommands,
+	} );
+};

package/src/components/use-block-drop-zone/index.js

@@ -19,7 +19,6 @@ import {
 	isPointContainedByRect,
 } from '../../utils/math';
 import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 /** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */
@@ -155,7 +154,7 @@ export default function useBlockDropZone( {
 				__unstableIsWithinBlockOverlay,
 				__unstableHasActiveBlockOverlayActive,
 				getBlockEditingMode,
-			} = unlock( select( blockEditorStore ) );
+			} = select( blockEditorStore );
 			const blockEditingMode = getBlockEditingMode( targetRootClientId );
 			return (
 				blockEditingMode !== 'default' ||

package/src/components/use-setting/README.md

@@ -0,0 +1,39 @@
+## Use Setting
+
+`useSetting` is a hook that will retrive the setting for the block instance that's in use. 
+
+It does the lookup of the setting in the following order:
+
+1. Third parties can provide the settings for the block using the filter `blockEditor.useSetting.before`.
+2. If no third parties have provided this setting, then it looks up in the block instance hierachy starting from the current block and working its way upwards to its ancestors.
+3. If that doesn't prove to be successful in getting a value, then it falls back to the settings from the block editor store.
+4. If none of the above steps prove to be successful, then it's likely to be a deprecated setting and the deprecated setting is used instead.
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+
+## Development guidelines
+
+### Usage
+
+This will fetch the default color palette based on the block instance.
+
+```jsx
+import { useSetting } from '@wordpress/block-editor';
+
+const defaultColorPalette = useSetting( 'color.palette.default' );
+```
+
+Refer [here](https://github.com/WordPress/gutenberg/blob/HEAD/docs/how-to-guides/curating-the-editor-experience.md?plain=1#L330) in order to understand how the filter mentioned above `blockEditor.useSetting.before` can be used.
+
+### Props
+
+This hooks accepts the following props.
+
+#### `path`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+The path to the setting that is to be used for a block. Ex: `typography.fontSizes`

package/src/components/writing-flow/use-drag-selection.js

@@ -96,7 +96,11 @@ export default function useDragSelection() {
 					return;
 				}
 
-				anchorElement = ownerDocument.activeElement;
+				// Do not rely on the active element because it may change after
+				// the mouse leaves for the first time. See
+				// https://github.com/WordPress/gutenberg/issues/48747.
+				anchorElement = target;
+
 				startMultiSelect();
 
 				// `onSelectionStart` is called after `mousedown` and

package/src/hooks/behaviors.js

@@ -22,15 +22,13 @@ function BehaviorsControl( {
 	onChangeAnimation,
 	disabled = false,
 } ) {
-	const { settings, themeBehaviors } = useSelect(
+	const { settings } = useSelect(
 		( select ) => {
-			const { getBehaviors, getSettings } = select( blockEditorStore );
-
+			const { getSettings } = select( blockEditorStore );
 			return {
 				settings:
 					getSettings()?.__experimentalFeatures?.blocks?.[ blockName ]
-						?.behaviors,
-				themeBehaviors: getBehaviors()?.blocks?.[ blockName ],
+						?.behaviors || {},
 			};
 		},
 		[ blockName ]
@@ -46,7 +44,6 @@ function BehaviorsControl( {
 			label: __( 'No behaviors' ),
 		},
 	};
-
 	const behaviorsOptions = Object.entries( settings )
 		.filter(
 			( [ behaviorName, behaviorValue ] ) =>
@@ -60,7 +57,6 @@ function BehaviorsControl( {
 				.slice( 1 )
 				.toLowerCase() }`,
 		} ) );
-
 	const options = [
 		...Object.values( defaultBehaviors ),
 		...behaviorsOptions,
@@ -68,7 +64,6 @@ function BehaviorsControl( {
 
 	const { behaviors, behaviorsValue } = useMemo( () => {
 		const mergedBehaviors = {
-			...themeBehaviors,
 			...( blockBehaviors || {} ),
 		};
 
@@ -83,7 +78,8 @@ function BehaviorsControl( {
 			behaviors: mergedBehaviors,
 			behaviorsValue: value,
 		};
-	}, [ blockBehaviors, themeBehaviors ] );
+	}, [ blockBehaviors ] );
+
 	// If every behavior is disabled, do not show the behaviors inspector control.
 	if ( behaviorsOptions.length === 0 ) {
 		return null;
@@ -203,10 +199,8 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 	};
 }, 'withBehaviors' );
 
-if ( window?.__experimentalInteractivityAPI ) {
-	addFilter(
-		'editor.BlockEdit',
-		'core/behaviors/with-inspector-control',
-		withBehaviors
-	);
-}
+addFilter(
+	'editor.BlockEdit',
+	'core/behaviors/with-inspector-control',
+	withBehaviors
+);