Page List: Consider adding extra CSS classes to inherit navigation block styles #31879
Comments
This was referenced May 17, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
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:
.wp-block-pages-list__item
.wp-block-navigation-link
Menu item link:
.wp-block-pages-list__item__link
.wp-block-navigation-link__content
Submenu indicator:
.wp-block-page-list__submenu-icon
.wp-block-navigation-link__submenu-icon
Submenu container:
.submenu-container
.wp-block-navigation-link__container
The text was updated successfully, but these errors were encountered: