@wordpress/block-editor 12.24.0 → 12.26.0

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

@@ -1,12 +1,16 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
+import {
+	hasBlockSupport,
+	switchToBlockType,
+	store as blocksStore,
+} from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
@@ -22,7 +26,10 @@ import {
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { ESCAPE } from '@wordpress/keycodes';
+import { BACKSPACE, DELETE } from '@wordpress/keycodes';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -44,6 +51,7 @@ import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 import AriaReferencedText from './aria-referenced-text';
+import { unlock } from '../../lock-unlock';
 
 function ListViewBlock( {
 	block: { clientId },
@@ -78,63 +86,270 @@ function ListViewBlock( {
 		isSelected &&
 		selectedClientIds[ selectedClientIds.length - 1 ] === clientId;
 
-	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
+	const {
+		toggleBlockHighlight,
+		duplicateBlocks,
+		multiSelect,
+		replaceBlocks,
+		removeBlocks,
+		insertAfterBlock,
+		insertBeforeBlock,
+		setOpenedBlockSettingsMenu,
+	} = unlock( useDispatch( blockEditorStore ) );
+
+	const {
+		canInsertBlockType,
+		getSelectedBlockClientIds,
+		getPreviousBlockClientId,
+		getBlockRootClientId,
+		getBlockOrder,
+		getBlockParents,
+		getBlocksByClientId,
+		canRemoveBlocks,
+		isGroupable,
+	} = useSelect( blockEditorStore );
+	const { getGroupingBlockName } = useSelect( blocksStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
 
-	const { block, blockName, blockEditingMode } = useSelect(
+	const { block, blockName, allowRightClickOverrides } = useSelect(
 		( select ) => {
-			const { getBlock, getBlockName, getBlockEditingMode } =
+			const { getBlock, getBlockName, getSettings } =
 				select( blockEditorStore );
 
 			return {
 				block: getBlock( clientId ),
 				blockName: getBlockName( clientId ),
-				blockEditingMode: getBlockEditingMode( clientId ),
+				allowRightClickOverrides:
+					getSettings().allowRightClickOverrides,
 			};
 		},
 		[ clientId ]
 	);
 
-	const allowRightClickOverrides = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings().allowRightClickOverrides,
-		[]
-	);
-
 	const showBlockActions =
 		// When a block hides its toolbar it also hides the block settings menu,
 		// since that menu is part of the toolbar in the editor canvas.
 		// List View respects this by also hiding the block settings menu.
-		hasBlockSupport( blockName, '__experimentalToolbar', true ) &&
-		// Don't show the settings menu if block is disabled or content only.
-		blockEditingMode === 'default';
+		hasBlockSupport( blockName, '__experimentalToolbar', true );
 	const instanceId = useInstanceId( ListViewBlock );
 	const descriptionId = `list-view-block-select-button__description-${ instanceId }`;
 
 	const {
 		expand,
 		collapse,
+		collapseAll,
 		BlockSettingsMenu,
 		listViewInstanceId,
 		expandedState,
 		setInsertedBlock,
 		treeGridElementRef,
+		rootClientId,
 	} = useListViewContext();
+	const isMatch = useShortcutEventMatch();
+
+	// Determine which blocks to update:
+	// If the current (focused) block is part of the block selection, use the whole selection.
+	// If the focused block is not part of the block selection, only update the focused block.
+	function getBlocksToUpdate() {
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const isUpdatingSelectedBlocks =
+			selectedBlockClientIds.includes( clientId );
+		const firstBlockClientId = isUpdatingSelectedBlocks
+			? selectedBlockClientIds[ 0 ]
+			: clientId;
+		const firstBlockRootClientId =
+			getBlockRootClientId( firstBlockClientId );
+
+		const blocksToUpdate = isUpdatingSelectedBlocks
+			? selectedBlockClientIds
+			: [ clientId ];
+
+		return {
+			blocksToUpdate,
+			firstBlockClientId,
+			firstBlockRootClientId,
+			selectedBlockClientIds,
+		};
+	}
+
+	/**
+	 * @param {KeyboardEvent} event
+	 */
+	async function onKeyDown( event ) {
+		if ( event.defaultPrevented ) {
+			return;
+		}
 
-	// If multiple blocks are selected, deselect all blocks when the user
-	// presses the escape key.
-	const onKeyDown = ( event ) => {
+		const isDeleteKey = [ BACKSPACE, DELETE ].includes( event.keyCode );
+
+		// If multiple blocks are selected, deselect all blocks when the user
+		// presses the escape key.
 		if (
-			event.keyCode === ESCAPE &&
-			! event.defaultPrevented &&
+			isMatch( 'core/block-editor/unselect', event ) &&
 			selectedClientIds.length > 0
 		) {
 			event.stopPropagation();
 			event.preventDefault();
 			selectBlock( event, undefined );
+		} else if (
+			isDeleteKey ||
+			isMatch( 'core/block-editor/remove', event )
+		) {
+			// Do not handle single-key block deletion shortcuts when events come from modals;
+			// retain the default behavior for these keys.
+			if ( isDeleteKey && event.target.closest( '[role=dialog]' ) ) {
+				return;
+			}
+
+			const {
+				blocksToUpdate: blocksToDelete,
+				firstBlockClientId,
+				firstBlockRootClientId,
+				selectedBlockClientIds,
+			} = getBlocksToUpdate();
+
+			// Don't update the selection if the blocks cannot be deleted.
+			if ( ! canRemoveBlocks( blocksToDelete, firstBlockRootClientId ) ) {
+				return;
+			}
+
+			let blockToFocus =
+				getPreviousBlockClientId( firstBlockClientId ) ??
+				// If the previous block is not found (when the first block is deleted),
+				// fallback to focus the parent block.
+				firstBlockRootClientId;
+
+			removeBlocks( blocksToDelete, false );
+
+			// Update the selection if the original selection has been removed.
+			const shouldUpdateSelection =
+				selectedBlockClientIds.length > 0 &&
+				getSelectedBlockClientIds().length === 0;
+
+			// If there's no previous block nor parent block, focus the first block.
+			if ( ! blockToFocus ) {
+				blockToFocus = getBlockOrder()[ 0 ];
+			}
+
+			updateFocusAndSelection( blockToFocus, shouldUpdateSelection );
+		} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {
+			event.preventDefault();
+
+			const { blocksToUpdate, firstBlockRootClientId } =
+				getBlocksToUpdate();
+
+			const canDuplicate = getBlocksByClientId( blocksToUpdate ).every(
+				( blockToUpdate ) => {
+					return (
+						!! blockToUpdate &&
+						hasBlockSupport(
+							blockToUpdate.name,
+							'multiple',
+							true
+						) &&
+						canInsertBlockType(
+							blockToUpdate.name,
+							firstBlockRootClientId
+						)
+					);
+				}
+			);
+
+			if ( canDuplicate ) {
+				const updatedBlocks = await duplicateBlocks(
+					blocksToUpdate,
+					false
+				);
+
+				if ( updatedBlocks?.length ) {
+					// If blocks have been duplicated, focus the first duplicated block.
+					updateFocusAndSelection( updatedBlocks[ 0 ], false );
+				}
+			}
+		} else if ( isMatch( 'core/block-editor/insert-before', event ) ) {
+			event.preventDefault();
+
+			const { blocksToUpdate } = getBlocksToUpdate();
+			await insertBeforeBlock( blocksToUpdate[ 0 ] );
+			const newlySelectedBlocks = getSelectedBlockClientIds();
+
+			// Focus the first block of the newly inserted blocks, to keep focus within the list view.
+			setOpenedBlockSettingsMenu( undefined );
+			updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
+		} else if ( isMatch( 'core/block-editor/insert-after', event ) ) {
+			event.preventDefault();
+
+			const { blocksToUpdate } = getBlocksToUpdate();
+			await insertAfterBlock( blocksToUpdate.at( -1 ) );
+			const newlySelectedBlocks = getSelectedBlockClientIds();
+
+			// Focus the first block of the newly inserted blocks, to keep focus within the list view.
+			setOpenedBlockSettingsMenu( undefined );
+			updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
+		} else if ( isMatch( 'core/block-editor/select-all', event ) ) {
+			event.preventDefault();
+
+			const { firstBlockRootClientId, selectedBlockClientIds } =
+				getBlocksToUpdate();
+			const blockClientIds = getBlockOrder( firstBlockRootClientId );
+			if ( ! blockClientIds.length ) {
+				return;
+			}
+
+			// If we have selected all sibling nested blocks, try selecting up a level.
+			// This is a similar implementation to that used by `useSelectAll`.
+			// `isShallowEqual` is used for the list view instead of a length check,
+			// as the array of siblings of the currently focused block may be a different
+			// set of blocks from the current block selection if the user is focused
+			// on a different part of the list view from the block selection.
+			if ( isShallowEqual( selectedBlockClientIds, blockClientIds ) ) {
+				// Only select up a level if the first block is not the root block.
+				// This ensures that the block selection can't break out of the root block
+				// used by the list view, if the list view is only showing a partial hierarchy.
+				if (
+					firstBlockRootClientId &&
+					firstBlockRootClientId !== rootClientId
+				) {
+					updateFocusAndSelection( firstBlockRootClientId, true );
+					return;
+				}
+			}
+
+			// Select all while passing `null` to skip focusing to the editor canvas,
+			// and retain focus within the list view.
+			multiSelect(
+				blockClientIds[ 0 ],
+				blockClientIds[ blockClientIds.length - 1 ],
+				null
+			);
+		} else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) {
+			event.preventDefault();
+			const { firstBlockClientId } = getBlocksToUpdate();
+			const blockParents = getBlockParents( firstBlockClientId, false );
+			// Collapse all blocks.
+			collapseAll();
+			// Expand all parents of the current block.
+			expand( blockParents );
+		} else if ( isMatch( 'core/block-editor/group', event ) ) {
+			const { blocksToUpdate } = getBlocksToUpdate();
+			if ( blocksToUpdate.length > 1 && isGroupable( blocksToUpdate ) ) {
+				event.preventDefault();
+				const blocks = getBlocksByClientId( blocksToUpdate );
+				const groupingBlockName = getGroupingBlockName();
+				const newBlocks = switchToBlockType(
+					blocks,
+					groupingBlockName
+				);
+				replaceBlocks( blocksToUpdate, newBlocks );
+				speak( __( 'Selected blocks are grouped.' ) );
+				const newlySelectedBlocks = getSelectedBlockClientIds();
+				// Focus the first block of the newly inserted blocks, to keep focus within the list view.
+				setOpenedBlockSettingsMenu( undefined );
+				updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
+			}
 		}
-	};
+	}
 
 	const onMouseEnter = useCallback( () => {
 		setIsHovered( true );
@@ -255,12 +470,12 @@ function ListViewBlock( {
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
-	const moverCellClassName = classnames(
+	const moverCellClassName = clsx(
 		'block-editor-list-view-block__mover-cell',
 		{ 'is-visible': isHovered || isSelected }
 	);
 
-	const listViewBlockSettingsClassName = classnames(
+	const listViewBlockSettingsClassName = clsx(
 		'block-editor-list-view-block__menu-cell',
 		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
@@ -272,7 +487,7 @@ function ListViewBlock( {
 		colSpan = 3;
 	}
 
-	const classes = classnames( {
+	const classes = clsx( {
 		'is-selected': isSelected,
 		'is-first-selected': isFirstSelectedBlock,
 		'is-last-selected': isLastSelectedBlock,
@@ -345,7 +560,6 @@ function ListViewBlock( {
 							isExpanded={ canEdit ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
 							ariaDescribedBy={ descriptionId }
-							updateFocusAndSelection={ updateFocusAndSelection }
 						/>
 						<AriaReferencedText id={ descriptionId }>
 							{ `${ blockPositionDescription } ${ blockPropertiesDescription }` }

package/src/components/list-view/drop-indicator.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -302,7 +302,7 @@ export default function ListViewDropIndicatorPreview( {
 		>
 			<div
 				style={ style }
-				className={ classnames(
+				className={ clsx(
 					'block-editor-list-view-drop-indicator__line',
 					{
 						'block-editor-list-view-drop-indicator__line--darker':
@@ -315,7 +315,7 @@ export default function ListViewDropIndicatorPreview( {
 					aria-level={ ariaLevel }
 				>
 					<div
-						className={ classnames(
+						className={ clsx(
 							'block-editor-list-view-block-select-button',
 							'block-editor-list-view-block-contents'
 						) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -64,7 +64,7 @@ const expanded = ( state, action ) => {
 	return state;
 };
 
-export const BLOCK_LIST_ITEM_HEIGHT = 36;
+export const BLOCK_LIST_ITEM_HEIGHT = 32;
 
 /** @typedef {import('react').ComponentType} ComponentType */
 /** @typedef {import('react').Ref<HTMLElement>} Ref */
@@ -366,7 +366,7 @@ function ListViewComponent(
 			) }
 			<TreeGrid
 				id={ id }
-				className={ classnames( 'block-editor-list-view-tree', {
+				className={ clsx( 'block-editor-list-view-tree', {
 					'is-dragging':
 						draggedClientIds?.length > 0 &&
 						blockDropTargetIndex !== undefined,

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { animated } from '@react-spring/web';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -44,10 +44,7 @@ const ListViewLeaf = forwardRef(
 		return (
 			<AnimatedTreeGridRow
 				ref={ mergedRef }
-				className={ classnames(
-					'block-editor-list-view-leaf',
-					className
-				) }
+				className={ clsx( 'block-editor-list-view-leaf', className ) }
 				level={ level }
 				positionInSet={ position }
 				setSize={ rowCount }

package/src/components/list-view/style.scss

@@ -156,13 +156,13 @@
 
 	&.is-displacement-up {
 		transition: transform 0.2s;
-		transform: translateY(-36px);
+		transform: translateY(-32px);
 		@include reduce-motion("transition");
 	}
 
 	&.is-displacement-down {
 		transition: transform 0.2s;
-		transform: translateY(36px);
+		transform: translateY(32px);
 		@include reduce-motion("transition");
 	}
 
@@ -172,20 +172,20 @@
 	// worth of space for the visual indicator of where a block will be placed when dropped.
 	&.is-after-dragged-blocks {
 		transition: transform 0.2s;
-		transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+		transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
 		@include reduce-motion("transition");
 	}
 
 	&.is-after-dragged-blocks.is-displacement-up {
 		transition: transform 0.2s;
-		transform: translateY(calc(-36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+		transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
 		@include reduce-motion("transition");
 	}
 
 	&.is-after-dragged-blocks.is-displacement-down {
 		transition: transform 0.2s;
 		transform:
-			translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) *
+			translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) *
 			-1));
 		@include reduce-motion("transition");
 	}
@@ -204,15 +204,15 @@
 		z-index: -9999;
 	}
 
-	// List View renders a fixed number of items and relies on each item having a fixed height of 36px.
+	// List View renders a fixed number of items and relies on each item having a fixed height of 32px.
 	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
 	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
 	.block-editor-list-view-block-contents {
 		display: flex;
 		align-items: center;
 		width: 100%;
-		height: auto;
-		padding: ($grid-unit-15 * 0.5) ($grid-unit-15 * 0.5) ($grid-unit-15 * 0.5) 0;
+		height: $grid-unit-40;
+		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
 		border-radius: $radius-block-ui;
 		position: relative;
@@ -277,15 +277,14 @@
 	}
 
 	.block-editor-block-icon {
-		margin-right: $grid-unit-10;
+		margin-right: $grid-unit-10 * 0.5; // 6px.
 		flex: 0 0 $icon-size;
 	}
 
 	.block-editor-list-view-block__menu-cell,
 	.block-editor-list-view-block__mover-cell,
 	.block-editor-list-view-block__contents-cell {
-		padding-top: 0;
-		padding-bottom: 0;
+		padding: 0;
 	}
 
 	.block-editor-list-view-block__menu-cell,
@@ -316,7 +315,7 @@
 	}
 
 	.block-editor-list-view-block__menu-cell {
-		padding-right: $grid-unit-15 * 0.5; // 6px.
+		padding-right: $grid-unit-05;
 
 		.components-button.has-icon {
 			height: 24px;
@@ -379,8 +378,10 @@
 		}
 	}
 
-	.block-editor-list-view-block-select-button__label-wrapper {
-		min-width: 120px;
+	// Style lock and position icons in line with image previews.
+	.block-editor-list-view-block-select-button__label-wrapper svg {
+		left: $grid-unit-05 * 0.5; // 2px.
+		position: relative;
 	}
 
 	.block-editor-list-view-block-select-button__title {
@@ -464,21 +465,12 @@ $block-navigation-max-indent: 8;
 // Chevron container metrics.
 .block-editor-list-view__expander {
 	height: $icon-size;
-	margin-left: $grid-unit-05;
 	width: $icon-size;
 	cursor: pointer;
 }
 
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
-	margin-left:
-		($icon-size) * $block-navigation-max-indent + 4 *
-		($block-navigation-max-indent - 1);
-}
-
-.block-editor-list-view-leaf:not([aria-level="1"]) {
-	.block-editor-list-view__expander {
-		margin-right: 4px;
-	}
+	margin-left: ($grid-unit-30 * $block-navigation-max-indent);
 }
 
 // When updating the margin for each indentation level, the corresponding
@@ -488,9 +480,9 @@ $block-navigation-max-indent: 8;
 	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"]
 	.block-editor-list-view__expander {
 		@if $i - 1 >= 0 {
-			margin-left: ($icon-size * $i) + 4 * ($i - 1);
+			margin-left: ($grid-unit-30 * $i); // Effectivly centers the expander below the parent's icon.
 		} @else {
-			margin-left: ($icon-size * $i);
+			margin-left: 0;
 		}
 	}
 }
@@ -540,7 +532,7 @@ svg {
 
 	.block-editor-list-view-drop-indicator__line {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-		height: 36px;
+		height: 32px;
 		border-radius: 4px;
 		overflow: hidden;
 	}
@@ -553,7 +545,7 @@ svg {
 .block-editor-list-view-placeholder {
 	padding: 0;
 	margin: 0;
-	height: 36px;
+	height: 32px;
 }
 
 .list-view-appender .block-editor-inserter__toggle {

package/src/components/list-view/use-list-view-drop-zone.js

@@ -62,7 +62,7 @@ import { store as blockEditorStore } from '../../store';
 
 // When the indentation level, the corresponding left margin in `style.scss`
 // must be updated as well to ensure the drop zone is aligned with the indentation.
-export const NESTING_LEVEL_INDENTATION = 28;
+export const NESTING_LEVEL_INDENTATION = 24;
 
 /**
  * Determines whether the user is positioning the dragged block to be

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

@@ -74,7 +74,9 @@ export function focusListItem( focusClientId, treeGridElement ) {
 		const row = treeGridElement?.querySelector(
 			`[role=row][data-block="${ focusClientId }"]`
 		);
-		if ( ! row ) return null;
+		if ( ! row ) {
+			return null;
+		}
 		// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
 		return focus.focusable.find( row )[ 0 ];
 	};

package/src/components/media-placeholder/content.scss

@@ -1,10 +1,3 @@
-.block-editor-media-placeholder__url-input-container {
-	// Reset the margin to ensure the url popover is adjacent to the button.
-	.block-editor-media-placeholder__button {
-		margin-bottom: 0;
-	}
-}
-
 .block-editor-media-placeholder__url-input-form {
 	display: flex;
 
@@ -29,10 +22,6 @@
 	flex-shrink: 1;
 }
 
-.block-editor-media-placeholder__button {
-	margin-bottom: 0.5rem;
-}
-
 .block-editor-media-placeholder__cancel-button.is-link {
 	margin: 1em;
 	display: block;

package/src/components/media-placeholder/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -81,7 +81,7 @@ const URLSelectionUI = ( {
 				className="block-editor-media-placeholder__button"
 				onClick={ openURLInput }
 				isPressed={ isURLInputVisible }
-				variant="tertiary"
+				variant="secondary"
 			>
 				{ __( 'Insert from URL' ) }
 			</Button>
@@ -349,7 +349,7 @@ export function MediaPlaceholder( {
 			}
 		}
 
-		const placeholderClassName = classnames(
+		const placeholderClassName = clsx(
 			'block-editor-media-placeholder',
 			className,
 			{
@@ -422,7 +422,7 @@ export function MediaPlaceholder( {
 					<Button
 						className="block-editor-media-placeholder__button"
 						onClick={ onToggleFeaturedImage }
-						variant="tertiary"
+						variant="secondary"
 					>
 						{ __( 'Use featured image' ) }
 					</Button>
@@ -435,7 +435,7 @@ export function MediaPlaceholder( {
 		const defaultButton = ( { open } ) => {
 			return (
 				<Button
-					variant="tertiary"
+					variant="secondary"
 					onClick={ () => {
 						open();
 					} }
@@ -475,7 +475,7 @@ export function MediaPlaceholder( {
 								<>
 									<Button
 										variant="primary"
-										className={ classnames(
+										className={ clsx(
 											'block-editor-media-placeholder__button',
 											'block-editor-media-placeholder__upload-button'
 										) }
@@ -502,7 +502,7 @@ export function MediaPlaceholder( {
 					{ renderDropZone() }
 					<FormFileUpload
 						variant="primary"
-						className={ classnames(
+						className={ clsx(
 							'block-editor-media-placeholder__button',
 							'block-editor-media-placeholder__upload-button'
 						) }