-
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.
Add global inserter to Nav editor screen (#34619)
* Scaffold out very basic interface * Wire up store state and UI * Add inserter button to header toolbar * Use correct classname * Use optimal props on inserter toggle * Allow global inserter to insert blocks at root level of Nav block * Avoid displaying inserter if there are no blocks to insert * Hide previews as they don't provide much value here * Refactor Inserter to dedicate component * Remove hardcoded conditional * Remove unwanted ref usage * Add toggle button styles and remove close button on larger screens * Allow tools to show on mobile viewports * Conditionalise render of sidebar Ensures main content is visible on mobile devices when sidebar is disabled. If we return a component to the secondarySidebar then the interface component will render the wrapping div which will obscure the wrapping content. * Only hide undo/redo on smaller viewports * Simplify Navigation Block hook * Ensure global inserter always targets root nav block * Ensure items always inserted at end if root nav block is selected * Update to use correct exported variable name * Handle focus and tab trapping via hook * Rename component to make it clear it's the inserter button * Simplify secondary sidebar * Alter directory structure in order to improve portability of code * Make insertion point logic explicit * Add docblocks to store * Add selector state guard * Implement Browse All on quick inserter. Required refactor of initial file. * Move constant outside component body Addresses #34619 (comment) * Add dep to useSelect * Add another dep to useSelect * Remove ref * Sort out Prettier's mess * Rename Inserter Button to Inserter Toggle for clarity and consistency * Apply correct CSS naming convention Addresses #34619 (comment)
- Loading branch information
Showing
11 changed files
with
328 additions
and
23 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
57 changes: 57 additions & 0 deletions
57
packages/edit-navigation/src/components/header/inserter-toggle.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,57 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { store as blockEditorStore } from '@wordpress/block-editor'; | ||
| import { Button, ToolbarItem } from '@wordpress/components'; | ||
| import { _x } from '@wordpress/i18n'; | ||
| import { useSelect, useDispatch } from '@wordpress/data'; | ||
| import { plus } from '@wordpress/icons'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { useNavigationEditorRootBlock } from '../../hooks'; | ||
| import { store as editNavigationStore } from '../../store'; | ||
|
|
||
| function InserterToggle() { | ||
| const { navBlockClientId } = useNavigationEditorRootBlock(); | ||
|
|
||
| const { isInserterOpened, hasInserterItems } = useSelect( | ||
| ( select ) => { | ||
| return { | ||
| hasInserterItems: select( blockEditorStore ).hasInserterItems( | ||
| navBlockClientId | ||
| ), | ||
| isInserterOpened: select( | ||
| editNavigationStore | ||
| ).isInserterOpened(), | ||
| }; | ||
| }, | ||
| [ navBlockClientId ] | ||
| ); | ||
|
|
||
| const { setIsInserterOpened } = useDispatch( editNavigationStore ); | ||
|
|
||
| return ( | ||
| <ToolbarItem | ||
| as={ Button } | ||
| className="edit-navigation-header-inserter-toggle" | ||
| variant="primary" | ||
| isPressed={ isInserterOpened } | ||
| onMouseDown={ ( event ) => { | ||
| event.preventDefault(); | ||
| } } | ||
| onClick={ () => setIsInserterOpened( ! isInserterOpened ) } | ||
| icon={ plus } | ||
| /* translators: button label text should, if possible, be under 16 | ||
| characters. */ | ||
| label={ _x( | ||
| 'Toggle block inserter', | ||
| 'Generic label for block inserter button' | ||
| ) } | ||
| disabled={ ! hasInserterItems } | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default InserterToggle; |
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
95 changes: 95 additions & 0 deletions
95
packages/edit-navigation/src/components/inserter-sidebar/index.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,95 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Button } from '@wordpress/components'; | ||
| import { close } from '@wordpress/icons'; | ||
| import { | ||
| __experimentalLibrary as Library, | ||
| store as blockEditorStore, | ||
| } from '@wordpress/block-editor'; | ||
| import { | ||
| useViewportMatch, | ||
| __experimentalUseDialog as useDialog, | ||
| } from '@wordpress/compose'; | ||
| import { useDispatch, useSelect } from '@wordpress/data'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { store as editNavigationStore } from '../../store'; | ||
| import { useNavigationEditorRootBlock } from '../../hooks'; | ||
|
|
||
| const SHOW_PREVIEWS = false; | ||
|
|
||
| function InserterSidebar() { | ||
| const isMobileViewport = useViewportMatch( 'medium', '<' ); | ||
|
|
||
| const { | ||
| navBlockClientId, | ||
| lastNavBlockItemIndex, | ||
| } = useNavigationEditorRootBlock(); | ||
|
|
||
| const { hasInserterItems, selectedBlockClientId } = useSelect( | ||
| ( select ) => { | ||
| return { | ||
| hasInserterItems: select( blockEditorStore ).hasInserterItems( | ||
| navBlockClientId | ||
| ), | ||
| selectedBlockClientId: select( | ||
| blockEditorStore | ||
| ).getSelectedBlock()?.clientId, | ||
| }; | ||
| }, | ||
| [ navBlockClientId ] | ||
| ); | ||
|
|
||
| const { setIsInserterOpened } = useDispatch( editNavigationStore ); | ||
|
|
||
| const [ inserterDialogRef, inserterDialogProps ] = useDialog( { | ||
| onClose: () => setIsInserterOpened( false ), | ||
| } ); | ||
|
|
||
| // Only concerned with whether there are items to display. If not then | ||
| // we shouldn't render. | ||
| if ( ! hasInserterItems ) { | ||
| return null; | ||
| } | ||
|
|
||
| const shouldInsertInNavBlock = | ||
| ! selectedBlockClientId || navBlockClientId === selectedBlockClientId; | ||
|
|
||
| return ( | ||
| <div | ||
| ref={ inserterDialogRef } | ||
| { ...inserterDialogProps } | ||
| className="edit-navigation-layout__inserter-panel" | ||
| > | ||
| <div className="edit-navigation-layout__inserter-panel-header"> | ||
| <Button | ||
| icon={ close } | ||
| onClick={ () => setIsInserterOpened( false ) } | ||
| /> | ||
| </div> | ||
| <div className="edit-navigation-layout__inserter-panel-content"> | ||
| <Library | ||
| // If the root Nav block is selected then any items inserted by the | ||
| // global inserter should append after the last nav item. Otherwise | ||
| // simply allow default Gutenberg behaviour. | ||
| rootClientId={ | ||
| shouldInsertInNavBlock ? navBlockClientId : undefined | ||
| } // If set, insertion will be into the block with this ID. | ||
| __experimentalInsertionIndex={ | ||
| // If set, insertion will be into this explicit position. | ||
| shouldInsertInNavBlock | ||
| ? lastNavBlockItemIndex | ||
| : undefined | ||
| } | ||
| shouldFocusBlock={ isMobileViewport } | ||
| showInserterHelpPanel={ SHOW_PREVIEWS } | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default InserterSidebar; |
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
25 changes: 25 additions & 0 deletions
25
packages/edit-navigation/src/hooks/use-navigation-editor-root-block.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,25 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { store as blockEditorStore } from '@wordpress/block-editor'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
|
|
||
| const useNavigationEditorRootBlock = () => { | ||
| return useSelect( ( select ) => { | ||
| const { getBlockOrder } = select( blockEditorStore ); | ||
|
|
||
| const lockedNavigationBlock = getBlockOrder()[ 0 ]; | ||
|
|
||
| return { | ||
| navBlockClientId: lockedNavigationBlock, | ||
| lastNavBlockItemIndex: getBlockOrder( lockedNavigationBlock ) | ||
| .length, | ||
| }; | ||
| }, [] ); | ||
| }; | ||
|
|
||
| export default useNavigationEditorRootBlock; |
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
Oops, something went wrong.