diff --git a/src/blocks/both-sides/index.js b/src/blocks/both-sides/index.js index 7c576739..80f82e88 100644 --- a/src/blocks/both-sides/index.js +++ b/src/blocks/both-sides/index.js @@ -26,19 +26,13 @@ registerBlockType( 'unitone/both-sides', { const withChildBlockAttributes = createHigherOrderComponent( ( BlockListBlock ) => { return ( props ) => { - const { getBlockParents, getBlock } = useSelect( blockEditorStore ); + const { getBlock } = useSelect( blockEditorStore ); - const blockParents = getBlockParents( props.clientId ); - if ( 1 > blockParents.length ) { + if ( ! props.rootClientId ) { return ; } - const parentClientId = blockParents[ blockParents.length - 1 ]; - if ( ! parentClientId ) { - return ; - } - - const parentBlock = getBlock( parentClientId ); + const parentBlock = getBlock( props.rootClientId ); if ( 'unitone/both-sides' !== parentBlock?.name ) { return ; } @@ -59,6 +53,7 @@ const withChildBlockAttributes = createHigherOrderComponent( : DEFAULT_VALUES.flexBasis, }, __unstableUnitoneSupports: { + ...props?.attributes?.__unstableUnitoneSupports, flexBasis: { default: DEFAULT_VALUES.flexBasis, }, @@ -75,5 +70,6 @@ const withChildBlockAttributes = createHigherOrderComponent( addFilter( 'editor.BlockListBlock', 'unitone/both-sides/with-child-block-attributes', - withChildBlockAttributes + withChildBlockAttributes, + 11 ); diff --git a/src/blocks/flex-divided/index.js b/src/blocks/flex-divided/index.js index a963b1b2..39ecb51d 100644 --- a/src/blocks/flex-divided/index.js +++ b/src/blocks/flex-divided/index.js @@ -26,19 +26,13 @@ registerBlockType( 'unitone/flex-divided', { const withChildBlockAttributes = createHigherOrderComponent( ( BlockListBlock ) => { return ( props ) => { - const { getBlockParents, getBlock } = useSelect( blockEditorStore ); + const { getBlock } = useSelect( blockEditorStore ); - const blockParents = getBlockParents( props.clientId ); - if ( 1 > blockParents.length ) { + if ( ! props.rootClientId ) { return ; } - const parentClientId = blockParents[ blockParents.length - 1 ]; - if ( ! parentClientId ) { - return ; - } - - const parentBlock = getBlock( parentClientId ); + const parentBlock = getBlock( props.rootClientId ); if ( 'unitone/flex-divided' !== parentBlock?.name ) { return ; } @@ -69,6 +63,7 @@ const withChildBlockAttributes = createHigherOrderComponent( : DEFAULT_VALUES.flexBasis, }, __unstableUnitoneSupports: { + ...props?.attributes?.__unstableUnitoneSupports, flexGrow: { default: DEFAULT_VALUES.flexGrow, }, @@ -91,5 +86,6 @@ const withChildBlockAttributes = createHigherOrderComponent( addFilter( 'editor.BlockListBlock', 'unitone/flex-divided/with-child-block-attributes', - withChildBlockAttributes + withChildBlockAttributes, + 11 ); diff --git a/src/blocks/flex/index.js b/src/blocks/flex/index.js index d1e19da5..23208268 100644 --- a/src/blocks/flex/index.js +++ b/src/blocks/flex/index.js @@ -24,19 +24,13 @@ registerBlockType( 'unitone/flex', { const withChildBlockAttributes = createHigherOrderComponent( ( BlockListBlock ) => { return ( props ) => { - const { getBlockParents, getBlock } = useSelect( blockEditorStore ); + const { getBlock } = useSelect( blockEditorStore ); - const blockParents = getBlockParents( props.clientId ); - if ( 1 > blockParents.length ) { + if ( ! props.rootClientId ) { return ; } - const parentClientId = blockParents[ blockParents.length - 1 ]; - if ( ! parentClientId ) { - return ; - } - - const parentBlock = getBlock( parentClientId ); + const parentBlock = getBlock( props.rootClientId ); if ( 'unitone/flex' !== parentBlock?.name ) { return ; } @@ -67,6 +61,7 @@ const withChildBlockAttributes = createHigherOrderComponent( : DEFAULT_VALUES.flexBasis, }, __unstableUnitoneSupports: { + ...props?.attributes?.__unstableUnitoneSupports, flexGrow: { default: DEFAULT_VALUES.flexGrow, }, @@ -89,5 +84,6 @@ const withChildBlockAttributes = createHigherOrderComponent( addFilter( 'editor.BlockListBlock', 'unitone/flex/with-child-block-attributes', - withChildBlockAttributes + withChildBlockAttributes, + 11 ); diff --git a/src/blocks/grid-divided/index.js b/src/blocks/grid-divided/index.js index ec4c8f2a..c836dc12 100644 --- a/src/blocks/grid-divided/index.js +++ b/src/blocks/grid-divided/index.js @@ -26,19 +26,13 @@ registerBlockType( 'unitone/grid-divided', { const withChildBlockAttributes = createHigherOrderComponent( ( BlockListBlock ) => { return ( props ) => { - const { getBlockParents, getBlock } = useSelect( blockEditorStore ); + const { getBlock } = useSelect( blockEditorStore ); - const blockParents = getBlockParents( props.clientId ); - if ( 1 > blockParents.length ) { + if ( ! props.rootClientId ) { return ; } - const parentClientId = blockParents[ blockParents.length - 1 ]; - if ( ! parentClientId ) { - return ; - } - - const parentBlock = getBlock( parentClientId ); + const parentBlock = getBlock( props.rootClientId ); if ( 'unitone/grid-divided' !== parentBlock?.name ) { return ; } @@ -68,6 +62,7 @@ const withChildBlockAttributes = createHigherOrderComponent( : DEFAULT_VALUES.justifySelf, }, __unstableUnitoneSupports: { + ...props?.attributes?.__unstableUnitoneSupports, alignSelf: { responsive: true, default: DEFAULT_VALUES.alignSelf, @@ -89,5 +84,6 @@ const withChildBlockAttributes = createHigherOrderComponent( addFilter( 'editor.BlockListBlock', 'unitone/grid/with-child-block-attributes', - withChildBlockAttributes + withChildBlockAttributes, + 11 ); diff --git a/src/blocks/grid/index.js b/src/blocks/grid/index.js index 2c4b903d..24c69c02 100644 --- a/src/blocks/grid/index.js +++ b/src/blocks/grid/index.js @@ -25,19 +25,13 @@ registerBlockType( 'unitone/grid', { const withChildBlockAttributes = createHigherOrderComponent( ( BlockListBlock ) => { return ( props ) => { - const { getBlockParents, getBlock } = useSelect( blockEditorStore ); + const { getBlock } = useSelect( blockEditorStore ); - const blockParents = getBlockParents( props.clientId ); - if ( 1 > blockParents.length ) { + if ( ! props.rootClientId ) { return ; } - const parentClientId = blockParents[ blockParents.length - 1 ]; - if ( ! parentClientId ) { - return ; - } - - const parentBlock = getBlock( parentClientId ); + const parentBlock = getBlock( props.rootClientId ); if ( 'unitone/grid' !== parentBlock?.name ) { return ; } @@ -81,6 +75,7 @@ const withChildBlockAttributes = createHigherOrderComponent( : DEFAULT_VALUES.gridRow, }, __unstableUnitoneSupports: { + ...props?.attributes?.__unstableUnitoneSupports, alignSelf: { responsive: true, default: DEFAULT_VALUES.alignSelf, @@ -110,5 +105,6 @@ const withChildBlockAttributes = createHigherOrderComponent( addFilter( 'editor.BlockListBlock', 'unitone/grid/with-child-block-attributes', - withChildBlockAttributes + withChildBlockAttributes, + 11 ); diff --git a/src/blocks/gutters/index.js b/src/blocks/gutters/index.js index 7eaee611..f99fca45 100644 --- a/src/blocks/gutters/index.js +++ b/src/blocks/gutters/index.js @@ -35,8 +35,6 @@ const changeUnitoneSupportsLabels = createHigherOrderComponent( __unstableUnitoneSupports: { ...props?.attributes?.__unstableUnitoneSupports, padding: { - ...props?.attributes?.__unstableUnitoneSupports - ?.padding, label: __( 'Top and bottom padding', 'unitone' ), }, }, @@ -52,5 +50,6 @@ const changeUnitoneSupportsLabels = createHigherOrderComponent( addFilter( 'editor.BlockListBlock', 'unitone/gutters/change-unitone-supports-labels', - changeUnitoneSupportsLabels + changeUnitoneSupportsLabels, + 11 ); diff --git a/src/blocks/layers/index.js b/src/blocks/layers/index.js index dbafe1ab..7ce0a356 100644 --- a/src/blocks/layers/index.js +++ b/src/blocks/layers/index.js @@ -28,19 +28,13 @@ registerBlockType( 'unitone/layers', { const withChildBlockAttributes = createHigherOrderComponent( ( BlockListBlock ) => { return ( props ) => { - const { getBlockParents, getBlock } = useSelect( blockEditorStore ); + const { getBlock } = useSelect( blockEditorStore ); - const blockParents = getBlockParents( props.clientId ); - if ( 1 > blockParents.length ) { + if ( ! props.rootClientId ) { return ; } - const parentClientId = blockParents[ blockParents.length - 1 ]; - if ( ! parentClientId ) { - return ; - } - - const parentBlock = getBlock( parentClientId ); + const parentBlock = getBlock( props.rootClientId ); if ( 'unitone/layers' !== parentBlock?.name ) { return ; } @@ -76,6 +70,7 @@ const withChildBlockAttributes = createHigherOrderComponent( : DEFAULT_VALUES.gridRow, }, __unstableUnitoneSupports: { + ...props?.attributes?.__unstableUnitoneSupports, alignSelf: { default: DEFAULT_VALUES.alignSelf, }, @@ -104,5 +99,6 @@ const withChildBlockAttributes = createHigherOrderComponent( addFilter( 'editor.BlockListBlock', 'unitone/layers/with-child-block-attributes', - withChildBlockAttributes + withChildBlockAttributes, + 11 ); diff --git a/src/blocks/section/index.js b/src/blocks/section/index.js index 57b7f3a0..f03284ad 100644 --- a/src/blocks/section/index.js +++ b/src/blocks/section/index.js @@ -36,13 +36,9 @@ const changeUnitoneSupportsLabels = createHigherOrderComponent( __unstableUnitoneSupports: { ...props?.attributes?.__unstableUnitoneSupports, maxWidth: { - ...props?.attributes?.__unstableUnitoneSupports - ?.maxWidth, label: __( 'Max width of contents', 'unitone' ), }, padding: { - ...props?.attributes?.__unstableUnitoneSupports - ?.padding, label: __( 'Top and bottom padding', 'unitone' ), }, }, @@ -58,5 +54,6 @@ const changeUnitoneSupportsLabels = createHigherOrderComponent( addFilter( 'editor.BlockListBlock', 'unitone/gutters/change-unitone-supports-labels', - changeUnitoneSupportsLabels + changeUnitoneSupportsLabels, + 11 ); diff --git a/src/js/editor/hooks/animation/animation.js b/src/js/editor/hooks/animation/animation.js index 37b3d561..e35e3b58 100644 --- a/src/js/editor/hooks/animation/animation.js +++ b/src/js/editor/hooks/animation/animation.js @@ -15,7 +15,7 @@ import { hasParallaxValue, resetParallax, ParallaxEdit, - editParallaxProp, + useParallaxBlockProps, } from './parallax'; import { @@ -23,10 +23,10 @@ import { hasScrollAnimationValue, resetScrollAnimation, ScrollAnimationEdit, - editScrollAnimationProp, + useScrollAnimationBlockProps, } from './scroll-animation'; -export { editParallaxProp, editScrollAnimationProp }; +export { useParallaxBlockProps, useScrollAnimationBlockProps }; export function AnimationPanel( props ) { const isParallaxDisabled = useIsParallaxDisabled( props ); diff --git a/src/js/editor/hooks/animation/parallax.js b/src/js/editor/hooks/animation/parallax.js index e5d1832d..49fdd5dd 100644 --- a/src/js/editor/hooks/animation/parallax.js +++ b/src/js/editor/hooks/animation/parallax.js @@ -167,15 +167,14 @@ export function saveParallaxProp( extraProps, blockType, attributes ) { return extraProps; } -export function editParallaxProp( settings ) { - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveParallaxProp( props, settings, attributes ); +export function useParallaxBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveParallaxProp( wrapperProps, name, attributes ), + }, }; - - return settings; } diff --git a/src/js/editor/hooks/animation/scroll-animation.js b/src/js/editor/hooks/animation/scroll-animation.js index fa21bcd2..c2e8805a 100644 --- a/src/js/editor/hooks/animation/scroll-animation.js +++ b/src/js/editor/hooks/animation/scroll-animation.js @@ -433,15 +433,14 @@ export function saveScrollAnimationProp( extraProps, blockType, attributes ) { return extraProps; } -export function editScrollAnimationProp( settings ) { - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveScrollAnimationProp( props, settings, attributes ); +export function useScrollAnimationBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveScrollAnimationProp( wrapperProps, name, attributes ), + }, }; - - return settings; } diff --git a/src/js/editor/hooks/border/border.js b/src/js/editor/hooks/border/border.js index cccd6eff..9f25aee2 100644 --- a/src/js/editor/hooks/border/border.js +++ b/src/js/editor/hooks/border/border.js @@ -7,10 +7,10 @@ import { resetDropShadow, getDropShadowEditLabel, DropShadowEdit, - editDropShadowProp, + useDropShadowBlockProps, } from './drop-shadow'; -export { editDropShadowProp }; +export { useDropShadowBlockProps }; export function DropShadowPanel( props ) { const isDropShadowDisabled = useIsDropShadowDisabled( props ); diff --git a/src/js/editor/hooks/border/drop-shadow.js b/src/js/editor/hooks/border/drop-shadow.js index c14d3049..647b617b 100644 --- a/src/js/editor/hooks/border/drop-shadow.js +++ b/src/js/editor/hooks/border/drop-shadow.js @@ -314,18 +314,14 @@ export function saveDropShadowProp( extraProps, blockType, attributes ) { return extraProps; } -export function editDropShadowProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.dropShadow' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveDropShadowProp( props, settings, attributes ); +export function useDropShadowBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveDropShadowProp( wrapperProps, name, attributes ), + }, }; - return settings; } diff --git a/src/js/editor/hooks/dimensions/dimensions.js b/src/js/editor/hooks/dimensions/dimensions.js index d0447541..1f306562 100644 --- a/src/js/editor/hooks/dimensions/dimensions.js +++ b/src/js/editor/hooks/dimensions/dimensions.js @@ -11,7 +11,7 @@ import { resetPadding, getPaddingEditLabel, PaddingEdit, - editPaddingProp, + usePaddingBlockProps, } from './padding'; import { @@ -20,7 +20,7 @@ import { resetGutters, getGuttersEditLabel, GuttersEdit, - editGuttersProp, + useGuttersBlockProps, } from './gutters'; import { @@ -29,7 +29,7 @@ import { resetGap, getGapEditLabel, GapEdit, - editGapProp, + useGapBlockProps, } from './gap'; import { @@ -42,7 +42,7 @@ import { StairsEdit, getStairsUpEditLabel, StairsUpEdit, - editStairsProp, + useStairsBlockProps, } from './stairs'; import { @@ -51,7 +51,7 @@ import { resetNegative, getNegativeEditLabel, NegativeEdit, - editNegativeProp, + useNegativeBlockProps, } from './negative'; import { @@ -60,16 +60,16 @@ import { resetOverflow, getOverflowEditLabel, OverflowEdit, - editOverflowProp, + useOverflowBlockProps, } from './overflow'; export { - editPaddingProp, - editGuttersProp, - editGapProp, - editStairsProp, - editNegativeProp, - editOverflowProp, + useGapBlockProps, + useGuttersBlockProps, + useNegativeBlockProps, + useOverflowBlockProps, + usePaddingBlockProps, + useStairsBlockProps, }; export function DimensionsPanel( props ) { diff --git a/src/js/editor/hooks/dimensions/gap.js b/src/js/editor/hooks/dimensions/gap.js index b011382e..19925c03 100644 --- a/src/js/editor/hooks/dimensions/gap.js +++ b/src/js/editor/hooks/dimensions/gap.js @@ -403,18 +403,14 @@ export function saveGapProp( extraProps, blockType, attributes ) { return extraProps; } -export function editGapProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.gap' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveGapProp( props, settings, attributes ); +export function useGapBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveGapProp( wrapperProps, name, attributes ), + }, }; - return settings; } diff --git a/src/js/editor/hooks/dimensions/gutters.js b/src/js/editor/hooks/dimensions/gutters.js index de1c19c4..4d7e7a90 100644 --- a/src/js/editor/hooks/dimensions/gutters.js +++ b/src/js/editor/hooks/dimensions/gutters.js @@ -142,19 +142,14 @@ export function saveGuttersProp( extraProps, blockType, attributes ) { return extraProps; } -export function editGuttersProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.gutters' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveGuttersProp( props, settings, attributes ); +export function useGuttersBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveGuttersProp( wrapperProps, name, attributes ), + }, }; - - return settings; } diff --git a/src/js/editor/hooks/dimensions/negative.js b/src/js/editor/hooks/dimensions/negative.js index 4d0ff088..9bcc7203 100644 --- a/src/js/editor/hooks/dimensions/negative.js +++ b/src/js/editor/hooks/dimensions/negative.js @@ -108,19 +108,14 @@ export function saveNegativeProp( extraProps, blockType, attributes ) { return extraProps; } -export function editNegativeProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.negative' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveNegativeProp( props, settings, attributes ); +export function useNegativeBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveNegativeProp( wrapperProps, name, attributes ), + }, }; - - return settings; } diff --git a/src/js/editor/hooks/dimensions/overflow.js b/src/js/editor/hooks/dimensions/overflow.js index e6a26f13..126e3c69 100644 --- a/src/js/editor/hooks/dimensions/overflow.js +++ b/src/js/editor/hooks/dimensions/overflow.js @@ -131,18 +131,14 @@ export function saveOverflowProp( extraProps, blockType, attributes ) { return extraProps; } -export function editOverflowProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.overflow' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveOverflowProp( props, settings, attributes ); +export function useOverflowBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveOverflowProp( wrapperProps, name, attributes ), + }, }; - return settings; } diff --git a/src/js/editor/hooks/dimensions/padding.js b/src/js/editor/hooks/dimensions/padding.js index 825e2635..87298a50 100644 --- a/src/js/editor/hooks/dimensions/padding.js +++ b/src/js/editor/hooks/dimensions/padding.js @@ -120,18 +120,14 @@ export function savePaddingProp( extraProps, blockType, attributes ) { return extraProps; } -export function editPaddingProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.padding' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return savePaddingProp( props, settings, attributes ); +export function usePaddingBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...savePaddingProp( wrapperProps, name, attributes ), + }, }; - return settings; } diff --git a/src/js/editor/hooks/dimensions/stairs.js b/src/js/editor/hooks/dimensions/stairs.js index 34e41d22..2292b030 100644 --- a/src/js/editor/hooks/dimensions/stairs.js +++ b/src/js/editor/hooks/dimensions/stairs.js @@ -223,18 +223,14 @@ export function saveStairsProp( extraProps, blockType, attributes ) { return extraProps; } -export function editStairsProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.stairs' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveStairsProp( props, settings, attributes ); +export function useStairsBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveStairsProp( wrapperProps, name, attributes ), + }, }; - return settings; } diff --git a/src/js/editor/hooks/divider/divider-object.js b/src/js/editor/hooks/divider/divider-object.js index 21f1a527..bf809024 100644 --- a/src/js/editor/hooks/divider/divider-object.js +++ b/src/js/editor/hooks/divider/divider-object.js @@ -229,19 +229,14 @@ export function saveDividerProp( extraProps, blockType, attributes ) { return extraProps; } -export function editDividerProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.divider' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveDividerProp( props, settings, attributes ); +export function useDividerBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveDividerProp( wrapperProps, name, attributes ), + }, }; - - return settings; } diff --git a/src/js/editor/hooks/divider/divider-type.js b/src/js/editor/hooks/divider/divider-type.js index 5a8b7507..6b1e8b76 100644 --- a/src/js/editor/hooks/divider/divider-type.js +++ b/src/js/editor/hooks/divider/divider-type.js @@ -145,19 +145,14 @@ export function saveDividerTypeProp( extraProps, blockType, attributes ) { return extraProps; } -export function editDividerTypeProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.dividerType' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveDividerTypeProp( props, settings, attributes ); +export function useDividerTypeBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveDividerTypeProp( wrapperProps, name, attributes ), + }, }; - - return settings; } diff --git a/src/js/editor/hooks/divider/divider.js b/src/js/editor/hooks/divider/divider.js index 1f77c8d3..80eae2ba 100644 --- a/src/js/editor/hooks/divider/divider.js +++ b/src/js/editor/hooks/divider/divider.js @@ -8,7 +8,7 @@ import { import { __ } from '@wordpress/i18n'; import { - editDividerTypeProp, + useDividerTypeBlockProps, useIsDividerTypeDisabled, resetDividerType, hasDividerTypeValue, @@ -17,8 +17,7 @@ import { } from './divider-type'; import { - saveDividerProp, - editDividerProp, + useDividerBlockProps, useIsDividerDisabled, resetDivider, hasDividerValue, @@ -26,7 +25,7 @@ import { DividerEdit, } from './divider-object'; -export { editDividerTypeProp, saveDividerProp, editDividerProp }; +export { useDividerTypeBlockProps, useDividerBlockProps }; export function DividerPanel( props ) { const isDividerTypeDisabled = useIsDividerTypeDisabled( props ); diff --git a/src/js/editor/hooks/layer/layer.js b/src/js/editor/hooks/layer/layer.js index b50c8903..204d7a33 100644 --- a/src/js/editor/hooks/layer/layer.js +++ b/src/js/editor/hooks/layer/layer.js @@ -14,10 +14,10 @@ import { hasMixBlendModeValue, resetMixBlendMode, MixBlendModeEdit, - editMixBlendModeProp, + useMixBlendModeBlockProps, } from './mix-blend-mode'; -export { editMixBlendModeProp }; +export { useMixBlendModeBlockProps }; export function LayerPanel( props ) { const isMixBlendModeDisabled = useIsMixBlendModeDisabled( props ); diff --git a/src/js/editor/hooks/layer/mix-blend-mode.js b/src/js/editor/hooks/layer/mix-blend-mode.js index ea25fba5..90f2e0e1 100644 --- a/src/js/editor/hooks/layer/mix-blend-mode.js +++ b/src/js/editor/hooks/layer/mix-blend-mode.js @@ -161,18 +161,18 @@ export function MixBlendModeEdit( props ) { } export function saveMixBlendModeProp( extraProps, blockType, attributes ) { - if ( - ! hasBlockSupport( blockType, 'unitone.mixBlendMode' ) && - ! attributes?.__unstableUnitoneSupports?.mixBlendMode - ) { - delete attributes?.unitone?.mixBlendMode; - if ( - !! attributes?.unitone && - ! Object.keys( attributes?.unitone ).length - ) { - delete attributes?.unitone; + if ( ! hasBlockSupport( blockType, 'unitone.mixBlendMode' ) ) { + const { __unstableUnitoneSupports } = attributes; + + if ( ! __unstableUnitoneSupports?.mixBlendMode ) { + delete attributes?.unitone?.mixBlendMode; + + if ( ! Object.keys( attributes?.unitone ?? {} ).length ) { + delete attributes?.unitone; + } + + return extraProps; } - return extraProps; } if ( undefined === attributes?.unitone?.mixBlendMode ) { @@ -187,15 +187,14 @@ export function saveMixBlendModeProp( extraProps, blockType, attributes ) { return extraProps; } -export function editMixBlendModeProp( settings ) { - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveMixBlendModeProp( props, settings, attributes ); - }; +export function useMixBlendModeBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - return settings; + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveMixBlendModeProp( wrapperProps, name, attributes ), + }, + }; } diff --git a/src/js/editor/hooks/layout/align-items.js b/src/js/editor/hooks/layout/align-items.js index 7551038d..cc2cd1a8 100644 --- a/src/js/editor/hooks/layout/align-items.js +++ b/src/js/editor/hooks/layout/align-items.js @@ -205,18 +205,14 @@ export function saveAlignItemsProp( extraProps, blockType, attributes ) { return extraProps; } -export function editAlignItemsProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.alignItems' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveAlignItemsProp( props, settings, attributes ); +export function useAlignItemsBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveAlignItemsProp( wrapperProps, name, attributes ), + }, }; - return settings; } diff --git a/src/js/editor/hooks/layout/align-self.js b/src/js/editor/hooks/layout/align-self.js index 33423ccd..b56875ba 100644 --- a/src/js/editor/hooks/layout/align-self.js +++ b/src/js/editor/hooks/layout/align-self.js @@ -415,18 +415,18 @@ export function AlignSelfEdit( props ) { } export function saveAlignSelfProp( extraProps, blockType, attributes ) { - if ( - ! hasBlockSupport( blockType, 'unitone.alignSelf' ) && - ! attributes?.__unstableUnitoneSupports?.alignSelf - ) { - delete attributes?.unitone?.alignSelf; - if ( - !! attributes?.unitone && - ! Object.keys( attributes?.unitone ).length - ) { - delete attributes?.unitone; + if ( ! hasBlockSupport( blockType, 'unitone.alignSelf' ) ) { + const { __unstableUnitoneSupports } = attributes; + + if ( ! __unstableUnitoneSupports?.alignSelf ) { + delete attributes?.unitone?.alignSelf; + + if ( ! Object.keys( attributes?.unitone ?? {} ).length ) { + delete attributes?.unitone; + } + + return extraProps; } - return extraProps; } if ( undefined === attributes?.unitone?.alignSelf ) { @@ -450,15 +450,14 @@ export function saveAlignSelfProp( extraProps, blockType, attributes ) { return extraProps; } -export function editAlignSelfProp( settings ) { - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveAlignSelfProp( props, settings, attributes ); - }; +export function useAlignSelfBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - return settings; + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveAlignSelfProp( wrapperProps, name, attributes ), + }, + }; } diff --git a/src/js/editor/hooks/layout/auto-repeat.js b/src/js/editor/hooks/layout/auto-repeat.js index 66178679..1967a013 100644 --- a/src/js/editor/hooks/layout/auto-repeat.js +++ b/src/js/editor/hooks/layout/auto-repeat.js @@ -122,19 +122,14 @@ export function saveAutoRepeatProp( extraProps, blockType, attributes ) { return extraProps; } -export function editAutoRepeatProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.autoRepeat' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveAutoRepeatProp( props, settings, attributes ); +export function useAutoRepeatBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveAutoRepeatProp( wrapperProps, name, attributes ), + }, }; - - return settings; } diff --git a/src/js/editor/hooks/layout/block-align.js b/src/js/editor/hooks/layout/block-align.js index 446687b4..161307dd 100644 --- a/src/js/editor/hooks/layout/block-align.js +++ b/src/js/editor/hooks/layout/block-align.js @@ -199,18 +199,14 @@ export function saveBlockAlignProp( extraProps, blockType, attributes ) { return extraProps; } -export function editBlockAlignProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.blockAlign' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveBlockAlignProp( props, settings, attributes ); +export function useBlockAlignBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveBlockAlignProp( wrapperProps, name, attributes ), + }, }; - return settings; } diff --git a/src/js/editor/hooks/layout/flex-basis.js b/src/js/editor/hooks/layout/flex-basis.js index fc831998..88de0bd4 100644 --- a/src/js/editor/hooks/layout/flex-basis.js +++ b/src/js/editor/hooks/layout/flex-basis.js @@ -103,18 +103,18 @@ export function FlexBasisEdit( props ) { } export function saveFlexBasisProp( extraProps, blockType, attributes ) { - if ( - ! hasBlockSupport( blockType, 'unitone.flexBasis' ) && - ! attributes?.__unstableUnitoneSupports?.flexBasis - ) { - delete attributes?.unitone?.flexBasis; - if ( - !! attributes?.unitone && - ! Object.keys( attributes?.unitone ).length - ) { - delete attributes?.unitone; + if ( ! hasBlockSupport( blockType, 'unitone.flexBasis' ) ) { + const { __unstableUnitoneSupports } = attributes; + + if ( ! __unstableUnitoneSupports?.flexBasis ) { + delete attributes?.unitone?.flexBasis; + + if ( ! Object.keys( attributes?.unitone ?? {} ).length ) { + delete attributes?.unitone; + } + + return extraProps; } - return extraProps; } if ( undefined === attributes?.unitone?.flexBasis ) { @@ -129,15 +129,14 @@ export function saveFlexBasisProp( extraProps, blockType, attributes ) { return extraProps; } -export function editFlexBasisProp( settings ) { - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveFlexBasisProp( props, settings, attributes ); - }; +export function useFlexBasisBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - return settings; + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveFlexBasisProp( wrapperProps, name, attributes ), + }, + }; } diff --git a/src/js/editor/hooks/layout/flex-grow.js b/src/js/editor/hooks/layout/flex-grow.js index 40382d96..ba1daa6d 100644 --- a/src/js/editor/hooks/layout/flex-grow.js +++ b/src/js/editor/hooks/layout/flex-grow.js @@ -116,18 +116,18 @@ export function FlexGrowEdit( props ) { } export function saveFlexGrowProp( extraProps, blockType, attributes ) { - if ( - ! hasBlockSupport( blockType, 'unitone.flexGrow' ) && - ! attributes?.__unstableUnitoneSupports?.flexGrow - ) { - delete attributes?.unitone?.flexGrow; - if ( - !! attributes?.unitone && - ! Object.keys( attributes?.unitone ).length - ) { - delete attributes?.unitone; + if ( ! hasBlockSupport( blockType, 'unitone.flexGrow' ) ) { + const { __unstableUnitoneSupports } = attributes; + + if ( ! __unstableUnitoneSupports?.flexGrow ) { + delete attributes?.unitone?.flexGrow; + + if ( ! Object.keys( attributes?.unitone ?? {} ).length ) { + delete attributes?.unitone; + } + + return extraProps; } - return extraProps; } if ( undefined === attributes?.unitone?.flexGrow ) { @@ -142,15 +142,14 @@ export function saveFlexGrowProp( extraProps, blockType, attributes ) { return extraProps; } -export function editFlexGrowProp( settings ) { - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveFlexGrowProp( props, settings, attributes ); - }; +export function useFlexGrowBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - return settings; + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveFlexGrowProp( wrapperProps, name, attributes ), + }, + }; } diff --git a/src/js/editor/hooks/layout/flex-shrink.js b/src/js/editor/hooks/layout/flex-shrink.js index 3d30542b..a4835b6f 100644 --- a/src/js/editor/hooks/layout/flex-shrink.js +++ b/src/js/editor/hooks/layout/flex-shrink.js @@ -116,18 +116,18 @@ export function FlexShrinkEdit( props ) { } export function saveFlexShrinkProp( extraProps, blockType, attributes ) { - if ( - ! hasBlockSupport( blockType, 'unitone.flexShrink' ) && - ! attributes?.__unstableUnitoneSupports?.flexShrink - ) { - delete attributes?.unitone?.flexShrink; - if ( - !! attributes?.unitone && - ! Object.keys( attributes?.unitone ).length - ) { - delete attributes?.unitone; + if ( ! hasBlockSupport( blockType, 'unitone.flexShrink' ) ) { + const { __unstableUnitoneSupports } = attributes; + + if ( ! __unstableUnitoneSupports?.flexShrink ) { + delete attributes?.unitone?.flexShrink; + + if ( ! Object.keys( attributes?.unitone ?? {} ).length ) { + delete attributes?.unitone; + } + + return extraProps; } - return extraProps; } if ( undefined === attributes?.unitone?.flexShrink ) { @@ -142,15 +142,14 @@ export function saveFlexShrinkProp( extraProps, blockType, attributes ) { return extraProps; } -export function editFlexShrinkProp( settings ) { - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveFlexShrinkProp( props, settings, attributes ); - }; +export function useFlexShrinkBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - return settings; + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveFlexShrinkProp( wrapperProps, name, attributes ), + }, + }; } diff --git a/src/js/editor/hooks/layout/grid-column.js b/src/js/editor/hooks/layout/grid-column.js index 85e1d251..043f688f 100644 --- a/src/js/editor/hooks/layout/grid-column.js +++ b/src/js/editor/hooks/layout/grid-column.js @@ -229,18 +229,18 @@ export function GridColumnEdit( props ) { } export function saveGridColumnProp( extraProps, blockType, attributes ) { - if ( - ! hasBlockSupport( blockType, 'unitone.gridColumn' ) && - ! attributes?.__unstableUnitoneSupports?.gridColumn - ) { - delete attributes?.unitone?.gridColumn; - if ( - !! attributes?.unitone && - ! Object.keys( attributes?.unitone ).length - ) { - delete attributes?.unitone; + if ( ! hasBlockSupport( blockType, 'unitone.gridColumn' ) ) { + const { __unstableUnitoneSupports } = attributes; + + if ( ! __unstableUnitoneSupports?.gridColumn ) { + delete attributes?.unitone?.gridColumn; + + if ( ! Object.keys( attributes?.unitone ?? {} ).length ) { + delete attributes?.unitone; + } + + return extraProps; } - return extraProps; } if ( undefined === attributes?.unitone?.gridColumn ) { @@ -266,15 +266,14 @@ export function saveGridColumnProp( extraProps, blockType, attributes ) { return extraProps; } -export function editGridColumnProp( settings ) { - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveGridColumnProp( props, settings, attributes ); - }; +export function useGridColumnBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - return settings; + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveGridColumnProp( wrapperProps, name, attributes ), + }, + }; } diff --git a/src/js/editor/hooks/layout/grid-row.js b/src/js/editor/hooks/layout/grid-row.js index 724e68b7..00f60326 100644 --- a/src/js/editor/hooks/layout/grid-row.js +++ b/src/js/editor/hooks/layout/grid-row.js @@ -227,18 +227,18 @@ export function GridRowEdit( props ) { } export function saveGridRowProp( extraProps, blockType, attributes ) { - if ( - ! hasBlockSupport( blockType, 'unitone.gridRow' ) && - ! attributes?.__unstableUnitoneSupports?.gridRow - ) { - delete attributes?.unitone?.gridRow; - if ( - !! attributes?.unitone && - ! Object.keys( attributes?.unitone ).length - ) { - delete attributes?.unitone; + if ( ! hasBlockSupport( blockType, 'unitone.gridRow' ) ) { + const { __unstableUnitoneSupports } = attributes; + + if ( ! __unstableUnitoneSupports?.gridRow ) { + delete attributes?.unitone?.gridRow; + + if ( ! Object.keys( attributes?.unitone ?? {} ).length ) { + delete attributes?.unitone; + } + + return extraProps; } - return extraProps; } if ( undefined === attributes?.unitone?.gridRow ) { @@ -264,15 +264,14 @@ export function saveGridRowProp( extraProps, blockType, attributes ) { return extraProps; } -export function editGridRowProp( settings ) { - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveGridRowProp( props, settings, attributes ); - }; +export function useGridRowBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - return settings; + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveGridRowProp( wrapperProps, name, attributes ), + }, + }; } diff --git a/src/js/editor/hooks/layout/justify-content-column.js b/src/js/editor/hooks/layout/justify-content-column.js index a6bd5da4..95210a2f 100644 --- a/src/js/editor/hooks/layout/justify-content-column.js +++ b/src/js/editor/hooks/layout/justify-content-column.js @@ -215,18 +215,14 @@ export function saveJustifyContentColumnProp( return extraProps; } -export function editJustifyContentColumnProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.justifyContentColumn' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveJustifyContentColumnProp( props, settings, attributes ); +export function useJustifyContentColumnBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveJustifyContentColumnProp( wrapperProps, name, attributes ), + }, }; - return settings; } diff --git a/src/js/editor/hooks/layout/justify-content.js b/src/js/editor/hooks/layout/justify-content.js index 6088e3c6..8d0a9cf3 100644 --- a/src/js/editor/hooks/layout/justify-content.js +++ b/src/js/editor/hooks/layout/justify-content.js @@ -211,18 +211,14 @@ export function saveJustifyContentProp( extraProps, blockType, attributes ) { return extraProps; } -export function editJustifyContentProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.justifyContent' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveJustifyContentProp( props, settings, attributes ); +export function useJustifyContentBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveJustifyContentProp( wrapperProps, name, attributes ), + }, }; - return settings; } diff --git a/src/js/editor/hooks/layout/justify-self.js b/src/js/editor/hooks/layout/justify-self.js index 978ae5bd..87437acb 100644 --- a/src/js/editor/hooks/layout/justify-self.js +++ b/src/js/editor/hooks/layout/justify-self.js @@ -425,18 +425,18 @@ export function JustifySelfEdit( props ) { } export function saveJustifySelfProp( extraProps, blockType, attributes ) { - if ( - ! hasBlockSupport( blockType, 'unitone.justifySelf' ) && - ! attributes?.__unstableUnitoneSupports?.justifySelf - ) { - delete attributes?.unitone?.justifySelf; - if ( - !! attributes?.unitone && - ! Object.keys( attributes?.unitone ).length - ) { - delete attributes?.unitone; + if ( ! hasBlockSupport( blockType, 'unitone.justifySelf' ) ) { + const { __unstableUnitoneSupports } = attributes; + + if ( ! __unstableUnitoneSupports?.justifySelf ) { + delete attributes?.unitone?.justifySelf; + + if ( ! Object.keys( attributes?.unitone ?? {} ).length ) { + delete attributes?.unitone; + } + + return extraProps; } - return extraProps; } if ( undefined === attributes?.unitone?.justifySelf ) { @@ -460,15 +460,14 @@ export function saveJustifySelfProp( extraProps, blockType, attributes ) { return extraProps; } -export function editJustifySelfProp( settings ) { - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveJustifySelfProp( props, settings, attributes ); - }; +export function useJustifySelfBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - return settings; + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveJustifySelfProp( wrapperProps, name, attributes ), + }, + }; } diff --git a/src/js/editor/hooks/layout/layout.js b/src/js/editor/hooks/layout/layout.js index 44f51ef9..e9d709cd 100644 --- a/src/js/editor/hooks/layout/layout.js +++ b/src/js/editor/hooks/layout/layout.js @@ -17,7 +17,7 @@ import { JustifyContentToolbar, getJustifyContentEditLabel, JustifyContentEdit, - editJustifyContentProp, + useJustifyContentBlockProps, } from './justify-content'; import { @@ -27,7 +27,7 @@ import { JustifyContentColumnToolbar, getJustifyContentColumnEditLabel, JustifyContentColumnEdit, - editJustifyContentColumnProp, + useJustifyContentColumnBlockProps, } from './justify-content-column'; import { @@ -37,7 +37,7 @@ import { AlignItemsToolbar, getAlignItemsEditLabel, AlignItemsEdit, - editAlignItemsProp, + useAlignItemsBlockProps, } from './align-items'; import { @@ -47,7 +47,7 @@ import { BlockAlignToolbar, getBlockAlignEditLabel, BlockAlignEdit, - editBlockAlignProp, + useBlockAlignBlockProps, } from './block-align'; import { @@ -56,7 +56,7 @@ import { resetFlexBasis, getFlexBasisEditLabel, FlexBasisEdit, - editFlexBasisProp, + useFlexBasisBlockProps, } from './flex-basis'; import { @@ -65,7 +65,7 @@ import { resetFlexGrow, getFlexGrowEditLabel, FlexGrowEdit, - editFlexGrowProp, + useFlexGrowBlockProps, } from './flex-grow'; import { @@ -74,7 +74,7 @@ import { resetFlexShrink, getFlexShrinkEditLabel, FlexShrinkEdit, - editFlexShrinkProp, + useFlexShrinkBlockProps, } from './flex-shrink'; import { @@ -83,7 +83,7 @@ import { resetMaxWidth, getMaxWidthEditLabel, MaxWidthEdit, - editMaxWidthProp, + useMaxWidthBlockProps, } from './max-width'; import { @@ -92,7 +92,7 @@ import { resetMaxHeight, getMaxHeightEditLabel, MaxHeightEdit, - editMaxHeightProp, + useMaxHeightBlockProps, } from './max-height'; import { @@ -101,7 +101,7 @@ import { resetMinHeight, getMinHeightEditLabel, MinHeightEdit, - editMinHeightProp, + useMinHeightBlockProps, } from './min-height'; import { @@ -110,7 +110,7 @@ import { resetAutoRepeat, getAutoRepeatEditLabel, AutoRepeatEdit, - editAutoRepeatProp, + useAutoRepeatBlockProps, } from './auto-repeat'; import { @@ -120,7 +120,7 @@ import { AlignSelfToolbar, getAlignSelfEditLabel, AlignSelfEdit, - editAlignSelfProp, + useAlignSelfBlockProps, } from './align-self'; import { @@ -130,7 +130,7 @@ import { JustifySelfToolbar, getJustifySelfEditLabel, JustifySelfEdit, - editJustifySelfProp, + useJustifySelfBlockProps, } from './justify-self'; import { @@ -139,7 +139,7 @@ import { resetGridColumn, getGridColumnEditLabel, GridColumnEdit, - editGridColumnProp, + useGridColumnBlockProps, } from './grid-column'; import { @@ -148,25 +148,25 @@ import { resetGridRow, getGridRowEditLabel, GridRowEdit, - editGridRowProp, + useGridRowBlockProps, } from './grid-row'; export { - editAlignItemsProp, - editJustifyContentProp, - editJustifyContentColumnProp, - editBlockAlignProp, - editFlexBasisProp, - editFlexGrowProp, - editFlexShrinkProp, - editMaxWidthProp, - editMaxHeightProp, - editMinHeightProp, - editAutoRepeatProp, - editAlignSelfProp, - editJustifySelfProp, - editGridColumnProp, - editGridRowProp, + useAlignItemsBlockProps, + useJustifyContentBlockProps, + useJustifyContentColumnBlockProps, + useBlockAlignBlockProps, + useFlexBasisBlockProps, + useFlexGrowBlockProps, + useFlexShrinkBlockProps, + useMaxWidthBlockProps, + useMaxHeightBlockProps, + useMinHeightBlockProps, + useAutoRepeatBlockProps, + useAlignSelfBlockProps, + useJustifySelfBlockProps, + useGridColumnBlockProps, + useGridRowBlockProps, }; export function LayoutPanel( props ) { diff --git a/src/js/editor/hooks/layout/max-height.js b/src/js/editor/hooks/layout/max-height.js index 8ce72e24..10e9c623 100644 --- a/src/js/editor/hooks/layout/max-height.js +++ b/src/js/editor/hooks/layout/max-height.js @@ -94,18 +94,18 @@ export function MaxHeightEdit( props ) { } export function saveMaxHeightProp( extraProps, blockType, attributes ) { - if ( - ! hasBlockSupport( blockType, 'unitone.maxHeight' ) && - ! attributes?.__unstableUnitoneSupports?.maxHeight - ) { - delete attributes?.unitone?.maxHeight; - if ( - !! attributes?.unitone && - ! Object.keys( attributes?.unitone ).length - ) { - delete attributes?.unitone; + if ( ! hasBlockSupport( blockType, 'unitone.maxHeight' ) ) { + const { __unstableUnitoneSupports } = attributes; + + if ( ! __unstableUnitoneSupports?.maxHeight ) { + delete attributes?.unitone?.maxHeight; + + if ( ! Object.keys( attributes?.unitone ?? {} ).length ) { + delete attributes?.unitone; + } + + return extraProps; } - return extraProps; } if ( undefined === attributes?.unitone?.maxHeight ) { @@ -130,15 +130,14 @@ export function saveMaxHeightProp( extraProps, blockType, attributes ) { return extraProps; } -export function editMaxHeightProp( settings ) { - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveMaxHeightProp( props, settings, attributes ); - }; +export function useMaxHeightBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - return settings; + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveMaxHeightProp( wrapperProps, name, attributes ), + }, + }; } diff --git a/src/js/editor/hooks/layout/max-width.js b/src/js/editor/hooks/layout/max-width.js index 3dd942c7..b19dedd1 100644 --- a/src/js/editor/hooks/layout/max-width.js +++ b/src/js/editor/hooks/layout/max-width.js @@ -163,18 +163,18 @@ export function MaxWidthEdit( props ) { } export function saveMaxWidthProp( extraProps, blockType, attributes ) { - if ( - ! hasBlockSupport( blockType, 'unitone.maxWidth' ) && - ! attributes?.__unstableUnitoneSupports?.maxWidth - ) { - delete attributes?.unitone?.maxWidth; - if ( - !! attributes?.unitone && - ! Object.keys( attributes?.unitone ).length - ) { - delete attributes?.unitone; + if ( ! hasBlockSupport( blockType, 'unitone.maxWidth' ) ) { + const { __unstableUnitoneSupports } = attributes; + + if ( ! __unstableUnitoneSupports?.maxWidth ) { + delete attributes?.unitone?.maxWidth; + + if ( ! Object.keys( attributes?.unitone ?? {} ).length ) { + delete attributes?.unitone; + } + + return extraProps; } - return extraProps; } if ( undefined === attributes?.unitone?.maxWidth ) { @@ -199,15 +199,14 @@ export function saveMaxWidthProp( extraProps, blockType, attributes ) { return extraProps; } -export function editMaxWidthProp( settings ) { - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveMaxWidthProp( props, settings, attributes ); - }; +export function useMaxWidthBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - return settings; + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveMaxWidthProp( wrapperProps, name, attributes ), + }, + }; } diff --git a/src/js/editor/hooks/layout/min-height.js b/src/js/editor/hooks/layout/min-height.js index c80f4001..71b44516 100644 --- a/src/js/editor/hooks/layout/min-height.js +++ b/src/js/editor/hooks/layout/min-height.js @@ -94,18 +94,18 @@ export function MinHeightEdit( props ) { } export function saveMinHeightProp( extraProps, blockType, attributes ) { - if ( - ! hasBlockSupport( blockType, 'unitone.minHeight' ) && - ! attributes?.__unstableUnitoneSupports?.minHeight - ) { - delete attributes?.unitone?.minHeight; - if ( - !! attributes?.unitone && - ! Object.keys( attributes?.unitone ).length - ) { - delete attributes?.unitone; + if ( ! hasBlockSupport( blockType, 'unitone.minHeight' ) ) { + const { __unstableUnitoneSupports } = attributes; + + if ( ! __unstableUnitoneSupports?.minHeight ) { + delete attributes?.unitone?.minHeight; + + if ( ! Object.keys( attributes?.unitone ?? {} ).length ) { + delete attributes?.unitone; + } + + return extraProps; } - return extraProps; } if ( undefined === attributes?.unitone?.minHeight ) { @@ -130,15 +130,14 @@ export function saveMinHeightProp( extraProps, blockType, attributes ) { return extraProps; } -export function editMinHeightProp( settings ) { - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveMinHeightProp( props, settings, attributes ); - }; +export function useMinHeightBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - return settings; + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveMinHeightProp( wrapperProps, name, attributes ), + }, + }; } diff --git a/src/js/editor/hooks/position/position-object.js b/src/js/editor/hooks/position/position-object.js index 4e0dd3d6..32d65c32 100644 --- a/src/js/editor/hooks/position/position-object.js +++ b/src/js/editor/hooks/position/position-object.js @@ -441,19 +441,14 @@ export function savePositionProp( extraProps, blockType, attributes ) { return extraProps; } -export function editPositionProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.position' ) ) { - return settings; - } - - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return savePositionProp( props, settings, attributes ); +export function usePositionBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; + + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...savePositionProp( wrapperProps, name, attributes ), + }, }; - - return settings; } diff --git a/src/js/editor/hooks/position/position.js b/src/js/editor/hooks/position/position.js index 6c267620..5022059e 100644 --- a/src/js/editor/hooks/position/position.js +++ b/src/js/editor/hooks/position/position.js @@ -3,10 +3,10 @@ import { InspectorControls } from '@wordpress/block-editor'; import { useIsPositionDisabled, PositionEdit, - editPositionProp, + usePositionBlockProps, } from './position-object'; -export { editPositionProp }; +export { usePositionBlockProps }; export function PositionPanel( props ) { const isPositionDisabled = useIsPositionDisabled( props ); diff --git a/src/js/editor/hooks/style.js b/src/js/editor/hooks/style.js index 183d7205..1c788e6e 100644 --- a/src/js/editor/hooks/style.js +++ b/src/js/editor/hooks/style.js @@ -2,108 +2,105 @@ * @see https://github.com/WordPress/gutenberg/blob/42a5611fa7649186190fd4411425f6e5e9deb01a/packages/block-editor/src/hooks/style.js */ -import { hasBlockSupport } from '@wordpress/blocks'; import { createHigherOrderComponent } from '@wordpress/compose'; import { addFilter } from '@wordpress/hooks'; import { DimensionsPanel, - editPaddingProp, - editGuttersProp, - editGapProp, - editStairsProp, - editNegativeProp, - editOverflowProp, + useGapBlockProps, + useGuttersBlockProps, + useNegativeBlockProps, + useOverflowBlockProps, + usePaddingBlockProps, + useStairsBlockProps, } from './dimensions/dimensions'; import { LayoutPanel, - editAlignItemsProp, - editJustifyContentProp, - editJustifyContentColumnProp, - editBlockAlignProp, - editMaxWidthProp, - editMaxHeightProp, - editMinHeightProp, - editAutoRepeatProp, - editFlexGrowProp, - editFlexShrinkProp, - editFlexBasisProp, - editAlignSelfProp, - editJustifySelfProp, - editGridColumnProp, - editGridRowProp, + useAlignItemsBlockProps, + useJustifyContentBlockProps, + useJustifyContentColumnBlockProps, + useBlockAlignBlockProps, + useMaxWidthBlockProps, + useMaxHeightBlockProps, + useMinHeightBlockProps, + useAutoRepeatBlockProps, + useFlexGrowBlockProps, + useFlexShrinkBlockProps, + useFlexBasisBlockProps, + useAlignSelfBlockProps, + useJustifySelfBlockProps, + useGridColumnBlockProps, + useGridRowBlockProps, } from './layout/layout'; -import { LayerPanel, editMixBlendModeProp } from './layer/layer'; +import { LayerPanel, useMixBlendModeBlockProps } from './layer/layer'; import { AnimationPanel, - editParallaxProp, - editScrollAnimationProp, + useParallaxBlockProps, + useScrollAnimationBlockProps, } from './animation/animation'; import { TypographyPanel, - editAutoPhraseProp, - editFluidTypographyProp, - editHalfLeadingProp, + useAutoPhraseBlockProps, + useFluidTypographyBlockProps, + useHalfLeadingBlockProps, } from './typography/typography'; import { DividerPanel, - editDividerProp, - editDividerTypeProp, + useDividerBlockProps, + useDividerTypeBlockProps, } from './divider/divider'; -import { DropShadowPanel, editDropShadowProp } from './border/border'; +import { DropShadowPanel, useDropShadowBlockProps } from './border/border'; +import { PositionPanel, usePositionBlockProps } from './position/position'; -import { PositionPanel, editPositionProp } from './position/position'; - -function addEditProps( settings ) { - if ( !! settings.supports?.typography?.fontSize ) { - settings = editAutoPhraseProp( settings ); - } - - if ( !! settings.supports?.typography?.fontSize ) { - settings = editFluidTypographyProp( settings ); - } - - if ( !! settings.supports?.typography?.lineHeight ) { - settings = editHalfLeadingProp( settings ); - } - - settings = editAlignItemsProp( settings ); - settings = editBlockAlignProp( settings ); - settings = editDividerProp( settings ); - settings = editDividerTypeProp( settings ); - settings = editGapProp( settings ); - settings = editStairsProp( settings ); - settings = editGuttersProp( settings ); - settings = editJustifyContentColumnProp( settings ); - settings = editJustifyContentProp( settings ); - settings = editMaxWidthProp( settings ); - settings = editMaxHeightProp( settings ); - settings = editMinHeightProp( settings ); - settings = editAutoRepeatProp( settings ); - settings = editFlexGrowProp( settings ); - settings = editFlexShrinkProp( settings ); - settings = editFlexBasisProp( settings ); - settings = editNegativeProp( settings ); - settings = editOverflowProp( settings ); - settings = editPaddingProp( settings ); - settings = editPositionProp( settings ); - settings = editAlignSelfProp( settings ); - settings = editJustifySelfProp( settings ); - settings = editGridColumnProp( settings ); - settings = editGridRowProp( settings ); - settings = editMixBlendModeProp( settings ); - settings = editDropShadowProp( settings ); - settings = editParallaxProp( settings ); - settings = editScrollAnimationProp( settings ); - - return settings; -} +const useBlockProps = createHigherOrderComponent( ( BlockListBlock ) => { + return ( props ) => { + props = useAutoPhraseBlockProps( props ); + props = useFluidTypographyBlockProps( props ); + props = useHalfLeadingBlockProps( props ); + + props = useAlignItemsBlockProps( props ); + props = useAlignSelfBlockProps( props ); + props = useAutoRepeatBlockProps( props ); + props = useBlockAlignBlockProps( props ); + props = useFlexBasisBlockProps( props ); + props = useFlexGrowBlockProps( props ); + props = useFlexShrinkBlockProps( props ); + props = useGridColumnBlockProps( props ); + props = useGridRowBlockProps( props ); + props = useJustifyContentColumnBlockProps( props ); + props = useJustifyContentBlockProps( props ); + props = useJustifySelfBlockProps( props ); + props = useMaxHeightBlockProps( props ); + props = useMaxWidthBlockProps( props ); + props = useMinHeightBlockProps( props ); + props = usePositionBlockProps( props ); + + props = useGapBlockProps( props ); + props = useGuttersBlockProps( props ); + props = useNegativeBlockProps( props ); + props = useOverflowBlockProps( props ); + props = usePaddingBlockProps( props ); + props = useStairsBlockProps( props ); + + props = useDividerBlockProps( props ); + props = useDividerTypeBlockProps( props ); + + props = useMixBlendModeBlockProps( props ); + + props = useDropShadowBlockProps( props ); + + props = useParallaxBlockProps( props ); + props = useScrollAnimationBlockProps( props ); + + return ; + }; +}, 'useBlockProps' ); const addAttribute = ( settings ) => { // Allow blocks to specify their own attribute definition with default values if needed. @@ -124,36 +121,18 @@ const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => { return ; } - if ( - ! hasBlockSupport( props.name, 'typography.fontSize' ) && - ! hasBlockSupport( props.name, 'typography.lineHeight' ) && - ! hasBlockSupport( props.name, 'unitone' ) && - ! props.attributes?.__unstableUnitoneSupports - ) { - return ; - } - return ( <> - { hasBlockSupport( props.name, 'typography.fontSize' ) && - hasBlockSupport( props.name, 'typography.lineHeight' ) && ( - - ) } - - { ( hasBlockSupport( props.name, 'unitone' ) || - !! props.attributes?.__unstableUnitoneSupports ) && ( - <> - - - - - - - - - ) } + + + + + + + + ); }; @@ -166,9 +145,9 @@ addFilter( ); addFilter( - 'blocks.registerBlockType', - 'unitone/style/addEditProps', - addEditProps + 'editor.BlockListBlock', + 'unitone/style/useBlockProps', + useBlockProps ); addFilter( diff --git a/src/js/editor/hooks/typography/auto-phrase.js b/src/js/editor/hooks/typography/auto-phrase.js index bba0af12..f39371d7 100644 --- a/src/js/editor/hooks/typography/auto-phrase.js +++ b/src/js/editor/hooks/typography/auto-phrase.js @@ -82,19 +82,14 @@ export function saveAutoPhraseProp( extraProps, blockType, attributes ) { return extraProps; } -export function editAutoPhraseProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.autoPhrase' ) ) { - return settings; - } +export function useAutoPhraseBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveAutoPhraseProp( props, settings, attributes ); + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveAutoPhraseProp( wrapperProps, name, attributes ), + }, }; - - return settings; } diff --git a/src/js/editor/hooks/typography/fluid-typography.js b/src/js/editor/hooks/typography/fluid-typography.js index 584ee064..a9f3849c 100644 --- a/src/js/editor/hooks/typography/fluid-typography.js +++ b/src/js/editor/hooks/typography/fluid-typography.js @@ -67,19 +67,14 @@ export function saveFluidTypographyProp( extraProps, blockType, attributes ) { return extraProps; } -export function editFluidTypographyProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.fluidTypography' ) ) { - return settings; - } +export function useFluidTypographyBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveFluidTypographyProp( props, settings, attributes ); + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveFluidTypographyProp( wrapperProps, name, attributes ), + }, }; - - return settings; } diff --git a/src/js/editor/hooks/typography/half-leading.js b/src/js/editor/hooks/typography/half-leading.js index 5a572be9..3b4e242d 100644 --- a/src/js/editor/hooks/typography/half-leading.js +++ b/src/js/editor/hooks/typography/half-leading.js @@ -70,19 +70,14 @@ export function saveHalfLeadingProp( extraProps, blockType, attributes ) { }; } -export function editHalfLeadingProp( settings ) { - if ( ! hasBlockSupport( settings, 'unitone.halfLeading' ) ) { - return settings; - } +export function useHalfLeadingBlockProps( settings ) { + const { attributes, name, wrapperProps } = settings; - const existingGetEditWrapperProps = settings.getEditWrapperProps; - settings.getEditWrapperProps = ( attributes ) => { - let props = {}; - if ( existingGetEditWrapperProps ) { - props = existingGetEditWrapperProps( attributes ); - } - return saveHalfLeadingProp( props, settings, attributes ); + return { + ...settings, + wrapperProps: { + ...settings.wrapperProps, + ...saveHalfLeadingProp( wrapperProps, name, attributes ), + }, }; - - return settings; } diff --git a/src/js/editor/hooks/typography/typography.js b/src/js/editor/hooks/typography/typography.js index 8366dfbd..5236ea80 100644 --- a/src/js/editor/hooks/typography/typography.js +++ b/src/js/editor/hooks/typography/typography.js @@ -11,7 +11,7 @@ import { hasAutoPhraseValue, resetAutoPhrase, AutoPhraseEdit, - editAutoPhraseProp, + useAutoPhraseBlockProps, } from './auto-phrase'; import { @@ -19,7 +19,7 @@ import { hasFluidTypographyValue, resetFluidTypography, FluidTypographyEdit, - editFluidTypographyProp, + useFluidTypographyBlockProps, } from './fluid-typography'; import { @@ -27,10 +27,14 @@ import { hasHalfLeadingValue, resetHalfLeading, HalfLeadingEdit, - editHalfLeadingProp, + useHalfLeadingBlockProps, } from './half-leading'; -export { editAutoPhraseProp, editFluidTypographyProp, editHalfLeadingProp }; +export { + useAutoPhraseBlockProps, + useFluidTypographyBlockProps, + useHalfLeadingBlockProps, +}; export function TypographyPanel( props ) { const isAutoPhraseDisabled = useIsAutoPhraseDisabled( props );