Skip to content

Conversation

@talldan
Copy link
Contributor

@talldan talldan commented Oct 31, 2019

Description

Experiment to test the Block Navigator in the sidebars of both the Navigation Menu and Menu Item blocks.

This has been done in a very hacky way, it's just a proof of concept right now, not meant to be code reviewed.

This is an iteration from #18202

Screenshots

navigator-sidebar

@talldan
Copy link
Contributor Author

talldan commented Oct 31, 2019

I think this works really nicely. It has the caveat that it only works so seamlessly when it's rendered in the same position for the parent and child blocks. If the descriptions of the two blocks were different lengths there'd be a noticeable jump of the position of the panel.

In terms of implementation, at the moment I'm rendering the same component in both the Nav Menu and Menu Item InsepectorControls. There's a lot of coupling between the two blocks in the way this is done, which is less than ideal.

I wonder if a better approach would be to create a slot that's like InspectorControls, but perhaps called RootInspectorControls, and it renders both when the parent block is selected, but also when any inner block is selected. For example the nav menu would just have this:

<RootInspectorControls>
	<PanelBody
		title={ __( 'Navigation Structure' ) }
	>
		<BlockNavigationList clientId={ clientId } />
	</PanelBody>
</RootInspectorControls>

and rendering would be taken care of for all inner menu items.

@mtias
Copy link
Member

mtias commented Oct 31, 2019

This looks very promising and might be an indication we should turn the top level block navigator into a sidebar so that it can remain open if you want to dig into structure.

@mtias mtias added the [Block] Navigation Affects the Navigation Block label Oct 31, 2019
@talldan talldan force-pushed the try/navigator-in-sidebar-for-nav-and-menu-items branch from 06f8f6a to cae25f8 Compare November 1, 2019 07:21
@talldan
Copy link
Contributor Author

talldan commented Nov 1, 2019

I refactored this along the lines mentioned in comment #18203 (comment). The Navigation Structure panel is now only rendered in the navigation menu in a ParentInspectorControls slot, but this is slot still renders when a child block is selected. It works pretty well.

When experimenting with larger navigation menus, the panel does get quite big, so I think I'll next try out a sidebar tab as @mtias mentions #18203 (comment).

@talldan talldan force-pushed the try/navigator-in-sidebar-for-nav-and-menu-items branch from cae25f8 to 254a5d5 Compare November 1, 2019 07:29
@talldan talldan changed the title Try/navigator in sidebar for nav and menu items WIP: Try/navigator in sidebar for nav and menu items Nov 6, 2019
@talldan talldan added the [Status] In Progress Tracking issues with work in progress label Nov 6, 2019
@karmatosed
Copy link
Member

Noting #18340 has some points relating to this. Specifically, we now have 2 places.

@MichaelArestad MichaelArestad added the Needs Design Feedback Needs general design feedback. label Mar 6, 2020
@talldan talldan closed this Mar 19, 2020
@aristath aristath deleted the try/navigator-in-sidebar-for-nav-and-menu-items branch November 10, 2020 14:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Navigation Affects the Navigation Block Needs Design Feedback Needs general design feedback. [Status] In Progress Tracking issues with work in progress

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants