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

Add undo redo to Widgets Customizer #31653

Merged
merged 6 commits into from
May 19, 2021
Merged

Conversation

kevin940726
Copy link
Member

@kevin940726 kevin940726 commented May 10, 2021

Description

Close #30400. Probably need a rebase after #31589.

Implement a naive solution for undo redo in the Widgets Customizer. The changes are debounced for 1 second to micmic the same behavior in the block editor.

How has this been tested?

Manually. e2e tests TBD.

Screenshots

Kapture.2021-05-10.at.17.12.57.mp4

Types of changes

New feature

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@kevin940726 kevin940726 added the [Feature] Widgets Customizer Ability to add and edit blocks in Customize → Widgets. label May 10, 2021
@kevin940726 kevin940726 added this to PRs needing review in Block-based Widgets Editor via automation May 10, 2021
Comment on lines +175 to +178
// Bail out updates if the updated widgets are the same.
if ( isShallowEqual( sidebar.getWidgets(), nextWidgets ) ) {
return prevBlocks;
}
Copy link
Member Author

Choose a reason for hiding this comment

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

This is to prevent changes from being pushed to the history stack when switching from edit form to preview mode in Legacy Widgets. This is probably a bug in the Legacy Widgets block though and we should probably fix it there. @noisysocks, any ideas why it triggers a new change even though the instance is the same?

@github-actions
Copy link

github-actions bot commented May 10, 2021

Size Change: +916 B (0%)

Total Size: 1.62 MB

Filename Size Change
build/block-editor/index.js 118 kB -1 B (0%)
build/block-library/index.js 146 kB +1 B (0%)
build/blocks/index.js 47.1 kB -2 B (0%)
build/components/index.js 188 kB +3 B (0%)
build/compose/index.js 9.95 kB +1 B (0%)
build/customize-widgets/index.js 43.2 kB +836 B (+2%)
build/customize-widgets/style-rtl.css 1.38 kB +36 B (+3%)
build/customize-widgets/style.css 1.38 kB +35 B (+3%)
build/data-controls/index.js 829 B +3 B (0%)
build/edit-navigation/index.js 13.6 kB -2 B (0%)
build/edit-post/index.js 334 kB +3 B (0%)
build/edit-site/index.js 26 kB +1 B (0%)
build/edit-widgets/index.js 292 kB -1 B (0%)
build/nux/index.js 2.31 kB +1 B (0%)
build/server-side-render/index.js 1.64 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.12 kB 0 B
build/annotations/index.js 2.93 kB 0 B
build/api-fetch/index.js 2.42 kB 0 B
build/autop/index.js 2.28 kB 0 B
build/blob/index.js 673 B 0 B
build/block-directory/index.js 6.61 kB 0 B
build/block-directory/style-rtl.css 993 B 0 B
build/block-directory/style.css 995 B 0 B
build/block-editor/style-rtl.css 13 kB 0 B
build/block-editor/style.css 13 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 601 B 0 B
build/block-library/blocks/button/style.css 600 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 375 B 0 B
build/block-library/blocks/buttons/style.css 375 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 422 B 0 B
build/block-library/blocks/columns/style.css 422 B 0 B
build/block-library/blocks/cover/editor-rtl.css 643 B 0 B
build/block-library/blocks/cover/editor.css 645 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.22 kB 0 B
build/block-library/blocks/cover/style.css 1.22 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 301 B 0 B
build/block-library/blocks/file/editor.css 300 B 0 B
build/block-library/blocks/file/frontend.js 771 B 0 B
build/block-library/blocks/file/style-rtl.css 255 B 0 B
build/block-library/blocks/file/style.css 255 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.06 kB 0 B
build/block-library/blocks/gallery/style.css 1.05 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/home-link/style-rtl.css 259 B 0 B
build/block-library/blocks/home-link/style.css 259 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 481 B 0 B
build/block-library/blocks/image/style.css 485 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 281 B 0 B
build/block-library/blocks/latest-comments/style.css 282 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 557 B 0 B
build/block-library/blocks/legacy-widget/editor.css 557 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 176 B 0 B
build/block-library/blocks/media-text/editor.css 176 B 0 B
build/block-library/blocks/media-text/style-rtl.css 492 B 0 B
build/block-library/blocks/media-text/style.css 489 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 617 B 0 B
build/block-library/blocks/navigation-link/editor.css 619 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B 0 B
build/block-library/blocks/navigation-link/style.css 94 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.54 kB 0 B
build/block-library/blocks/navigation/editor.css 1.54 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 1.78 kB 0 B
build/block-library/blocks/navigation/style.css 1.78 kB 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 310 B 0 B
build/block-library/blocks/page-list/editor.css 311 B 0 B
build/block-library/blocks/page-list/style-rtl.css 233 B 0 B
build/block-library/blocks/page-list/style.css 233 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 140 B 0 B
build/block-library/blocks/post-comments-form/style.css 140 B 0 B
build/block-library/blocks/post-comments/style-rtl.css 360 B 0 B
build/block-library/blocks/post-comments/style.css 359 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-excerpt/style-rtl.css 69 B 0 B
build/block-library/blocks/post-excerpt/style.css 69 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 119 B 0 B
build/block-library/blocks/post-featured-image/style.css 119 B 0 B
build/block-library/blocks/post-title/style-rtl.css 60 B 0 B
build/block-library/blocks/post-title/style.css 60 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 103 B 0 B
build/block-library/blocks/preformatted/style.css 103 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 131 B 0 B
build/block-library/blocks/query/editor.css 132 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 189 B 0 B
build/block-library/blocks/search/editor.css 189 B 0 B
build/block-library/blocks/search/style-rtl.css 359 B 0 B
build/block-library/blocks/search/style.css 362 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 251 B 0 B
build/block-library/blocks/separator/style.css 251 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 440 B 0 B
build/block-library/blocks/site-logo/editor.css 441 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 154 B 0 B
build/block-library/blocks/site-logo/style.css 154 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 796 B 0 B
build/block-library/blocks/social-links/editor.css 795 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 308 B 0 B
build/block-library/blocks/spacer/editor.css 308 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 485 B 0 B
build/block-library/blocks/table/style.css 485 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 551 B 0 B
build/block-library/blocks/template-part/editor.css 550 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/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 569 B 0 B
build/block-library/blocks/video/editor.css 570 B 0 B
build/block-library/blocks/video/style-rtl.css 169 B 0 B
build/block-library/blocks/video/style.css 169 B 0 B
build/block-library/common-rtl.css 1.26 kB 0 B
build/block-library/common.css 1.26 kB 0 B
build/block-library/editor-rtl.css 9.91 kB 0 B
build/block-library/editor.css 9.9 kB 0 B
build/block-library/reset-rtl.css 506 B 0 B
build/block-library/reset.css 507 B 0 B
build/block-library/style-rtl.css 10.2 kB 0 B
build/block-library/style.css 10.3 kB 0 B
build/block-library/theme-rtl.css 692 B 0 B
build/block-library/theme.css 693 B 0 B
build/block-serialization-default-parser/index.js 1.29 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/components/style-rtl.css 16.4 kB 0 B
build/components/style.css 16.3 kB 0 B
build/core-data/index.js 12.1 kB 0 B
build/data/index.js 7.23 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 739 B 0 B
build/dom-ready/index.js 577 B 0 B
build/dom/index.js 4.62 kB 0 B
build/edit-navigation/style-rtl.css 2.83 kB 0 B
build/edit-navigation/style.css 2.83 kB 0 B
build/edit-post/classic-rtl.css 454 B 0 B
build/edit-post/classic.css 454 B 0 B
build/edit-post/style-rtl.css 6.84 kB 0 B
build/edit-post/style.css 6.83 kB 0 B
build/edit-site/style-rtl.css 4.79 kB 0 B
build/edit-site/style.css 4.78 kB 0 B
build/edit-widgets/style-rtl.css 3.49 kB 0 B
build/edit-widgets/style.css 3.5 kB 0 B
build/editor/index.js 38.4 kB 0 B
build/editor/style-rtl.css 3.95 kB 0 B
build/editor/style.css 3.95 kB 0 B
build/element/index.js 3.44 kB 0 B
build/escape-html/index.js 739 B 0 B
build/format-library/index.js 5.67 kB 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/hooks/index.js 1.76 kB 0 B
build/html-entities/index.js 627 B 0 B
build/i18n/index.js 3.73 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 1.65 kB 0 B
build/keycodes/index.js 1.43 kB 0 B
build/list-reusable-blocks/index.js 2.06 kB 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/media-utils/index.js 3.08 kB 0 B
build/navigation/index.js 2.85 kB 0 B
build/notices/index.js 1.07 kB 0 B
build/nux/style-rtl.css 718 B 0 B
build/nux/style.css 716 B 0 B
build/plugins/index.js 1.99 kB 0 B
build/primitives/index.js 1.03 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/react-i18n/index.js 923 B 0 B
build/redux-routine/index.js 2.82 kB 0 B
build/reusable-blocks/index.js 2.54 kB 0 B
build/reusable-blocks/style-rtl.css 225 B 0 B
build/reusable-blocks/style.css 225 B 0 B
build/rich-text/index.js 10.7 kB 0 B
build/shortcode/index.js 1.68 kB 0 B
build/token-list/index.js 846 B 0 B
build/url/index.js 1.95 kB 0 B
build/viewport/index.js 1.28 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/widgets/index.js 1.66 kB 0 B
build/wordcount/index.js 1.24 kB 0 B

compressed-size-action

@kevin940726 kevin940726 force-pushed the add/undo-redo-widgets-customizer branch from 9a70526 to 4156968 Compare May 12, 2021 05:58
@critterverse
Copy link
Contributor

This is working great, @kevin940726 🎉

I tried out a variety of blocks and legacy widgets, and the undo/redo actions seem to be working as expected based on the behavior in the post editor. A couple of minor notes:

The undo action doesn’t work great on some legacy widgets like SiteOrigin widgets but I'm not sure that this is a blocker. (In an ideal world, I think you’d be able to step back through each of the changes made to input forms while in editing mode).

Keyboard commands ⌘Z and ⇧⌘Z are not working for me but I’m assuming those just haven’t been added yet.

@kevin940726 kevin940726 force-pushed the add/undo-redo-widgets-customizer branch from 3a1b0a8 to 8ae9a7b Compare May 14, 2021 09:04
@kevin940726 kevin940726 marked this pull request as ready for review May 14, 2021 09:04
@kevin940726
Copy link
Member Author

The undo action doesn’t work great on some legacy widgets like SiteOrigin widgets.

Do you have reproduction steps? I can't seem to reproduce it 🤔 🙇‍♂️

Keyboard commands ⌘Z and ⇧⌘Z are not working for me but I’m assuming those just haven’t been added yet.

I forgot it! Thanks! I just added them in 8ae9a7b :)

@critterverse
Copy link
Contributor

I just added them in 8ae9a7b :)

Nice!

The undo action doesn’t work great on some legacy widgets like SiteOrigin widgets but I'm not sure that this is a blocker. (In an ideal world, I think you’d be able to step back through each of the changes made to input forms while in editing mode).

For example, if you have a SiteOrigin legacy widget and change the text in one of the input forms while editing, the Undo action doesn't seems to work (if you try to change and undo the "Title text" for the SiteOrigin Image widget, for example). It does seem to work with some other legacy widgets (ex. Astra: Social Profiles).

@kevin940726
Copy link
Member Author

Hmm yeah it seems like some legacy widgets have problems with undo/redo, even when it's in the widgets screen. Let's tackle it in a new PR though, as I believe the problem is in the legacy widgets.

@kevin940726 kevin940726 force-pushed the add/undo-redo-widgets-customizer branch from 8ae9a7b to 81b5a31 Compare May 19, 2021 08:01
Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

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

Works well and code looks good, just a few questions below, but ✅

] );

useEffect( () => {
return sidebar.subscribeHistory( () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Not sure I get why we're subscribing in the effect cleanup as opposed to in the effect itself.

Copy link
Member Author

Choose a reason for hiding this comment

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

Not sure I understand? We are subscribing in the effect itself, but also returning the unsubscribe callback to the cleanup callback. It's a common pattern for event listeners.

Copy link
Contributor

Choose a reason for hiding this comment

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

What confused me is it's not clear at a glance what sidebar.subscribeHistory does. the usual pattern for effects is something like:

useEffect( () => {
  subscribe()
  return () => unsubscribe()
})

but in this case, both the subscribe() and the returning of the cleanup function are happening in sidebar.subscribeHistory.

Copy link
Member Author

Choose a reason for hiding this comment

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

I'd argue that this pattern is in fact very common. As both Redux's store.subscribe and history's listen are using this pattern to return an unsubscribe function.

However, I agree that it never hurts to make it more clear. I'll try to keep that in mind next time :)

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, after digging in a bit I realised it occurred in other places. Was just surprising the first time 😅
I guess depending on how complex the logic is in the effect it might help to add a comment, but in this case it's pretty straightforward.

@@ -27,6 +27,32 @@ function widgetIdToSettingId( widgetId ) {
return `widget_${ idBase }`;
}

function debounce( leading, callback, timeout ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we need to implement debounce from scratch? Elsewhere we're using lodash, and there's also a useDebounce (which seems to be a wrapper for lodash's debounce) in our compose package.

Copy link
Member Author

Choose a reason for hiding this comment

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

I'm afraid we have to. We want to call different debounce callbacks depending on whether it's the leading call or not. I can't find a way of doing so with lodash's debounce or any other implementations.

Copy link
Contributor

Choose a reason for hiding this comment

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

Could be worth adding a comment to that effect, this'd be something someone with the best intentions might accidentally replace with the lodash function.


this.setting.bind( this._handleSettingChange.bind( this ) );
this.api.bind( 'change', this._handleAllSettingsChange.bind( this ) );

this.canUndo = this.canUndo.bind( this );
this.canRedo = this.canRedo.bind( this );
Copy link
Contributor

Choose a reason for hiding this comment

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

Don't we need to bind hasUndo/hasRedo too?

Copy link
Member Author

Choose a reason for hiding this comment

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

Only if we're destructing it from the sidebar instance. Currently we're calling it directly so that we can keep referencing this to the instance.

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

Tested this and it works very well. Let's revisit with polishes later.

@kevin940726 kevin940726 force-pushed the add/undo-redo-widgets-customizer branch from 81b5a31 to a84dcb6 Compare May 19, 2021 08:16
@youknowriad youknowriad added this to the Gutenberg 10.7 milestone May 19, 2021
@talldan talldan force-pushed the add/undo-redo-widgets-customizer branch from a84dcb6 to 736bdf7 Compare May 19, 2021 10:30
@talldan
Copy link
Contributor

talldan commented May 19, 2021

I've rebased. Hopefully tests pass. 🤞

@talldan talldan merged commit 1e65d54 into trunk May 19, 2021
Block-based Widgets Editor automation moved this from PRs needing review to Done May 19, 2021
@talldan talldan deleted the add/undo-redo-widgets-customizer branch May 19, 2021 12:45
jffng pushed a commit that referenced this pull request May 19, 2021
* Add undo redo and debounce

* Style the undo redo button

* Bail out updates if the next widgets are the same

* Add debounce

* Add missing keyboard shortcuts

* Fix styling
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Widgets Customizer Ability to add and edit blocks in Customize → Widgets.
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

Implement undo/redo in the widgets customizer
6 participants