New block: Custom Navigation Menu #5036
Conversation
| export const settings = { | ||
| title: __( 'Navigation Menu' ), | ||
|
|
||
| description: __( 'Display your site pages.' ), |
There was a problem hiding this comment.
Menus are more then just pages, so maybe 'Shows a list of Menu items'?
|
|
||
| renderMenu() { | ||
| const { data, isLoading } = this.props.items; | ||
| const customizerUrl = ''; |
There was a problem hiding this comment.
This could be just customize.php?autofocus[panel]=nav_menus, since Gutenberg is loaded at wp-admin/post.php, a relative link will go to the right place.
| > | ||
| { ! Array.isArray( data ) ? | ||
| <Spinner /> : | ||
| <Button href={ `${ customizerUrl }?autofocus%5Bpanel%5D=nav_menus` }> |
There was a problem hiding this comment.
This should probably also have target="_blank"?
| icon="menu" | ||
| label={ __( 'Navigation Menu' ) } | ||
| > | ||
| { ! Array.isArray( data ) ? |
There was a problem hiding this comment.
The link to edit menus would be useful even when there are menus already created. What if none of the existing menus are the ones you want?
| <Spinner /> : | ||
| <Button href={ `${ customizerUrl }?autofocus%5Bpanel%5D=nav_menus` }> | ||
| { __( 'No items found in this menu.' ) } | ||
| </Button> |
There was a problem hiding this comment.
Also, should there be a refresh link to re-fetch menus once a user has created one? This could be useful regardless of whether there were menus to begin with.
| register_block_type( 'core/navigation-menu', array( | ||
| 'attributes' => array( | ||
| 'selected' => array( | ||
| 'type' => 'string', |
There was a problem hiding this comment.
Should this not be an int? I see it is casted to an int above.
| ); | ||
|
|
||
| if ( !! selected ) { | ||
| displayBlock = this.renderMenu(); |
There was a problem hiding this comment.
We could avoid having to implement renderMenu here which is a duplication of wp_nav_menu() if we used ServerSideRender proposed in #780.
ryelle
force-pushed
the
add/custom-menu-block
branch
from
ead8b10 to
1bf805e
Compare
|
I've rebased & addressed the feedback so far, and will keep an eye on #5602 to use the server-side rendering 🙂 |
|
Just a question. Is it planned to include the patch on 40878 before WP 5.0? |
|
The server-side render component landed in #5602… is that the only thing blocking this from getting merged? 😄 |
|
I don't believe this can be merged before Trac #40878 is merged into core, as |
|
A lot's changed since @ryelle started working on this. Let's close and revisit navigation menus in Phase 2 of Gutenberg. |
This PR adds a new block, "Navigation Menu". This is the basic version mocked up in this issue: #1466 (comment). The block itself is mostly done, only some questions (marked⚠️ in this issue) & tests remain. This also requires the patch on 40878 applied to your WP install (if this PR gets a 👍, perhaps we could patch these API changes into gutenberg for now).
This creates a dynamic block for the front end of the site, so that items added to the selected menus are updated automatically.
Screenshots
When first added, the block inserts a placeholder with a menu dropdown:
After selecting a menu, it populates the block with the items, in a vertical list or horizontal nav-bar style.
If the list is empty, it says so in the editor, but doesn't display anything on the front end.
The menu select is also added to the inspector controls area, so that the menu can be updated once the block is added.
On the front end of the site, the menu is displayed in the post using minimal styling.
Testing
As I mentioned, no tests are written for this yet. To manually test, you can add a Navigation block to your posts with different menus: a nested menu, empty menu, long menu, add a menu then delete it, etc.
Other notes