From 3ce7ae7c44f1e54ab0f8c9170d69cebbebed66b8 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Fri, 3 Sep 2021 15:22:53 +1000
Subject: [PATCH] Adding dispatch to update block styles

---
 .../src/hooks/custom-class-name.js            | 61 ++++++++++++-------
 .../src/hooks/custom-class-name.scss          |  3 +
 packages/block-editor/src/style.scss          |  1 +
 3 files changed, 44 insertions(+), 21 deletions(-)
 create mode 100644 packages/block-editor/src/hooks/custom-class-name.scss

diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js
index ccacbb175c3767..20555840e5cd46 100644
--- a/packages/block-editor/src/hooks/custom-class-name.js
+++ b/packages/block-editor/src/hooks/custom-class-name.js
@@ -18,7 +18,7 @@ import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { check, moreVertical } from '@wordpress/icons';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as blockEditorStore } from '../store';
 
 /**
  * Internal dependencies
@@ -65,37 +65,53 @@ export const withInspectorControl = createHigherOrderComponent(
 				true
 			);
 
-			//const { updateBlockAttributes } = useDispatch( blockEditorStore );
+			const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 			const blockStyles = useSelect(
 				( select ) => {
 					const { getBlockStyles } = select( blocksStore );
 					return getBlockStyles( props.name );
 				},
-				[ props.name ]
+				[ props.name, props.attributes.className ]
 			);
 
 			const hasBlockStyles = blockStyles && blockStyles.length;
 
-			const activeStyleName = hasBlockStyles
+			const activeStyle = hasBlockStyles
 				? getActiveStyle(
 						blockStyles,
 						props.attributes.className || ''
-				  )?.name
+				  )
 				: null;
 
-			const onSelectStyleClassName = ( styleClassName ) => {
-				// updateBlockAttributes( props.clientId, {
-				// 	className: styleClassName,
-				// } );
+			const onSelectStyleClassName = ( style ) => {
+				const styleClassName = replaceActiveStyle(
+					props.attributes.className,
+					activeStyle,
+					style
+				);
+				updateBlockAttributes( props.clientId, {
+					className: styleClassName,
+				} );
 			};
 
+			const additionalClassNameContainerClasses = classnames(
+				'additional-class-name-control__container',
+				{
+					'has-block-styles': hasBlockStyles,
+				}
+			);
+
 			if ( hasCustomClassName && props.isSelected ) {
 				return (
 					<>
 						<BlockEdit { ...props } />
 						<InspectorControls __experimentalGroup="advanced">
-							<div className="custom-class-name-control">
+							<div
+								className={
+									additionalClassNameContainerClasses
+								}
+							>
 								<TextControl
 									autoComplete="off"
 									label={ __( 'Additional CSS class(es)' ) }
@@ -112,21 +128,25 @@ export const withInspectorControl = createHigherOrderComponent(
 										'Separate multiple classes with spaces.'
 									) }
 								/>
-								{ hasBlockStyles > 0 && (
+								{ hasBlockStyles && (
 									<DropdownMenu
 										icon={ moreVertical }
-										label={ __( 'Style CSS class(es)' ) }
+										label={ __( 'Block style classes' ) }
 									>
 										{ ( { onClose } ) => (
-											<MenuGroup>
+											<MenuGroup
+												label={ __(
+													'Block style classes'
+												) }
+											>
 												{ blockStyles.map(
-													( { name, label } ) => {
+													( style ) => {
 														const isSelected =
-															activeStyleName ===
-															name;
+															activeStyle?.name ===
+															style.name;
 														return (
 															<MenuItem
-																key={ label }
+																key={ style.label }
 																icon={
 																	isSelected &&
 																	check
@@ -136,17 +156,16 @@ export const withInspectorControl = createHigherOrderComponent(
 																}
 																onClick={ () => {
 																	onSelectStyleClassName(
-																		name
+																		style
 																	);
 																	onClose();
 																} }
 																role="menuitemcheckbox"
 															>
-																{ label }
+																{ style.label }
 															</MenuItem>
 														);
-													}
-												) }
+												} ) }
 											</MenuGroup>
 										) }
 									</DropdownMenu>
diff --git a/packages/block-editor/src/hooks/custom-class-name.scss b/packages/block-editor/src/hooks/custom-class-name.scss
new file mode 100644
index 00000000000000..ebd2c27102a657
--- /dev/null
+++ b/packages/block-editor/src/hooks/custom-class-name.scss
@@ -0,0 +1,3 @@
+.additional-class-name-control__container.has-block-styles {
+	display: flex;
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index ebc5481a281166..f0992d95e38c34 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -55,6 +55,7 @@
 @import "./hooks/anchor.scss";
 @import "./hooks/layout.scss";
 @import "./hooks/border.scss";
+@import "./hooks/custom-class-name.scss";
 
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/style.scss";