-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Library: Reinstate sidebar navigation menu editing for template parts
- Loading branch information
1 parent
5fa3f81
commit 734e024
Showing
7 changed files
with
280 additions
and
83 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
28 changes: 28 additions & 0 deletions
28
...c/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.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,28 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useEntityProp } from '@wordpress/core-data'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import SidebarNavigationItem from '../sidebar-navigation-item'; | ||
| import { useLink } from '../routes/link'; | ||
|
|
||
| export default function TemplatePartNavigationMenuListItem( { id } ) { | ||
| const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title', id ); | ||
|
|
||
| const linkInfo = useLink( { | ||
| postId: id, | ||
| postType: 'wp_navigation', | ||
| } ); | ||
|
|
||
| if ( ! id ) return null; | ||
|
|
||
| return ( | ||
| <SidebarNavigationItem withChevron { ...linkInfo }> | ||
| { title || __( '(no title)' ) } | ||
| </SidebarNavigationItem> | ||
| ); | ||
| } |
21 changes: 21 additions & 0 deletions
21
...te/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.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,21 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __experimentalItemGroup as ItemGroup } from '@wordpress/components'; | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import TemplatePartNavigationMenuListItem from './template-part-navigation-menu-list-item'; | ||
|
|
||
| export default function TemplatePartNavigationMenuList( { menus } ) { | ||
| return ( | ||
| <ItemGroup className="edit-site-sidebar-navigation-screen-template-part-navigation-menu-list"> | ||
| { menus.map( ( menuId ) => ( | ||
| <TemplatePartNavigationMenuListItem | ||
| key={ menuId } | ||
| id={ menuId } | ||
| /> | ||
| ) ) } | ||
| </ItemGroup> | ||
| ); | ||
| } |
30 changes: 30 additions & 0 deletions
30
...it-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-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,30 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { __experimentalHeading as Heading } from '@wordpress/components'; | ||
| import { useEntityProp } from '@wordpress/core-data'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor'; | ||
|
|
||
| export default function TemplatePartNavigationMenu( { id } ) { | ||
| const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title', id ); | ||
|
|
||
| if ( ! id ) return null; | ||
|
|
||
| return ( | ||
| <> | ||
| <Heading | ||
| className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title" | ||
| size="12" | ||
| upperCase={ true } | ||
| > | ||
| { title?.rendered || __( 'Navigation' ) } | ||
| </Heading> | ||
| <NavigationMenuEditor navigationMenuId={ id } /> | ||
| </> | ||
| ); | ||
| } |
33 changes: 33 additions & 0 deletions
33
...t-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.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,33 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { __experimentalHeading as Heading } from '@wordpress/components'; | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import TemplatePartNavigationMenu from './template-part-navigation-menu'; | ||
| import TemplatePartNavigationMenuList from './template-part-navigation-menu-list'; | ||
|
|
||
| export default function TemplatePartNavigationMenus( { menus } ) { | ||
| if ( ! menus.length ) return null; | ||
|
|
||
| // if there is a single menu then render TemplatePartNavigationMenu | ||
| if ( menus.length === 1 ) { | ||
| return <TemplatePartNavigationMenu id={ menus[ 0 ] } />; | ||
| } | ||
|
|
||
| // if there are multiple menus then render TemplatePartNavigationMenuList | ||
| return ( | ||
| <> | ||
| <Heading | ||
| className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title" | ||
| size="12" | ||
| upperCase={ true } | ||
| > | ||
| { __( 'Navigation' ) } | ||
| </Heading> | ||
| <TemplatePartNavigationMenuList menus={ menus } /> | ||
| </> | ||
| ); | ||
| } |
71 changes: 71 additions & 0 deletions
71
...edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.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,71 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import TemplatePartNavigationMenus from './template-part-navigation-menus'; | ||
| import useEditedEntityRecord from '../use-edited-entity-record'; | ||
|
|
||
| /** | ||
| * Retrieves a list of specific blocks from a given tree of blocks. | ||
| * | ||
| * @param {string} targetBlockType The name of the block type to find. | ||
| * @param {Array} blocks A list of blocks from a template part entity. | ||
| * | ||
| * @return {Array} A list of any navigation blocks found in the blocks. | ||
| */ | ||
| function getBlocksOfTypeFromBlocks( targetBlockType, blocks ) { | ||
| if ( ! targetBlockType || ! blocks?.length ) { | ||
| return []; | ||
| } | ||
|
|
||
| const findInBlocks = ( _blocks ) => { | ||
| if ( ! _blocks ) { | ||
| return []; | ||
| } | ||
|
|
||
| const navigationBlocks = []; | ||
|
|
||
| for ( const block of _blocks ) { | ||
| if ( block.name === targetBlockType ) { | ||
| navigationBlocks.push( block ); | ||
| } | ||
|
|
||
| if ( block?.innerBlocks ) { | ||
| const innerNavigationBlocks = findInBlocks( block.innerBlocks ); | ||
|
|
||
| if ( innerNavigationBlocks.length ) { | ||
| navigationBlocks.push( ...innerNavigationBlocks ); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return navigationBlocks; | ||
| }; | ||
|
|
||
| return findInBlocks( blocks ); | ||
| } | ||
|
|
||
| export default function useNavigationMenuContent( postType, postId ) { | ||
| const { record } = useEditedEntityRecord( postType, postId ); | ||
|
|
||
| // Only managing navigation menus in template parts is supported | ||
| // to match previous behaviour. This could potentially be expanded | ||
| // to patterns as well. | ||
| if ( postType !== 'wp_template_part' ) { | ||
| return; | ||
| } | ||
|
|
||
| const navigationBlocks = getBlocksOfTypeFromBlocks( | ||
| 'core/navigation', | ||
| record?.blocks | ||
| ); | ||
|
|
||
| const navigationMenuIds = navigationBlocks?.map( | ||
| ( block ) => block.attributes.ref | ||
| ); | ||
|
|
||
| if ( ! navigationMenuIds?.length ) { | ||
| return; | ||
| } | ||
|
|
||
| return <TemplatePartNavigationMenus menus={ navigationMenuIds } />; | ||
| } |
Oops, something went wrong.