@wordpress/block-editor 8.4.0 → 8.5.0

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

@@ -171,4 +171,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;

package/src/components/list-view/block-select-button.js

@@ -8,6 +8,9 @@ import classnames from 'classnames';
  */
 import { Button } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { Icon, lock } from '@wordpress/icons';
+import { SPACE, ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -16,7 +19,7 @@ import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
 import BlockTitle from '../block-title';
 import ListViewExpander from './expander';
-import { SPACE, ENTER } from '@wordpress/keycodes';
+import { store as blockEditorStore } from '../../store';
 
 function ListViewBlockSelectButton(
 	{
@@ -33,6 +36,14 @@ function ListViewBlockSelectButton(
 	ref
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const isLocked = useSelect(
+		( select ) => {
+			const { canMoveBlock, canRemoveBlock } = select( blockEditorStore );
+
+			return ! canMoveBlock( clientId ) || ! canRemoveBlock( clientId );
+		},
+		[ clientId ]
+	);
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
 	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
@@ -40,7 +51,7 @@ function ListViewBlockSelectButton(
 	// inside the `useOnBlockDrop` hook.
 	const onDragStartHandler = ( event ) => {
 		event.dataTransfer.clearData();
-		onDragStart( event );
+		onDragStart?.( event );
 	};
 
 	function onKeyDownHandler( event ) {
@@ -69,12 +80,19 @@ function ListViewBlockSelectButton(
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
-				<BlockTitle clientId={ clientId } maximumLength={ 35 } />
+				<span className="block-editor-list-view-block-select-button__title">
+					<BlockTitle clientId={ clientId } maximumLength={ 35 } />
+				</span>
 				{ blockInformation?.anchor && (
 					<span className="block-editor-list-view-block-select-button__anchor">
 						{ blockInformation.anchor }
 					</span>
 				) }
+				{ isLocked && (
+					<span className="block-editor-list-view-block-select-button__lock">
+						<Icon icon={ lock } />
+					</span>
+				) }
 			</Button>
 		</>
 	);

package/src/components/list-view/block.js

@@ -56,6 +56,11 @@ function ListViewBlock( {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const { clientId } = block;
+	const isFirstSelectedBlock =
+		isSelected && selectedClientIds[ 0 ] === clientId;
+	const isLastSelectedBlock =
+		isSelected &&
+		selectedClientIds[ selectedClientIds.length - 1 ] === clientId;
 
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
@@ -102,7 +107,7 @@ function ListViewBlock( {
 
 	const listViewBlockSettingsClassName = classnames(
 		'block-editor-list-view-block__menu-cell',
-		{ 'is-visible': isHovered || isSelected }
+		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
 
 	// If ListView has experimental features related to the Persistent List View,
@@ -177,6 +182,8 @@ function ListViewBlock( {
 
 	const classes = classnames( {
 		'is-selected': isSelected,
+		'is-first-selected': isFirstSelectedBlock,
+		'is-last-selected': isLastSelectedBlock,
 		'is-branch-selected':
 			withExperimentalPersistentListViewFeatures && isBranchSelected,
 		'is-dragging': isDragged,

package/src/components/list-view/branch.js

@@ -92,7 +92,7 @@ function ListViewBranch( props ) {
 		isBranchSelected = false,
 		listPosition = 0,
 		fixedListWindow,
-		expandNested = true,
+		expandNested,
 	} = props;
 
 	const {