@wordpress/block-editor 12.11.1 → 12.12.2-next.f8d8eceb.0

package/src/components/media-replace-flow/index.js

@@ -16,7 +16,6 @@ import {
 	ToolbarButton,
 	Dropdown,
 	withFilters,
-	Tooltip,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
 import { DOWN } from '@wordpress/keycodes';
@@ -220,19 +219,15 @@ const MediaReplaceFlow = ( {
 								{ __( 'Current media URL:' ) }
 							</span>
 
-							<Tooltip text={ mediaURL }>
-								<div>
-									<LinkControl
-										value={ { url: mediaURL } }
-										settings={ [] }
-										showSuggestions={ false }
-										onChange={ ( { url } ) => {
-											onSelectURL( url );
-											editMediaButtonRef.current.focus();
-										} }
-									/>
-								</div>
-							</Tooltip>
+							<LinkControl
+								value={ { url: mediaURL } }
+								settings={ [] }
+								showSuggestions={ false }
+								onChange={ ( { url } ) => {
+									onSelectURL( url );
+									editMediaButtonRef.current.focus();
+								} }
+							/>
 						</form>
 					) }
 				</>

package/src/components/provider/test/use-block-sync.js

@@ -31,7 +31,7 @@ const TestWrapper = withRegistryProvider( ( props ) => {
 		props.setRegistry( props.registry );
 	}
 	useBlockSync( props );
-	return <p>Test.</p>;
+	return null;
 } );
 
 describe( 'useBlockSync hook', () => {

package/src/components/provider/use-block-sync.js

@@ -180,7 +180,7 @@ export default function useBlockSync( {
 			// bound sync, unset the outbound value to avoid considering it in
 			// subsequent renders.
 			pendingChanges.current.outgoing = [];
-			const hadSelecton = hasSelectedBlock();
+			const hadSelection = hasSelectedBlock();
 			const selectionAnchor = getSelectionStart();
 			const selectionFocus = getSelectionEnd();
 			setControlledBlocks();
@@ -195,7 +195,7 @@ export default function useBlockSync( {
 				const selectionStillExists = getBlock(
 					selectionAnchor.clientId
 				);
-				if ( hadSelecton && ! selectionStillExists ) {
+				if ( hadSelection && ! selectionStillExists ) {
 					selectBlock( clientId );
 				} else {
 					resetSelection( selectionAnchor, selectionFocus );

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

@@ -141,7 +141,7 @@ export function RichTextWrapper(
 		};
 	};
 	// This selector must run on every render so the right selection state is
-	// retreived from the store on merge.
+	// retrieved from the store on merge.
 	// To do: fix this somehow.
 	const { selectionStart, selectionEnd, isSelected } = useSelect( selector );
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =

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

@@ -21,6 +21,7 @@ import {
 	__unstableCreateElement,
 	isEmpty,
 	insert,
+	remove,
 	create,
 	split,
 	toHTMLString,
@@ -70,6 +71,7 @@ function RichTextWrapper(
 		onSplit,
 		__unstableOnSplitAtEnd: onSplitAtEnd,
 		__unstableOnSplitMiddle: onSplitMiddle,
+		__unstableOnSplitAtDoubleLineEnd: onSplitAtDoubleLineEnd,
 		identifier,
 		preserveWhiteSpace,
 		__unstablePastePlainText: pastePlainText,
@@ -339,14 +341,28 @@ function RichTextWrapper(
 				splitStart === splitEnd &&
 				splitEnd === text.length;
 
-			if ( shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
+			if ( shiftKey ) {
 				if ( ! disableLineBreaks ) {
 					onChange( insert( value, '\n' ) );
 				}
-			} else if ( ! canSplit && canSplitAtEnd ) {
-				onSplitAtEnd();
 			} else if ( canSplit ) {
 				splitValue( value );
+			} else if ( canSplitAtEnd ) {
+				onSplitAtEnd();
+			} else if (
+				// For some blocks it's desirable to split at the end of the
+				// block when there are two line breaks at the end of the
+				// block, so triple Enter exits the block.
+				onSplitAtDoubleLineEnd &&
+				splitStart === splitEnd &&
+				splitEnd === text.length &&
+				text.slice( -2 ) === '\n\n'
+			) {
+				value.start = value.end - 2;
+				onChange( remove( value ) );
+				onSplitAtDoubleLineEnd();
+			} else if ( ! disableLineBreaks ) {
+				onChange( insert( value, '\n' ) );
 			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/rich-text/use-delete.js

@@ -43,7 +43,7 @@ export function useDelete( props ) {
 				// an intentional user interaction distinguishing between Backspace and
 				// Delete to remove the empty field, but also to avoid merge & remove
 				// causing destruction of two fields (merge, then removed merged).
-				if ( onRemove && isEmpty( value ) && isReverse ) {
+				else if ( onRemove && isEmpty( value ) && isReverse ) {
 					onRemove( ! isReverse );
 				}
 

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

@@ -56,26 +56,6 @@ export function usePasteHandler( props ) {
 				return;
 			}
 
-			const transformed = formatTypes.reduce(
-				( accumlator, { __unstablePasteRule } ) => {
-					// Only allow one transform.
-					if ( __unstablePasteRule && accumlator === value ) {
-						accumlator = __unstablePasteRule( value, {
-							html,
-							plainText,
-						} );
-					}
-
-					return accumlator;
-				},
-				value
-			);
-
-			if ( transformed !== value ) {
-				onChange( transformed );
-				return;
-			}
-
 			const isInternal =
 				event.clipboardData.getData( 'rich-text' ) === 'true';
 
@@ -139,10 +119,14 @@ export function usePasteHandler( props ) {
 
 			let mode = onReplace && onSplit ? 'AUTO' : 'INLINE';
 
+			const trimmedPlainText = plainText.trim();
+
 			if (
 				__unstableEmbedURLOnPaste &&
 				isEmpty( value ) &&
-				isURL( plainText.trim() )
+				isURL( trimmedPlainText ) &&
+				// For the link pasting feature, allow only http(s) protocols.
+				/^https?:/.test( trimmedPlainText )
 			) {
 				mode = 'BLOCKS';
 			}
@@ -156,9 +140,28 @@ export function usePasteHandler( props ) {
 			} );
 
 			if ( typeof content === 'string' ) {
-				const valueToInsert = create( { html: content } );
-				addActiveFormats( valueToInsert, value.activeFormats );
-				onChange( insert( value, valueToInsert ) );
+				const transformed = formatTypes.reduce(
+					( accumlator, { __unstablePasteRule } ) => {
+						// Only allow one transform.
+						if ( __unstablePasteRule && accumlator === value ) {
+							accumlator = __unstablePasteRule( value, {
+								html,
+								plainText,
+							} );
+						}
+
+						return accumlator;
+					},
+					value
+				);
+
+				if ( transformed !== value ) {
+					onChange( transformed );
+				} else {
+					const valueToInsert = create( { html: content } );
+					addActiveFormats( valueToInsert, value.activeFormats );
+					onChange( insert( value, valueToInsert ) );
+				}
 			} else if ( content.length > 0 ) {
 				if ( onReplace && isEmpty( value ) ) {
 					onReplace( content, content.length - 1, -1 );

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

@@ -6,13 +6,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useSetting from '../../use-setting';
+import { useSettings } from '../../use-settings';
 
 export default function useSpacingSizes() {
-	const spacingSizes = [
-		{ name: 0, slug: '0', size: 0 },
-		...( useSetting( 'spacing.spacingSizes' ) || [] ),
-	];
+	const spacingSizes = [ { name: 0, slug: '0', size: 0 } ];
+
+	const [ settingsSizes ] = useSettings( 'spacing.spacingSizes' );
+	if ( settingsSizes ) {
+		spacingSizes.push( ...settingsSizes );
+	}
 
 	if ( spacingSizes.length > 8 ) {
 		spacingSizes.unshift( {

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

@@ -20,7 +20,7 @@ import { settings } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import useSetting from '../../use-setting';
+import { useSettings } from '../../use-settings';
 import { store as blockEditorStore } from '../../../store';
 import {
 	ALL_SIDES,
@@ -38,6 +38,28 @@ const CUSTOM_VALUE_SETTINGS = {
 	vh: { max: 100, steps: 1 },
 	em: { max: 10, steps: 0.1 },
 	rm: { max: 10, steps: 0.1 },
+	svw: { max: 100, steps: 1 },
+	lvw: { max: 100, steps: 1 },
+	dvw: { max: 100, steps: 1 },
+	svh: { max: 100, steps: 1 },
+	lvh: { max: 100, steps: 1 },
+	dvh: { max: 100, steps: 1 },
+	vi: { max: 100, steps: 1 },
+	svi: { max: 100, steps: 1 },
+	lvi: { max: 100, steps: 1 },
+	dvi: { max: 100, steps: 1 },
+	vb: { max: 100, steps: 1 },
+	svb: { max: 100, steps: 1 },
+	lvb: { max: 100, steps: 1 },
+	dvb: { max: 100, steps: 1 },
+	vmin: { max: 100, steps: 1 },
+	svmin: { max: 100, steps: 1 },
+	lvmin: { max: 100, steps: 1 },
+	dvmin: { max: 100, steps: 1 },
+	vmax: { max: 100, steps: 1 },
+	svmax: { max: 100, steps: 1 },
+	lvmax: { max: 100, steps: 1 },
+	dvmax: { max: 100, steps: 1 },
 };
 
 export default function SpacingInputControl( {
@@ -80,8 +102,9 @@ export default function SpacingInputControl( {
 		setShowCustomValueControl( true );
 	}
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
 	} );
 
 	let currentValue = null;

package/src/components/tool-selector/index.js

@@ -51,7 +51,7 @@ function ToolSelector( props, ref ) {
 					label={ __( 'Tools' ) }
 				/>
 			) }
-			popoverProps={ { placement: 'bottom-start', variant: undefined } }
+			popoverProps={ { placement: 'bottom-start' } }
 			renderContent={ () => (
 				<>
 					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>

package/src/components/unit-control/index.js

@@ -9,17 +9,12 @@ import {
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 export default function UnitControl( { units: unitsProp, ...props } ) {
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 		units: unitsProp,
 	} );
 

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

@@ -22,6 +22,7 @@ import {
 /**
  * Internal dependencies
  */
+import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
 export const useTransformCommands = () => {
@@ -100,7 +101,7 @@ export const useTransformCommands = () => {
 			name: 'core/block-editor/transform-to-' + name.replace( '/', '-' ),
 			// translators: %s: block title/name.
 			label: sprintf( __( 'Transform to %s' ), title ),
-			icon: icon.src,
+			icon: <BlockIcon icon={ icon } />,
 			callback: ( { close } ) => {
 				onBlockTransform( name );
 				close();
@@ -112,6 +113,60 @@ export const useTransformCommands = () => {
 };
 
 const useActionsCommands = () => {
+	const { clientIds } = useSelect( ( select ) => {
+		const { getSelectedBlockClientIds } = select( blockEditorStore );
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+
+		return {
+			clientIds: selectedBlockClientIds,
+		};
+	}, [] );
+
+	const { getBlockRootClientId, canMoveBlocks, getBlockCount } =
+		useSelect( blockEditorStore );
+
+	const { setBlockMovingClientId, setNavigationMode, selectBlock } =
+		useDispatch( blockEditorStore );
+
+	if ( ! clientIds || clientIds.length < 1 ) {
+		return { isLoading: false, commands: [] };
+	}
+
+	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+
+	const canMove =
+		canMoveBlocks( clientIds, rootClientId ) &&
+		getBlockCount( rootClientId ) !== 1;
+
+	const commands = [];
+
+	if ( canMove ) {
+		commands.push( {
+			name: 'move-to',
+			label: __( 'Move to' ),
+			callback: () => {
+				setNavigationMode( true );
+				selectBlock( clientIds[ 0 ] );
+				setBlockMovingClientId( clientIds[ 0 ] );
+			},
+			icon: move,
+		} );
+	}
+
+	return {
+		isLoading: false,
+		commands: commands.map( ( command ) => ( {
+			...command,
+			name: 'core/block-editor/action-' + command.name,
+			callback: ( { close } ) => {
+				command.callback();
+				close();
+			},
+		} ) ),
+	};
+};
+
+const useQuickActionsCommands = () => {
 	const { clientIds, isUngroupable, isGroupable } = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientIds,
@@ -130,9 +185,7 @@ const useActionsCommands = () => {
 		canInsertBlockType,
 		getBlockRootClientId,
 		getBlocksByClientId,
-		canMoveBlocks,
 		canRemoveBlocks,
-		getBlockCount,
 	} = useSelect( blockEditorStore );
 	const { getDefaultBlockName, getGroupingBlockName } =
 		useSelect( blocksStore );
@@ -145,9 +198,6 @@ const useActionsCommands = () => {
 		duplicateBlocks,
 		insertAfterBlock,
 		insertBeforeBlock,
-		setBlockMovingClientId,
-		setNavigationMode,
-		selectBlock,
 	} = useDispatch( blockEditorStore );
 
 	const onGroup = () => {
@@ -196,65 +246,54 @@ const useActionsCommands = () => {
 		);
 	} );
 	const canRemove = canRemoveBlocks( clientIds, rootClientId );
-	const canMove =
-		canMoveBlocks( clientIds, rootClientId ) &&
-		getBlockCount( rootClientId ) !== 1;
 
 	const commands = [];
+
+	if ( canDuplicate ) {
+		commands.push( {
+			name: 'duplicate',
+			label: __( 'Duplicate' ),
+			callback: () => duplicateBlocks( clientIds, true ),
+			icon: copy,
+		} );
+	}
+
 	if ( canInsertDefaultBlock ) {
 		commands.push(
 			{
-				name: 'add-after',
-				label: __( 'Add after' ),
+				name: 'add-before',
+				label: __( 'Add before' ),
 				callback: () => {
 					const clientId = Array.isArray( clientIds )
-						? clientIds[ clientIds.length - 1 ]
+						? clientIds[ 0 ]
 						: clientId;
-					insertAfterBlock( clientId );
+					insertBeforeBlock( clientId );
 				},
 				icon: add,
 			},
 			{
-				name: 'add-before',
-				label: __( 'Add before' ),
+				name: 'add-after',
+				label: __( 'Add after' ),
 				callback: () => {
 					const clientId = Array.isArray( clientIds )
-						? clientIds[ 0 ]
+						? clientIds[ clientIds.length - 1 ]
 						: clientId;
-					insertBeforeBlock( clientId );
+					insertAfterBlock( clientId );
 				},
 				icon: add,
 			}
 		);
 	}
-	if ( canRemove ) {
-		commands.push( {
-			name: 'remove',
-			label: __( 'Delete' ),
-			callback: () => removeBlocks( clientIds, true ),
-			icon: remove,
-		} );
-	}
-	if ( canDuplicate ) {
-		commands.push( {
-			name: 'duplicate',
-			label: __( 'Duplicate' ),
-			callback: () => duplicateBlocks( clientIds, true ),
-			icon: copy,
-		} );
-	}
-	if ( canMove ) {
+
+	if ( isGroupable ) {
 		commands.push( {
-			name: 'move-to',
-			label: __( 'Move to' ),
-			callback: () => {
-				setNavigationMode( true );
-				selectBlock( clientIds[ 0 ] );
-				setBlockMovingClientId( clientIds[ 0 ] );
-			},
-			icon: move,
+			name: 'Group',
+			label: __( 'Group' ),
+			callback: onGroup,
+			icon: group,
 		} );
 	}
+
 	if ( isUngroupable ) {
 		commands.push( {
 			name: 'ungroup',
@@ -263,14 +302,16 @@ const useActionsCommands = () => {
 			icon: ungroup,
 		} );
 	}
-	if ( isGroupable ) {
+
+	if ( canRemove ) {
 		commands.push( {
-			name: 'Group',
-			label: __( 'Group' ),
-			callback: onGroup,
-			icon: group,
+			name: 'remove',
+			label: __( 'Delete' ),
+			callback: () => removeBlocks( clientIds, true ),
+			icon: remove,
 		} );
 	}
+
 	return {
 		isLoading: false,
 		commands: commands.map( ( command ) => ( {
@@ -293,4 +334,9 @@ export const useBlockCommands = () => {
 		name: 'core/block-editor/blockActions',
 		hook: useActionsCommands,
 	} );
+	useCommandLoader( {
+		name: 'core/block-editor/blockQuickActions',
+		hook: useQuickActionsCommands,
+		context: 'block-selection-edit',
+	} );
 };

package/src/components/{use-setting → use-settings}/README.md

@@ -1,8 +1,8 @@
-## Use Setting
+## Use Settings
 
-`useSetting` is a hook that will retrive the setting for the block instance that's in use. 
+`useSettings` is a hook that will retrieve the settings for the block instance that's in use.
 
-It does the lookup of the setting in the following order:
+It does the lookup of the settings 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.
@@ -20,20 +20,19 @@ It does the lookup of the setting in the following order:
 This will fetch the default color palette based on the block instance.
 
 ```jsx
-import { useSetting } from '@wordpress/block-editor';
+import { useSettings } from '@wordpress/block-editor';
 
-const defaultColorPalette = useSetting( 'color.palette.default' );
+const [ defaultColorPalette ] = useSettings( '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.
+This hooks accepts the following arguments.
 
-#### `path`
+#### `paths`
 
--   **Type:** `String`
--   **Default:** `undefined`
+-   **Type:** `Array<String>`
 
-The path to the setting that is to be used for a block. Ex: `typography.fontSizes`
+Array of paths to the settings to be retrieved. E.g., `[ 'typography.fontSizes' ]`