@gechiui/block-editor/src/components/list-view/list-item.js

Generic block editor.

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

/**
 * GeChiUI dependencies
 */
import { Button, VisuallyHidden } from '@gechiui/components';
import {
	__experimentalGetBlockLabel as getBlockLabel,
	getBlockType,
} from '@gechiui/blocks';
import { __ } from '@gechiui/i18n';

/**
 * Internal dependencies
 */
import BlockIcon from '../block-icon';

export default function ListViewListItem( {
	block,
	onClick,
	isSelected,
	wrapperComponent: WrapperComponent,
	children,
} ) {
	const blockType = getBlockType( block.name );
	const blockLabel = blockType
		? getBlockLabel( blockType, block.attributes )
		: null;

	return (
		<div className="block-editor-list-view__list-item">
			<WrapperComponent
				className={ classnames(
					'block-editor-list-view__list-item-button',
					{
						'is-selected': isSelected,
					}
				) }
				onClick={ onClick }
			>
				<BlockIcon icon={ blockType?.icon } showColors />
				{ children ? children : blockLabel }
				{ isSelected && (
					<VisuallyHidden as="span">
						{ __( '（选定的区块）' ) }
					</VisuallyHidden>
				) }
			</WrapperComponent>
		</div>
	);
}

ListViewListItem.defaultProps = {
	onClick: () => {},
	wrapperComponent: ( props ) => <Button { ...props } />,
};