-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Duplicate LeafMoreMenu into the navigation block and the global sideb…
…ar navigation (#50489) * Move LeafMoreMenu into list-view so OffCanvasEditor can be eventually be deleted Move LeafMoreMenu to its own component Move Leaf More Menu to navigation block remove private API Add Leaf More Menu to the browse mode sidebar Add a note to show these files are duplicated * Change block title * minor change --------- Co-authored-by: scruffian <[email protected]>
- Loading branch information
Showing
7 changed files
with
176 additions
and
16 deletions.
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
156 changes: 156 additions & 0 deletions
156
...ges/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
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', | ||
| 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 } | ||
| > | ||
| { ( { 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