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

Iterate on Legacy Widget block #29960

Merged
merged 10 commits into from
Mar 25, 2021
Merged

Conversation

noisysocks
Copy link
Member

@noisysocks noisysocks commented Mar 18, 2021

What this is

Rewrites the Legacy Widget block with a view to:

1) Handle instance attributes that can't be serialised into JSON. See #28902.

This is done by sending user input to the REST API which will return the instance serialized as a base64 string. The serialized data is stored in the block's instance.encoded attribute along with a hash in instance.hash.

The complete flow of how this works is detailed in #28902 (comment).

2) Remove unnecessary block attributes. There is now only id, idBase and instance.

Attributes such as number, widget_class and classname are not necessary to store in the block editor. Widgets that extend WP_Widget are now represented using idBase and instance. Widgets that do not extend WP_Widget are represented using id.

See legacy-widget/README.md a lengthier explanation.

3) Improve how widgets that don't extend WP_Widget are handled. These are now manually saved and their data is completely seperate to the block editor.

Widgets that do not extend WP_Widget are treated as a dumb <form>. We cannot assume anything about this kind of widgets, and so no data is stored in the block editor.

See legacy-widget/README.md a lengthier explanation.

4) Make the block use @wordpress/core-data APIs instead of relying on @wordpress/edit-post. This makes it possible to use the block in the Customizer. See #28618 (comment).

Note that while the Legacy Widget block is now fully functional when used in the post editor or site editor, I have disabled it in these contexts. We can enable it if/when we are sure that we want to maintain support for this into the future.

5) Use hooks instead of class components.

This reduces the amount of boilerplate and makes things simpler (I think) to understand.

What to test

The only user visible changes are in the Appearance → Widgets screen, so please test adding, editing, saving, and removing Legacy Widgets here.

You can test the Core widgets by adding this line e.g. to gutenberg.php:

add_filter( 'widget_types_to_hide_from_legacy_widget_block', '__return_empty_array' );

You can test a non-WP_Widget by adding this code e.g. to gutenberg.php:

https://gist.github.com/noisysocks/c9e20ef813d3b17a15da7e6d5bc8f611#file-marquee-php

Follow up tasks

  • Remove usage of class_name from the REST API. This property is deprecated.
  • Investigate using ServerSideRender for the Preview tab.
  • Improve handling of duplicate reference widgets. We should e.g. display a toast notification with an error message.

@noisysocks noisysocks added [Block] Legacy Widget Affects the Legacy Widget Block - used for displaying Classic Widgets [Feature] Widgets Screen The block-based screen that replaced widgets.php. labels Mar 18, 2021
@github-actions
Copy link

github-actions bot commented Mar 18, 2021

Size Change: -1.69 kB (0%)

Total Size: 1.41 MB

Filename Size Change
build/annotations/index.js 3.77 kB +3 B (0%)
build/api-fetch/index.js 3.4 kB -2 B (0%)
build/autop/index.js 2.82 kB +2 B (0%)
build/block-editor/index.js 127 kB -15 B (0%)
build/block-library/editor-rtl.css 9.6 kB +154 B (+2%)
build/block-library/editor.css 9.59 kB +144 B (+2%)
build/block-library/index.js 151 kB +2.89 kB (+2%)
build/block-serialization-default-parser/index.js 1.87 kB +2 B (0%)
build/components/index.js 284 kB +7 B (0%)
build/compose/index.js 11.2 kB +2 B (0%)
build/core-data/index.js 16.7 kB +25 B (0%)
build/customize-widgets/index.js 6.04 kB +2 B (0%)
build/data-controls/index.js 837 B -4 B (0%)
build/data/index.js 8.88 kB -3 B (0%)
build/dom/index.js 4.98 kB +1 B (0%)
build/edit-navigation/index.js 17 kB -3 B (0%)
build/edit-post/index.js 307 kB +13 B (0%)
build/edit-site/index.js 27.5 kB +4 B (0%)
build/edit-widgets/index.js 15.6 kB -4.59 kB (-23%) 🎉
build/edit-widgets/style-rtl.css 2.98 kB -176 B (-6%)
build/edit-widgets/style.css 2.98 kB -173 B (-5%)
build/editor/index.js 42 kB +21 B (0%)
build/element/index.js 4.62 kB +3 B (0%)
build/format-library/index.js 6.75 kB -3 B (0%)
build/hooks/index.js 2.28 kB -2 B (0%)
build/keyboard-shortcuts/index.js 2.53 kB +3 B (0%)
build/keycodes/index.js 1.95 kB -2 B (0%)
build/list-reusable-blocks/index.js 3.19 kB +2 B (0%)
build/media-utils/index.js 5.38 kB +5 B (0%)
build/notices/index.js 1.85 kB -4 B (0%)
build/nux/index.js 3.42 kB +2 B (0%)
build/primitives/index.js 1.42 kB -1 B (0%)
build/react-i18n/index.js 1.46 kB +2 B (0%)
build/rich-text/index.js 13.4 kB +4 B (0%)
build/server-side-render/index.js 2.59 kB +1 B (0%)
build/token-list/index.js 1.27 kB +1 B (0%)
build/url/index.js 3.02 kB +3 B (0%)
build/viewport/index.js 1.86 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/blob/index.js 664 B 0 B
build/block-directory/index.js 8.63 kB 0 B
build/block-directory/style-rtl.css 1 kB 0 B
build/block-directory/style.css 1.01 kB 0 B
build/block-editor/style-rtl.css 12.4 kB 0 B
build/block-editor/style.css 12.4 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 61 B 0 B
build/block-library/blocks/archives/editor.css 60 B 0 B
build/block-library/blocks/audio/editor-rtl.css 58 B 0 B
build/block-library/blocks/audio/editor.css 58 B 0 B
build/block-library/blocks/audio/style-rtl.css 112 B 0 B
build/block-library/blocks/audio/style.css 112 B 0 B
build/block-library/blocks/block/editor-rtl.css 161 B 0 B
build/block-library/blocks/block/editor.css 161 B 0 B
build/block-library/blocks/button/editor-rtl.css 475 B 0 B
build/block-library/blocks/button/editor.css 474 B 0 B
build/block-library/blocks/button/style-rtl.css 479 B 0 B
build/block-library/blocks/button/style.css 479 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 315 B 0 B
build/block-library/blocks/buttons/editor.css 315 B 0 B
build/block-library/blocks/buttons/style-rtl.css 364 B 0 B
build/block-library/blocks/buttons/style.css 363 B 0 B
build/block-library/blocks/calendar/style-rtl.css 208 B 0 B
build/block-library/blocks/calendar/style.css 208 B 0 B
build/block-library/blocks/categories/editor-rtl.css 84 B 0 B
build/block-library/blocks/categories/editor.css 83 B 0 B
build/block-library/blocks/categories/style-rtl.css 79 B 0 B
build/block-library/blocks/categories/style.css 79 B 0 B
build/block-library/blocks/code/style-rtl.css 90 B 0 B
build/block-library/blocks/code/style.css 90 B 0 B
build/block-library/blocks/columns/editor-rtl.css 190 B 0 B
build/block-library/blocks/columns/editor.css 190 B 0 B
build/block-library/blocks/columns/style-rtl.css 421 B 0 B
build/block-library/blocks/columns/style.css 421 B 0 B
build/block-library/blocks/cover/editor-rtl.css 605 B 0 B
build/block-library/blocks/cover/editor.css 605 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.24 kB 0 B
build/block-library/blocks/cover/style.css 1.24 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 486 B 0 B
build/block-library/blocks/embed/editor.css 486 B 0 B
build/block-library/blocks/embed/style-rtl.css 401 B 0 B
build/block-library/blocks/embed/style.css 400 B 0 B
build/block-library/blocks/file/editor-rtl.css 175 B 0 B
build/block-library/blocks/file/editor.css 174 B 0 B
build/block-library/blocks/file/style-rtl.css 248 B 0 B
build/block-library/blocks/file/style.css 248 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.45 kB 0 B
build/block-library/blocks/freeform/editor.css 2.45 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 704 B 0 B
build/block-library/blocks/gallery/editor.css 705 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.11 kB 0 B
build/block-library/blocks/gallery/style.css 1.1 kB 0 B
build/block-library/blocks/group/editor-rtl.css 160 B 0 B
build/block-library/blocks/group/editor.css 160 B 0 B
build/block-library/blocks/group/style-rtl.css 57 B 0 B
build/block-library/blocks/group/style.css 57 B 0 B
build/block-library/blocks/heading/editor-rtl.css 129 B 0 B
build/block-library/blocks/heading/editor.css 129 B 0 B
build/block-library/blocks/heading/style-rtl.css 76 B 0 B
build/block-library/blocks/heading/style.css 76 B 0 B
build/block-library/blocks/html/editor-rtl.css 281 B 0 B
build/block-library/blocks/html/editor.css 281 B 0 B
build/block-library/blocks/image/editor-rtl.css 717 B 0 B
build/block-library/blocks/image/editor.css 716 B 0 B
build/block-library/blocks/image/style-rtl.css 476 B 0 B
build/block-library/blocks/image/style.css 478 B 0 B
build/block-library/blocks/latest-comments/editor-rtl.css 159 B 0 B
build/block-library/blocks/latest-comments/editor.css 158 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 269 B 0 B
build/block-library/blocks/latest-comments/style.css 269 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B 0 B
build/block-library/blocks/latest-posts/editor.css 137 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 523 B 0 B
build/block-library/blocks/latest-posts/style.css 522 B 0 B
build/block-library/blocks/legacy-widget/editor-rtl.css 398 B 0 B
build/block-library/blocks/legacy-widget/editor.css 399 B 0 B
build/block-library/blocks/list/style-rtl.css 63 B 0 B
build/block-library/blocks/list/style.css 63 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 191 B 0 B
build/block-library/blocks/media-text/editor.css 191 B 0 B
build/block-library/blocks/media-text/style-rtl.css 535 B 0 B
build/block-library/blocks/media-text/style.css 532 B 0 B
build/block-library/blocks/more/editor-rtl.css 434 B 0 B
build/block-library/blocks/more/editor.css 434 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 634 B 0 B
build/block-library/blocks/navigation-link/editor.css 635 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 897 B 0 B
build/block-library/blocks/navigation-link/style.css 895 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.12 kB 0 B
build/block-library/blocks/navigation/editor.css 1.13 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 204 B 0 B
build/block-library/blocks/navigation/style.css 205 B 0 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B 0 B
build/block-library/blocks/nextpage/editor.css 395 B 0 B
build/block-library/blocks/page-list/editor-rtl.css 170 B 0 B
build/block-library/blocks/page-list/editor.css 170 B 0 B
build/block-library/blocks/page-list/style-rtl.css 167 B 0 B
build/block-library/blocks/page-list/style.css 167 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B 0 B
build/block-library/blocks/paragraph/editor.css 157 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 247 B 0 B
build/block-library/blocks/paragraph/style.css 248 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 209 B 0 B
build/block-library/blocks/post-author/editor.css 209 B 0 B
build/block-library/blocks/post-author/style-rtl.css 183 B 0 B
build/block-library/blocks/post-author/style.css 184 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 250 B 0 B
build/block-library/blocks/post-comments-form/style.css 250 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 139 B 0 B
build/block-library/blocks/post-content/editor.css 139 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B 0 B
build/block-library/blocks/post-excerpt/editor.css 73 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 338 B 0 B
build/block-library/blocks/post-featured-image/editor.css 338 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 100 B 0 B
build/block-library/blocks/post-featured-image/style.css 100 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 63 B 0 B
build/block-library/blocks/preformatted/style.css 63 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 183 B 0 B
build/block-library/blocks/pullquote/editor.css 183 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 318 B 0 B
build/block-library/blocks/pullquote/style.css 318 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 83 B 0 B
build/block-library/blocks/query-loop/editor.css 82 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 315 B 0 B
build/block-library/blocks/query-loop/style.css 317 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 270 B 0 B
build/block-library/blocks/query-pagination/editor.css 262 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B 0 B
build/block-library/blocks/query-pagination/style.css 168 B 0 B
build/block-library/blocks/query-title/editor-rtl.css 86 B 0 B
build/block-library/blocks/query-title/editor.css 86 B 0 B
build/block-library/blocks/query/editor-rtl.css 795 B 0 B
build/block-library/blocks/query/editor.css 794 B 0 B
build/block-library/blocks/quote/editor-rtl.css 61 B 0 B
build/block-library/blocks/quote/editor.css 61 B 0 B
build/block-library/blocks/quote/style-rtl.css 169 B 0 B
build/block-library/blocks/quote/style.css 169 B 0 B
build/block-library/blocks/rss/editor-rtl.css 201 B 0 B
build/block-library/blocks/rss/editor.css 202 B 0 B
build/block-library/blocks/rss/style-rtl.css 290 B 0 B
build/block-library/blocks/rss/style.css 290 B 0 B
build/block-library/blocks/search/editor-rtl.css 165 B 0 B
build/block-library/blocks/search/editor.css 165 B 0 B
build/block-library/blocks/search/style-rtl.css 342 B 0 B
build/block-library/blocks/search/style.css 344 B 0 B
build/block-library/blocks/separator/editor-rtl.css 99 B 0 B
build/block-library/blocks/separator/editor.css 99 B 0 B
build/block-library/blocks/separator/style-rtl.css 236 B 0 B
build/block-library/blocks/separator/style.css 236 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 512 B 0 B
build/block-library/blocks/shortcode/editor.css 512 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 201 B 0 B
build/block-library/blocks/site-logo/editor.css 201 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 115 B 0 B
build/block-library/blocks/site-logo/style.css 115 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 164 B 0 B
build/block-library/blocks/social-link/editor.css 165 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 776 B 0 B
build/block-library/blocks/social-links/editor.css 776 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB 0 B
build/block-library/blocks/social-links/style.css 1.33 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 317 B 0 B
build/block-library/blocks/spacer/editor.css 317 B 0 B
build/block-library/blocks/spacer/style-rtl.css 48 B 0 B
build/block-library/blocks/spacer/style.css 48 B 0 B
build/block-library/blocks/table/editor-rtl.css 478 B 0 B
build/block-library/blocks/table/editor.css 478 B 0 B
build/block-library/blocks/table/style-rtl.css 402 B 0 B
build/block-library/blocks/table/style.css 402 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 118 B 0 B
build/block-library/blocks/tag-cloud/editor.css 118 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 94 B 0 B
build/block-library/blocks/tag-cloud/style.css 94 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 552 B 0 B
build/block-library/blocks/template-part/editor.css 551 B 0 B
build/block-library/blocks/term-description/editor-rtl.css 90 B 0 B
build/block-library/blocks/term-description/editor.css 90 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B 0 B
build/block-library/blocks/text-columns/editor.css 95 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 166 B 0 B
build/block-library/blocks/text-columns/style.css 166 B 0 B
build/block-library/blocks/verse/editor-rtl.css 50 B 0 B
build/block-library/blocks/verse/editor.css 50 B 0 B
build/block-library/blocks/verse/style-rtl.css 87 B 0 B
build/block-library/blocks/verse/style.css 87 B 0 B
build/block-library/blocks/video/editor-rtl.css 504 B 0 B
build/block-library/blocks/video/editor.css 503 B 0 B
build/block-library/blocks/video/style-rtl.css 187 B 0 B
build/block-library/blocks/video/style.css 187 B 0 B
build/block-library/common-rtl.css 1.1 kB 0 B
build/block-library/common.css 1.1 kB 0 B
build/block-library/reset-rtl.css 374 B 0 B
build/block-library/reset.css 376 B 0 B
build/block-library/style-rtl.css 8.95 kB 0 B
build/block-library/style.css 8.95 kB 0 B
build/block-library/theme-rtl.css 700 B 0 B
build/block-library/theme.css 701 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48.3 kB 0 B
build/components/style-rtl.css 16.2 kB 0 B
build/components/style.css 16.2 kB 0 B
build/customize-widgets/style-rtl.css 378 B 0 B
build/customize-widgets/style.css 379 B 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 787 B 0 B
build/dom-ready/index.js 577 B 0 B
build/edit-navigation/style-rtl.css 2.7 kB 0 B
build/edit-navigation/style.css 2.7 kB 0 B
build/edit-post/style-rtl.css 7.05 kB 0 B
build/edit-post/style.css 7.04 kB 0 B
build/edit-site/style-rtl.css 4.51 kB 0 B
build/edit-site/style.css 4.5 kB 0 B
build/editor/style-rtl.css 3.9 kB 0 B
build/editor/style.css 3.9 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 4.01 kB 0 B
build/is-shallow-equal/index.js 699 B 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/nux/style-rtl.css 731 B 0 B
build/nux/style.css 727 B 0 B
build/plugins/index.js 2.95 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 3.78 kB 0 B
build/reusable-blocks/style-rtl.css 225 B 0 B
build/reusable-blocks/style.css 225 B 0 B
build/shortcode/index.js 1.7 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@noisysocks noisysocks force-pushed the try/rewrite-legacy-widget-block branch from c629341 to 6d98741 Compare March 22, 2021 01:17
Base automatically changed from try/rewrite-widget-endpoints to trunk March 23, 2021 01:49
@noisysocks noisysocks force-pushed the try/rewrite-legacy-widget-block branch 2 times, most recently from c361ca4 to bb5878e Compare March 23, 2021 04:47
@noisysocks
Copy link
Member Author

noisysocks commented Mar 23, 2021

I need to test this some more, elaborate on the dot points in the PR's description, and write some documentation, but this should be ready for an initial "broad stroke" review.

Copy link
Member

@kevin940726 kevin940726 left a comment

Choose a reason for hiding this comment

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

Excellent work!

I'm still playing with it. Just some code smell and nitpicking for now.

noisysocks and others added 5 commits March 25, 2021 13:24
Rewrites the Legacy Widget block with a view to:

- Handle instance attributes that can't be serialised into JSON.
- Remove unnecessary block attributes. There is now only `id`, `idBase`
  and `instance`.
- Improve how widgets that don't extend WP_Widget are handled. These are
  now manually saved and their data is completely seperate to the block
  editor.
- Make the block use @wordpress/core-data APIs instead of relying on
  @wordpress/edit-post. This makes it possible to use the block in the
  Customizer, and, perhaps in the future, the site editor and post
  editor.
- Use hooks instead of class components.
@noisysocks noisysocks force-pushed the try/rewrite-legacy-widget-block branch from 285ebaf to 4ddf54e Compare March 25, 2021 02:24
@noisysocks noisysocks force-pushed the try/rewrite-legacy-widget-block branch from 4ddf54e to c2ec483 Compare March 25, 2021 04:01
@noisysocks noisysocks marked this pull request as ready for review March 25, 2021 05:01
@noisysocks noisysocks requested a review from adamziel as a code owner March 25, 2021 05:01
@noisysocks noisysocks changed the title WIP: Iterate on Legacy Widget block Iterate on Legacy Widget block Mar 25, 2021
@noisysocks noisysocks requested a review from ntwb as a code owner March 25, 2021 05:18
@noisysocks
Copy link
Member Author

This should be ready now 🙂

Copy link
Member

@kevin940726 kevin940726 left a comment

Choose a reason for hiding this comment

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

LGTM 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Legacy Widget Affects the Legacy Widget Block - used for displaying Classic Widgets [Feature] Widgets Screen The block-based screen that replaced widgets.php.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Legacy Widget add support for widgets with attributes that can't be serialised into JSON
3 participants