Adequate documentation for menus and for the built-in navigation menu block is difficult to find. FSE does start to clarify what was always difficult, but requires us to better understand what menus are and how to display them.
A [static] menu, I think, is just a hierarchy of links to other things (blocks, pages, posts, media, or external links to another web site.) Once you have built a menu, you can display it with the built-in navigation menu block or using any of the menu plugins out there (Bellows Accordion Menu for a sidebar menu, any of the mega menu options for a large header menu, etc.) The menu and the tool you use to display it are separate items. My problem is that I haven’t figured out where one ends and the other begins; I have edited a menu in one place and had the changes fail to show up on another, even though both navigation blocks are in theory accessing the same menu. So clearly there is something I still don’t understand here.
(Note: There is another approach to menus, exemplified by Advanced Content Sidebars. These are very nice but not the subject of this post.)
In pre-FSE themes, there was a “menu” option under “Appearance”, and that is where you constructed your menus. In Twenty Twenty-two you have to use the tools provided by the Site Editor to construct your menu where you want it to exist (often in a template part, a header or footer. You should also be able to make a template part out of just a navigation menu block and then include it in other template parts.)
References
As usual, the useful references are third-party, and also as usual, they are hard to find. WordPress.org outsources documentation, just as it outsources much else (to plugins, for example.)
Working with Menus in the WordPress Full Site Editing
Mastering The New WordPress Menu System and Gutenberg Navigation Block
Creating a new menu
For example, starting with a blank menu doesn’t seem to be an option. So if you want to create a new one, here is what, apparently, you are supposed to do:
- Create a new page. Give it a title, insert a navigation block. Save the page (probably saving a draft would do.)
- Be sure the “list view” is open on the left. Select the navigation block.
- In the block settings panel on the right (it’s under the gear symbol if you haven’t opened it; select the “Block” tab), go down to the Menu subheading and click on “manage menus”. This will take you off your working page temporarily, so you will lose your work unless you save it first.
- Click on “Add new”, give it a name, and “publish”. That’s basically all you can do on this administrative panel. There’s an “edit” option but it is worth zilch. Use “quick edit” if you want to rename it.
- Navigate back to the post or page you were working on, which if nothing else does have the navigation block on it.
- Now when you look at the block settings and click on the down arrow in the box just under the Menu subheading, your new menu is an option. I’ve called mine “Just for Practice”. Choose that one.
Since it’s empty, all that shows is a window with a “+” sign on it or maybe an instruction to “Add link”. Clicking on the “+” or “Add link” brings up a box where you can locate a page or post on your site to start your menu. I picked the page “Site Developer Notes”. (Start typing “Site” or “Develop” in the box provided and it will come up so that you can click on it. You can access both Pages and Posts this way, including MyCalendar events which apparently are considered Posts, not a custom post type.) But you could paste/type in an external link too.
Now if you look over at the list view, there is a Page Link block within the navigation block.
Add blocks to your menu by clicking on the plus sign that comes up when you select the navigation menu in the List View. Change the link text (without changing the underlying text) in one of two ways: Just highlight it and type what you want it to say. (You can also select it, click on the chain link icon in the menu menu bar, then click on the pencil, which gives you a chance to change the text.) To add a submenu, select a link already in the menu, then click the submenu link that is in about the middle of the block menu bar. Then you can add links below.
Select the existing Page Link block just to see what the options are there. Many of them are fictitious, as far as I have been able to determine. You can indeed turn it into a button. I have no idea what the link settings do. You can try to change the typography but I’m not sure that sticks. (Looks one way in edit mode and another way when you actually view the page. Garbage!!) Set the padding to zero if you want no spaces between your blocks.
Editing an existing menu
Let’s see if I can edit one I already tried to create. Choose Another Header Menu after inserting a navigation block below:
OK, In this case I was able to edit the label on the Membership and Dues button to read, instead, “Join or Renew”. And I was able to reorder the buttons using the list view. So far, so good.
Failing to find the “Home Link” button that somehow I found once before, I added that one. In the end, I duplicated the first button, then edited the first one, clicking on the “link” option which allowed me to modify both link and text. So that too was a useful exercise.
Now I would like to put this menu underneath the cover picture in the cover block on the FCLIR Header. And here is where I run into the usual WP crap. I want it to be right under the cover image, no space. I want it to take up the same width as the page content, which is basically 1140 px, I believe. (It will switch to an icon if screen gets narrower. Why is this so hard??
- Why can’t I style the navigation block at all? For example, why can’t I use smaller buttons and smaller fonts? Seriously, do I have to get a plugin for everything, even an ordinary navigation menu?
- In fact, I’m having trouble giving it more than the narrower width, about 460 px. It insists on wrapping (or iconifying, if that’s a word.)