From 171f92d3e80f6dacf6b93c127d2b1617cda5935e Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 13 Oct 2023 16:33:52 +0400
Subject: [PATCH 1/2] Block Editor: Optimize 'customClassName' controls

---
 .../src/hooks/custom-class-name.js            | 67 ++++++++++---------
 1 file changed, 36 insertions(+), 31 deletions(-)

diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js
index 087fdffe23255a..c6e7e5409ea99f 100644
--- a/packages/block-editor/src/hooks/custom-class-name.js
+++ b/packages/block-editor/src/hooks/custom-class-name.js
@@ -39,6 +39,30 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
+function CustomClassNameControls( { attributes, setAttributes } ) {
+	const blockEditingMode = useBlockEditingMode();
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	return (
+		<InspectorControls group="advanced">
+			<TextControl
+				__nextHasNoMarginBottom
+				autoComplete="off"
+				label={ __( 'Additional CSS class(es)' ) }
+				value={ attributes.className || '' }
+				onChange={ ( nextValue ) => {
+					setAttributes( {
+						className: nextValue !== '' ? nextValue : undefined,
+					} );
+				} }
+				help={ __( 'Separate multiple classes with spaces.' ) }
+			/>
+		</InspectorControls>
+	);
+}
+
 /**
  * Override the default edit UI to include a new block inspector control for
  * assigning the custom class name, if block supports custom class name.
@@ -51,42 +75,23 @@ export function addAttribute( settings ) {
 export const withInspectorControl = createHigherOrderComponent(
 	( BlockEdit ) => {
 		return ( props ) => {
-			const blockEditingMode = useBlockEditingMode();
 			const hasCustomClassName = hasBlockSupport(
 				props.name,
 				'customClassName',
 				true
 			);
-			if ( hasCustomClassName && props.isSelected ) {
-				return (
-					<>
-						<BlockEdit { ...props } />
-						{ blockEditingMode === 'default' && (
-							<InspectorControls group="advanced">
-								<TextControl
-									__nextHasNoMarginBottom
-									autoComplete="off"
-									label={ __( 'Additional CSS class(es)' ) }
-									value={ props.attributes.className || '' }
-									onChange={ ( nextValue ) => {
-										props.setAttributes( {
-											className:
-												nextValue !== ''
-													? nextValue
-													: undefined,
-										} );
-									} }
-									help={ __(
-										'Separate multiple classes with spaces.'
-									) }
-								/>
-							</InspectorControls>
-						) }
-					</>
-				);
-			}
-
-			return <BlockEdit { ...props } />;
+
+			return (
+				<>
+					{ hasCustomClassName && props.isSelected && (
+						<CustomClassNameControls
+							attributes={ props.attributes }
+							setAttributes={ props.setAttributes }
+						/>
+					) }
+					<BlockEdit { ...props } />
+				</>
+			);
 		};
 	},
 	'withInspectorControl'

From 172210017b304c345e2d2698f251e3d4b469d563 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Tue, 17 Oct 2023 09:00:53 +0400
Subject: [PATCH 2/2] Feedback

---
 packages/block-editor/src/hooks/custom-class-name.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js
index c6e7e5409ea99f..dd4f4cd8c51e2b 100644
--- a/packages/block-editor/src/hooks/custom-class-name.js
+++ b/packages/block-editor/src/hooks/custom-class-name.js
@@ -83,13 +83,13 @@ export const withInspectorControl = createHigherOrderComponent(
 
 			return (
 				<>
+					<BlockEdit { ...props } />
 					{ hasCustomClassName && props.isSelected && (
 						<CustomClassNameControls
 							attributes={ props.attributes }
 							setAttributes={ props.setAttributes }
 						/>
 					) }
-					<BlockEdit { ...props } />
 				</>
 			);
 		};