@wordpress/block-editor 8.4.0 → 8.5.2

package/src/components/block-toolbar/block-toolbar-last-item.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: __unstableBlockToolbarLastItem, Slot } = createSlotFill(
+	'__unstableBlockToolbarLastItem'
+);
+
+__unstableBlockToolbarLastItem.Slot = Slot;
+
+export default __unstableBlockToolbarLastItem;

package/src/components/block-toolbar/index.js

@@ -19,12 +19,15 @@ import BlockMover from '../block-mover';
 import BlockParentSelector from '../block-parent-selector';
 import BlockSwitcher from '../block-switcher';
 import BlockControls from '../block-controls';
+import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
+import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import { useShowMoversGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
+import __unstableBlockNameContext from './block-name-context';
 
-export default function BlockToolbar( { hideDragHandle } ) {
+const BlockToolbar = ( { hideDragHandle } ) => {
 	const {
 		blockClientIds,
 		blockClientId,
@@ -127,6 +130,9 @@ export default function BlockToolbar( { hideDragHandle } ) {
 					</ToolbarGroup>
 				) }
 			</div>
+			{ shouldShowVisualToolbar && isMultiToolbar && (
+				<BlockGroupToolbar />
+			) }
 			{ shouldShowVisualToolbar && (
 				<>
 					<BlockControls.Slot
@@ -146,9 +152,19 @@ export default function BlockToolbar( { hideDragHandle } ) {
 						group="other"
 						className="block-editor-block-toolbar__slot"
 					/>
+					<__unstableBlockNameContext.Provider
+						value={ blockType?.name }
+					>
+						<__unstableBlockToolbarLastItem.Slot />
+					</__unstableBlockNameContext.Provider>
 				</>
 			) }
 			<BlockSettingsMenu clientIds={ blockClientIds } />
 		</div>
 	);
-}
+};
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
+ */
+export default BlockToolbar;

package/src/components/block-toolbar/style.scss

@@ -95,6 +95,12 @@
 	.block-editor-block-lock-toolbar {
 		margin-left: -$grid-unit-15 * 0.5 !important;
 	}
+
+	// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+	// This is best fixed by making the mover control area a proper single toolbar group.
+	.components-toolbar-group {
+		padding: 0;
+	}
 }
 
 .block-editor-block-toolbar,

package/src/components/block-tools/index.js

@@ -92,25 +92,6 @@ export default function BlockTools( {
 				event.preventDefault();
 				insertBeforeBlock( first( clientIds ) );
 			}
-		} else if (
-			isMatch( 'core/block-editor/delete-multi-selection', event )
-		) {
-			/**
-			 * Check if the target element is a text area, input or
-			 * event.defaultPrevented and return early. In all these
-			 * cases backspace could be handled elsewhere.
-			 */
-			if (
-				[ 'INPUT', 'TEXTAREA' ].includes( event.target.nodeName ) ||
-				event.defaultPrevented
-			) {
-				return;
-			}
-			const clientIds = getSelectedBlockClientIds();
-			if ( clientIds.length > 1 ) {
-				event.preventDefault();
-				removeBlocks( clientIds );
-			}
 		} else if ( isMatch( 'core/block-editor/unselect', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length > 1 ) {

package/src/components/block-tools/style.scss

@@ -312,16 +312,14 @@
 // Size multiple sequential buttons to be optically balanced.
 // Icons are 36px, as set by a 24px icon and 12px padding.
 .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot, // When a plugin adds to a slot, the segment has a `components-toolbar` class.
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot, // When no plugin adds to slots, the segment has a `components-toolbar-group` class.
 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar, // The nesting order is sometimes reversed.
 .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown, // Targets unique markup for the "Replace" button.
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group { // Inline formatting tools use this class.
+.block-editor-block-toolbar .components-toolbar-group {
 	padding-left: $grid-unit-15 * 0.5; // 6px.
 	padding-right: $grid-unit-15 * 0.5;
 
-	> .components-button,
-	> div > .components-button,
-	> .components-dropdown .components-button {
+	.components-button,
+	.components-button.has-icon.has-icon {
 		min-width: $block-toolbar-height - $grid-unit-15;
 		padding-left: $grid-unit-15 * 0.5; // 6px.
 		padding-right: $grid-unit-15 * 0.5;

package/src/components/block-variation-transforms/index.js

@@ -2,47 +2,63 @@
  * WordPress dependencies
  */
 import { store as blocksStore } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
+	Button,
 	DropdownMenu,
 	MenuGroup,
 	MenuItemsChoice,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { __experimentalGetMatchingVariation as getMatchingVariation } from '../../utils';
 import { store as blockEditorStore } from '../../store';
 
-function __experimentalBlockVariationTransforms( { blockClientId } ) {
-	const [ selectedValue, setSelectedValue ] = useState();
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { variations, blockAttributes } = useSelect(
-		( select ) => {
-			const { getBlockVariations } = select( blocksStore );
-			const { getBlockName, getBlockAttributes } = select(
-				blockEditorStore
-			);
-			const blockName = blockClientId && getBlockName( blockClientId );
-			return {
-				variations:
-					blockName && getBlockVariations( blockName, 'transform' ),
-				blockAttributes: getBlockAttributes( blockClientId ),
-			};
-		},
-		[ blockClientId ]
+function VariationsButtons( {
+	className,
+	onSelectVariation,
+	selectedValue,
+	variations,
+} ) {
+	return (
+		<fieldset className={ className }>
+			<VisuallyHidden as="legend">
+				{ __( 'Transform to variation' ) }
+			</VisuallyHidden>
+			{ variations.map( ( variation ) => (
+				<Button
+					key={ variation.name }
+					icon={ variation.icon }
+					isPressed={ selectedValue === variation.name }
+					label={
+						selectedValue === variation.name
+							? variation.title
+							: sprintf(
+									/* translators: %s: Name of the block variation */
+									__( 'Transform to %s' ),
+									variation.title
+							  )
+					}
+					onClick={ () => onSelectVariation( variation.name ) }
+					aria-label={ variation.title }
+					showTooltip
+				/>
+			) ) }
+		</fieldset>
 	);
-	useEffect( () => {
-		setSelectedValue(
-			getMatchingVariation( blockAttributes, variations )?.name
-		);
-	}, [ blockAttributes, variations ] );
-	if ( ! variations?.length ) return null;
+}
 
+function VariationsDropdown( {
+	className,
+	onSelectVariation,
+	selectedValue,
+	variations,
+} ) {
 	const selectOptions = variations.map(
 		( { name, title, description } ) => ( {
 			value: name,
@@ -50,27 +66,21 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 			info: description,
 		} )
 	);
-	const onSelectVariation = ( variationName ) => {
-		updateBlockAttributes( blockClientId, {
-			...variations.find( ( { name } ) => name === variationName )
-				.attributes,
-		} );
-	};
-	const baseClass = 'block-editor-block-variation-transforms';
+
 	return (
 		<DropdownMenu
-			className={ baseClass }
+			className={ className }
 			label={ __( 'Transform to variation' ) }
 			text={ __( 'Transform to variation' ) }
 			popoverProps={ {
 				position: 'bottom center',
-				className: `${ baseClass }__popover`,
+				className: `${ className }__popover`,
 			} }
 			icon={ chevronDown }
 			toggleProps={ { iconPosition: 'right' } }
 		>
 			{ () => (
-				<div className={ `${ baseClass }__container` }>
+				<div className={ `${ className }__container` }>
 					<MenuGroup>
 						<MenuItemsChoice
 							choices={ selectOptions }
@@ -84,4 +94,63 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	);
 }
 
+function __experimentalBlockVariationTransforms( { blockClientId } ) {
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { activeBlockVariation, variations } = useSelect(
+		( select ) => {
+			const { getActiveBlockVariation, getBlockVariations } = select(
+				blocksStore
+			);
+			const { getBlockName, getBlockAttributes } = select(
+				blockEditorStore
+			);
+			const name = blockClientId && getBlockName( blockClientId );
+			return {
+				activeBlockVariation: getActiveBlockVariation(
+					name,
+					getBlockAttributes( blockClientId )
+				),
+				variations: name && getBlockVariations( name, 'transform' ),
+			};
+		},
+		[ blockClientId ]
+	);
+
+	const selectedValue = activeBlockVariation?.name;
+
+	// Check if each variation has a unique icon.
+	const hasUniqueIcons = useMemo( () => {
+		const variationIcons = new Set();
+		variations.forEach( ( variation ) => {
+			if ( variation.icon ) {
+				variationIcons.add( variation.icon );
+			}
+		} );
+		return variationIcons.size === variations.length;
+	}, [ variations ] );
+
+	const onSelectVariation = ( variationName ) => {
+		updateBlockAttributes( blockClientId, {
+			...variations.find( ( { name } ) => name === variationName )
+				.attributes,
+		} );
+	};
+
+	const baseClass = 'block-editor-block-variation-transforms';
+
+	// Skip rendering if there are no variations
+	if ( ! variations?.length ) return null;
+
+	const Component = hasUniqueIcons ? VariationsButtons : VariationsDropdown;
+
+	return (
+		<Component
+			className={ baseClass }
+			onSelectVariation={ onSelectVariation }
+			selectedValue={ selectedValue }
+			variations={ variations }
+		/>
+	);
+}
+
 export default __experimentalBlockVariationTransforms;

package/src/components/block-variation-transforms/style.scss

@@ -1,5 +1,5 @@
 .block-editor-block-variation-transforms {
-	padding: 0 $grid-unit-20 $grid-unit-20 56px;
+	padding: 0 $grid-unit-20 $grid-unit-20 52px;
 	width: 100%;
 
 	.components-dropdown-menu__toggle {

package/src/components/block-vertical-alignment-control/index.js

@@ -3,10 +3,15 @@
  */
 import BlockVerticalAlignmentUI from './ui';
 
-export function BlockVerticalAlignmentControl( props ) {
+const BlockVerticalAlignmentControl = ( props ) => {
 	return <BlockVerticalAlignmentUI { ...props } isToolbar={ false } />;
-}
+};
 
-export function BlockVerticalAlignmentToolbar( props ) {
+const BlockVerticalAlignmentToolbar = ( props ) => {
 	return <BlockVerticalAlignmentUI { ...props } isToolbar />;
-}
+};
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-vertical-alignment-control/README.md
+ */
+export { BlockVerticalAlignmentControl, BlockVerticalAlignmentToolbar };

package/src/components/button-block-appender/style.scss

@@ -3,12 +3,16 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: $grid-unit-10;
 	width: 100%;
 	height: auto;
 	color: $gray-900;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 
+	// Needs specificity to override button styles.
+	&.components-button.components-button {
+		padding: $grid-unit-15;
+	}
+
 	.is-dark-theme & {
 		color: $light-gray-placeholder;
 		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;

package/src/components/contrast-checker/index.js

@@ -138,4 +138,7 @@ function ContrastChecker( {
 	);
 }
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/contrast-checker/README.md
+ */
 export default ContrastChecker;

package/src/components/convert-to-group-buttons/index.js

@@ -11,6 +11,7 @@ import { useDispatch } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 import useConvertToGroupButtonProps from './use-convert-to-group-button-props';
+import BlockGroupToolbar from './toolbar';
 
 function ConvertToGroupButton( {
 	clientIds,
@@ -73,4 +74,8 @@ function ConvertToGroupButton( {
 	);
 }
 
-export { useConvertToGroupButtonProps, ConvertToGroupButton };
+export {
+	BlockGroupToolbar,
+	ConvertToGroupButton,
+	useConvertToGroupButtonProps,
+};

package/src/components/convert-to-group-buttons/toolbar.js

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { switchToBlockType } from '@wordpress/blocks';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { group, row, stack } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useConvertToGroupButtonProps } from '../convert-to-group-buttons';
+import { store as blockEditorStore } from '../../store';
+
+const layouts = {
+	group: undefined,
+	row: { type: 'flex', flexWrap: 'nowrap' },
+	stack: { type: 'flex', orientation: 'vertical' },
+};
+
+function BlockGroupToolbar() {
+	const {
+		blocksSelection,
+		clientIds,
+		groupingBlockName,
+		isGroupable,
+	} = useConvertToGroupButtonProps();
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+
+	const { canRemove } = useSelect(
+		( select ) => {
+			const { canRemoveBlocks } = select( blockEditorStore );
+			return {
+				canRemove: canRemoveBlocks( clientIds ),
+			};
+		},
+		[ clientIds ]
+	);
+
+	const onConvertToGroup = ( layout = 'group' ) => {
+		const newBlocks = switchToBlockType(
+			blocksSelection,
+			groupingBlockName
+		);
+
+		if ( newBlocks && newBlocks.length > 0 ) {
+			// Because the block is not in the store yet we can't use
+			// updateBlockAttributes so need to manually update attributes.
+			newBlocks[ 0 ].attributes.layout = layouts[ layout ];
+			replaceBlocks( clientIds, newBlocks );
+		}
+	};
+
+	const onConvertToRow = () => onConvertToGroup( 'row' );
+	const onConvertToStack = () => onConvertToGroup( 'stack' );
+
+	// Don't render the button if the current selection cannot be grouped.
+	// A good example is selecting multiple button blocks within a Buttons block:
+	// The group block is not a valid child of Buttons, so we should not show the button.
+	// Any blocks that are locked against removal also cannot be grouped.
+	if ( ! isGroupable || ! canRemove ) {
+		return null;
+	}
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				icon={ group }
+				label={ _x( 'Group', 'verb' ) }
+				onClick={ onConvertToGroup }
+			/>
+			<ToolbarButton
+				icon={ row }
+				label={ _x( 'Row', 'single horizontal line' ) }
+				onClick={ onConvertToRow }
+			/>
+			<ToolbarButton
+				icon={ stack }
+				label={ _x( 'Stack', 'verb' ) }
+				onClick={ onConvertToStack }
+			/>
+		</ToolbarGroup>
+	);
+}
+
+export default BlockGroupToolbar;

package/src/components/copy-handler/index.js

@@ -78,10 +78,18 @@ export function useClipboardHandler() {
 		getSelectedBlockClientIds,
 		hasMultiSelection,
 		getSettings,
+		__unstableIsFullySelected,
+		__unstableIsSelectionCollapsed,
+		__unstableIsSelectionMergeable,
+		__unstableGetSelectedBlocksWithPartialSelection,
 	} = useSelect( blockEditorStore );
-	const { flashBlock, removeBlocks, replaceBlocks } = useDispatch(
-		blockEditorStore
-	);
+	const {
+		flashBlock,
+		removeBlocks,
+		replaceBlocks,
+		__unstableDeleteSelection,
+		__unstableExpandSelection,
+	} = useDispatch( blockEditorStore );
 	const notifyCopy = useNotifyCopy();
 
 	return useRefEffect( ( node ) => {
@@ -116,20 +124,54 @@ export function useClipboardHandler() {
 			const eventDefaultPrevented = event.defaultPrevented;
 			event.preventDefault();
 
+			const isSelectionMergeable = __unstableIsSelectionMergeable();
+			const shouldHandleWholeBlocks =
+				__unstableIsSelectionCollapsed() || __unstableIsFullySelected();
+			const expandSelectionIsNeeded =
+				! shouldHandleWholeBlocks && ! isSelectionMergeable;
 			if ( event.type === 'copy' || event.type === 'cut' ) {
 				if ( selectedBlockClientIds.length === 1 ) {
 					flashBlock( selectedBlockClientIds[ 0 ] );
 				}
-				notifyCopy( event.type, selectedBlockClientIds );
-				const blocks = getBlocksByClientId( selectedBlockClientIds );
-				const serialized = serialize( blocks );
-
-				event.clipboardData.setData( 'text/plain', serialized );
-				event.clipboardData.setData( 'text/html', serialized );
+				// If we have a partial selection that is not mergeable, just
+				// expand the selection to the whole blocks.
+				if ( expandSelectionIsNeeded ) {
+					__unstableExpandSelection();
+				} else {
+					notifyCopy( event.type, selectedBlockClientIds );
+					let blocks;
+					// Check if we have partial selection.
+					if ( shouldHandleWholeBlocks ) {
+						blocks = getBlocksByClientId( selectedBlockClientIds );
+					} else {
+						const [
+							head,
+							tail,
+						] = __unstableGetSelectedBlocksWithPartialSelection();
+						const inBetweenBlocks = getBlocksByClientId(
+							selectedBlockClientIds.slice(
+								1,
+								selectedBlockClientIds.length - 1
+							)
+						);
+						blocks = [ head, ...inBetweenBlocks, tail ];
+					}
+					const serialized = serialize( blocks );
+
+					event.clipboardData.setData( 'text/plain', serialized );
+					event.clipboardData.setData( 'text/html', serialized );
+				}
 			}
 
 			if ( event.type === 'cut' ) {
-				removeBlocks( selectedBlockClientIds );
+				// We need to also check if at the start we needed to
+				// expand the selection, as in this point we might have
+				// programmatically fully selected the blocks above.
+				if ( shouldHandleWholeBlocks && ! expandSelectionIsNeeded ) {
+					removeBlocks( selectedBlockClientIds );
+				} else {
+					__unstableDeleteSelection();
+				}
 			} else if ( event.type === 'paste' ) {
 				if ( eventDefaultPrevented ) {
 					// This was likely already handled in rich-text/use-paste-handler.js.
@@ -171,4 +213,7 @@ function CopyHandler( { children } ) {
 	return <div ref={ useClipboardHandler() }>{ children }</div>;
 }
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/copy-handler/README.md
+ */
 export default CopyHandler;

package/src/components/font-sizes/font-size-picker.js

@@ -21,4 +21,7 @@ function FontSizePicker( props ) {
 	);
 }
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/font-sizes/README.md
+ */
 export default FontSizePicker;

package/src/components/iframe/index.js

@@ -203,14 +203,10 @@ function Iframe(
 			return true;
 		}
 
-		if ( setDocumentIfReady() ) {
-			return;
-		}
+		// Document set with srcDoc is not immediately ready.
+		node.addEventListener( 'load', setDocumentIfReady );
 
-		// Document is not immediately loaded in Firefox.
-		node.addEventListener( 'load', () => {
-			setDocumentIfReady();
-		} );
+		return () => node.removeEventListener( 'load', setDocumentIfReady );
 	}, [] );
 	const headRef = useRefEffect( ( element ) => {
 		scripts
@@ -264,6 +260,8 @@ function Iframe(
 				{ ...props }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
+				// Correct doctype is required to enable rendering in standards mode
+				srcDoc="<!doctype html>"
 				title={ __( 'Editor canvas' ) }
 			>
 				{ iframeDocument &&

package/src/components/index.js

@@ -99,6 +99,8 @@ export { default as withColorContext } from './color-palette/with-color-context'
  */
 
 export { default as __unstableBlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';
+export { default as __unstableBlockToolbarLastItem } from './block-toolbar/block-toolbar-last-item';
+export { default as __unstableBlockNameContext } from './block-toolbar/block-name-context';
 export { default as __unstableInserterMenuExtension } from './inserter-menu-extension';
 export { default as __experimentalPreviewOptions } from './preview-options';
 export { default as __experimentalUseResizeCanvas } from './use-resize-canvas';

package/src/components/justify-content-control/index.js

@@ -3,10 +3,15 @@
  */
 import JustifyContentUI from './ui';
 
-export function JustifyContentControl( props ) {
+const JustifyContentControl = ( props ) => {
 	return <JustifyContentUI { ...props } isToolbar={ false } />;
-}
+};
 
-export function JustifyToolbar( props ) {
+const JustifyToolbar = ( props ) => {
 	return <JustifyContentUI { ...props } isToolbar />;
-}
+};
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/justify-content-control/README.md
+ */
+export { JustifyContentControl, JustifyToolbar };

package/src/components/keyboard-shortcuts/index.js

@@ -61,7 +61,7 @@ function KeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/block-editor/delete-multi-selection',
 			category: 'block',
-			description: __( 'Remove multiple selected blocks.' ),
+			description: __( 'Delete selection.' ),
 			keyCombination: {
 				character: 'del',
 			},

package/src/components/line-height-control/index.js

@@ -15,13 +15,13 @@ import {
 	isLineHeightDefined,
 } from './utils';
 
-export default function LineHeightControl( {
+const LineHeightControl = ( {
 	value: lineHeight,
 	onChange,
 	/** Start opting into the new margin-free styles that will become the default in a future version. */
 	__nextHasNoMarginBottom = false,
 	__unstableInputWidth = '60px',
-} ) {
+} ) => {
 	const isDefined = isLineHeightDefined( lineHeight );
 
 	const adjustNextValue = ( nextValue, wasTypedOrPasted ) => {
@@ -101,4 +101,9 @@ export default function LineHeightControl( {
 			/>
 		</div>
 	);
-}
+};
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/line-height-control/README.md
+ */
+export default LineHeightControl;