Skip to content

Page List: missing current-menu-item (and others) classes #29422

@jasmussen

Description

@jasmussen

Description

The new "Page List" block which you can insert in the Navigtion block to have page menus stay in sync with content created, is missing CSS classes for current pages or page ancestors.

Step-by-step reproduction instructions

The easiest way to see CSS classes traditionally applied to menu items, is to use a non-block based theme, such as Twenty Twenty One.

Create a menu in the menu screen, with submenu items.

  • Navigate to a page in menu. Observe that it has CSS classes such as these: menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-451 current_page_item menu-item-1172
  • Navigate to a subpage in a menu. Observe it has classes such as these: menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-1171

Expected behaviour

Similar CSS classes, or at least a subset, would be nice to have for the Page List block, so that active menu items can be styled. Here in TwentyTwentyOne, the "Home" item is the current page:

Screenshot 2021-03-01 at 10 12 10

Probably a subset of CSS classes would make for an excellent start, and then additional classes could be added as necessary. For a current page item, probably current-menu-item would be plenty, and for a menu item that has a subpage active, current-menu-ancestor would be great.

Metadata

Metadata

Assignees

Labels

[Block] NavigationAffects the Navigation Block[Block] Page ListAffects the Page List Block[Status] In ProgressTracking issues with work in progress[Type] TaskIssues or PRs that have been broken down into an individual action to take

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions