New block: Post navigation #57664
New block: Post navigation #57664
Conversation
carolinan
added
New Block
|
This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress. If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged. If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack. Thank you! ❤️ View changed files❔ lib/blocks.php |
|
Size Change: +413 B (+0.02%) Total Size: 1.81 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in bc66ed4. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9867942148
|
carolinan
requested review from
spacedmonkey,
ajitbohra,
ryanwelcher,
juanmaguitar,
fabiankaegy and
ndiego
as code owners
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Hey @carolinan 👋 Would it be possible to have this be a pattern that consists of a row block with the tag name set to I'm not sure a custom block is the right answer for the valid issue you point out :) |
|
The reason for that is in the linked issue. |
|
I would still prefer for this to be a block, but how does one even add a new core pattern? Are they added by issues and PR's to the pattern directory repository? |
carolinan
added
the
[Focus] Accessibility (a11y)
There are a mixture of ways at the moment. There are some in the They're registered here: The majority are registered from the pattern directory, those that are 'featured' or have the 'core' keyword: These patterns are only loaded when I'm not sure what the preference is for adding new bundled patterns. This one seems more like a useful utility pattern rather than the more stylistic patterns in the directory, so maybe the first way? edit: also just to mentioned that if you wanted to experiment with adding the pattern in the gutenberg plugin to start with, it should be possible to add code similar to how those core patterns are loaded in a |
|
I still disagree that this should be a pattern and not a block. It is an accessibility issue that the individual blocks are added without the nav element. It would be good to document how to add a new pattern. |
Sounds like a good argument for it being a block. Group doesn't support If you go with the blocks approach, could it be worth also making the |
|
Edit: Actually there are of course situations where this will only show one link: when there are no previous or no next posts, so ignore the comment above. But should we remove the ability to only insert one of them? |
Are you saying that when there's only one link, there shouldn't be a wrapping If so, would being able to insert those blocks alone solve that issue? I think the templated blocks for pagination will be the same, whether at the the start, middle, or end of pagination. The blocks themselves would require some conditional logic on what to display. |
|
No, I am saying ignore the comment about not using nav when it only contains one link :) |
So is having a |
|
It might be valid HTML, but no, because both links are part of the same navigation. |
Add parent block to post-navigation-link, and remove the template lock to allow deleting the inner block.
|
I made the following changes:
The behavior of the post navigation block when all inner blocks are deleted matches the button and columns block:
It would be good to solve the empty tag on the front for all these blocks. |
|
Question, do I need to create a Trac ticket for the changes to the list of registered blocks in lib/blocks.php? "// This file was autogenerated by tools/release/sync-stable-blocks.js, do not change manually! |
|
And for @beafialho, the reason I pinged you was because I am wondering wether this change offers enough flexibility for designers to position the next and previous post links. |
|
Thank you for the ping @carolinan! Just tried this and it seems like an improvement that makes sense overall. When I click the "Post Navigation" block, I am only seeing the typography settings in the styles panel. My suggestion is that this block has the same settings that are available for the row block (where we usually add both "Next" and "Previous" links), as this allows for more granular design customization. Here's a screen recording of that I mean: rowvspostnav.mp4I also suggest that we make it possible to add the "Next" and "Previous"links if one desires to, outside of the Post Navigation block. Is this helpful? cc: for your input as well @richtabor @henriqueiamarino |
|
I am with @beafialho here. Having the same settings from the row block will certainly enhance customization and add consistency. In the future, this should be extended to all navigation elements and pagination, which is similar. For instance, why not add these options to the Post Navigation? 
|
The icon option is already on the individual inner blocks. |
|
Yes this feedback is helpful, thank you.
I am unsure about min height and shadow? It does feel strange that the inner post navigation link blocks do not have padding and margin settings. |
|
I'm not really fond of the idea of a new block and maybe the strongest argument would be discoverability of a pattern that would do that. A thing that resonated with me is that is indeed quite similar to Query Pagination, so it could justify the wrapper block(if we eliminate the pattern approach). Having said that, if we go with this approach, should we consider moving some controls like the |
|
I would need some help with how to move the icon options:
|
Yeah, in that case it doesn't make sense to move controls to the parent. |
What?
Closes #55157
The purpose of adding this new block is to:
Why?
<nav>element.How?
Adds a new block called Post Navigation.
The block adds a
<nav>element and inserts two post navigation link blocks as inner blocks.One of the inner blocks is of the "previous" block variation.
The block supports adding an aria label. The user can add a "navigation name" in the Advanced panel.
The block also supports color and typography options.
Note on accessibility
While using a nav element is an improvement, this block is still not as accessible as the post navigation function that is available for classic themes, because it does not have a visually hidden heading inside the nav element, above the links.
the_post_navigation
get_the_post_navigation
navigation markup
Testing Instructions
Activate a block theme.
The post navigation block can be tested using a single post, or the single post template.
Add the block.
Confirm that:
Testing Instructions for Screen readers
Activate a block theme.
The post navigation block can be tested using a single post, or the single post template.
Add the block.
Save and go to the front of the website.
Navigate to where you placed the block.
Confirm that the first of the two links are announced as part of a navigation, and that the aria label is announced.
If you did not change the aria label in the blocks Advanced panel, the default label is "Posts".
Screenshots or screencast