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 ) }
+ >
+
+
+ ) ) }
+
+ );
+}