@gechiui/block-editor/src/components/block-variation-picker/index.js

Generic block editor.

/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * GeChiUI dependencies
 */
import { __ } from '@gechiui/i18n';
import { Button, Placeholder } from '@gechiui/components';
import { layout } from '@gechiui/icons';

function BlockVariationPicker( {
	icon = layout,
	label = __( '选择变体' ),
	instructions = __( '选择变体以开始。' ),
	variations,
	onSelect,
	allowSkip,
} ) {
	const classes = classnames( 'block-editor-block-variation-picker', {
		'has-many-variations': variations.length > 4,
	} );

	return (
		<Placeholder
			icon={ icon }
			label={ label }
			instructions={ instructions }
			className={ classes }
		>
			{ /*
			 * Disable reason: The `list` ARIA role is redundant but
			 * Safari+VoiceOver won't announce the list otherwise.
			 */
			/* eslint-disable jsx-a11y/no-redundant-roles */ }
			<ul
				className="block-editor-block-variation-picker__variations"
				role="list"
				aria-label={ __( '区块变体' ) }
			>
				{ variations.map( ( variation ) => (
					<li key={ variation.name }>
						<Button
							variant="secondary"
							icon={ variation.icon }
							iconSize={ 48 }
							onClick={ () => onSelect( variation ) }
							className="block-editor-block-variation-picker__variation"
							label={ variation.description || variation.title }
						/>
						<span
							className="block-editor-block-variation-picker__variation-label"
							role="presentation"
						>
							{ variation.title }
						</span>
					</li>
				) ) }
			</ul>
			{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
			{ allowSkip && (
				<div className="block-editor-block-variation-picker__skip">
					<Button variant="link" onClick={ () => onSelect() }>
						{ __( '跳过' ) }
					</Button>
				</div>
			) }
		</Placeholder>
	);
}

export default BlockVariationPicker;