diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js index 2f532f0e1b5a8..a2b3cbe5e46da 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/packages/block-editor/src/components/block-navigation/block.js @@ -125,6 +125,7 @@ export default function BlockNavigationBlock( { ) } diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js index fe64c785c0886..d7efce64018c7 100644 --- a/packages/block-editor/src/components/block-settings-menu-controls/index.js +++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js @@ -7,13 +7,23 @@ import { isEmpty, map } from 'lodash'; * WordPress dependencies */ import { createSlotFill, MenuGroup } from '@wordpress/components'; +import { useContext } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; -const { Fill: BlockSettingsMenuControls, Slot } = createSlotFill( - 'BlockSettingsMenuControls' -); +/** + * Internal dependencies + */ +import { BlockListBlockContext } from '../block-list/block'; + +const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' ); -const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => { +const getSlotName = ( context, clientId = null ) => + `BlockSettings-${ context }-${ clientId ? clientId : '' }`; +const BlockSettingsMenuControlsSlots = ( { + fillProps, + context = 'default', + clientIds = null, +} ) => { const { selectedBlocks } = useSelect( ( select ) => { const { getBlocksByClientId, getSelectedBlockClientIds } = select( 'core/block-editor' @@ -28,16 +38,44 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => { }; }, [] ); + const slotProps = { ...fillProps, selectedBlocks }; return ( - - { ( fills ) => - ! isEmpty( fills ) && { fills } - } - + <> + + { clientIds.length === 1 && ( + + ) } + ); }; -BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot; +const BlockSettingsMenuControlsSlot = ( props ) => ( + + { ( fills ) => ! isEmpty( fills ) && { fills } } + +); + +export const BlockSettingsMenuControls = ( { + forAllBlocks = false, + context = 'default', + ...fillProps +} ) => { + const blockContext = useContext( BlockListBlockContext ); + let clientId; + if ( ! forAllBlocks ) { + // Let's use non-existent ID in case the block context is missing + clientId = blockContext?.clientId || 'non-such-id'; + } + return ; +}; + +BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlots; /** * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-settings-menu-controls/README.md diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index e9e3ae9b235a9..0d99e20172c3e 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -34,7 +34,11 @@ const POPOVER_PROPS = { isAlternate: true, }; -export function BlockSettingsDropdown( { clientIds, ...props } ) { +export function BlockSettingsDropdown( { + clientIds, + contexts = [ 'default' ], + ...props +} ) { const blockClientIds = castArray( clientIds ); const count = blockClientIds.length; const firstBlockClientId = blockClientIds[ 0 ]; @@ -145,10 +149,14 @@ export function BlockSettingsDropdown( { clientIds, ...props } ) { /> ) } - + { contexts.map( ( context ) => ( + + ) ) } { ! isLocked && ( ( - + { ( { selectedBlocks, onClose } ) => { if ( ! shouldRenderItem( selectedBlocks, allowedBlocks ) ) { return null; diff --git a/packages/editor/src/components/convert-to-group-buttons/index.js b/packages/editor/src/components/convert-to-group-buttons/index.js index 21b6e92c1a9f9..e756ad94bfd07 100644 --- a/packages/editor/src/components/convert-to-group-buttons/index.js +++ b/packages/editor/src/components/convert-to-group-buttons/index.js @@ -19,7 +19,7 @@ export function ConvertToGroupButton( { } return ( - + { ( { onClose } ) => ( <> { isGroupable && ( diff --git a/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js b/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js index 7c1b3a099f93e..bb9ffc97f026c 100644 --- a/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js +++ b/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js @@ -24,7 +24,7 @@ export function ReusableBlockConvertButton( { } return ( - + { ( { onClose } ) => ( <> { ! isReusable && ( diff --git a/packages/editor/src/components/reusable-blocks-buttons/reusable-block-delete-button.js b/packages/editor/src/components/reusable-blocks-buttons/reusable-block-delete-button.js index 7f5e29f009d3f..55cb12855d6a1 100644 --- a/packages/editor/src/components/reusable-blocks-buttons/reusable-block-delete-button.js +++ b/packages/editor/src/components/reusable-blocks-buttons/reusable-block-delete-button.js @@ -18,7 +18,7 @@ export function ReusableBlockDeleteButton( { } return ( - + { ( { onClose } ) => (