@gechiui/block-editor/src/components/block-switcher/block-styles-menu.js

Generic block editor.

/**
 * GeChiUI dependencies
 */
import { __ } from '@gechiui/i18n';
import { MenuGroup } from '@gechiui/components';
import { useState } from '@gechiui/element';
import { useSelect } from '@gechiui/data';
import {
	cloneBlock,
	getBlockFromExample,
	store as blocksStore,
} from '@gechiui/blocks';

/**
 * Internal dependencies
 */
import BlockStyles from '../block-styles';
import PreviewBlockPopover from './preview-block-popover';

export default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {
	const { name, clientId } = hoveredBlock;
	const [ hoveredClassName, setHoveredClassName ] = useState();
	const blockType = useSelect(
		( select ) => select( blocksStore ).getBlockType( name ),
		[ name ]
	);

	return (
		<MenuGroup
			label={ __( '样式' ) }
			className="block-editor-block-switcher__styles__menugroup"
		>
			{ hoveredClassName && (
				<PreviewBlockPopover
					blocks={
						blockType && blockType.example
							? getBlockFromExample( blockType.name, {
									attributes: {
										...blockType.example.attributes,
										className: hoveredClassName,
									},
									innerBlocks: blockType.example.innerBlocks,
							  } )
							: cloneBlock( hoveredBlock, {
									className: hoveredClassName,
							  } )
					}
				/>
			) }
			<BlockStyles
				clientId={ clientId }
				onSwitch={ onSwitch }
				onHoverClassName={ setHoveredClassName }
				itemRole="menuitem"
			/>
		</MenuGroup>
	);
}