Duplicate LeafMoreMenu into the navigation block and the global sidebar navigation #50489
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { createBlock } from '@wordpress/blocks'; | ||
| import { | ||
| addSubmenu, | ||
| chevronUp, | ||
| chevronDown, | ||
| moreVertical, | ||
| } from '@wordpress/icons'; | ||
| import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components'; | ||
| import { useDispatch, useSelect } from '@wordpress/data'; | ||
| import { __, sprintf } from '@wordpress/i18n'; | ||
| import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor'; | ||
|
|
||
| const POPOVER_PROPS = { | ||
| className: 'block-editor-block-settings-menu__popover', | ||
|
There was a problem hiding this comment. The styles associated with this class name belong to the We should avoid re-using class names (especially across packages) as it can lead to unexpected side effects. I suggest we add a new classname specific to this file/package, and (if needed) copy the styles from the block editor over. The same should be done for the other "leaf more dropdown" component There was a problem hiding this comment. After looking more into this, it doesn't look like this class achieved much in terms of styling (the |
||
| position: 'bottom right', | ||
| variant: 'toolbar', | ||
| }; | ||
|
|
||
| const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [ | ||
| 'core/navigation-link', | ||
| 'core/navigation-submenu', | ||
| ]; | ||
|
|
||
| function AddSubmenuItem( { block, onClose, expandedState, expand } ) { | ||
| const { insertBlock, replaceBlock, replaceInnerBlocks } = | ||
| useDispatch( blockEditorStore ); | ||
|
|
||
| const clientId = block.clientId; | ||
| const isDisabled = ! BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU.includes( | ||
| block.name | ||
| ); | ||
| return ( | ||
| <MenuItem | ||
| icon={ addSubmenu } | ||
| disabled={ isDisabled } | ||
| onClick={ () => { | ||
| const updateSelectionOnInsert = false; | ||
| const newLink = createBlock( 'core/navigation-link' ); | ||
|
|
||
| if ( block.name === 'core/navigation-submenu' ) { | ||
| insertBlock( | ||
| newLink, | ||
| block.innerBlocks.length, | ||
| clientId, | ||
| updateSelectionOnInsert | ||
| ); | ||
| } else { | ||
| // Convert to a submenu if the block currently isn't one. | ||
| const newSubmenu = createBlock( | ||
| 'core/navigation-submenu', | ||
| block.attributes, | ||
| block.innerBlocks | ||
| ); | ||
|
|
||
| // The following must happen as two independent actions. | ||
| // Why? Because the offcanvas editor relies on the getLastInsertedBlocksClientIds | ||
| // selector to determine which block is "active". As the UX needs the newLink to be | ||
| // the "active" block it must be the last block to be inserted. | ||
| // Therefore the Submenu is first created and **then** the newLink is inserted | ||
| // thus ensuring it is the last inserted block. | ||
| replaceBlock( clientId, newSubmenu ); | ||
|
|
||
| replaceInnerBlocks( | ||
| newSubmenu.clientId, | ||
| [ newLink ], | ||
| updateSelectionOnInsert | ||
| ); | ||
| } | ||
| if ( ! expandedState[ block.clientId ] ) { | ||
| expand( block.clientId ); | ||
| } | ||
| onClose(); | ||
| } } | ||
| > | ||
| { __( 'Add submenu link' ) } | ||
| </MenuItem> | ||
| ); | ||
| } | ||
|
|
||
| export default function LeafMoreMenu( props ) { | ||
| const { block } = props; | ||
| const { clientId } = block; | ||
| const { moveBlocksDown, moveBlocksUp, removeBlocks } = | ||
| useDispatch( blockEditorStore ); | ||
|
|
||
| const removeLabel = sprintf( | ||
| /* translators: %s: block name */ | ||
| __( 'Remove %s' ), | ||
| BlockTitle( { clientId, maximumLength: 25 } ) | ||
| ); | ||
|
|
||
| const rootClientId = useSelect( | ||
| ( select ) => { | ||
| const { getBlockRootClientId } = select( blockEditorStore ); | ||
|
|
||
| return getBlockRootClientId( clientId ); | ||
| }, | ||
| [ clientId ] | ||
| ); | ||
|
|
||
| return ( | ||
| <DropdownMenu | ||
| icon={ moreVertical } | ||
| label={ __( 'Options' ) } | ||
| className="block-editor-block-settings-menu" | ||
| popoverProps={ POPOVER_PROPS } | ||
| noIcons | ||
| { ...props } | ||
|
There was a problem hiding this comment. There are quite a few properties that are being passed to This pattern has the potential to causing unwanted side effects, especially hard to track when performing wide refactors. We should be trying to restructure props more explicitly, especially when we know exactly where those props need to be used / forwarded. |
||
| > | ||
| { ( { onClose } ) => ( | ||
| <> | ||
| <MenuGroup> | ||
| <MenuItem | ||
| icon={ chevronUp } | ||
| onClick={ () => { | ||
| moveBlocksUp( [ clientId ], rootClientId ); | ||
| onClose(); | ||
| } } | ||
| > | ||
| { __( 'Move up' ) } | ||
| </MenuItem> | ||
| <MenuItem | ||
| icon={ chevronDown } | ||
| onClick={ () => { | ||
| moveBlocksDown( [ clientId ], rootClientId ); | ||
| onClose(); | ||
| } } | ||
| > | ||
| { __( 'Move down' ) } | ||
| </MenuItem> | ||
| <AddSubmenuItem | ||
| block={ block } | ||
| onClose={ onClose } | ||
| expanded | ||
| expandedState={ props.expandedState } | ||
| expand={ props.expand } | ||
| /> | ||
| </MenuGroup> | ||
| <MenuGroup> | ||
| <MenuItem | ||
| onClick={ () => { | ||
| removeBlocks( [ clientId ], false ); | ||
| onClose(); | ||
| } } | ||
| > | ||
| { removeLabel } | ||
| </MenuItem> | ||
| </MenuGroup> | ||
| </> | ||
| ) } | ||
| </DropdownMenu> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why did we move this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure :)