Refactor "Display" panel of Navigation block to use ToolsPanel instead of PanelBody

[fabiankaegy]

Part of #67813

Convert the "Settings" panel of the Navigation block to use the ToolsPanel instead of PanelBody

[yogeshbhutkar]

I'd like to work on this issue.

Also, there's some discrepancy between the issue title and description. I think the intention was to mention the Display Panel originally, so I would go with refactoring the Display Panel.

Thanks!

[yogeshbhutkar]

A pull request addressing this issue has recently been raised: #68011. I will discontinue my work on this in favor of the existing PR.

[SainathPoojary]

Hey @fabiankaegy,

The Navigation block contains multiple non-control items, which is causing layout issues. Additionally, some items have margin-bottom and extra styling applied to improve the layout in PanelBody, but this looks problematic in ToolsPanel.

I would like to clarify the best approach before proceeding. Should I write custom CSS to resolve the styling issue? If so, should I create custom CSS classes and apply them here instead? Or should I follow the approach used in Storybook and documentation, which utilizes styled components?

It’s worth noting that styled components are used in packages/components, but not in packages/block-library. If we go with styled components, we’ll need to add it to package.json.

cc: @t-hamano @aaronrobertshaw

[aaronrobertshaw]

The Navigation block contains multiple non-control items, which is causing layout issues.

The screenshot appears to be the expected behaviour as the ToolsPanel defaulted to a two-column grid layout. The ToolsPanelItem defaults to spanning both columns so removing that as a wrapper will mean needing to style grid-column for non-tools-panel-items.

You can see this in the example snippet I left in this comment on a related issue.

Should I write custom CSS to resolve the styling issue?

This is the approach that has been taken for the panels used by block supports e.g. color, dimensions, typography etc.

Ultimately, it might be nice for the ToolsPanel to offer different base layouts. I have a vague memory at one point this was implemented by eventually rolled back before the panel merged.

For the time being though, I'd suggest staying consistent in approach with the other block support panels.