Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jasmussen opened this issue May 17, 2021 · 1 comment
Open

Comments

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented May 17, 2021

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant