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

Correctly apply current-menu-ancestor class in Nav block #67169

Merged
merged 1 commit into from
Dec 2, 2024

Conversation

getdave
Copy link
Contributor

@getdave getdave commented Nov 20, 2024

What?

Applies the current-menu-ancestor class to the <li> not the <a>

Closes #50069

Why?

Consistency with current-menu-item which is applied to the <li>.

How?

Applies the current-menu-ancestor class to the <li> not the <a>

Testing Instructions

You should be able to test this via Playground using the following link

https://playground.wordpress.net/?gutenberg-pr=67169

Note you can install any publicly available Theme for testing using the format:

https://playground.wordpress.net/?gutenberg-pr=67169&theme={theme-slug-here}

On your WordPress test site you can then...

  • Create Navigation menu
  • Add a Page
  • Add a submenu under that page and add some links.
  • Save
  • View front of site
  • Inspect HTML of top level link
  • See class is on li not a.

Testing Instructions for Keyboard

Screenshots or screencast

@getdave getdave added [Type] Code Quality Issues or PRs that relate to code quality [Block] Navigation Affects the Navigation Block labels Nov 20, 2024
@getdave getdave self-assigned this Nov 20, 2024
@getdave getdave requested a review from ajitbohra as a code owner November 20, 2024 15:27
@getdave
Copy link
Contributor Author

getdave commented Nov 20, 2024

I'm guessing this class isn't applied in the Editor because there is no concept of this there right?

Copy link

github-actions bot commented Nov 20, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: getdave <[email protected]>
Co-authored-by: MaggieCabrera <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: mrwweb <[email protected]>
Co-authored-by: juanfra <[email protected]>
Co-authored-by: draganescu <[email protected]>
Co-authored-by: bph <[email protected]>
Co-authored-by: jordesign <[email protected]>
Co-authored-by: webmandesign <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@MaggieCabrera
Copy link
Contributor

I'm guessing this class isn't applied in the Editor because there is no concept of this there right?

that sounds about right, it would be hard to map

@@ -222,7 +222,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {

if ( strpos( $inner_blocks_html, 'current-menu-item' ) ) {
$tag_processor = new WP_HTML_Tag_Processor( $html );
while ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-navigation-item__content' ) ) ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder how many websites are targeting the "wrong" selector...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure. class is not a first party API though but as we know we need to acknowledge the impact on existing Themes.

How has this been handled in the past? It's not like we can throw an error if someone is using that class.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we just consider the risk and go with it. I can't remember when we've done this recently. Maybe a dev note?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@WordPress/block-themers anyone remember an instance of class changing like this?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See #67134

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I read this right that the .wp-block-navigation-item__content class will be removed by this change, it looks like it's used by a considerable number of themes and a few plugins too.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mrwweb it looks like that class is only used to iterate there and to determine where to place the current-menu-ancestor class. So, this specific change doesn't mean that the wp-block-navigation-item__content class will be removed.

anyone remember an instance of class changing like this?

I don't.

@MaggieCabrera
Copy link
Contributor

I'm ok tentatively approving this if we get some more feedback from themers. If this only affect block themes, I've done a search on a dump I have of block themes in the themes repo and I don't see many themes that would be affected by this change

Copy link
Member

@juanfra juanfra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is testing well for me! I really like that it brings parity with how things work in classic themes.

My fear is also that we don't know how many sites could be targeting the wrong selector. It looks like there's only a handful of themes doing this in the repository, though.

Screenshot 2024-11-22 at 10 27 17

@MaggieCabrera
Copy link
Contributor

This is testing well for me! I really like that it brings parity with how things work in classic themes.

My fear is also that we don't know how many sites could be targeting the wrong selector. It looks like there's only a handful of themes doing this in the repository, though.

Yeah, I haven't been able to find much more than that myself, I think this is a low risk change.

@MaggieCabrera
Copy link
Contributor

Ugh, sorry I misclicked there :(

@getdave getdave added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Nov 22, 2024
@getdave
Copy link
Contributor Author

getdave commented Nov 22, 2024

@bph Would it be worth dropping this in the Outreach channel in Slack for feedback?

@bph
Copy link
Contributor

bph commented Nov 22, 2024

Absolutely! You can also ping the @WordPress/outreach group here on GitHub.

@getdave
Copy link
Contributor Author

getdave commented Nov 27, 2024

I'll leave this open a few more days to allow for further feedback.

Otherwise I think we just need an approving review (with the caveat for the approver that it's agreed that it's not 100% possible to know if this will have some negative side effects).

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem is valid, the code makes sense.

@draganescu
Copy link
Contributor

I approved, although I do wonder about it a bit in terms of removing the class from the anchor, what is wrong with:

  • do not remove the class on the anchor
  • add a new class to the list item current-menu-item-ancestor

Copy link
Contributor

@MaggieCabrera MaggieCabrera left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given how early in the release we are and how little the impact seems to be when inspecting the code for themes in the directory, I think this is good to land as is to get it out and get feedback

@getdave
Copy link
Contributor Author

getdave commented Nov 27, 2024

I approved, although I do wonder about it a bit in terms of removing the class from the anchor, what is wrong with:

  • do not remove the class on the anchor
  • add a new class to the list item current-menu-item-ancestor

I don't think we should double up. It could be very confusing. Either move it or leave it "as is".

@carolinan carolinan requested a review from cbirdsong November 27, 2024 13:28
@getdave
Copy link
Contributor Author

getdave commented Dec 2, 2024

I'm going to merge this one as soon as I can get the PHP unit tests to run correctly.

@juanfra
Copy link
Member

juanfra commented Dec 2, 2024

@getdave I re-ran the failed tests, and they’re all passing now 🚀

@getdave getdave merged commit 6561108 into trunk Dec 2, 2024
127 of 145 checks passed
@getdave getdave deleted the fix/current-menu-ancestor-class-application branch December 2, 2024 16:39
im3dabasia pushed a commit to im3dabasia/gutenberg that referenced this pull request Dec 4, 2024
…Press#67169

Co-authored-by: getdave <[email protected]>
Co-authored-by: MaggieCabrera <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: mrwweb <[email protected]>
Co-authored-by: juanfra <[email protected]>
Co-authored-by: draganescu <[email protected]>
Co-authored-by: bph <[email protected]>
Co-authored-by: jordesign <[email protected]>
Co-authored-by: webmandesign <[email protected]>
michalczaplinski pushed a commit that referenced this pull request Dec 5, 2024
Co-authored-by: getdave <[email protected]>
Co-authored-by: MaggieCabrera <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: mrwweb <[email protected]>
Co-authored-by: juanfra <[email protected]>
Co-authored-by: draganescu <[email protected]>
Co-authored-by: bph <[email protected]>
Co-authored-by: jordesign <[email protected]>
Co-authored-by: webmandesign <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block Needs Dev Note Requires a developer note for a major WordPress release cycle [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navigation block: Current menu item and ancestor class inconsistent application
7 participants