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

Image: Fix Lightbox display bug in Classic Themes. #54837

Merged
merged 7 commits into from
Oct 5, 2023

Conversation

michalczaplinski
Copy link
Contributor

@michalczaplinski michalczaplinski commented Sep 26, 2023

Co-authored with @SantosGuillamot

What?

Fixes #54682.

Why?

  1. In Classic Themes, the wp_get_global_styles() call returns the whole array of all styles, instead of an individual string value. An array cannot be interpolated into HTML (on this line):

    <div class="scrim" style="background-color: $background_color"></div>

    so it throws a warning.

  2. The CSS of a theme can include styles for button:hover and button:focus. Since the Lightbox contains a <button> element, we want to reset those styles to avoid the ugly unwanted flashes of content.

How?

  • Adding a wp_is_block_theme() check before getting the value from wp_get_global_styles().
  • Resetting the Image block's CSS on button:hover & button:focus.

Screenshots or screencast

Before

Screen.Recording.2023-09-26.at.18.28.54.mov

After

Screen.Recording.2023-09-26.at.18.29.26.mov

@michalczaplinski michalczaplinski enabled auto-merge (squash) September 26, 2023 17:47
@michalczaplinski michalczaplinski added [Type] Bug An existing feature does not function as intended [Block] Image Affects the Image Block labels Sep 26, 2023
@michalczaplinski
Copy link
Contributor Author

@alexstine I'd appreciate your opinion on the accessibility implications here. It should be fine to override the theme's CSS to avoid the ugly (and presumably unwanted) highlights on hover/focus, but if you know of a better way, let me know!

@github-actions
Copy link

github-actions bot commented Sep 26, 2023

Size Change: +19.2 kB (+1%)

Total Size: 1.64 MB

Filename Size Change
build/block-directory/index.min.js 7.07 kB +15 B (0%)
build/block-editor/index.min.js 218 kB +37 B (0%)
build/block-editor/style-rtl.css 15.6 kB -6 B (0%)
build/block-editor/style.css 15.6 kB -7 B (0%)
build/block-library/blocks/image/style-rtl.css 1.45 kB +27 B (+2%)
build/block-library/blocks/image/style.css 1.44 kB +28 B (+2%)
build/block-library/blocks/image/view.min.js 1.83 kB +2 B (0%)
build/block-library/blocks/navigation-link/style-rtl.css 103 B -12 B (-10%) 👏
build/block-library/blocks/navigation-link/style.css 103 B -12 B (-10%) 👏
build/block-library/blocks/post-featured-image/style-rtl.css 345 B +23 B (+7%) 🔍
build/block-library/blocks/post-featured-image/style.css 345 B +23 B (+7%) 🔍
build/block-library/blocks/post-template/style-rtl.css 409 B +95 B (+30%) 🚨
build/block-library/blocks/post-template/style.css 408 B +94 B (+30%) 🚨
build/block-library/blocks/search/style-rtl.css 613 B +9 B (+1%)
build/block-library/blocks/search/style.css 613 B +9 B (+1%)
build/block-library/index.min.js 207 kB +349 B (0%)
build/block-library/style-rtl.css 14.1 kB +108 B (+1%)
build/block-library/style.css 14.1 kB +103 B (+1%)
build/blocks/index.min.js 51.5 kB +8 B (0%)
build/commands/index.min.js 15.5 kB +6 B (0%)
build/components/index.min.js 248 kB +207 B (0%)
build/components/style-rtl.css 11.9 kB +95 B (+1%)
build/components/style.css 11.9 kB +96 B (+1%)
build/compose/index.min.js 12.7 kB +1 B (0%)
build/core-commands/index.min.js 2.72 kB +101 B (+4%)
build/core-data/index.min.js 70.5 kB +58 B (0%)
build/customize-widgets/index.min.js 12 kB +11 B (0%)
build/data/index.min.js 8.78 kB -84 B (-1%)
build/edit-post/index.min.js 35.6 kB -1 B (0%)
build/edit-post/style-rtl.css 7.89 kB -34 B (0%)
build/edit-post/style.css 7.88 kB -34 B (0%)
build/edit-site/index.min.js 203 kB +17.3 kB (+9%) 🔍
build/edit-site/style-rtl.css 14.1 kB +157 B (+1%)
build/edit-site/style.css 14.1 kB +163 B (+1%)
build/edit-widgets/index.min.js 17 kB +9 B (0%)
build/editor/index.min.js 45.9 kB +38 B (0%)
build/element/index.min.js 4.87 kB +1 B (0%)
build/format-library/index.min.js 7.79 kB +36 B (0%)
build/keyboard-shortcuts/index.min.js 1.76 kB +18 B (+1%)
build/list-reusable-blocks/index.min.js 2.21 kB +11 B (0%)
build/nux/index.min.js 2.01 kB +8 B (0%)
build/patterns/index.min.js 3.57 kB +8 B (0%)
build/plugins/index.min.js 1.81 kB +8 B (0%)
build/preferences/index.min.js 1.26 kB +3 B (0%)
build/react-i18n/index.min.js 631 B +7 B (+1%)
build/reusable-blocks/index.min.js 2.73 kB +9 B (0%)
build/rich-text/index.min.js 10.2 kB +14 B (0%)
build/router/index.min.js 1.79 kB +8 B (0%)
build/server-side-render/index.min.js 1.96 kB +11 B (+1%)
build/viewport/index.min.js 967 B -1 B (0%)
build/widgets/index.min.js 7.18 kB +9 B (0%)
ℹ️ 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/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-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/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/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
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-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.01 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-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-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/style-rtl.css 375 B
build/block-library/blocks/query/style.css 372 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/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.2 kB
build/block-library/editor.css 12.2 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
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/commands/style-rtl.css 947 B
build/commands/style.css 942 B
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/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-widgets/style-rtl.css 4.84 kB
build/edit-widgets/style.css 4.84 kB
build/editor/style-rtl.css 3.58 kB
build/editor/style.css 3.58 kB
build/escape-html/index.min.js 548 B
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/keycodes/index.min.js 1.9 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/style-rtl.css 775 B
build/nux/style.css 771 B
build/patterns/style-rtl.css 325 B
build/patterns/style.css 325 B
build/preferences-persistence/index.min.js 1.85 kB
build/primitives/index.min.js 994 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 972 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/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
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.84 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/warning/index.min.js 259 B
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

@alexstine
Copy link
Contributor

CC: @joedolson

@michalczaplinski michalczaplinski 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 Sep 27, 2023
@t-hamano t-hamano self-requested a review October 2, 2023 16:37
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

I think it's unstable to rely solely on whether it's a block theme or not. Block themes don't necessarily have background and text colors defined in theme.json. For example, if you enable an Emptytheme (with no colors defined in theme.json), the error message persists.

I think the wp_get_global_styles() function returns an array not depending on whether the theme is a block theme or not, but when the key does not exist in the global style.

I think we should check the return value of the wp_get_global_styles() function or use some other function that is more reasonable, but as far as I know of no implementation that references global styles in a core block callback function, so I would like to ping @aaronrobertshaw and @ramonjd for help 🙇

@t-hamano
Copy link
Contributor

t-hamano commented Oct 3, 2023

After doing some research, I think the following code might be better. wp_get_global_styles() is guaranteed to return an array, so the color is determined by the presence or absence of that key. There should be no errors in all themes.

$global_styles        = wp_get_global_styles( array( 'color' ) );
$has_background_color = ! empty( $global_styles['background'] );
$has_text_color       = ! empty( $global_styles['text'] );
$background_color     = esc_attr( $has_background_color ? $global_styles['background'] : '#fff' );
$close_button_color   = esc_attr( $has_text_color ? $global_styles['text'] : '#000' );

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

@t-hamano makes a good point. Not only can block themes not have background and text colors, but we could also have a hybrid theme that uses theme.json.

Would using wp_theme_has_theme_json assist here?

Once we're checking global styles for all themes that might use theme.json, we still need to handle the edge case where background/text colors aren't set as Aki mentioned.

P.S. Could we get some test instructions on the PR description? It might help others jump into reviews here, especially for a11y feedback and people that don't have the luxury of discerning info from videos.

@SantosGuillamot
Copy link
Contributor

Thanks a lot for the feedback. It totally makes sense to me. I just pushed a commit with your suggestions. I hope that's why you had in mind. Feel free to correct me I am wrong 🙂

P.S. Could we get some test instructions on the PR description? It might help others jump into reviews here, especially for a11y feedback and people that don't have the luxury of discerning info from videos.

Regarding this, we should always include proper testing instructions. Thanks for flagging it. I'll leave that to @michalczaplinski as he opened the pull request, but the way I was testing it was:

  1. Include an Image in a page.
  2. Enable the "Expand on click" functionality.

Before this change

  • Using a classic theme, like Twenty Sixteen, the page with the image returns a warning.
  • Using a block theme WITHOUT the background color and text color defined in the theme.json, the page returns the same warning. For that, I installed a block theme and removed the styles.color object manually from the theme.json.

After this change

  • Using a classic theme doesn't return the error, and when expanding the image, it shows default colors (white background and black text).
  • Using a block theme WITHOUT the colors defined doesn't return the error, and when expanding the image, it shows default colors (white background and black text).
  • Using a block theme WITH colors defined shows the colors defined in the theme.json when expanding the image.
  • If I change the colors through the Global Styles, those changes are applied when expanding the image.

Comment on lines 261 to 262
$background_color = esc_attr( ( wp_theme_has_theme_json() && $has_background_color ) ? $global_styles_color['background'] : '#fff' );
$close_button_color = esc_attr( ( wp_theme_has_theme_json() && $has_text_color ) ? $global_styles_color['text'] : '#000' );
Copy link
Member

Choose a reason for hiding this comment

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

Just call wp_theme_has_theme_json() once above to avoid duplicate calls

Copy link
Contributor

Choose a reason for hiding this comment

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

If you don't have a theme.json, I think you shouldn't need to call wp_get_global_styles(). Furthermore, how about an approach like below to run the wp_theme_has_theme_json() function only once?

$background_color   = '#fff';
$close_button_color = '#000';

if ( wp_theme_has_theme_json() ) {
	$global_styles_color = wp_get_global_styles( array( 'color' ) );
	if ( ! empty( $global_styles_color['background'] ) ) {
		$background_color = esc_attr( $global_styles_color['background'] );
	}
	if ( ! empty( $global_styles_color['text'] ) ) {
		$close_button_color = esc_attr( $global_styles_color['text'] );
	}
}

Copy link
Contributor

Choose a reason for hiding this comment

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

It makes sense to me! Thank you 🙂 I just updated the code with your suggestion.

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for the update, @SantosGuillamot!

If the diff I'm checking is the latest, then the five lines here shouldn't be necessary 😄

@artemiomorales
Copy link
Contributor

artemiomorales commented Oct 4, 2023

I've added a couple of style fixes that address issues in a couple of other classic themes as documented in #54940

Note: While the focus ring on the close button should always appear when using a keyboard, we want to omit that style when opening the lightbox with a mouse click.

This generally works as expected, but the focus ring is erroneously showing up in Twenty Twenty One and Twenty Nineteen when using the mouse.

I mention this so we can have it on our radar, but we can likely fix that as part of a separate PR.

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

Thanks for the continued iterations here 👍

As noted earlier there's some unnecessary code we can remove.

With that code removed, I only encountered one issue while testing.

The recent change to the button's inline styles also appears to prevent the $close_button_color from being applied correctly. Reverting the inline style back to fill applies the color on the button's inner SVG. cc/ @artemiomorales

To replicate:

  1. Activate TT4 theme
  2. Appearance > Editor > Styles and select Onyx variant
  3. Save changes
  4. Visit page with image and lightbox and expand
  5. Note the incorrect dark color for the X
Screen.Recording.2023-10-04.at.10.38.49.am.mp4

Tested with the following themes:

  • TT1
  • TT3
  • TT4
  • emptytheme
  • emptyhybrid

@afercia
Copy link
Contributor

afercia commented Oct 4, 2023

Just noting that in #55010 I'm going to add a minimum width and height to the Close button, as the target size is really too small. I guess CSS from themes may impact also the size of the button, which should be at least around 40 by 40 pixels.

@SantosGuillamot
Copy link
Contributor

I totally missed those lines 😅 Thanks for noticing! I just removed them.

The recent change to the button's inline styles also appears to prevent the $close_button_color from being applied correctly.

I confirm I can reproduce it as well. I reverted it back to use fill because it seems to work in both cases: It applies the text color when defined in a block theme, and it works fine in classic themes like Twenty Twenty One.

Let me know if that's correct.

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

Thanks for the continued iterations here @SantosGuillamot 👍

LGTM! Tests as advertised as well.

For posterity, it might be good to tweak the PR description so the "How" section matches the latest approach i.e. checking if the theme has a theme.json file rather than only being a block theme.

@michalczaplinski michalczaplinski merged commit 9ef96c5 into trunk Oct 5, 2023
50 checks passed
@michalczaplinski michalczaplinski deleted the fix/classic-theme-lightbox-bug branch October 5, 2023 08:37
@github-actions github-actions bot added this to the Gutenberg 16.9 milestone Oct 5, 2023
@SantosGuillamot
Copy link
Contributor

Thanks for the review!

For posterity, it might be good to tweak the PR description so the "How" section matches the latest approach i.e. checking if the theme has a theme.json file rather than only being a block theme.

That makes sense 🙂 @michalczaplinski as you opened the PR, could you handle that?

mikachan pushed a commit that referenced this pull request Oct 5, 2023
* If current theme is not a block theme add a default value for $background_color and $close_button_color.

* Set lightbox buttons' background & border to none on hover & focus

* Change logic to support lightbox in classic themes

* Update logic to avoid unnecessary calls

* Add style fixes

* Remove unnecessary code

* Fix close button color

---------

Co-authored-by: Mario Santos <[email protected]>
Co-authored-by: Ricardo Artemio Morales <[email protected]>
@mikachan
Copy link
Member

mikachan commented Oct 5, 2023

I just cherry-picked this PR to the 6.4-beta3 branch to get it included in the next release: ae40d77

@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 Oct 5, 2023
@t-hamano
Copy link
Contributor

t-hamano commented Oct 5, 2023

Thanks for the great work, @SantosGuillamot!

I don't know much about the Lightbox implementation itself, but I believe it used to be called "Behaviours". And similar code that this PR fixes exists here as well.

Is this code also used in Lightbox? If so, you might want to make similar changes in your follow-up PR.

@SantosGuillamot
Copy link
Contributor

SantosGuillamot commented Oct 6, 2023

Is this code also used in Lightbox? If so, you might want to make similar changes in your follow-up PR.

If I am correct, that file is there for backward-compatibility in the Gutenberg plugin. This functionality was previously included as a "behavior" in Gutenberg, so people could have activated that. I believe the plan is to maintain it for 2 releases. Although @michalczaplinski and @artemiomorales will know better than me.

Having said that, it makes sense to me to replicate the logic there as well. Although I believe it is unlikely that there are already users with the functionality enabled and using a classic theme because this wasn't reported before.

I will work on a new pull request for that. Thanks for noticing it 🙂

EDIT: I looked at this I am not sure if behaviors.php file is called at all. It's probably better if @artemiomorales or @michalczaplinski look at it.

karmatosed pushed a commit that referenced this pull request Oct 9, 2023
* Add clearer labels and context to BlockPatternsSyncFilter (#54838)

* Add help text & clearer labeling

* Theme & Plugins

* Font Library: use snake_case instead of camelCase on fontFamilies endpoint param (#54977)

* use snake_case instead of camelCase on endpoint param

* updating test

* Fix output of Navigation block classnames in the editor. (#54992)

* Block Editor: Avoid double-wrapping selectors when transforming the styles (#54981)

* Block Editor: Avoid double-wrapping selectors when transforming the styles
* Include space in the check

* Don't display the navigation section in template parts details when a menu is missing (#54993)

* Scripts: Properly use CommonJS for default Playwright config (#54988)

* Fix path to `globalSetup` in default Playwright config

Oversight from #54856

* `module.exports`

* Fix default export usage

* Add template replace flow to template inspector (#54609)

* Add a modal to allow template switching

* fetch template info

* Allow switching to different patterns

* Allow switching to different patterns

* Add columns

* move availble templates to the actions

* filter for the correct templates

* create the right data structure in the use select

* move to a hook

* inject theme attribute into pattern again

* put the overlay over the top of the dropdown

* fix the pattern to templates hook

* set the template on click

* Also set the blocks

* remove calls to set template with the current template, since setting blocks correctly updates the content in the editor

* serialize blocks so that we have correctly processed template parts

* remove duplicated code

* Remove unnecessary mapping

* refactor

* memoize the patterns

* combine the useSelect

* Update packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js

Co-authored-by: Andrei Draganescu <[email protected]>

* Fix ESLint error

* Only show the button is there is more than 1 pattern

* Copy update

* Move the hook to a subdir

* check that there are patterns

* move the check

* remove useCallback

* change condition to show the button

* change condition

* move to use editEntityRecord

* combine filters

* add comments

* Update packages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js

Co-authored-by: Andrei Draganescu <[email protected]>

---------

Co-authored-by: Andrei Draganescu <[email protected]>
Co-authored-by: Andrei Draganescu <[email protected]>
Co-authored-by: George Mamadashvili <[email protected]>

* List View: Fix performance issue when selecting all blocks (#54900)

* List View: Fix performance issue when selecting all blocks within the editor canvas in long posts

* Add a comment, rename const

* Move block focus to be performed only once at the root of the list view, instead of within each block

* Fix left and right aligmnent in children of Post Template (#54997)

* Fix left and right aligmnent in children of Post Template

* Add align center styles

* Fix image placeholder disappearing

* Site Editor: Avoid stale navigation block values when parsing entity record (#54996)

* Removed unwanted space from the string (#54654)

* Update styles.js

Removed unwanted space with translation

* Update deleted-navigation-warning.js

Unwanted space at the end of the string shows translation warning.

* Update inspector-controls.js

Unwanted space at the end of the string shows translation warning

* Fix Deleted Navigation Menu warning string (#55033)

* [Inserter]: Fix reset of registered media categories (#55012)

* [Inserter]: Fix reset of registered media categories

* convert `useInserterMediaCategories` to selector and make private

* Try fixing the flaky 'Toolbar roving tabindex' e2e test (#54785)

* Try fixing the flaky 'Toolbar roving tabindex' e2e test
* Add a link in the comment

* Fallback to Twitter provider when embedding X URLs (#54876)

* Fallback to Twitter provider when embedding X URLs

* Avoid processing empty urls when trying a different provider

* Update `react-native-editor` changelog
# Conflicts:
#	packages/react-native-editor/CHANGELOG.md

* Based on the efforts in #51761, remove caps case from Template Part and prefer sentence case. As all instances of this string are stand alone, it's okay to have Template capitalized as it's the start of a sentence. (#54709)

* Update pattern import menu item (#54782)

* Update pattern import menuitem

* Revert label

* Image Block: Fix browser console error when clicking "Expand on Click" (#54938)

* Patterns: Remove category description in inserter panel? (#54894)

* Media & Text: Fix React warning (#55038)

* Block Style: Display default style labels correctly in the block sidebar (#55008)

* Site Editor: Do not display 'trashed' navigation menus in Sidebar (#55072)

* Site Editor: Do not display 'trashed' navigation menus in Sidebar

* Extract selector into a hook

Co-authored-by: Aaron Robertshaw <[email protected]>

---------

Co-authored-by: Aaron Robertshaw <[email protected]>

* Image: Fix Lightbox display bug in Classic Themes. (#54837)

* If current theme is not a block theme add a default value for $background_color and $close_button_color.

* Set lightbox buttons' background & border to none on hover & focus

* Change logic to support lightbox in classic themes

* Update logic to avoid unnecessary calls

* Add style fixes

* Remove unnecessary code

* Fix close button color

---------

Co-authored-by: Mario Santos <[email protected]>
Co-authored-by: Ricardo Artemio Morales <[email protected]>

* Latest Posts: add screen reader title text to Read more links and use alternative to excerpt_more filter (#55029)

* In the editor: adds a screen reader text span with the post title in the i18n interpolator
In the frontend: removes excerpt_more filter so we don't override themes and also replaces the default ellipsis with an accessible read more link

* Removing "of" preposition in favour of a semi-colon.
"Read more" is already translated so using a specifier to add it to the string

* Fix Image block lightbox missing alt attribute and improve accessibility (#55010)

* Move lightbox open button after the image.

* Fix getting the lightbox image alt attribute.

* Improve docblocks.

* Do not render empty role attribute.

* Remove unnecessary aria-hidden attribute.

* Set aria-modal attribute dynamically.

* More meaningful and simpler modal dialog aria-label.

* Increase Close button target size.

* Add enlarged image base64 encoded placeholder.

* Better check for alt attribute as a string.

* Update changelog.

* Move changelog entry to the block library changelog.

* Set lightbox dialog aria-label dynamically.

* Hide background scrim container from assistive technology.

* Remove obsolete code

---------

Co-authored-by: Ricardo Artemio Morales <[email protected]>
# Conflicts:
#	packages/block-library/CHANGELOG.md

* Patterns: Add category selector to pattern creation modal (#55024)



---------

Co-authored-by: Kai Hao <[email protected]>

* Iframe: Fix positioning when dragging over an iframe (#55150)

* Site Editor: Fix template part area listing when a template has no edits (#55115)

* Alternative: Fix template part area listing when a template has no edits
* Fix typos

---------

Co-authored-by: Rich Tabor <[email protected]>
Co-authored-by: Matias Benedetto <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: George Mamadashvili <[email protected]>
Co-authored-by: Pascal Birchler <[email protected]>
Co-authored-by: Ben Dwyer <[email protected]>
Co-authored-by: Andrei Draganescu <[email protected]>
Co-authored-by: Andrei Draganescu <[email protected]>
Co-authored-by: Andrew Serong <[email protected]>
Co-authored-by: mujuonly <[email protected]>
Co-authored-by: Dave Smith <[email protected]>
Co-authored-by: Nik Tsekouras <[email protected]>
Co-authored-by: Carlos Garcia <[email protected]>
Co-authored-by: Ramon <[email protected]>
Co-authored-by: James Koster <[email protected]>
Co-authored-by: Aki Hamano <[email protected]>
Co-authored-by: Aaron Robertshaw <[email protected]>
Co-authored-by: Michal <[email protected]>
Co-authored-by: Mario Santos <[email protected]>
Co-authored-by: Ricardo Artemio Morales <[email protected]>
Co-authored-by: Andrea Fercia <[email protected]>
Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Kai Hao <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Image Affects the Image Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

New Lightbox with display bug in Classic Themes
9 participants