Post navigation link: Add an option to only display arrows #49055
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
|
Size Change: +93 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
carolinan
added
[Block] Navigation
carolinan
requested review from
ajitbohra,
ryanwelcher,
juanmaguitar and
fabiankaegy
as code owners
|
Thanks for working on this :) We can probably use the solution over in #49266 as well. The interaction of all the controls as-is feels a bit fragile, so I think this could use a little design exploration. Happy to take a look next week if nobody else gets there first. |
|
I noodled on this a bit today and came to the conclusion that these blocks would likely work best if they followed in the footsteps of things like Social Icons and became contextual containers. Inside a container like "Next post link" you'd be able to insert things like an icon, a label (which could be plain text or the post title), featured image, and re-order to create the layout you need. Without that the options feel quite nebulous and restrictive – even basic operations like putting the icon before the label are currently impossible. Having said all that, I know we won't get there any time soon, and that shouldn't stop us incrementally improving what we have now. So to satisfy the original issue, instead of adding more options, what if an empty label was allowed to render that way, rather than falling back to a placeholder? I think that would be fairly intuitive. The trade-off is that an empty label + no icon = invisible block, but I don't think that's a huge problem... it seems very unlikely that folks would intentionally create such a setup. If it does become an issue then we can look at how we handle empty states for other blocks for a solution. What do you think? |
|
Yes I could try something with the placeholder: But because this feature should be updated in all pagination related blocks, maybe it is better to wait? |
|
Personally I think it'd be nice to improve the current experience – forcing folks to use a label is kind of restrictive in terms of design. Aligning all the pagination blocks (within a post, within an archive, comments, more?) is a bigger task and probably needs more dedicated design exploration. |
|
This is the post navigation the next and previous post in single templates -not the query pagination. |
|
Maybe I misunderstood what you were suggesting we wait for? Another short-term solution here could be to present the different configurations in a dropdown, and then expose the resulting options below:
The Query / Comment Pagination blocks would be the same, except they wouldn't need the variations that include the post title. |
|
I suggest waiting for a not-short-term design and starting with the query pagination instead of the post navigation link. |
|
Oh, I think it would be nice to do something short-term is bandwidth allows. Purely because it will enable a missing feature: displaying the links as icons alone. |
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 an option to hide the link text and only display the next and previous arrow icons.
The option uses a new block attribute, and is disabled by default.
Part of #48443
Why?
To give users and theme developers more design options.
How?
When an arrow is selected, it displays a toggle with the text "Display arrow without text".
Enabling this hides the text, places the icon inside the link, and also disables the "Display the title as a link" option.
On the front, "Next" and "Previous" are used as aria-labels to make sure there is a link text.
Testing Instructions
Make sure that your WordPress installation has enough posts to navigate back and forward.
You can add the post navigation links directly in the posts, or, activate a block theme and add the
next and previous links to the single template.
To test the new setting, add the block and select either of the arrow icons.
When the icon is selected, confirm that you see a new toggle option with the text "Display arrow without text" below it.
Enable the option.
Confirm that the placeholder text disappears and only the icon shows.
The icon is clickable, but clicking on it should not open the target in the editor.
Save and view the block on the front. Confirm that only the icon shows, and that it is clickable and leads to the correct post.
Next, continue to test the other block options to test for any regressions.
Also test the color options. Even with the icon only option enabled, the block has
display:blockand the background color covers a much larger area than just the icon. There is room for improvement here.Testing Instructions for Keyboard
Place the block in either editor.
Navigate to the block settings sidebar.
Navigate past the variation selector and select the Settings tab (this tab is selected by default).
Navigate past the "Display the title as a link" option.
In the Arrow radio group option, select chevron or arrow.
Tab forwards to the next option "Display arrow without text", and check the box.
Please navigate back to the editor and select the block.
With the block selected, pressing the down arrow key or right arrow key should select the link.
If you are using a screen reader, the icon should be announced followed by the context: next or previous.
Save and go to the front. Locate the block.
If you are using a screen reader, the link should have the link text Next or Previous.
Screenshots or screencast
post-navigation-link-icon.mp4