Page List: Consider adding extra CSS classes to inherit navigation block styles

[jasmussen]

What problem does this address?

The Navigation Block lets you use blocks to create a navigation menu. If instead of inserting manually created menu items — Page Links — you can also insert a Page List block. The Page List is a dynamically generated list of all pages on your site, which means any new pages you publish, or pages you delete, will show up in this block. That is an easy way to automatically keep your navigation in sync, if you like.

However the page list CSS classes differ from those of the Navigation block. That means menu items don't intrinsically inherit the same properties that other navigation menu items do. More importantly, it means it doesn't inherit any global styles properties set (see #31784 or #31878).

It seems there are a few options forward:

1. Rewrite the Page List block from being a server side rendered dynamic block, to being a client block. This would let global styles affect it.
2. Change the existing CSS classes of the Page List to match those of the navigation block.
3. Add additional CSS classes to the Page List block, keeping those it has today, but also having those that the navigation menu has.

From the above, 2 and 3 seem the most pragmatic. Although the Page List block works outside of the navigation block, currently only the navigation block itself leverages the CSS classes output, so 2 seems relatively safe. 3 is an even safer alternative to 2.

---

For reference, here are the Navigation block classes, and corresponding Page List block classes:

Menu item container:

• Page list: .wp-block-pages-list__item
• Menu items: .wp-block-navigation-link

Menu item link:

• Page list: .wp-block-pages-list__item__link
• Menu items: .wp-block-navigation-link__content

Submenu indicator:

• Page list: .wp-block-page-list__submenu-icon
• Menu items: .wp-block-navigation-link__submenu-icon

Submenu container:

• Page list: .submenu-container
• Menu items: .wp-block-navigation-link__container

[jasmussen]

CC: @gwwar @georgeh as I recall recent conversations on this with you.

[jasmussen]

This one has been fixed.