Home link block: Add 'current-menu-item' #51478
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
carolinan
added
[Block] Home Link
alexstine
reviewed
Jun 23, 2023
There was a problem hiding this comment.
@carolinan One question below. Also, checks are in a weird state. Needs refresh?
|
Flaky tests detected in 4eb1a23. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5517782322
|
aristath
approved these changes
Jul 19, 2023
There was a problem hiding this comment.
I don't know how we missed this when initially adding the current-menu-item classes...
Good catch @carolinan, thank you for working on this!
Approving this one, it's good to merge 👍
|
Thank you both. This is so great to see! 👏 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Adds the CSS class 'current-menu-item' to the home link block.
Testing instructions were updated June 26.
Closes #34770
Why?
Adding the class makes the block easier to style. The class is already used in the page list block and the navigation link block, and this change makes it easier to style the current menu items consistently.
How?
Adds the CSS class, conditionally, to the
<li>item in the block's index.php file.Testing Instructions
Add a navigation block to a site-wide header template part. The important thing is that the menu item can be tested on the correct page to trigger the condition and add the CSS class.
Inside the navigation block, insert the Home link block.
View the homepage on the front of the website.
Confirm that the Home link block has the CSS class
current-menu-itemon the li element:<li class="wp-block-navigation-item current-menu-item wp-block-home-link">Open any link on the site that is not the homepage, and confirm that the Home menu item no longer has the
current-menu-itemclass.There are two edge cases, and that is when the user adds the assigned "posts page" and or the homepage from the Reading settings to the navigation block, besides the home link block. In this case, the class name as well as the aria-current attribute, will be duplicated.
I think this needs to be considered a user error, adding the same link more than once.