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

Query Loop block: Reuse existing screen-reader-text CSS class for the enhanced pagination aria-live region #55309

Merged
merged 1 commit into from
Oct 17, 2023

Conversation

afercia
Copy link
Contributor

@afercia afercia commented Oct 12, 2023

Fixes #55303

What?

  • The CSS class for the enhanced pagination aria-live region uses a ruleset that is meant to be equivalent to the screen-reader-text CSS class. However, the ruleset is not the one recommended by the Accessibility handbook and actually used in core. It is an old version.
  • It should likely reuse the screen-reader-text CSS 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-text CSS class from the block library common CSS.

Testing Instructions

  • Add q Query Loop block and make sure the actual query produces enough results to have pagination.
  • Enable 'Enhanced pagination' in the settings panel.
  • Add a pagination block.
  • Publish and view the front end.
  • Use the pagination links to navigate to another paginated page.
  • Inspect the source and find the element with CSS class wp-block-query__enhanced-pagination-navigation-announce.
  • Observe the element does have a second CSS class screen-reader-text.
  • Check the CSS ruleset to visually hide the element comes from the screen-reader-text CSS class in the block library common.css.
  • Check the element is actually visually hidden on the page.

Testing Instructions for Keyboard

Screenshots or screencast

@afercia
Copy link
Contributor Author

afercia commented Oct 12, 2023

I'm not familir with the CSS handling of the blocks. I'm assuming the block library common.css is always enqueued on the front end.

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 afercia added [Type] Bug An existing feature does not function as intended [Type] Performance Related to performance efforts [Block] Query Loop Affects the Query Loop Block labels Oct 12, 2023
@github-actions
Copy link

Size Change: -127 B (0%)

Total Size: 1.65 MB

Filename Size Change
build/block-library/blocks/query/style-rtl.css 312 B -63 B (-17%) 👏
build/block-library/blocks/query/style.css 308 B -64 B (-17%) 👏
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 964 B
build/annotations/index.min.js 2.71 kB
build/api-fetch/index.min.js 2.29 kB
build/autop/index.min.js 2.11 kB
build/blob/index.min.js 461 B
build/block-directory/index.min.js 7.07 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.28 kB
build/block-editor/content.css 4.27 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/index.min.js 218 kB
build/block-editor/style-rtl.css 15.6 kB
build/block-editor/style.css 15.6 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 138 B
build/block-library/blocks/audio/theme.css 138 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 633 B
build/block-library/blocks/button/style.css 632 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 311 B
build/block-library/blocks/file/style.css 312 B
build/block-library/blocks/file/view.min.js 321 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 228 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 343 B
build/block-library/blocks/form-submission-notification/editor.css 342 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 452 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 957 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 340 B
build/block-library/blocks/html/editor.css 341 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 1.48 kB
build/block-library/blocks/image/style.css 1.47 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.93 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 671 B
build/block-library/blocks/navigation-link/editor.css 672 B
build/block-library/blocks/navigation-link/style-rtl.css 103 B
build/block-library/blocks/navigation-link/style.css 103 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view.min.js 1.02 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 401 B
build/block-library/blocks/page-list/editor.css 401 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 345 B
build/block-library/blocks/post-featured-image/style.css 345 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 409 B
build/block-library/blocks/post-template/style.css 408 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/view.min.js 609 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 613 B
build/block-library/blocks/search/style.css 613 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 471 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 329 B
build/block-library/blocks/shortcode/editor.css 329 B
build/block-library/blocks/site-logo/editor-rtl.css 760 B
build/block-library/blocks/site-logo/editor.css 760 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.45 kB
build/block-library/blocks/social-links/style.css 1.45 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 432 B
build/block-library/blocks/table/editor.css 432 B
build/block-library/blocks/table/style-rtl.css 646 B
build/block-library/blocks/table/style.css 645 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 191 B
build/block-library/blocks/video/style.css 191 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.4 kB
build/block-library/editor.css 12.4 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 211 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.4 kB
build/block-library/style.css 14.4 kB
build/block-library/theme-rtl.css 700 B
build/block-library/theme.css 705 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.5 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 947 B
build/commands/style.css 942 B
build/components/index.min.js 249 kB
build/components/style-rtl.css 11.9 kB
build/components/style.css 11.9 kB
build/compose/index.min.js 12.7 kB
build/core-commands/index.min.js 2.72 kB
build/core-data/index.min.js 70.8 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.51 kB
build/customize-widgets/style.css 1.5 kB
build/data-controls/index.min.js 651 B
build/data/index.min.js 8.78 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 462 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.68 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 35.6 kB
build/edit-post/style-rtl.css 7.88 kB
build/edit-post/style.css 7.88 kB
build/edit-site/index.min.js 204 kB
build/edit-site/style-rtl.css 14.2 kB
build/edit-site/style.css 14.2 kB
build/edit-widgets/index.min.js 17 kB
build/edit-widgets/style-rtl.css 4.84 kB
build/edit-widgets/style.css 4.84 kB
build/editor/index.min.js 45.9 kB
build/editor/style-rtl.css 3.58 kB
build/editor/style.css 3.58 kB
build/element/index.min.js 4.87 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.8 kB
build/format-library/style-rtl.css 577 B
build/format-library/style.css 577 B
build/hooks/index.min.js 1.57 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.61 kB
build/interactivity/index.min.js 11.4 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.76 kB
build/keycodes/index.min.js 1.9 kB
build/list-reusable-blocks/index.min.js 2.21 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.92 kB
build/notices/index.min.js 964 B
build/nux/index.min.js 2.01 kB
build/nux/style-rtl.css 775 B
build/nux/style.css 771 B
build/patterns/index.min.js 4.04 kB
build/patterns/style-rtl.css 518 B
build/patterns/style.css 517 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 1.85 kB
build/preferences/index.min.js 1.26 kB
build/primitives/index.min.js 994 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 982 B
build/react-i18n/index.min.js 631 B
build/react-refresh-entry/index.min.js 9.46 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.71 kB
build/reusable-blocks/index.min.js 2.73 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 10.2 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 1.98 kB
build/token-list/index.min.js 587 B
build/url/index.min.js 3.83 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 967 B
build/warning/index.min.js 259 B
build/widgets/index.min.js 7.18 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

Copy link
Member

@aristath aristath left a comment

Choose a reason for hiding this comment

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

I can confirm that styles for the .screen-reader-text class always get loaded. They are a part of the common.scss file in

.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: $gray-300;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}

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 👍

@afercia afercia removed the [Type] Performance Related to performance efforts label Oct 17, 2023
Copy link
Member

@luisherranz luisherranz left a comment

Choose a reason for hiding this comment

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

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"
Copy link
Member

Choose a reason for hiding this comment

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

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.

@afercia
Copy link
Contributor Author

afercia commented Oct 17, 2023

@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 [Type] Bug and the [Type] Performance labels. It seems legitimate that a performance issue can be an actual bug.

@afercia afercia merged commit 46603dc into trunk Oct 17, 2023
52 of 59 checks passed
@afercia afercia deleted the fix/enhanced-pagination-visually-hidden-css-ruleset branch October 17, 2023 10:41
@github-actions github-actions bot added this to the Gutenberg 16.9 milestone Oct 17, 2023
@mikachan mikachan added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 1, 2023
@mikachan
Copy link
Member

mikachan commented Nov 1, 2023

I just cherry-picked this PR to the 6.4-rc3-2 branch to get it included in the next release: 4eadbff

@mikachan mikachan removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 1, 2023
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 <[email protected]>

* Reuse existing screen-reader-text CSS class. (#55309)

---------

Co-authored-by: Artemio Morales <[email protected]>
Co-authored-by: Peter Wilson <[email protected]>
Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Luis Herranz <[email protected]>
Co-authored-by: David Arenas <[email protected]>
Co-authored-by: Andrea Fercia <[email protected]>
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
Labels
[Block] Query Loop Affects the Query Loop Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Query Loop block: use correct CSS to visually hide the 'enhanced' paginstion aria-live region
4 participants