Query Loop block: Reuse existing screen-reader-text CSS class for the enhanced pagination aria-live region #55309
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
|
I'm not familir with the CSS handling of the blocks. I'm assuming the block library I do see other blocks that use the screen-reader-text-CSS class, for example: archives, categories, latest posts. As such I'm assuming this change is safe but I'd appreciate some feedback from contributors who are more familiar with the CSS engine. |
afercia
added
[Type] Bug
|
Size Change: -127 B (0%) Total Size: 1.65 MB
ℹ️ View Unchanged
|
aristath
approved these changes
Oct 17, 2023
There was a problem hiding this comment.
I can confirm that styles for the .screen-reader-text class always get loaded. They are a part of the common.scss file in
gutenberg/packages/block-library/src/common.scss
Lines 76 to 105 in eed2781
That file gets enqueued in block themes separately, and in classic themes it's a part of the
styles.scss file which gets loaded as well.
This change makes perfect sense to me, and looks good 👍
luisherranz
approved these changes
Oct 17, 2023
There was a problem hiding this comment.
If @aristath confirms that the class is always loaded, it's also fine to me 🙂👍
| @@ -48,7 +48,7 @@ function render_block_core_query( $attributes, $content, $block ) { | |||
| $content = substr_replace( | |||
| $content, | |||
| '<div | |||
| class="wp-block-query__enhanced-pagination-navigation-announce" | |||
| class="wp-block-query__enhanced-pagination-navigation-announce screen-reader-text" | |||
There was a problem hiding this comment.
Let's also remove this class, which is unnecessary now.
Suggested change
| class="wp-block-query__enhanced-pagination-navigation-announce screen-reader-text" | |
| class="screen-reader-text" |
If someone needs it, we'll add it back.
|
@priethor Just a quick note that this PR is one more case where forcing a single Type label sees to not be ideal. I would have liked to set both the |
afercia
deleted the
fix/enhanced-pagination-visually-hidden-css-ruleset
branch
This was referenced Oct 18, 2023
mikachan
added
the
Backport to WP Beta/RC
|
I just cherry-picked this PR to the 6.4-rc3-2 branch to get it included in the next release: 4eadbff |
mikachan
pushed a commit
that referenced
this pull request
Nov 1, 2023
mikachan
removed
the
Backport to WP Beta/RC
mikachan
added a commit
that referenced
this pull request
Nov 1, 2023
* Update label for lightbox editor UI (#55724) * Update label for lightbox editor UI * Change lightbox label in Global Styles * Require queryId for enhanced pagination. (#55720) * Change pattern category taxonomy public param to false (#55748) * Query block enhanced pagination: Detect inner plugin blocks during render (#55714) * Flag inner plugin blocks inside query loop * Improve PHP logic a little * Only disallow plugin blocks and post content * Get rid of global variables * Fix returned content from render callback * Handle composed query stacks * Disable navigation on the browser * Replace `count` with `empty` * Add PHPdocs and improve var naming * Lint PHP * Clarify docs a little * Move the disable check before preventDefault * Restore previous navigate logic * Set filter priorities back to 10 * Basic inspector warnings * Make render query filter static * Add stable modal logic * Switch back to ToggleControl * Auto remove filter when query stack is empty * Add first unit tests * Switch to inverse control * Add test case for nested queries * Prevent passing `null` to the Tag Processr * Get rid of explicit auto mode and notices * Test directives in the Pagination Previous block * Minor typos and improvements * Improve modal texts * Fix WPCS * Reorder teardowns * Reset the dirty flag after it's used * Prevent usage of post content block --------- Co-authored-by: David Arenas <david.arenas@automattic.com> * Reuse existing screen-reader-text CSS class. (#55309) --------- Co-authored-by: Artemio Morales <artemio.morales@a8c.com> Co-authored-by: Peter Wilson <519727+peterwilsoncc@users.noreply.github.com> Co-authored-by: Glen Davies <glendaviesnz@users.noreply.github.com> Co-authored-by: Luis Herranz <luisherranz@gmail.com> Co-authored-by: David Arenas <david.arenas@automattic.com> Co-authored-by: Andrea Fercia <a.fercia@gmail.com>
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Nov 1, 2023
This second update for RC3 includes the following fixes: * [WordPress/gutenberg#55724 Update label for lightbox editor UI] - string change. * [WordPress/gutenberg#55720 Query: Require queryId for enhanced pagination to prevent PHP notices] and warnings. * [WordPress/gutenberg#55714 Query block enhanced pagination: Detect inner plugin blocks during render] - which avoids turning off enhanced pagination in TT4, includes string changes. * [WordPress/gutenberg#55309 Query Loop block: Reuse existing screen-reader-text CSS class for the enhanced pagination aria-live region]. Follow up to [57034], [56987], [56961], [56849], [56818], [56816]. Props afercia, aristath, artemiosans, czapla, darerodz, glendaviesnz, hellofromTonya, jameskoster, joen, luisherranz, mikachan, ocean90, peterwilsoncc, ramonopoly, rajinsharwar, swissspidy. Fixes #59411. Built from https://develop.svn.wordpress.org/trunk@57048 git-svn-id: http://core.svn.wordpress.org/trunk@56559 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
Nov 1, 2023
This second update for RC3 includes the following fixes: * [WordPress/gutenberg#55724 Update label for lightbox editor UI] - string change. * [WordPress/gutenberg#55720 Query: Require queryId for enhanced pagination to prevent PHP notices] and warnings. * [WordPress/gutenberg#55714 Query block enhanced pagination: Detect inner plugin blocks during render] - which avoids turning off enhanced pagination in TT4, includes string changes. * [WordPress/gutenberg#55309 Query Loop block: Reuse existing screen-reader-text CSS class for the enhanced pagination aria-live region]. Follow up to [57034], [56987], [56961], [56849], [56818], [56816]. Props afercia, aristath, artemiosans, czapla, darerodz, glendaviesnz, hellofromTonya, jameskoster, joen, luisherranz, mikachan, ocean90, peterwilsoncc, ramonopoly, rajinsharwar, swissspidy. Fixes #59411. Built from https://develop.svn.wordpress.org/trunk@57048 git-svn-id: https://core.svn.wordpress.org/trunk@56559 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Nov 1, 2023
This second update for RC3 includes the following fixes: * [WordPress/gutenberg#55724 Update label for lightbox editor UI] - string change. * [WordPress/gutenberg#55720 Query: Require queryId for enhanced pagination to prevent PHP notices] and warnings. * [WordPress/gutenberg#55714 Query block enhanced pagination: Detect inner plugin blocks during render] - which avoids turning off enhanced pagination in TT4, includes string changes. * [WordPress/gutenberg#55309 Query Loop block: Reuse existing screen-reader-text CSS class for the enhanced pagination aria-live region]. Follow up to [57034], [56987], [56961], [56849], [56818], [56816]. Reviewed by davidbaumwald , jorbin. Merges [57048] to the 6.4 branch. Props afercia, aristath, artemiosans, czapla, darerodz, glendaviesnz, hellofromTonya, jameskoster, joen, luisherranz, mikachan, ocean90, peterwilsoncc, ramonopoly, rajinsharwar, swissspidy. Fixes #59411. git-svn-id: https://develop.svn.wordpress.org/branches/6.4@57049 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Nov 1, 2023
This second update for RC3 includes the following fixes: * [WordPress/gutenberg#55724 Update label for lightbox editor UI] - string change. * [WordPress/gutenberg#55720 Query: Require queryId for enhanced pagination to prevent PHP notices] and warnings. * [WordPress/gutenberg#55714 Query block enhanced pagination: Detect inner plugin blocks during render] - which avoids turning off enhanced pagination in TT4, includes string changes. * [WordPress/gutenberg#55309 Query Loop block: Reuse existing screen-reader-text CSS class for the enhanced pagination aria-live region]. Follow up to [57034], [56987], [56961], [56849], [56818], [56816]. Reviewed by davidbaumwald , jorbin. Merges [57048] to the 6.4 branch. Props afercia, aristath, artemiosans, czapla, darerodz, glendaviesnz, hellofromTonya, jameskoster, joen, luisherranz, mikachan, ocean90, peterwilsoncc, ramonopoly, rajinsharwar, swissspidy. Fixes #59411. Built from https://develop.svn.wordpress.org/branches/6.4@57049 git-svn-id: http://core.svn.wordpress.org/branches/6.4@56560 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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.
Fixes #55303
What?
screen-reader-textCSS class already provided by the block library common CSS.Why?
We should always use the recommended, WordPress standard, CSS ruleset for visually hidden content.
We should not use redundant unnecessary CSS.
How?
Removes the custom unnecessary ruleset and reuses the
screen-reader-textCSS class from the block library common CSS.Testing Instructions
wp-block-query__enhanced-pagination-navigation-announce.screen-reader-text.screen-reader-textCSS class in the block librarycommon.css.Testing Instructions for Keyboard
Screenshots or screencast