Skip to content

Commit

Permalink
Wrap block support slots in ToolsPanel for dimensions support
Browse files Browse the repository at this point in the history
Co-Authored-By: Greg Ziółkowski <grzegorz@gziolo.pl>
  • Loading branch information
aaronrobertshaw and gziolo committed Sep 10, 2021
1 parent 3b14a92 commit 269b5d1
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 64 deletions.
5 changes: 5 additions & 0 deletions packages/block-editor/src/components/block-inspector/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,11 @@ const BlockInspectorSingleBlock = ( {
</div>
) }
<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
<InspectorControls.Slot
__experimentalGroup="dimensions"
bubblesVirtually={ false }
label={ __( 'Dimensions' ) }
/>
<div>
<AdvancedControls bubblesVirtually={ bubblesVirtually } />
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/**
* WordPress dependencies
*/
import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import { store as blockEditorStore } from '../../store';
import { cleanEmptyObject } from '../../hooks/utils';

export default function BlockSupportToolsPanel( { children, label, header } ) {
const { clientId, attributes } = useSelect( ( select ) => {
const { getBlockAttributes, getSelectedBlockClientId } = select(
blockEditorStore
);
const selectedBlockClientId = getSelectedBlockClientId();

return {
clientId: selectedBlockClientId,
attributes: getBlockAttributes( selectedBlockClientId ),
};
} );
const { updateBlockAttributes } = useDispatch( blockEditorStore );

const resetAll = ( resetFilters = [] ) => {
const { style } = attributes;
let newAttributes = { style };

resetFilters.forEach( ( resetFilter ) => {
newAttributes = {
...newAttributes,
...resetFilter( newAttributes ),
};
} );

// Enforce a cleaned style object.
newAttributes = {
...newAttributes,
style: cleanEmptyObject( newAttributes.style ),
};

updateBlockAttributes( clientId, newAttributes );
};

return (
<ToolsPanel
label={ label }
header={ header }
resetAll={ resetAll }
key={ clientId }
panelId={ clientId }
>
{ children }
</ToolsPanel>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,14 @@ import { createSlotFill } from '@wordpress/components';

const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
const InspectorControlsDimensions = createSlotFill(
'InspectorControlsDimensions'
);

const groups = {
default: InspectorControlsDefault,
advanced: InspectorControlsAdvanced,
dimensions: InspectorControlsDimensions,
};

export default groups;
10 changes: 10 additions & 0 deletions packages/block-editor/src/components/inspector-controls/slot.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@ import warning from '@wordpress/warning';
/**
* Internal dependencies
*/
import BlockSupportToolsPanel from './block-support-tools-panel';
import groups from './groups';

export default function InspectorControlsSlot( {
__experimentalGroup: group = 'default',
bubblesVirtually = true,
label,
...props
} ) {
const Slot = groups[ group ]?.Slot;
Expand All @@ -26,5 +28,13 @@ export default function InspectorControlsSlot( {
return null;
}

if ( label ) {
return (
<BlockSupportToolsPanel group={ group } label={ label }>
<Slot { ...props } bubblesVirtually={ bubblesVirtually } />
</BlockSupportToolsPanel>
);
}

return <Slot { ...props } bubblesVirtually={ bubblesVirtually } />;
}
108 changes: 49 additions & 59 deletions packages/block-editor/src/hooks/dimensions.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
/**
* WordPress dependencies
*/
import {
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
import { Platform } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { getBlockSupport } from '@wordpress/blocks';
Expand Down Expand Up @@ -34,7 +31,6 @@ import {
resetPadding,
useIsPaddingDisabled,
} from './padding';
import { cleanEmptyObject } from './utils';

export const SPACING_SUPPORT_KEY = 'spacing';
export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
Expand Down Expand Up @@ -63,62 +59,56 @@ export function DimensionsPanel( props ) {
'__experimentalDefaultControls',
] );

// Callback to reset all block support attributes controlled via this panel.
const resetAll = () => {
const { style } = props.attributes;

props.setAttributes( {
style: cleanEmptyObject( {
...style,
spacing: {
...style?.spacing,
blockGap: undefined,
margin: undefined,
padding: undefined,
},
} ),
} );
};
const createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {
...newAttributes,
style: {
...newAttributes.style,
spacing: {
...newAttributes.style?.spacing,
[ attribute ]: undefined,
},
},
} );

return (
<InspectorControls key="dimensions">
<ToolsPanel
label={ __( 'Dimensions options' ) }
header={ __( 'Dimensions' ) }
resetAll={ resetAll }
>
{ ! isPaddingDisabled && (
<ToolsPanelItem
hasValue={ () => hasPaddingValue( props ) }
label={ __( 'Padding' ) }
onDeselect={ () => resetPadding( props ) }
isShownByDefault={ defaultSpacingControls?.padding }
>
<PaddingEdit { ...props } />
</ToolsPanelItem>
) }
{ ! isMarginDisabled && (
<ToolsPanelItem
hasValue={ () => hasMarginValue( props ) }
label={ __( 'Margin' ) }
onDeselect={ () => resetMargin( props ) }
isShownByDefault={ defaultSpacingControls?.margin }
>
<MarginEdit { ...props } />
</ToolsPanelItem>
) }
{ ! isGapDisabled && (
<ToolsPanelItem
className="single-column"
hasValue={ () => hasGapValue( props ) }
label={ __( 'Block gap' ) }
onDeselect={ () => resetGap( props ) }
isShownByDefault={ defaultSpacingControls?.blockGap }
>
<GapEdit { ...props } />
</ToolsPanelItem>
) }
</ToolsPanel>
<InspectorControls __experimentalGroup="dimensions">
{ ! isPaddingDisabled && (
<ToolsPanelItem
hasValue={ () => hasPaddingValue( props ) }
label={ __( 'Padding' ) }
onDeselect={ () => resetPadding( props ) }
resetAllFilter={ createResetAllFilter( 'padding' ) }
isShownByDefault={ defaultSpacingControls?.padding }
panelId={ props.clientId }
>
<PaddingEdit { ...props } />
</ToolsPanelItem>
) }
{ ! isMarginDisabled && (
<ToolsPanelItem
hasValue={ () => hasMarginValue( props ) }
label={ __( 'Margin' ) }
onDeselect={ () => resetMargin( props ) }
resetAllFilter={ createResetAllFilter( 'margin' ) }
isShownByDefault={ defaultSpacingControls?.margin }
panelId={ props.clientId }
>
<MarginEdit { ...props } />
</ToolsPanelItem>
) }
{ ! isGapDisabled && (
<ToolsPanelItem
className="single-column"
hasValue={ () => hasGapValue( props ) }
label={ __( 'Block gap' ) }
onDeselect={ () => resetGap( props ) }
resetAllFilter={ createResetAllFilter( 'blockGap' ) }
isShownByDefault={ defaultSpacingControls?.blockGap }
panelId={ props.clientId }
>
<GapEdit { ...props } />
</ToolsPanelItem>
) }
</InspectorControls>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -140,11 +140,7 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
};

return (
<ToolsPanel
label={ __( 'Dimensions options' ) }
header={ __( 'Dimensions' ) }
resetAll={ resetAll }
>
<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
{ showPaddingControl && (
<ToolsPanelItem
hasValue={ hasPaddingValue }
Expand Down

0 comments on commit 269b5d1

Please sign in to comment.