@wordpress/block-editor 12.1.0 → 12.3.0

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -16,7 +16,10 @@ import {
 	useRef,
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import {
+	store as keyboardShortcutsStore,
+	__unstableUseShortcutEventMatch,
+} from '@wordpress/keyboard-shortcuts';
 import { pipe, useCopyToClipboard } from '@wordpress/compose';
 
 /**
@@ -30,7 +33,6 @@ import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import { store as blockEditorStore } from '../../store';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 
-const noop = () => {};
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	position: 'bottom right',
@@ -63,7 +65,6 @@ export function BlockSettingsDropdown( {
 		onlyBlock,
 		parentBlockType,
 		previousBlockClientId,
-		nextBlockClientId,
 		selectedBlockClientIds,
 	} = useSelect(
 		( select ) => {
@@ -72,7 +73,6 @@ export function BlockSettingsDropdown( {
 				getBlockName,
 				getBlockRootClientId,
 				getPreviousBlockClientId,
-				getNextBlockClientId,
 				getSelectedBlockClientIds,
 				getSettings,
 				getBlockAttributes,
@@ -98,12 +98,13 @@ export function BlockSettingsDropdown( {
 						getBlockType( parentBlockName ) ),
 				previousBlockClientId:
 					getPreviousBlockClientId( firstBlockClientId ),
-				nextBlockClientId: getNextBlockClientId( firstBlockClientId ),
 				selectedBlockClientIds: getSelectedBlockClientIds(),
 			};
 		},
 		[ firstBlockClientId ]
 	);
+	const { getBlockOrder, getSelectedBlockClientIds } =
+		useSelect( blockEditorStore );
 
 	const shortcuts = useSelect( ( select ) => {
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
@@ -120,51 +121,47 @@ export function BlockSettingsDropdown( {
 			),
 		};
 	}, [] );
+	const isMatch = __unstableUseShortcutEventMatch();
 
 	const { selectBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );
+	const hasSelectedBlocks = selectedBlockClientIds.length > 0;
 
 	const updateSelectionAfterDuplicate = useCallback(
-		__experimentalSelectBlock
-			? async ( clientIdsPromise ) => {
-					const ids = await clientIdsPromise;
-					if ( ids && ids[ 0 ] ) {
-						__experimentalSelectBlock( ids[ 0 ] );
-					}
-			  }
-			: noop,
+		async ( clientIdsPromise ) => {
+			if ( __experimentalSelectBlock ) {
+				const ids = await clientIdsPromise;
+				if ( ids && ids[ 0 ] ) {
+					__experimentalSelectBlock( ids[ 0 ], false );
+				}
+			}
+		},
 		[ __experimentalSelectBlock ]
 	);
 
-	const updateSelectionAfterRemove = useCallback(
-		__experimentalSelectBlock
-			? () => {
-					const blockToSelect =
-						previousBlockClientId ||
-						nextBlockClientId ||
-						firstParentClientId;
+	const updateSelectionAfterRemove = useCallback( () => {
+		if ( __experimentalSelectBlock ) {
+			let blockToFocus = previousBlockClientId || firstParentClientId;
 
-					if (
-						blockToSelect &&
-						// From the block options dropdown, it's possible to remove a block that is not selected,
-						// in this case, it's not necessary to update the selection since the selected block wasn't removed.
-						selectedBlockClientIds.includes( firstBlockClientId ) &&
-						// Don't update selection when next/prev block also is in the selection ( and gets removed ),
-						// In case someone selects all blocks and removes them at once.
-						! selectedBlockClientIds.includes( blockToSelect )
-					) {
-						__experimentalSelectBlock( blockToSelect );
-					}
-			  }
-			: noop,
-		[
-			__experimentalSelectBlock,
-			previousBlockClientId,
-			nextBlockClientId,
-			firstParentClientId,
-			selectedBlockClientIds,
-		]
-	);
+			// Focus the first block if there's no previous block nor parent block.
+			if ( ! blockToFocus ) {
+				blockToFocus = getBlockOrder()[ 0 ];
+			}
+
+			// Only update the selection if the original selection is removed.
+			const shouldUpdateSelection =
+				hasSelectedBlocks && getSelectedBlockClientIds().length === 0;
+
+			__experimentalSelectBlock( blockToFocus, shouldUpdateSelection );
+		}
+	}, [
+		__experimentalSelectBlock,
+		previousBlockClientId,
+		firstParentClientId,
+		getBlockOrder,
+		hasSelectedBlocks,
+		getSelectedBlockClientIds,
+	] );
 
 	const removeBlockLabel =
 		count === 1 ? __( 'Delete' ) : __( 'Delete blocks' );
@@ -212,6 +209,49 @@ export function BlockSettingsDropdown( {
 					className="block-editor-block-settings-menu"
 					popoverProps={ POPOVER_PROPS }
 					noIcons
+					menuProps={ {
+						/**
+						 * @param {KeyboardEvent} event
+						 */
+						onKeyDown( event ) {
+							if ( event.defaultPrevented ) return;
+
+							if (
+								isMatch( 'core/block-editor/remove', event ) &&
+								canRemove
+							) {
+								event.preventDefault();
+								updateSelectionAfterRemove( onRemove() );
+							} else if (
+								isMatch(
+									'core/block-editor/duplicate',
+									event
+								) &&
+								canDuplicate
+							) {
+								event.preventDefault();
+								updateSelectionAfterDuplicate( onDuplicate() );
+							} else if (
+								isMatch(
+									'core/block-editor/insert-after',
+									event
+								) &&
+								canInsertDefaultBlock
+							) {
+								event.preventDefault();
+								onInsertAfter();
+							} else if (
+								isMatch(
+									'core/block-editor/insert-before',
+									event
+								) &&
+								canInsertDefaultBlock
+							) {
+								event.preventDefault();
+								onInsertBefore();
+							}
+						},
+					} }
 					{ ...props }
 				>
 					{ ( { onClose } ) => (

package/src/components/block-styles/preview-panel.js

@@ -33,7 +33,5 @@ export default function BlockStylesPreviewPanel( {
 		};
 	}, [ genericPreviewBlock, styleClassName ] );
 
-	return (
-		<InserterPreviewPanel item={ previewBlocks } isStylePreview={ true } />
-	);
+	return <InserterPreviewPanel item={ previewBlocks } />;
 }

package/src/components/block-switcher/block-transformations-menu.js

@@ -14,6 +14,7 @@ import { useState, useMemo } from '@wordpress/element';
  */
 import BlockIcon from '../block-icon';
 import PreviewBlockPopover from './preview-block-popover';
+import BlockVariationTransformations from './block-variation-transformations';
 
 /**
  * Helper hook to group transformations to display them in a specific order in the UI.
@@ -65,7 +66,9 @@ function useGroupedTransforms( possibleBlockTransformations ) {
 const BlockTransformationsMenu = ( {
 	className,
 	possibleBlockTransformations,
+	possibleBlockVariationTransformations,
 	onSelect,
+	onSelectVariation,
 	blocks,
 } ) => {
 	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
@@ -95,6 +98,15 @@ const BlockTransformationsMenu = ( {
 						) }
 					/>
 				) }
+				{ !! possibleBlockVariationTransformations?.length && (
+					<BlockVariationTransformations
+						transformations={
+							possibleBlockVariationTransformations
+						}
+						blocks={ blocks }
+						onSelect={ onSelectVariation }
+					/>
+				) }
 				{ priorityTextTransformations.map( ( item ) => (
 					<BlockTranformationItem
 						key={ item.name }

package/src/components/block-switcher/block-variation-transformations.js

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import {
+	getBlockMenuDefaultClassName,
+	cloneBlock,
+	store as blocksStore,
+} from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockIcon from '../block-icon';
+import PreviewBlockPopover from './preview-block-popover';
+
+const EMPTY_OBJECT = {};
+
+export function useBlockVariationTransforms( { clientIds, blocks } ) {
+	const { activeBlockVariation, blockVariationTransformations } = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlockAttributes,
+				canRemoveBlocks,
+			} = select( blockEditorStore );
+			const { getActiveBlockVariation, getBlockVariations } =
+				select( blocksStore );
+			const rootClientId = getBlockRootClientId(
+				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
+			);
+			const canRemove = canRemoveBlocks( clientIds, rootClientId );
+			// Only handle single selected blocks for now.
+			if ( blocks.length !== 1 || ! canRemove ) {
+				return EMPTY_OBJECT;
+			}
+			const [ firstBlock ] = blocks;
+			return {
+				blockVariationTransformations: getBlockVariations(
+					firstBlock.name,
+					'transform'
+				),
+				activeBlockVariation: getActiveBlockVariation(
+					firstBlock.name,
+					getBlockAttributes( firstBlock.clientId )
+				),
+			};
+		},
+		[ clientIds, blocks ]
+	);
+	const transformations = useMemo( () => {
+		return blockVariationTransformations?.filter(
+			( { name } ) => name !== activeBlockVariation?.name
+		);
+	}, [ blockVariationTransformations, activeBlockVariation ] );
+	return transformations;
+}
+
+const BlockVariationTransformations = ( {
+	transformations,
+	onSelect,
+	blocks,
+} ) => {
+	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
+		useState();
+	return (
+		<>
+			{ hoveredTransformItemName && (
+				<PreviewBlockPopover
+					blocks={ cloneBlock(
+						blocks[ 0 ],
+						transformations.find(
+							( { name } ) => name === hoveredTransformItemName
+						).attributes
+					) }
+				/>
+			) }
+			{ transformations?.map( ( item ) => (
+				<BlockVariationTranformationItem
+					key={ item.name }
+					item={ item }
+					onSelect={ onSelect }
+					setHoveredTransformItemName={ setHoveredTransformItemName }
+				/>
+			) ) }
+		</>
+	);
+};
+
+function BlockVariationTranformationItem( {
+	item,
+	onSelect,
+	setHoveredTransformItemName,
+} ) {
+	const { name, icon, title } = item;
+	return (
+		<MenuItem
+			className={ getBlockMenuDefaultClassName( name ) }
+			onClick={ ( event ) => {
+				event.preventDefault();
+				onSelect( name );
+			} }
+			onMouseLeave={ () => setHoveredTransformItemName( null ) }
+			onMouseEnter={ () => setHoveredTransformItemName( name ) }
+		>
+			<BlockIcon icon={ icon } showColors />
+			{ title }
+		</MenuItem>
+	);
+}
+
+export default BlockVariationTransformations;

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

@@ -24,12 +24,14 @@ import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import BlockTransformationsMenu from './block-transformations-menu';
+import { useBlockVariationTransforms } from './block-variation-transformations';
 import BlockStylesMenu from './block-styles-menu';
 import PatternTransformationsMenu from './pattern-transformations-menu';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
 export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
-	const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
+	const { replaceBlocks, multiSelect, updateBlockAttributes } =
+		useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( blocks[ 0 ].clientId );
 	const {
 		possibleBlockTransformations,
@@ -43,9 +45,9 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				getBlockRootClientId,
 				getBlockTransformItems,
 				__experimentalGetPatternTransformItems,
+				canRemoveBlocks,
 			} = select( blockEditorStore );
 			const { getBlockStyles, getBlockType } = select( blocksStore );
-			const { canRemoveBlocks } = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId(
 				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
 			);
@@ -82,6 +84,11 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		[ clientIds, blocks, blockInformation?.icon ]
 	);
 
+	const blockVariationTransformations = useBlockVariationTransforms( {
+		clientIds,
+		blocks,
+	} );
+
 	const blockTitle = useBlockDisplayTitle( {
 		clientId: Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds,
 		maximumLength: 35,
@@ -105,6 +112,14 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		selectForMultipleBlocks( newBlocks );
 	}
 
+	function onBlockVariationTransform( name ) {
+		updateBlockAttributes( blocks[ 0 ].clientId, {
+			...blockVariationTransformations.find(
+				( { name: variationName } ) => variationName === name
+			).attributes,
+		} );
+	}
+
 	// Pattern transformation through the `Patterns` API.
 	function onPatternTransform( transformedBlocks ) {
 		replaceBlocks( clientIds, transformedBlocks );
@@ -118,8 +133,14 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	 */
 	const hasPossibleBlockTransformations =
 		!! possibleBlockTransformations.length && canRemove && ! isTemplate;
+	const hasPossibleBlockVariationTransformations =
+		!! blockVariationTransformations?.length;
 	const hasPatternTransformation = !! patterns?.length && canRemove;
-	if ( ! hasBlockStyles && ! hasPossibleBlockTransformations ) {
+	if (
+		! hasBlockStyles &&
+		! hasPossibleBlockTransformations &&
+		! hasPossibleBlockVariationTransformations
+	) {
 		return (
 			<ToolbarGroup>
 				<ToolbarButton
@@ -160,9 +181,12 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 					blocks.length
 			  );
 
+	const hasBlockOrBlockVariationTransforms =
+		hasPossibleBlockTransformations ||
+		hasPossibleBlockVariationTransformations;
 	const showDropDown =
 		hasBlockStyles ||
-		hasPossibleBlockTransformations ||
+		hasBlockOrBlockVariationTransforms ||
 		hasPatternTransformation;
 	return (
 		<ToolbarGroup>
@@ -213,17 +237,26 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 											} }
 										/>
 									) }
-									{ hasPossibleBlockTransformations && (
+									{ hasBlockOrBlockVariationTransforms && (
 										<BlockTransformationsMenu
 											className="block-editor-block-switcher__transforms__menugroup"
 											possibleBlockTransformations={
 												possibleBlockTransformations
 											}
+											possibleBlockVariationTransformations={
+												blockVariationTransformations
+											}
 											blocks={ blocks }
 											onSelect={ ( name ) => {
 												onBlockTransform( name );
 												onClose();
 											} }
+											onSelectVariation={ ( name ) => {
+												onBlockVariationTransform(
+													name
+												);
+												onClose();
+											} }
 										/>
 									) }
 									{ hasBlockStyles && (

package/src/components/block-switcher/pattern-transformations-menu.js

@@ -105,15 +105,15 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 		`${ baseClassName }-list__item-description`
 	);
 	return (
-		<div
-			className={ `${ baseClassName }-list__list-item` }
-			aria-label={ pattern.title }
-			aria-describedby={ pattern.description ? descriptionId : undefined }
-		>
+		<div className={ `${ baseClassName }-list__list-item` }>
 			<CompositeItem
 				role="option"
 				as="div"
 				{ ...composite }
+				aria-label={ pattern.title }
+				aria-describedby={
+					pattern.description ? descriptionId : undefined
+				}
 				className={ `${ baseClassName }-list__item` }
 				onClick={ () => onSelect( pattern.transformedBlocks ) }
 			>

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

@@ -109,19 +109,20 @@
 	}
 
 	.components-popover__content {
-		box-shadow: none;
+		width: 300px;
 		border: $border-width solid $gray-900;
 		background: $white;
 		border-radius: $radius-block-ui;
 		outline: none;
+		box-shadow: none;
 	}
 
 	.block-editor-block-switcher__preview {
-		width: 300px;
-		height: auto;
-		// Subtract margin from max-height.
+		// Subtract vertical margin from max-height.
 		max-height: calc(500px - #{$grid-unit-40});
-		margin: $grid-unit-20;
+		margin: $grid-unit-20 0;
+		// Use padding to prevent the pattern previews focus style from being cut-off.
+		padding: 0 $grid-unit-20;
 		overflow: hidden;
 	}
 }

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

@@ -32,6 +32,7 @@ import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowMoversGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
+import { unlock } from '../../lock-unlock';
 
 const BlockToolbar = ( { hideDragHandle } ) => {
 	const {
@@ -42,7 +43,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		isDistractionFree,
 		isValid,
 		isVisual,
-		isContentLocked,
+		blockEditingMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -51,8 +52,8 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 			isBlockValid,
 			getBlockRootClientId,
 			getSettings,
-			__unstableGetContentLockingParent,
-		} = select( blockEditorStore );
+			getBlockEditingMode,
+		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
 		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
@@ -73,9 +74,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 			isVisual: selectedBlockClientIds.every(
 				( id ) => getBlockMode( id ) === 'visual'
 			),
-			isContentLocked: !! __unstableGetContentLockingParent(
-				selectedBlockClientId
-			),
+			blockEditingMode: getBlockEditingMode( selectedBlockClientId ),
 		};
 	}, [] );
 
@@ -125,12 +124,12 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	return (
 		<div className={ classes }>
-			{ ! isMultiToolbar && isLargeViewport && ! isContentLocked && (
-				<BlockParentSelector />
-			) }
+			{ ! isMultiToolbar &&
+				isLargeViewport &&
+				blockEditingMode === 'default' && <BlockParentSelector /> }
 			<div ref={ nodeRef } { ...showMoversGestures }>
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					! isContentLocked && (
+					blockEditingMode === 'default' && (
 						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
 							<BlockSwitcher clientIds={ blockClientIds } />
 							{ ! isMultiToolbar && (
@@ -175,7 +174,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 				</>
 			) }
 			<BlockEditVisuallyButton clientIds={ blockClientIds } />
-			{ ! isContentLocked && (
+			{ blockEditingMode === 'default' && (
 				<BlockSettingsMenu clientIds={ blockClientIds } />
 			) }
 		</div>

package/src/components/block-tools/block-contextual-toolbar.js

@@ -25,6 +25,7 @@ import NavigableToolbar from '../navigable-toolbar';
 import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
+import { unlock } from '../../lock-unlock';
 
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	// When the toolbar is fixed it can be collapsed
@@ -38,8 +39,8 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 				getBlockName,
 				getBlockParents,
 				getSelectedBlockClientIds,
-				__unstableGetContentLockingParent,
-			} = select( blockEditorStore );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
 			const { getBlockType } = select( blocksStore );
 			const selectedBlockClientIds = getSelectedBlockClientIds();
 			const _selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -62,9 +63,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 						true
 					) &&
 					selectedBlockClientIds.length <= 1 &&
-					! __unstableGetContentLockingParent(
-						_selectedBlockClientId
-					),
+					getBlockEditingMode( _selectedBlockClientId ) === 'default',
 			};
 		}, [] );
 

package/src/components/block-tools/insertion-point.js

@@ -198,16 +198,30 @@ function InbetweenInsertionPointPopover( {
 }
 
 export default function InsertionPoint( props ) {
-	const { insertionPoint, isVisible } = useSelect( ( select ) => {
-		const { getBlockInsertionPoint, isBlockInsertionPointVisible } =
-			select( blockEditorStore );
-		return {
-			insertionPoint: getBlockInsertionPoint(),
-			isVisible: isBlockInsertionPointVisible(),
-		};
-	}, [] );
+	const { insertionPoint, isVisible, isBlockListEmpty } = useSelect(
+		( select ) => {
+			const {
+				getBlockInsertionPoint,
+				isBlockInsertionPointVisible,
+				getBlockCount,
+			} = select( blockEditorStore );
+			const blockInsertionPoint = getBlockInsertionPoint();
+			return {
+				insertionPoint: blockInsertionPoint,
+				isVisible: isBlockInsertionPointVisible(),
+				isBlockListEmpty:
+					getBlockCount( blockInsertionPoint?.rootClientId ) === 0,
+			};
+		},
+		[]
+	);
 
-	if ( ! isVisible ) {
+	if (
+		! isVisible ||
+		// Don't render the insertion point if the block list is empty.
+		// The insertion point will be represented by the appender instead.
+		isBlockListEmpty
+	) {
 		return null;
 	}
 

package/src/components/block-tools/selected-block-popover.js

@@ -102,6 +102,12 @@ function SelectedBlockPopover( {
 	// to it when re-mounting.
 	const initialToolbarItemIndexRef = useRef();
 
+	useEffect( () => {
+		// Resets the index whenever the active block changes so this is not
+		// persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+		initialToolbarItemIndexRef.current = undefined;
+	}, [ clientId ] );
+
 	const popoverProps = useBlockToolbarPopoverProps( {
 		contentElement: __unstableContentRef?.current,
 		clientId,

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

@@ -32,6 +32,7 @@
 	}
 }
 
+
 // When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
 .block-list-appender:only-child {
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
@@ -56,5 +57,26 @@
 		.block-editor-inserter {
 			visibility: hidden;
 		}
+
+		&.is-drag-over {
+			&::after {
+				border: none;
+			}
+
+			.block-editor-inserter {
+				visibility: visible;
+			}
+		}
+	}
+
+	&.is-drag-over .block-editor-button-block-appender {
+		background-color: var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
+		color: $light-gray-placeholder;
+		transition: background-color 0.2s ease-in-out;
+
+		@media ( prefers-reduced-motion: reduce ) {
+			transition: none;
+		}
 	}
 }