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

Media & Text: Switch default alignment to none #48404

Merged
merged 10 commits into from
Mar 16, 2023

Conversation

aaronrobertshaw
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw commented Feb 24, 2023

Fixes: #20941

Related:

What?

Switches the default align attribute value to none instead of wide for the Media & Text block.

Why?

Makes the block's default alignment align (pun intended) with user expectations.

See discussion in: #20941

How?

  • Updates the default value for the block's align attribute to none
  • Adds a deprecation to set the align attribute for deprecated block's which would have previously defaulted to wide
  • Updates the main block fixture to cover the latest version of the block
  • Adds a block fixture to cover the new deprecation
  • Regenerated the remaining block fixtures so their parsed and serialized results are migrated to the latest version

Deprecation Breakdown

Why can we use a deprecation to change the default alignment for this block?

The prior default wide value for the align attribute resulted in the alignwide class being serialized within the saved block markup. When the align attribute is updated to default to none, no class is included in the markup. This makes the block's saved markup invalid and triggers the deprecation to run. The deprecation will run its migrate function to explicitly set the old block's align value to wide.

The isEligible check in the new deprecation will ensure only blocks relying on the default attribute value get migrated.

What about individual blocks of the previous version that explicitly set their align attribute?

If a block of the previous version relied on the default align value, its saved markup would be invalid thus triggering a deprecation whereas if the block set an explicit align value, any class saved in the markup would be correct and so the saved markup would still be valid and no migration of the align attribute required.

Why do all prior versions of the block also need to update their align attribute?

Each deprecation is responsible for bringing its version of the block up to the latest. As a result, prior versions must keep their original attribute definitions but still migrate attributes up to the latest. So as all prior versions of the block had the default wide alignment, if any of those deprecated blocks relied on that default, we need to explicitly set the align attribute to wide so that that alignment is maintained.

What has changed with the block fixtures?

  • We have a new fixture specifically to cover the new deprecation.
  • The main deprecation was updated to match the none default alignment.
  • The fixtures for prior deprecations keep their original markup and all should result in the latest version’s markup.

Testing Instructions

TBA

Should be something like:

  1. Create a post and add a Media & Text block to it
  2. Save the post
  3. Checkout this PR and build
  4. Reload the editor
  5. Confirm the block appears the same i.e. has wide alignment
  6. Refresh the frontend to confirm the block is wide aligned there as well
  7. Back in the editor, add a new Media & Text block
  8. Confirm it was added without the wide alignment by default

Screenshots or screencast

TBA

@aaronrobertshaw aaronrobertshaw added [Type] Enhancement A suggestion for improvement. [Block] Media & Text Affects the Media & Text Block labels Feb 24, 2023
@aaronrobertshaw aaronrobertshaw changed the title [WIP] Media & Text: Default alignment to none [WIP] Media & Text: Switch default alignment to none Feb 24, 2023
@github-actions
Copy link

github-actions bot commented Feb 24, 2023

Size Change: +231 B (0%)

Total Size: 1.34 MB

Filename Size Change
build/block-editor/index.min.js 197 kB +54 B (0%)
build/block-library/index.min.js 201 kB +201 B (0%)
build/components/index.min.js 208 kB -112 B (0%)
build/edit-site/index.min.js 65 kB +14 B (0%)
build/edit-site/style-rtl.css 10.2 kB +37 B (0%)
build/edit-site/style.css 10.2 kB +37 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 483 B
build/block-directory/index.min.js 7.2 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.11 kB
build/block-editor/content.css 4.1 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/style-rtl.css 14.4 kB
build/block-editor/style.css 14.4 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 91 B
build/block-library/blocks/avatar/style.css 91 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 628 B
build/block-library/blocks/button/style.css 627 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 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 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 406 B
build/block-library/blocks/columns/style.css 406 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 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.6 kB
build/block-library/blocks/cover/style.css 1.59 kB
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 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 265 B
build/block-library/blocks/file/style.css 265 B
build/block-library/blocks/file/view.min.js 353 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 984 B
build/block-library/blocks/gallery/editor.css 988 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 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 830 B
build/block-library/blocks/image/editor.css 829 B
build/block-library/blocks/image/style-rtl.css 652 B
build/block-library/blocks/image/style.css 652 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 507 B
build/block-library/blocks/media-text/style.css 505 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 716 B
build/block-library/blocks/navigation-link/editor.css 715 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 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 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 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 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 501 B
build/block-library/blocks/post-comments-form/style.css 501 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 134 B
build/block-library/blocks/post-excerpt/style.css 134 B
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 322 B
build/block-library/blocks/post-featured-image/style.css 322 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 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 282 B
build/block-library/blocks/post-template/style.css 282 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-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 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 326 B
build/block-library/blocks/pullquote/style.css 325 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 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 463 B
build/block-library/blocks/query/editor.css 463 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 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 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 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 489 B
build/block-library/blocks/site-logo/editor.css 489 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 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 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 651 B
build/block-library/blocks/table/style.css 650 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 404 B
build/block-library/blocks/template-part/editor.css 404 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/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 179 B
build/block-library/blocks/video/style.css 179 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 11.6 kB
build/block-library/editor.css 11.6 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.7 kB
build/block-library/style.css 12.7 kB
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 51 kB
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.4 kB
build/core-data/index.min.js 16.3 kB
build/customize-widgets/index.min.js 12.2 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 8.58 kB
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.72 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 34.8 kB
build/edit-post/style-rtl.css 7.55 kB
build/edit-post/style.css 7.54 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.56 kB
build/edit-widgets/style.css 4.56 kB
build/editor/index.min.js 45.8 kB
build/editor/style-rtl.css 3.54 kB
build/editor/style.css 3.53 kB
build/element/index.min.js 4.95 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.26 kB
build/format-library/style-rtl.css 557 B
build/format-library/style.css 556 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.94 kB
build/list-reusable-blocks/index.min.js 2.14 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.99 kB
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.95 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 937 B
build/react-i18n/index.min.js 702 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 11 kB
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.53 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.74 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 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.3 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@github-actions
Copy link

github-actions bot commented Feb 24, 2023

Flaky tests detected in e7d1fb7.
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/4423248120
📝 Reported issues:

Copy link
Contributor

@carolinan carolinan left a comment

Choose a reason for hiding this comment

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

I have followed the testing instructions, and the PR works well.
I added blocks with each alignment and a placeholder (no media selected); they all show correctly when the plugin is re-activted.
New blocks use the content width, none.

Thank you for adding the additional context to deprecated.js.

@aaronrobertshaw
Copy link
Contributor Author

Thanks, for giving this a run @carolinan 👍

Given @talldan raised that this has been attempted for other blocks in the past and there were some hurdles in doing so, I'll seek some extra approvals here to give us the best chance to surface any unforeseen problems before we merge.

@aaronrobertshaw aaronrobertshaw marked this pull request as ready for review February 27, 2023 08:23
@aaronrobertshaw aaronrobertshaw changed the title [WIP] Media & Text: Switch default alignment to none Media & Text: Switch default alignment to none Feb 27, 2023
@aaronrobertshaw aaronrobertshaw force-pushed the update/default-media-text-align-to-none branch from 04b0844 to b099540 Compare February 27, 2023 08:35
@aaronrobertshaw
Copy link
Contributor Author

Rebased to see if that fixes the failing mobile e2e test as it looks unrelated.

@talldan
Copy link
Contributor

talldan commented Feb 28, 2023

It works well in testing, I wasn't able to spot any issues.

TBH, I have a hard time understanding how it works! I've always found isElligible and migrate difficult to follow, so more of an explainer about what's happening would be great.

@aaronrobertshaw
Copy link
Contributor Author

It works well in testing, I wasn't able to spot any issues.

Thanks for testing 🙇

TBH, I have a hard time understanding how it works! I've always found isElligible and migrate difficult to follow, so more of an explainer about what's happening would be great.

I feel the same way every time I have to touch deprecations. I'll go through this PR tomorrow and give a self-review explaining what I can.

Copy link
Contributor Author

@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.

I've updated the PR description to hopefully better explain the deprecation in this PR. There are also now some inline comments.

Let me know if I've got any of the logic wrong.

Comment on lines +34 to +46
const v6ImageFillStyles = ( url, focalPoint ) => {
return url
? {
backgroundImage: `url(${ url })`,
backgroundPosition: focalPoint
? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
focalPoint.y * 100
) }%`
: `50% 50%`,
}
: {};
};

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The imageFillStyles function was changed for the previous version, we need to use that same calculation here to keep the styles as they were for the v6 saved markup.

Comment on lines +69 to +79
const migrateDefaultAlign = ( attributes ) => {
if ( attributes.align ) {
return attributes;
}

return {
...attributes,
align: 'wide',
};
};

Copy link
Contributor Author

Choose a reason for hiding this comment

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

A separate helper is used here so it can be composed with other attribute migrations for older deprecations. It will only update the align attribute if not already set.

Comment on lines +164 to +197
const v6Attributes = {
...v4ToV5BlockAttributes,
mediaAlt: {
type: 'string',
source: 'attribute',
selector: 'figure img',
attribute: 'alt',
default: '',
__experimentalRole: 'content',
},
mediaId: {
type: 'number',
__experimentalRole: 'content',
},
mediaUrl: {
type: 'string',
source: 'attribute',
selector: 'figure video,figure img',
attribute: 'src',
__experimentalRole: 'content',
},
href: {
type: 'string',
source: 'attribute',
selector: 'figure a',
attribute: 'href',
__experimentalRole: 'content',
},
mediaType: {
type: 'string',
__experimentalRole: 'content',
},
};

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Since the last version of the Media & Text block, we've introduced __experimentalRole properties for several attributes. The new v6Attributes object was created to keep these attributes exactly as they were at the time of the deprecation.

Comment on lines +208 to +235
const v6Supports = {
...v4ToV5Supports,
color: {
gradients: true,
link: true,
__experimentalDefaultControls: {
background: true,
text: true,
},
},
spacing: {
margin: true,
padding: true,
},
typography: {
fontSize: true,
lineHeight: true,
__experimentalFontFamily: true,
__experimentalFontWeight: true,
__experimentalFontStyle: true,
__experimentalTextTransform: true,
__experimentalTextDecoration: true,
__experimentalLetterSpacing: true,
__experimentalDefaultControls: {
fontSize: true,
},
},
};
Copy link
Contributor Author

Choose a reason for hiding this comment

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

New block supports were added since the last deprecation so those must be included here or we'd lose those block support styles when migrating the block.

</div>
);
},
migrate: migrateDefaultAlign,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

If the results of this deprecation match the block's saved content, we need to update the block's align attribute.

packages/block-library/src/media-text/deprecated.js Outdated Show resolved Hide resolved
@@ -348,8 +560,11 @@ const v4 = {
</div>
);
},
migrate: migrateDefaultAlign,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

As each deprecation needs to bring the block up to the latest version we need to migrate the default alignment here too. The same goes for all the other existing deprecations. If they already migrate attributes, their migration function is composed with migrateDefaultAlign.

@@ -1,5 +1,5 @@
<!-- wp:media-text {"mediaType":"image"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile">
<div class="wp-block-media-text is-stacked-on-mobile">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

For the primary block fixture, I've removed the alignwide class as that was the default for the previous version. The current source HTML matches the current version of the block. A separate deprecation has been added to cover the deprecation of the default wide alignment.

@@ -1,4 +1,4 @@
<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":"0.56","y":"0.57"}} -->
<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":"0.56","y":"0.57"}} -->
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is the result of the latest deprecation. The existing deprecation fixtures relied on the default wide alignment. Now it is not the default, align is set explicitly to wide and therefore stored in the block comment delimiter.

@@ -1,4 +1,4 @@
<!-- wp:media-text {"align":"none","mediaType":"image"} -->
<!-- wp:media-text {"mediaType":"image"} -->
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Now none is the default alignment, it will not be serialized into the block's comment delimiter.

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

This is testing really well for me, all the fixtures look correct, and the logic in the deprecations sounds solid to me. Thanks for all the extra comments explaining how it all works!

Is the final question figuring out what to do about the v6 deprecation and already migrated markup?

packages/block-library/src/media-text/deprecated.js Outdated Show resolved Hide resolved
@aaronrobertshaw
Copy link
Contributor Author

Thank you for taking the time to review and test this one @andrewserong 👍

Is the final question figuring out what to do about the v6 deprecation and already migrated markup?

Yes, new blocks added at the latest version or already migrated ones will "re-migrate" at the moment due to not fully being able to determine if the deprecation is eligible.

Looking into the block parser and the deprecation flow, only the raw attributes parsed from the block content are passed to the isEligible function. Because the alignwide class gets extracted from the markup later on by the custom CSS class name support, it isn't available in those raw attributes. If it was, we'd be able to accurately restrict the latest deprecation.

@andrewserong
Copy link
Contributor

If it was, we'd be able to accurately restrict the latest deprecation.

Hrm, what an interesting problem. And it doesn't appear that we can copy the logic from the fixCustomClassname function, because we don't currently have access to the block markup in this function either?

Would it be worth opening a separate smaller PR to propose updating the API / function signature for isEligible in apply-deprecated-versions.js? I quite like your idea of adding in the extra param... I could it imagine it might also be useful for eligibility checks to have access to rawBlock.innerHTML as that might unlock being able to do things like using the fixCustomClassname logic, potentially 🤔

@aaronrobertshaw
Copy link
Contributor Author

Would it be worth opening a separate smaller PR to propose updating the API / function signature for isEligible in apply-deprecated-versions.js?

More than likely. I'll put something together for that tomorrow.

I did explore approaching it from the other angle and having a list of disallowed classnames for given blocks in the determination of the custom CSS classes. In a scenario like that, the media and text block would be invalidated when it had no attribute.align value and the alignwide class. With an invalid block the isEligible wouldn't be required and the deprecation would work as expected.

My concern with either approach was whether there were any potential performance impacts given the deprecation isEligible call and custom CSS classname code run for every block in the editor. If passing the extra args to isEligible I wondered if having access to two sets of attributes would cause confusion or encourage less ideal checks.

@andrewserong
Copy link
Contributor

My concern with either approach was whether there were any potential performance impacts given the deprecation isEligible call and custom CSS classname code run for every block in the editor. If passing the extra args to isEligible I wondered if having access to two sets of attributes would cause confusion or encourage less ideal checks.

Good points, both sound like very reasonable concerns — we definitely want to avoid additional unnecessary parsing, and I can see that the two sets of attributes could very easily be confusing.

I'll put something together for that tomorrow.

Happy to help review and test once you've got a PR up 👍

@aaronrobertshaw aaronrobertshaw changed the base branch from trunk to update/deprecation-is-eligible March 7, 2023 07:46
@aaronrobertshaw aaronrobertshaw force-pushed the update/default-media-text-align-to-none branch from 5def879 to 82da6db Compare March 7, 2023 07:47
Base automatically changed from update/deprecation-is-eligible to trunk March 15, 2023 04:50
@aaronrobertshaw aaronrobertshaw force-pushed the update/default-media-text-align-to-none branch from 82da6db to 295ca16 Compare March 15, 2023 04:56
@aaronrobertshaw
Copy link
Contributor Author

#48815 has been merged, so I've rebased this one. It should be ready for a final review.

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

This is testing well for me @aaronrobertshaw — I re-tested with a range of Media & Text blocks. Existing blocks kept their alignments correctly, and newly inserted blocks still default to no alignment 👍

I think this is looking good after the rebase, just left a tiny nit in the explanatory comment, but otherwise this LGTM! ✨

packages/block-library/src/media-text/deprecated.js Outdated Show resolved Hide resolved
@aaronrobertshaw aaronrobertshaw merged commit ced5222 into trunk Mar 16, 2023
@aaronrobertshaw aaronrobertshaw deleted the update/default-media-text-align-to-none branch March 16, 2023 05:58
@github-actions github-actions bot added this to the Gutenberg 15.5 milestone Mar 16, 2023
@aaronrobertshaw aaronrobertshaw self-assigned this Mar 17, 2023
@paaljoachim
Copy link
Contributor

This is great!
A huge thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Media & Text Affects the Media & Text Block Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Change default Wide width alignment for Media & Text block to normal width.
6 participants