Skip to content

Commit

Permalink
Update block support panels to display in multi select inspector
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronrobertshaw committed Dec 8, 2021
1 parent fc8a789 commit d708a3e
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 28 deletions.
12 changes: 12 additions & 0 deletions packages/block-editor/src/components/block-inspector/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,18 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
<div className="block-editor-block-inspector">
<MultiSelectionInspector />
<InspectorControls.Slot />
<InspectorControls.Slot
__experimentalGroup="typography"
label={ __( 'Typography' ) }
/>
<InspectorControls.Slot
__experimentalGroup="border"
label={ __( 'Border' ) }
/>
<InspectorControls.Slot
__experimentalGroup="dimensions"
label={ __( 'Dimensions' ) }
/>
</div>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,46 +11,80 @@ import { store as blockEditorStore } from '../../store';
import { cleanEmptyObject } from '../../hooks/utils';

export default function BlockSupportToolsPanel( { children, group, label } ) {
const { clientId, attributes } = useSelect( ( select ) => {
const { getBlockAttributes, getSelectedBlockClientId } = select(
blockEditorStore
);
const { attributes, clientIds, panelId } = useSelect( ( select ) => {
const {
getBlockAttributes,
getMultiSelectedBlockClientIds,
getSelectedBlockClientId,
hasMultiSelection,
} = select( blockEditorStore );

// This is `null` if multi-selection and used in `clientId` checks
// to still allow panel items to register themselves.
const selectedBlockClientId = getSelectedBlockClientId();

if ( hasMultiSelection() ) {
const selectedBlockClientIds = getMultiSelectedBlockClientIds();
const selectedBlockAttributes = selectedBlockClientIds.reduce(
( blockAttributes, blockId ) => {
blockAttributes[ blockId ] = getBlockAttributes( blockId );
return blockAttributes;
},
{}
);

return {
panelId: selectedBlockClientId,
clientIds: selectedBlockClientIds,
attributes: selectedBlockAttributes,
};
}

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

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

clientIds.forEach( ( clientId ) => {
const { style } = attributes[ clientId ];
let newBlockAttributes = { style };

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

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

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

updateBlockAttributes( clientId, newAttributes );
updateBlockAttributes( clientIds, newAttributes, true );
};

return (
<ToolsPanel
className={ `${ group }-block-support-panel` }
label={ label }
resetAll={ resetAll }
key={ clientId }
panelId={ clientId }
key={ panelId }
panelId={ panelId }
hasInnerWrapper={ true }
shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
>
Expand Down
15 changes: 8 additions & 7 deletions packages/components/src/tools-panel/tools-panel-item/hook.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,13 @@ export function useToolsPanelItem(
const hasValueCallback = useCallback( hasValue, [ panelId ] );
const resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );

const hasMatchingPanel =
currentPanelId === panelId || currentPanelId === null;

// Registering the panel item allows the panel to include it in its
// automatically generated menu and determine its initial checked status.
useEffect( () => {
if ( currentPanelId === panelId ) {
if ( hasMatchingPanel ) {
registerPanelItem( {
hasValue: hasValueCallback,
isShownByDefault,
Expand All @@ -55,13 +58,12 @@ export function useToolsPanelItem(
}

return () => {
if ( currentPanelId === panelId ) {
if ( hasMatchingPanel ) {
deregisterPanelItem( label );
}
};
}, [
currentPanelId,
panelId,
hasMatchingPanel,
isShownByDefault,
label,
hasValueCallback,
Expand All @@ -88,7 +90,7 @@ export function useToolsPanelItem(
// Determine if the panel item's corresponding menu is being toggled and
// trigger appropriate callback if it is.
useEffect( () => {
if ( isResetting || currentPanelId !== panelId ) {
if ( isResetting || ! hasMatchingPanel ) {
return;
}

Expand All @@ -100,11 +102,10 @@ export function useToolsPanelItem(
onDeselect?.();
}
}, [
currentPanelId,
hasMatchingPanel,
isMenuItemChecked,
isResetting,
isValueSet,
panelId,
wasMenuItemChecked,
] );

Expand Down

0 comments on commit d708a3e

Please sign in to comment.