Skip to content

Commit

Permalink
Select Mode: Updates to the block toolbar (#65485)
Browse files Browse the repository at this point in the history 
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: talldan <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: jorgefilipecosta <[email protected]>
Co-authored-by: noisysocks <[email protected]>
Co-authored-by: jameskoster <[email protected]>
  • Loading branch information
@youknowriad @talldan
@andrewserong @jorgefilipecosta @noisysocks @jameskoster
7 people authored Sep 23, 2024
1 parent 7f87eef commit 51d0f20
Show file tree
Hide file tree
Showing 9 changed files with 224 additions and 239 deletions.
35 changes: 0 additions & 35 deletions packages/block-editor/src/components/block-controls/use-has-block-controls.js
View file

This file was deleted.

23 changes: 13 additions & 10 deletions packages/block-editor/src/components/block-parent-selector/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
import BlockIcon from '../block-icon';
import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
import { store as blockEditorStore } from '../../store';
import { unlock } from '../../lock-unlock';

/**
* Block parent selector component, displaying the hierarchy of the
Expand All @@ -23,32 +24,34 @@ import { store as blockEditorStore } from '../../store';
*/
export default function BlockParentSelector() {
const { selectBlock } = useDispatch( blockEditorStore );
const { firstParentClientId, isVisible } = useSelect( ( select ) => {
const { parentClientId, isVisible } = useSelect( ( select ) => {
const {
getBlockName,
getBlockParents,
getSelectedBlockClientId,
getBlockEditingMode,
} = select( blockEditorStore );
getParentSectionBlock,
} = unlock( select( blockEditorStore ) );
const { hasBlockSupport } = select( blocksStore );
const selectedBlockClientId = getSelectedBlockClientId();
const parentSection = getParentSectionBlock( selectedBlockClientId );
const parents = getBlockParents( selectedBlockClientId );
const _firstParentClientId = parents[ parents.length - 1 ];
const parentBlockName = getBlockName( _firstParentClientId );
const _parentClientId = parentSection ?? parents[ parents.length - 1 ];
const parentBlockName = getBlockName( _parentClientId );
const _parentBlockType = getBlockType( parentBlockName );
return {
firstParentClientId: _firstParentClientId,
parentClientId: _parentClientId,
isVisible:
_firstParentClientId &&
getBlockEditingMode( _firstParentClientId ) === 'default' &&
_parentClientId &&
getBlockEditingMode( _parentClientId ) !== 'disabled' &&
hasBlockSupport(
_parentBlockType,
'__experimentalParentSelector',
true
),
};
}, [] );
const blockInformation = useBlockDisplayInformation( firstParentClientId );
const blockInformation = useBlockDisplayInformation( parentClientId );

// Allows highlighting the parent block outline when focusing or hovering
// the parent block selector within the child.
Expand All @@ -65,13 +68,13 @@ export default function BlockParentSelector() {
return (
<div
className="block-editor-block-parent-selector"
key={ firstParentClientId }
key={ parentClientId }
ref={ nodeRef }
{ ...showHoveredOrFocusedGestures }
>
<ToolbarButton
className="block-editor-block-parent-selector__button"
onClick={ () => selectBlock( firstParentClientId ) }
onClick={ () => selectBlock( parentClientId ) }
label={ sprintf(
/* translators: %s: Name of the block's parent. */
__( 'Select parent block: %s' ),
Expand Down
218 changes: 120 additions & 98 deletions packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,9 @@ export function BlockSettingsDropdown( {
}
}

const shouldShowBlockParentMenuItem =
! parentBlockIsSelected && !! firstParentClientId;

return (
<BlockActions
clientIds={ clientIds }
Expand All @@ -199,124 +202,143 @@ export function BlockSettingsDropdown( {
onRemove,
onCopy,
onPasteStyles,
} ) => (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Options' ) }
className="block-editor-block-settings-menu"
popoverProps={ POPOVER_PROPS }
open={ open }
onToggle={ onToggle }
noIcons
{ ...props }
>
{ ( { onClose } ) => (
<>
<MenuGroup>
<__unstableBlockSettingsMenuFirstItem.Slot
fillProps={ { onClose } }
/>
{ ! parentBlockIsSelected &&
!! firstParentClientId && (
} ) => {
// It is possible that some plugins register fills for this menu
// even if Core doesn't render anything in the block settings menu.
// in which case, we may want to render the menu anyway.
// That said for now, we can start more conservative.
const isEmpty =
! canRemove &&
! canDuplicate &&
! canInsertBlock &&
isContentOnly;

if ( isEmpty ) {
return null;
}

return (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Options' ) }
className="block-editor-block-settings-menu"
popoverProps={ POPOVER_PROPS }
open={ open }
onToggle={ onToggle }
noIcons
{ ...props }
>
{ ( { onClose } ) => (
<>
<MenuGroup>
<__unstableBlockSettingsMenuFirstItem.Slot
fillProps={ { onClose } }
/>
{ shouldShowBlockParentMenuItem && (
<BlockParentSelectorMenuItem
parentClientId={
firstParentClientId
}
parentBlockType={ parentBlockType }
/>
) }
{ count === 1 && (
<BlockHTMLConvertButton
clientId={ firstBlockClientId }
/>
) }
{ ! isContentOnly && (
<CopyMenuItem
clientIds={ clientIds }
onCopy={ onCopy }
shortcut={ displayShortcut.primary(
'c'
) }
/>
) }
{ canDuplicate && (
<MenuItem
onClick={ pipe(
onClose,
onDuplicate,
updateSelectionAfterDuplicate
) }
shortcut={ shortcuts.duplicate }
>
{ __( 'Duplicate' ) }
</MenuItem>
) }
{ canInsertBlock && ! isContentOnly && (
<>
{ count === 1 && (
<BlockHTMLConvertButton
clientId={ firstBlockClientId }
/>
) }
{ ! isContentOnly && (
<CopyMenuItem
clientIds={ clientIds }
onCopy={ onCopy }
shortcut={ displayShortcut.primary(
'c'
) }
/>
) }
{ canDuplicate && (
<MenuItem
onClick={ pipe(
onClose,
onInsertBefore
onDuplicate,
updateSelectionAfterDuplicate
) }
shortcut={ shortcuts.insertBefore }
shortcut={ shortcuts.duplicate }
>
{ __( 'Add before' ) }
{ __( 'Duplicate' ) }
</MenuItem>
) }
{ canInsertBlock && ! isContentOnly && (
<>
<MenuItem
onClick={ pipe(
onClose,
onInsertBefore
) }
shortcut={
shortcuts.insertBefore
}
>
{ __( 'Add before' ) }
</MenuItem>
<MenuItem
onClick={ pipe(
onClose,
onInsertAfter
) }
shortcut={
shortcuts.insertAfter
}
>
{ __( 'Add after' ) }
</MenuItem>
</>
) }
</MenuGroup>
{ canCopyStyles && ! isContentOnly && (
<MenuGroup>
<CopyMenuItem
clientIds={ clientIds }
onCopy={ onCopy }
label={ __( 'Copy styles' ) }
/>
<MenuItem onClick={ onPasteStyles }>
{ __( 'Paste styles' ) }
</MenuItem>
</MenuGroup>
) }
<BlockSettingsMenuControls.Slot
fillProps={ {
onClose,
count,
firstBlockClientId,
} }
clientIds={ clientIds }
/>
{ typeof children === 'function'
? children( { onClose } )
: Children.map( ( child ) =>
cloneElement( child, { onClose } )
) }
{ canRemove && (
<MenuGroup>
<MenuItem
onClick={ pipe(
onClose,
onInsertAfter
onRemove,
updateSelectionAfterRemove
) }
shortcut={ shortcuts.insertAfter }
shortcut={ shortcuts.remove }
>
{ __( 'Add after' ) }
{ __( 'Delete' ) }
</MenuItem>
</>
</MenuGroup>
) }
</MenuGroup>
{ canCopyStyles && ! isContentOnly && (
<MenuGroup>
<CopyMenuItem
clientIds={ clientIds }
onCopy={ onCopy }
label={ __( 'Copy styles' ) }
/>
<MenuItem onClick={ onPasteStyles }>
{ __( 'Paste styles' ) }
</MenuItem>
</MenuGroup>
) }
<BlockSettingsMenuControls.Slot
fillProps={ {
onClose,
count,
firstBlockClientId,
} }
clientIds={ clientIds }
/>
{ typeof children === 'function'
? children( { onClose } )
: Children.map( ( child ) =>
cloneElement( child, { onClose } )
) }
{ canRemove && (
<MenuGroup>
<MenuItem
onClick={ pipe(
onClose,
onRemove,
updateSelectionAfterRemove
) }
shortcut={ shortcuts.remove }
>
{ __( 'Delete' ) }
</MenuItem>
</MenuGroup>
) }
</>
) }
</DropdownMenu>
) }
</>
) }
</DropdownMenu>
);
} }
</BlockActions>
);
}
Expand Down
Loading

0 comments on commit 51d0f20

Please sign in to comment.