From e25a6ecc695c3a1dbbee32f949d5a5fcaa5985a9 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 7 Dec 2023 12:22:39 +0200 Subject: [PATCH] Block editor: hooks: share block settings --- packages/block-editor/src/hooks/border.js | 9 +-- packages/block-editor/src/hooks/color.js | 4 +- packages/block-editor/src/hooks/dimensions.js | 10 +-- packages/block-editor/src/hooks/style.js | 61 +++++++++---------- packages/block-editor/src/hooks/typography.js | 10 +-- 5 files changed, 37 insertions(+), 57 deletions(-) diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index 735d91e76538e5..d8905b29a29617 100644 --- 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 index 6addd94d93ee58..d5cb21e5dcf9a2 100644 --- 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 index c6d64d4ef785f3..4dcba5c4abef68 100644 --- 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 index 8b3a475e1babe5..1acb2cda3ac017 100644 --- 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 ( + <> + + + + + + + ); +} + /** * 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' && ( - <> - - - - - - + ) } diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index d5bf9ec42ad040..7b2fdc9ca28fb2 100644 --- 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 } ),