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 block: Revise lightbox UI to remove 'behaviors' #53851

Merged
merged 20 commits into from
Sep 15, 2023

Conversation

artemiomorales
Copy link
Contributor

@artemiomorales artemiomorales commented Aug 21, 2023

What?

Now that the concept of behaviors is no longer shipping in the near term, this PR removes it from the theme.json, the Global Styles and the Image block attributes.

Why?

We want to provide a lightbox feature and get feedback on its implementation, but we also want to do so in a way that's minimal and easy to understand. Addresses #53403

How?

Removing all the references to behaviors.

Note regarding backwards compatibility: We've added backwards compatibility in the following PR, which is meant to be merged at the same time as this one so there's no gap in support for users using the old syntax we're removing in this PR.

Testing Instructions

  1. Open a post or page.
  2. Insert an Image block.
  3. Make sure that no "Behaviors" panel is preset inside of the "Advanced" panel of the Inspector Controls.
  4. Save the post/page
  5. Go to the frontend
  6. Make sure that the page loads correctly and there is no Lightbox present.

@github-actions
Copy link

github-actions bot commented Aug 21, 2023

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/class-wp-rest-global-styles-controller-gutenberg.php
❔ lib/class-wp-theme-json-gutenberg.php
❔ lib/compat/wordpress-6.4/class-gutenberg-rest-global-styles-revisions-controller-6-4.php
❔ lib/load.php
❔ lib/theme.json
❔ phpunit/class-gutenberg-rest-global-styles-revisions-controller-test.php
❔ phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php

@github-actions
Copy link

github-actions bot commented Aug 21, 2023

Size Change: +91.9 kB (+6%) 🔍

Total Size: 1.62 MB

Filename Size Change
build/block-editor/index.min.js 217 kB +50 B (0%)
build/block-editor/style-rtl.css 15.4 kB +338 B (+2%)
build/block-editor/style.css 15.4 kB +336 B (+2%)
build/block-library/blocks/query/editor-rtl.css 486 B +8 B (+2%)
build/block-library/blocks/query/editor.css 486 B +9 B (+2%)
build/block-library/blocks/query/style-rtl.css 375 B +5 B (+1%)
build/block-library/blocks/query/style.css 372 B +4 B (+1%)
build/block-library/editor-rtl.css 12.2 kB +6 B (0%)
build/block-library/editor.css 12.1 kB +5 B (0%)
build/block-library/index.min.js 205 kB +155 B (0%)
build/components/index.min.js 255 kB +501 B (0%)
build/core-data/index.min.js 17 kB +202 B (+1%)
build/edit-post/index.min.js 35.5 kB +20 B (0%)
build/edit-site/index.min.js 181 kB +89 kB (+97%) 🆘
build/edit-site/style-rtl.css 13.8 kB +307 B (+2%)
build/edit-site/style.css 13.8 kB +307 B (+2%)
build/editor/index.min.js 45.6 kB +43 B (0%)
build/patterns/index.min.js 3.24 kB +543 B (+20%) 🚨
build/patterns/style-rtl.css 302 B +62 B (+26%) 🚨
build/patterns/style.css 302 B +62 B (+26%) 🚨
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.28 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/index.min.js 7.01 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.25 kB
build/block-editor/content.css 4.24 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 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 126 B
build/block-library/blocks/audio/theme.css 126 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 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 629 B
build/block-library/blocks/button/style.css 628 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.69 kB
build/block-library/blocks/cover/style.css 1.68 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 126 B
build/block-library/blocks/embed/theme.css 126 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 318 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 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 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 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 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.42 kB
build/block-library/blocks/image/style.css 1.41 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view-interactivity.min.js 1.83 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 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 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.23 kB
build/block-library/blocks/navigation/style.css 2.22 kB
build/block-library/blocks/navigation/view.min.js 984 B
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 319 B
build/block-library/blocks/post-featured-image/style.css 319 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 314 B
build/block-library/blocks/post-template/style.css 314 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 302 B
build/block-library/blocks/query-pagination/style.css 299 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/view.min.js 555 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 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 607 B
build/block-library/blocks/search/style.css 607 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 468 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 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 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.44 kB
build/block-library/blocks/social-links/style.css 1.43 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 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 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 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 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
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/style-rtl.css 13.9 kB
build/block-library/style.css 13.9 kB
build/block-library/theme-rtl.css 688 B
build/block-library/theme.css 693 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.4 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 921 B
build/commands/style.css 918 B
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.7 kB
build/core-commands/index.min.js 2.6 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.48 kB
build/customize-widgets/style.css 1.48 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.84 kB
build/date/index.min.js 17.8 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.64 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/style-rtl.css 7.84 kB
build/edit-post/style.css 7.83 kB
build/edit-widgets/index.min.js 16.9 kB
build/edit-widgets/style-rtl.css 4.8 kB
build/edit-widgets/style.css 4.79 kB
build/editor/style-rtl.css 3.53 kB
build/editor/style.css 3.52 kB
build/element/index.min.js 4.82 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.71 kB
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/index.min.js 11.3 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.72 kB
build/keycodes/index.min.js 1.87 kB
build/list-reusable-blocks/index.min.js 2.2 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 1.99 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/plugins/index.min.js 1.79 kB
build/preferences-persistence/index.min.js 1.84 kB
build/preferences/index.min.js 1.24 kB
build/primitives/index.min.js 943 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 958 B
build/react-i18n/index.min.js 615 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.7 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.2 kB
build/router/index.min.js 1.78 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 1.97 kB
build/sync/index.min.js 53.8 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.73 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 958 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.16 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

artemiomorales and others added 2 commits August 21, 2023 12:59
Simplified the `__experimentalUseGlobalBehaviors` function by removing the 'source' parameter. Now, the function directly uses 'userConfig' for getting raw data and 'mergedConfig' for variable value.
@michalczaplinski
Copy link
Contributor

I've pushed some last changes. There are a couple of things that are not working and we need final decision on how to structure the options. I've explained the changes here:

packages/block-library/src/image/index.php Show resolved Hide resolved
packages/block-library/src/image/index.php Show resolved Hide resolved
packages/block-library/src/image/index.php Show resolved Hide resolved
test/e2e/specs/editor/blocks/image.spec.js Show resolved Hide resolved
test/e2e/specs/editor/blocks/image.spec.js Show resolved Hide resolved
@@ -1117,108 +1019,6 @@ test.describe( 'Image - interactivity', () => {
).not.toBeInViewport();
} );

test.describe( 'Animation Select visibility', () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Removing this test as well, because there is no "animation selector" anymore. The Lightbox only has the "zoom" effect (animation) - it's the only one.

@michalczaplinski michalczaplinski added the [Feature] Interactivity API API to add frontend interactivity to blocks. label Aug 30, 2023
@WordPress WordPress deleted a comment from github-actions bot Aug 30, 2023
Comment on lines -3 to -12
"behaviors": {
"blocks": {
"core/image": {
"lightbox": {
"enabled": false,
"animation": ""
}
}
}
},
Copy link
Contributor

Choose a reason for hiding this comment

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

Can this just be removed or does it need a deprecation of some sort? Behaviors were shipped in GB 16.4 so never included in a WP release.

cc @ellatrix @gziolo @youknowriad

Copy link
Member

Choose a reason for hiding this comment

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

@artemiomorales and I looked at whether this is used in production, and it looks like you can change that setting in the UI, which most likely gets reflected in what gets saved in the database. While it isn't mandatory for WordPress core, it would still be nice to provide a migration path for sites that have the latest Gutenberg plugin enabled. It shouldn't be that difficult to code something in the plugin to read behaviors object from the site and transfer the value to the new structure.

I guess the same applies to the block attribute that changes from behaviors.lightbox to lightbox in the Image block.

Copy link
Member

Choose a reason for hiding this comment

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

I'm not fully caught up on what's next for behaviors, but it seems that themes will no longer be able to tweak the lightbox feature (enable/disable, set animation) after this removal.

If we still plan to allow them to tweak it, just in a different place, we could add some code around this line to make the migration easier for them. I'll be AFK in the next few days, but wanted to share in case it's useful.

Copy link
Contributor

Choose a reason for hiding this comment

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

In the followup PR: #54071 we've added backwards-compatibility for users that might have been using the previous behaviors.lightbox syntax.

In that PR (which is based on the current one) we're also now introducing a lightbox.allowEditing setting which allows themes to enable/disable the lightbox.

@ramonjd
Copy link
Member

ramonjd commented Sep 7, 2023

I've taken this PR for a spin, and checked the global styles/revisions rest API changes and associated tests. From that perspective, it looks good to me.

On the backwards compatibility subject - I've heard it more than once that the plugin itself supports the previous two versions only, when those changes do not impact on Core.

Here's that noted in a comment: #47475 (comment)

But I can't yet find anything official. I think it's because there is nothing official.

Was this published as an experimental API? The use of __experimental suggest yes. Will it affect anyone who updates to the latest WordPress version? Probably not, right? These are some things we could ask ourselves in two versions' time.

I guess we should be always wary when it's a public API. It was a topic discussed at the WordPress community summit this year. See: https://make.wordpress.org/summit/2023/08/23/community-summit-discussion-notes-addressing-backwards-compatibility-in-gutenberg/

Related issue:

@michalczaplinski
Copy link
Contributor

Thanks a lot for the review, Ramon!

Was this published as an experimental API? The use of __experimental suggest yes.
The API itself can be considered experimental, but since it's exposed in the UI, there's not really a way for users to know if what they are enabling is experimental or not. It was not explicitly described as "experimental" in the UI.

It was never shipped in Core, though, so I guess deprecation is the way to go!

Just to let you know, there is a follow-up PR to this one: #54071
There, we add the updated version of the Lightbox (without behaviors).

@github-actions
Copy link

github-actions bot commented Sep 7, 2023

Flaky tests detected in 91b86ef.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6145160023
📝 Reported issues:

Copy link
Member

@ramonjd ramonjd 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 the state of this PR is good, thanks for sticking with it.

If @gziolo or @ajlende don't have any further concerns, then it LGTM.

I understand this needs to be merged before #54071, so I suppose we could address follow up concerns in that PR?

@ajlende
Copy link
Contributor

ajlende commented Sep 8, 2023

I tested with the following block content and theme.json modification.

<!-- wp:heading -->
<h2 class="wp-block-heading">Global</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":68,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://wp.local/wp-content/uploads/2023/02/27982606245_0a702a9b26_o-1024x576.jpg" alt="" class="wp-image-68"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Block</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":68,"sizeSlug":"large","linkDestination":"none","behaviors":{"lightbox":{"enabled":true,"animation":"fade"}}} -->
<figure class="wp-block-image size-large"><img src="http://wp.local/wp-content/uploads/2023/02/27982606245_0a702a9b26_o-1024x576.jpg" alt="" class="wp-image-68"/></figure>
<!-- /wp:image -->
{
	// ...
	"behaviors": {
		"blocks": {
			"core/image": {
				"lightbox": {
					"enabled": true
				}
			}
		}
	},
	// ...
}

This is what I see.

Before After
behaviors-deprecation-lightbox-before behaviors-deprecation-lightbox-after
behaviors-deprecation-lightbox-global-before behaviors-deprecation-lightbox-global-after
behaviors-deprecation-lightbox-block-before behaviors-deprecation-lightbox-block-after

As per this comment, it looks like we can handle the migration in a separate PR later, right?

@artemiomorales The lightbox support wasn't hidden behind an experimental flag or anything in the UI, so folks using the plugin who have been using lightbox will see this as breaking their site if you don't have the migration. So I would recommend getting the migration handled before merging this PR so we can be sure they make it into the same GB release.

We'll be offering backwards compatibility for 2 Gutenberg releases. As this PR is already pretty big, I think it makes sense to just push this forward and handle the deprecation separately.

As this PR is right now, there is no backwards compatibility. The functionality has simply been removed.

We have systems for migrating both block attributes and global styles settings that should be used.

For block attributes, you just need to migrate the attributes to their new location with a block deprecation. Since the block supports code is removed, you'll have to replace the supports in the block deprecations with the behaviors attribute in attributes. Then you can use the isEligible method to trigger the migration.

For global styles (theme.json), we also have a migration system in class-wp-theme-json-schema.php. You can write a migration function to move the setting where you wish.

The block supports part is the only part where you'll need to properly add a deprecation. That can be done simply by adding a _deprecated_function() call to the functions and removing only the block support registration.

Any public function you want to remove can't be deleted if you're providing backwards compatibility. Instead, you add one of our deprecated functions that will print a warning. Then in two versions, the function can finally be removed.

michalczaplinski and others added 5 commits September 11, 2023 11:27
* Add initial implementation of image settings panel

* Remove unnecessary code and fix reset functionality

* Add UI to image block inspector

* Add `lightbox` to the valid `theme.json` settings

* Fix a bug with image selector and integrate with global styles

* Update `theme.json` schema

* Added the `@since`annotation

* Refactor image settings panel and screen block

Simplified the ImageSettingsPanel and ScreenBlock components. More specific changes:
 - Removed `name` and `settings` from the ImageSettingsPanel
 - Use `userSettings` instead of `settings` in the ImageSettingsPanel
 - Modified `onChangeLightbox` logic, it now takes a new setting instead of a boolean and directly passes to `onChange`
 - Updated the ScreenBlock component to account for this refactor

* Add showUI option to lightbox settings

A new option has been added to the lightbox settings in the Theme JSON reference guide and Gutenberg class. This `showUI` option allows users to toggle whether the Lightbox UI is displayed in the block editor or not. Also, updated the JSON schema accordingly to reflect these changes in theme.json files.

* Add defaults for the `lightbox` to the GB `theme.json`

* Change the falsy checks in image.js

* Add filters; add legacy support for behaviors syntax

I moved the logic to determine whether the lightbox should display
or not to two render_block_data filters.

One of these filters is inside of the index.php
so that itc can exist in WP core, the other inside of blocks.php
in order to offer legacy support for the Behaviors syntax in
the Gutenberg plugin.

Using the render_block_data instead of render_block allows us to
store a 'lightboxEnabled' value on the block, which we can use to
determine whether the lightbox should be rendered in these two
separate locations relatively cleanly without needing to touch
the markup.

I added behaviors back to the valid top-level keys so that we can
read it to offer legacy support.

Lastly, I set the lightbox.enabled attribute to NULL by default
so that we can determine whether the Behaviors syntax should override
it or not.

* Fix linter errors & add more expansive comments.

* If no value is set for the lightbox in the Global Styles, then the block editor UI should inherit the value from `theme.json`.

Likewise, if no value is set in the block attributes, the block editor UI should inherit the value from the Global Styles of the Image.

* Rename `showUI` to `allowEditing`

* Fix the `theme.json` schema

* Use the globalPath for the settings on the PHP side

* Add backwards support for enabling fade animation via the legacy syntax

* Fix PHP linter errors

* Fix error when checking lightbox['enabled'] value in global settings

* Empty commit

* Remove the default `false` value for `lightbox.enabled`attribute.

* Add deprecation notice for 'behaviors' in image block

I needed to add 'behaviors' back to the block.json attributes
in order to read them on the JavaScript side in the editor
to fire the deprecation notice.

* Add deprecation for  attribute in image block

* Remove obsolete code now that block deprecation is in place

* Add support for 'lightbox: true' syntax

* Fix lightbox 'checked' attribute being read improperly

* Add conditional display for settings panel at image block level

* Fix an error with the theme.json schema.

* Update docs with `npm run build:docs`

* Copy `class-wp-theme-json-schema.php` from core
 into `class-wp-theme-json-schema-gutenberg.php`

* Add a theme.json migration to v3 away from behaviors and to a new, simpler syntax used by the lightbox.

* Remove the `null` value from lightbox.enabled in `lib/theme.json`

* Remove `behaviors` from VALID_TOP_LEVEL_KEYS & VALID_SETTINGS

* Revise backwards compatibility for behaviors; add deprecation to block_supports

* Remove outdated comment

* Update outdated comment

* Update comment and shuffle the lines so the diff is easier on the eyes.

* Update comment to explain why we use userSettings in image-settings-panel.js

* Remove support for legacy fade configuration

* Resolve lint error

* Add clarifying comment regarding lightbox markup

* Rename the migrate function to reflect that it's not a v3 migration

* Add a `@since` in `gutenberg_should_render_lightbox` docblock

* Add support for reading top-level 'lightbox' setting in editor

By default, we read the lightbox settings underneath the 'core/image'
in theme.json; however, the 'enabled' property there is undefined by default,
which means it should be possible to declare a top-level setting for the lightbox
that overrides an undefined block-level setting.

While this appeared to be working on the PHP side, the UI wasn't accurately
reflecting this inheritance structure, so this commit fixes that.

Users should now be able to define a top-level lightbox setting as either
'lightbox: true' or 'lightbox: { enabled: true }' that will be used
if the block-level lightbox setting for 'enabled' is undefined.

* Revert "Add support for reading top-level 'lightbox' setting in editor"

This reverts commit 2f5f122.

* Add correct deprecation mentioning the Gutenberg version

* Move 'allowEditing' to top-level settings

* Fix top-level lightbox setting not being read properly

* Fix 'false' values in theme.json not being stored in settings object

* Fix error wherein 'undefined' was being passed to input component

* Fix bug wherein lightbox UI would disappear if user value was set

* Remove inheritance when determining whether to enable lightbox

Rather than trying to check if the 'enabled' has been set or not
and falling back to other levels of the theme.json inheritance
structure, I decided to just read and use the settings as defined
in theme.json. This is the expected behavior in Gutenberg from
what I understand and has less edge cases.

* Update comment

* Update whitespace in theme.json

Co-authored-by: Alex Lende <[email protected]>

* Add docblocks to clarify that `class-wp-theme-json-schema-gutenberg.php` is only put in GB as a temporary migration.

* Add comments to clarify that behaviors.php is temporarily added to GB an will be removed in a future version.

* Added integration fixtures for the lightbox

* Fix incorrect reading of global lightbox settings

* Clarify the comment getting the global lightbox settings

* Fix PHPCS parenthesis error 🤦‍♂️

* Move lightbox settings to the block level

* Remove support for shorthand

* Remove 'lightbox' from hooks.js and add `.enabled` & `.allowEditing` to class-wp-theme-json-gutenberg.php

---------

Co-authored-by: Michal Czaplinski <[email protected]>
Co-authored-by: Alex Lende <[email protected]>
@michalczaplinski
Copy link
Contributor

The backwards compatibility concerns have been addressed in #54509 👍

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 [Feature] Interactivity API API to add frontend interactivity to blocks. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Image block: Revise Lightbox UI to remove reference to Behaviors
6 participants