From ff5c1db6e936e87a71e9cf51d6617ea0d3a20bfc Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 21 Feb 2024 17:44:20 +1000 Subject: [PATCH] Add new block styles control --- .../block-styles/block-styles-control.js | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 packages/block-editor/src/components/block-styles/block-styles-control.js diff --git a/packages/block-editor/src/components/block-styles/block-styles-control.js b/packages/block-editor/src/components/block-styles/block-styles-control.js new file mode 100644 index 0000000000000..646a52bb17bb1 --- /dev/null +++ b/packages/block-editor/src/components/block-styles/block-styles-control.js @@ -0,0 +1,80 @@ +/** + * WordPress dependencies + */ +import { + ColorIndicator, + Flex, + FlexItem, + privateApis as componentsPrivateApis, + __experimentalHStack as HStack, + __experimentalZStack as ZStack, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; +import { getDefaultStyle } from './utils'; + +const { CustomSelect, CustomSelectItem } = unlock( componentsPrivateApis ); + +function BlockStyleItem( { blockStyle: { styles, label } } ) { + const indicators = [ styles?.color?.background, styles?.color?.text ]; + + return ( + + + { indicators.map( ( indicator, index ) => ( + + + + ) ) } + + { label } + + ); +} + +export default function BlockStylesControl( props ) { + const { value, blockStyles, onChange, onHover } = props; + const defaultStyle = getDefaultStyle( blockStyles ); + + const renderSelectedBlockStyle = ( currentStyle ) => { + const currentBlockStyle = blockStyles.find( + ( style ) => style.name === currentStyle + ); + + if ( ! currentBlockStyle ) { + return null; + } + + return ; + }; + + return ( + + { blockStyles.map( ( blockStyle, index ) => ( + onHover( blockStyle ) } + onMouseLeave={ () => onHover( null ) } + onFocus={ () => onHover( blockStyle ) } + onBlur={ () => onHover( null ) } + > + + + ) ) } + + ); +}