Block editor: hooks: share block settings (#56852)

WordPress · Dec 7, 2023 · 7bdc190 · 7bdc190 · github-actions · Dec 7, 2023
1 parent d295da8
commit 7bdc190
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 57 deletions.
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
@@ -19,11 +19,7 @@ import { useSelect } from '@wordpress/data';
 import { getColorClassName } from '../components/colors';
 import InspectorControls from '../components/inspector-controls';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
-import {
-	cleanEmptyObject,
-	shouldSkipSerialization,
-	useBlockSettings,
-} from './utils';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
 import {
 	useHasBorderPanel,
 	BorderPanel as StylesBorderPanel,
@@ -137,8 +133,7 @@ function BordersInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-function BorderPanelPure( { clientId, name, setAttributes } ) {
-	const settings = useBlockSettings( name );
+function BorderPanelPure( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasBorderPanel( settings );
 	function selector( select ) {
 		const { style, borderColor } =

diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -24,7 +24,6 @@ import {
 	cleanEmptyObject,
 	transformStyles,
 	shouldSkipSerialization,
-	useBlockSettings,
 } from './utils';
 import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
@@ -291,8 +290,7 @@ function ColorInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-function ColorEditPure( { clientId, name, setAttributes } ) {
-	const settings = useBlockSettings( name );
+function ColorEditPure( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasColorPanel( settings );
 	function selector( select ) {
 		const { style, textColor, backgroundColor, gradient } =

diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
@@ -20,7 +20,7 @@ import { PaddingVisualizer } from './padding';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 
-import { cleanEmptyObject, useBlockSettings } from './utils';
+import { cleanEmptyObject } from './utils';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
@@ -66,13 +66,7 @@ function DimensionsInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-function DimensionsPanelPure( {
-	clientId,
-	name,
-	setAttributes,
-	__unstableParentLayout,
-} ) {
-	const settings = useBlockSettings( name, __unstableParentLayout );
+function DimensionsPanelPure( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasDimensionsPanel( settings );
 	const value = useSelect(
 		( select ) =>

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
@@ -33,7 +33,11 @@ import {
 	DimensionsPanel,
 } from './dimensions';
 import useDisplayBlockControls from '../components/use-display-block-controls';
-import { shouldSkipSerialization, useStyleOverride } from './utils';
+import {
+	shouldSkipSerialization,
+	useStyleOverride,
+	useBlockSettings,
+} from './utils';
 import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 
@@ -345,6 +349,30 @@ export function addEditProps( settings ) {
 	return settings;
 }
 
+function BlockStyleControls( {
+	clientId,
+	name,
+	setAttributes,
+	__unstableParentLayout,
+} ) {
+	const settings = useBlockSettings( name, __unstableParentLayout );
+	const passedProps = {
+		clientId,
+		name,
+		setAttributes,
+		settings,
+	};
+	return (
+		<>
+			<ColorEdit { ...passedProps } />
+			<BackgroundImagePanel { ...passedProps } />
+			<TypographyPanel { ...passedProps } />
+			<BorderPanel { ...passedProps } />
+			<DimensionsPanel { ...passedProps } />
+		</>
+	);
+}
+
 /**
  * Override the default edit UI to include new inspector controls for
  * all the custom styles configs.
@@ -361,40 +389,11 @@ export const withBlockStyleControls = createHigherOrderComponent(
 
 		const shouldDisplayControls = useDisplayBlockControls();
 		const blockEditingMode = useBlockEditingMode();
-		const { clientId, name, setAttributes, __unstableParentLayout } = props;
 
 		return (
 			<>
 				{ shouldDisplayControls && blockEditingMode === 'default' && (
-					<>
-						<ColorEdit
-							clientId={ clientId }
-							name={ name }
-							setAttributes={ setAttributes }
-						/>
-						<BackgroundImagePanel
-							clientId={ clientId }
-							name={ name }
-							setAttributes={ setAttributes }
-						/>
-						<TypographyPanel
-							clientId={ clientId }
-							name={ name }
-							setAttributes={ setAttributes }
-							__unstableParentLayout={ __unstableParentLayout }
-						/>
-						<BorderPanel
-							clientId={ clientId }
-							name={ name }
-							setAttributes={ setAttributes }
-						/>
-						<DimensionsPanel
-							clientId={ clientId }
-							name={ name }
-							setAttributes={ setAttributes }
-							__unstableParentLayout={ __unstableParentLayout }
-						/>
-					</>
+					<BlockStyleControls { ...props } />
 				) }
 				<BlockEdit key="edit" { ...props } />
 			</>

diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
@@ -18,7 +18,7 @@ import {
 import { LINE_HEIGHT_SUPPORT_KEY } from './line-height';
 import { FONT_FAMILY_SUPPORT_KEY } from './font-family';
 import { FONT_SIZE_SUPPORT_KEY } from './font-size';
-import { cleanEmptyObject, useBlockSettings } from './utils';
+import { cleanEmptyObject } from './utils';
 import { store as blockEditorStore } from '../store';
 
 function omit( object, keys ) {
@@ -109,19 +109,13 @@ function TypographyInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-function TypographyPanelPure( {
-	clientId,
-	name,
-	setAttributes,
-	__unstableParentLayout,
-} ) {
+function TypographyPanelPure( { clientId, name, setAttributes, settings } ) {
 	function selector( select ) {
 		const { style, fontFamily, fontSize } =
 			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
 		return { style, fontFamily, fontSize };
 	}
 	const { style, fontFamily, fontSize } = useSelect( selector, [ clientId ] );
-	const settings = useBlockSettings( name, __unstableParentLayout );
 	const isEnabled = useHasTypographyPanel( settings );
 	const value = useMemo(
 		() => attributesToStyle( { style, fontFamily, fontSize } ),