Site Editor: Move page switcher to navigation panel #25620
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useState } from '@wordpress/element'; | ||
| import { | ||
| __experimentalNavigation as Navigation, | ||
| __experimentalNavigationMenu as NavigationMenu, | ||
| __experimentalNavigationItem as NavigationItem, | ||
| } from '@wordpress/components'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import ContentPagesMenu from './menus/content-pages'; | ||
| import ContentCategoriesMenu from './menus/content-categories'; | ||
| import ContentPostsMenu from './menus/content-posts'; | ||
| import { | ||
| MENU_CONTENT_CATEGORIES, | ||
| MENU_CONTENT_PAGES, | ||
| MENU_CONTENT_POSTS, | ||
| } from './constants'; | ||
|
|
||
| export default function ContentNavigation( { onActivateMenu } ) { | ||
| const [ activeMenu, setActiveMenu ] = useState( 'root' ); | ||
|
There was a problem hiding this comment. Having two There was a problem hiding this comment. cc @Copons on this since he was advertising the ability to have multiple navigations in one view 😄 There was a problem hiding this comment. If it's working fine for now I'd defer the store migration for a separate PR. There was a problem hiding this comment.
😆 Also, IIRC the component's storybook used to have multiple There was a problem hiding this comment. About the migration to Redux: let's do it in a follow up once #26003 is merged, so that we can nest it inside |
||
|
|
||
| const page = useSelect( | ||
| ( select ) => select( 'core/edit-site' ).getPage(), | ||
| [] | ||
| ); | ||
|
|
||
| const handleActivateMenu = ( menu ) => { | ||
| setActiveMenu( menu ); | ||
| onActivateMenu( menu ); | ||
| }; | ||
|
|
||
| return ( | ||
| <Navigation | ||
| activeItem={ page && `content-${ page.path }` } | ||
| activeMenu={ activeMenu } | ||
| onActivateMenu={ handleActivateMenu } | ||
| > | ||
| <NavigationMenu title={ __( 'Content' ) }> | ||
| <NavigationItem | ||
| title={ __( 'Pages' ) } | ||
| navigateToMenu={ MENU_CONTENT_PAGES } | ||
| /> | ||
|
|
||
| <NavigationItem | ||
| title={ __( 'Categories' ) } | ||
| navigateToMenu={ MENU_CONTENT_CATEGORIES } | ||
| /> | ||
|
|
||
| <NavigationItem | ||
| title={ __( 'Posts' ) } | ||
| navigateToMenu={ MENU_CONTENT_POSTS } | ||
| /> | ||
| </NavigationMenu> | ||
|
|
||
| <ContentPagesMenu /> | ||
| <ContentCategoriesMenu /> | ||
| <ContentPostsMenu /> | ||
| </Navigation> | ||
| ); | ||
| } | ||
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,23 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __experimentalNavigationMenu as NavigationMenu } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import NavigationEntityItems from '../navigation-entity-items'; | ||
| import { MENU_CONTENT_CATEGORIES, MENU_ROOT } from '../constants'; | ||
|
|
||
| export default function ContentCategoriesMenu() { | ||
| return ( | ||
| <NavigationMenu | ||
| menu={ MENU_CONTENT_CATEGORIES } | ||
| title={ __( 'Categories' ) } | ||
| parentMenu={ MENU_ROOT } | ||
| > | ||
| <NavigationEntityItems kind="taxonomy" name="category" /> | ||
| </NavigationMenu> | ||
| ); | ||
| } |
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,23 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __experimentalNavigationMenu as NavigationMenu } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import NavigationEntityItems from '../navigation-entity-items'; | ||
| import { MENU_CONTENT_PAGES, MENU_ROOT } from '../constants'; | ||
|
|
||
| export default function ContentPagesMenu() { | ||
| return ( | ||
| <NavigationMenu | ||
| menu={ MENU_CONTENT_PAGES } | ||
| title={ __( 'Pages' ) } | ||
| parentMenu={ MENU_ROOT } | ||
| > | ||
| <NavigationEntityItems kind="postType" name="page" /> | ||
| </NavigationMenu> | ||
| ); | ||
| } |
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,54 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| __experimentalNavigationMenu as NavigationMenu, | ||
| __experimentalNavigationItem as NavigationItem, | ||
| } from '@wordpress/components'; | ||
| import { useDispatch, useSelect } from '@wordpress/data'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import NavigationEntityItems from '../navigation-entity-items'; | ||
| import { MENU_CONTENT_POSTS, MENU_ROOT } from '../constants'; | ||
|
|
||
| export default function ContentPostsMenu() { | ||
| const showOnFront = useSelect( | ||
| ( select ) => | ||
| select( 'core' ).getEditedEntityRecord( 'root', 'site' ) | ||
| .show_on_front, | ||
| [] | ||
| ); | ||
|
|
||
| const { setPage } = useDispatch( 'core/edit-site' ); | ||
|
|
||
| const onActivateFrontItem = () => { | ||
| setPage( { | ||
| type: 'page', | ||
| path: '/', | ||
| context: { | ||
| query: { categoryIds: [] }, | ||
| queryContext: { page: 1 }, | ||
| }, | ||
| } ); | ||
| }; | ||
|
|
||
| return ( | ||
| <NavigationMenu | ||
| menu={ MENU_CONTENT_POSTS } | ||
| title={ __( 'Posts' ) } | ||
| parentMenu={ MENU_ROOT } | ||
| > | ||
| { showOnFront === 'posts' && ( | ||
| <NavigationItem | ||
| item={ 'content-/' } | ||
| title={ __( 'All Posts' ) } | ||
| onClick={ onActivateFrontItem } | ||
| /> | ||
| ) } | ||
| <NavigationEntityItems kind="postType" name="post" /> | ||
| </NavigationMenu> | ||
| ); | ||
| } |
Oops, something went wrong.
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.
I've just noticed that we are losing all the "show on front" logic from the page switcher. 🤔
gutenberg/packages/edit-site/src/components/page-switcher/index.js
Lines 69 to 88 in c120818
Am I missing something?
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.
Oooops 😄 Pushed a commit which re-adds it.