theme development - Correct way of implementing complex navigation in Gutenberg

admin管理员组

文章数量:1122846

I am a bit lost in creating a block theme. I have read a lot about theme development and block development in the wordpress documentation and also at fullsiteediting and have some kind of understanding about block theme development. But I still don't understand what is the correct way or best practice, if you have design parts that cannot be achieved with the full site editor.

Here is an example:

I want to create a mega menu. It should have a custom background color and should have rounded corners. Also the top nav items should have rounded corners but not the navigation items in the sub menu. I also want to have a special behavior for the mega menu.

I created a navigation that is up to 3 levels deep. On my template I added a navigation block. I am able to open the sub nav by clicking on the navigation item. This is configurable with the full site editor. But e.g. I cannot add border-radius to the navigation. I also cannot create a mega-menu with the full site editor.

So my current workflow is:

• Save the navigation in a template part
• Add "className":"my-custom-nav" to the wp:navigation part like so:

<!-- wp:navigation {"className":"my-custom-nav", "backgroundColor":"Darkgrey","openSubmenusOnClick":true,"style":{"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","justifyContent":"space-between"}} /-->

• Create my-custom-nav.css and my-custom-nav.js file and enqueue them in the functions.php
• Do all the styling and scripting in my custom css and js files.

This works and I am able to implement my design. The design works for the frontend. But the design doesn't get applied when inside the full site editor. So for me it feels like I am doing it wrong.

My thoughts are:

• Maybe creating a custom block is the correct way for things that you cannot build in the full site editor
• Maybe there is another way that I don't know

So my question is: What is the correct way to implement stuff like that, where the full site editor seems to face it's limits?

本文标签： theme developmentCorrect way of implementing complex navigation in Gutenberg