Save editors value on change #27717

grzim · 2020-12-14T14:12:17Z

Description

Resolving the issue #9512
The problem was the lack of updates when a user makes a change in an editor but only when the editor lost focus. This was causing situations when users were losing their input when using key shortcuts to change editor mode.

The solution is to add debounced updates after every change made in the editor. The same mechanics are used to save the text as it was done in stopEditting function (which is called when the editor is losing focus).
The function is debounced in order to minimize the number of dispatches.

How has this been tested?

Unit test to cover this case added

Screenshots

Types of changes

Bugfix

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
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.

github-actions · 2020-12-14T14:21:31Z

Size Change: -20.6 kB (-2%)

Total Size: 1.28 MB

Filename	Size	Change
`build/annotations/index.js`	3.8 kB	-3 B (0%)
`build/api-fetch/index.js`	3.42 kB	+4 B (0%)
`build/autop/index.js`	2.84 kB	+5 B (0%)
`build/blob/index.js`	665 B	+1 B (0%)
`build/block-directory/index.js`	9.08 kB	+41 B (0%)
`build/block-editor/index.js`	122 kB	-9.85 kB (-7%)	✅
`build/block-editor/style-rtl.css`	11.6 kB	-114 B (-1%)
`build/block-editor/style.css`	11.6 kB	-113 B (-1%)
`build/block-library/blocks/cover/editor-rtl.css`	524 B	+16 B (+3%)
`build/block-library/blocks/cover/editor.css`	522 B	+16 B (+3%)
`build/block-library/blocks/cover/style-rtl.css`	1.3 kB	-28 B (-2%)
`build/block-library/blocks/cover/style.css`	1.3 kB	-26 B (-2%)
`build/block-library/blocks/gallery/editor-rtl.css`	783 B	+34 B (+5%)	🔍
`build/block-library/blocks/gallery/editor.css`	783 B	+33 B (+4%)
`build/block-library/blocks/navigation/style-rtl.css`	289 B	+15 B (+5%)	🔍
`build/block-library/blocks/navigation/style.css`	289 B	+15 B (+5%)	🔍
`build/block-library/blocks/paragraph/style-rtl.css`	390 B	+39 B (+11%)	⚠️
`build/block-library/blocks/paragraph/style.css`	391 B	+39 B (+11%)	⚠️
`build/block-library/blocks/spacer/editor-rtl.css`	416 B	+26 B (+7%)	🔍
`build/block-library/blocks/spacer/editor.css`	416 B	+26 B (+7%)	🔍
`build/block-library/blocks/verse/style-rtl.css`	215 B	+1 B (0%)
`build/block-library/blocks/verse/style.css`	215 B	+1 B (0%)
`build/block-library/editor-rtl.css`	8.97 kB	+40 B (0%)
`build/block-library/editor.css`	8.97 kB	+41 B (0%)
`build/block-library/index.js`	142 kB	-8.9 kB (-6%)	✅
`build/block-library/style-rtl.css`	8.52 kB	-7 B (0%)
`build/block-library/style.css`	8.53 kB	-6 B (0%)
`build/block-serialization-default-parser/index.js`	1.89 kB	+10 B (+1%)
`build/blocks/index.js`	48.1 kB	+25 B (0%)
`build/components/index.js`	173 kB	+823 B (0%)
`build/components/style-rtl.css`	15.5 kB	+3 B (0%)
`build/components/style.css`	15.5 kB	+2 B (0%)
`build/compose/index.js`	11.3 kB	+14 B (0%)
`build/core-data/index.js`	15.2 kB	+22 B (0%)
`build/data-controls/index.js`	829 B	-1 B (0%)
`build/data/index.js`	8.98 kB	+18 B (0%)
`build/date/index.js`	31.8 kB	-3 B (0%)
`build/dom/index.js`	4.95 kB	+2 B (0%)
`build/edit-navigation/index.js`	11.1 kB	+20 B (0%)
`build/edit-post/index.js`	306 kB	+3 B (0%)
`build/edit-post/style-rtl.css`	6.56 kB	-81 B (-1%)
`build/edit-post/style.css`	6.55 kB	-78 B (-1%)
`build/edit-site/index.js`	24.2 kB	+177 B (+1%)
`build/edit-site/style-rtl.css`	4 kB	-43 B (-1%)
`build/edit-site/style.css`	4 kB	-40 B (-1%)
`build/edit-widgets/index.js`	23.6 kB	-2.42 kB (-9%)	✅
`build/edit-widgets/style-rtl.css`	3.16 kB	-58 B (-2%)
`build/edit-widgets/style.css`	3.16 kB	-57 B (-2%)
`build/editor/index.js`	41.9 kB	-322 B (-1%)
`build/format-library/index.js`	6.76 kB	+10 B (0%)
`build/hooks/index.js`	2.27 kB	+2 B (0%)
`build/i18n/index.js`	3.57 kB	+1 B (0%)
`build/keyboard-shortcuts/index.js`	2.54 kB	+4 B (0%)
`build/keycodes/index.js`	1.94 kB	-1 B (0%)
`build/list-reusable-blocks/index.js`	3.15 kB	+2 B (0%)
`build/media-utils/index.js`	5.32 kB	+7 B (0%)
`build/nux/index.js`	3.42 kB	+4 B (0%)
`build/priority-queue/index.js`	789 B	-1 B (0%)
`build/reusable-blocks/index.js`	2.92 kB	+3 B (0%)
`build/rich-text/index.js`	13.5 kB	+21 B (0%)
`build/server-side-render/index.js`	2.77 kB	-6 B (0%)
`build/token-list/index.js`	1.27 kB	-2 B (0%)
`build/url/index.js`	3.02 kB	-4 B (0%)
`build/viewport/index.js`	1.86 kB	-1 B (0%)
`build/wordcount/index.js`	1.22 kB	+1 B (0%)

ℹ️

View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/block-directory/style-rtl.css`	1.01 kB	0 B
`build/block-directory/style.css`	1.01 kB	0 B
`build/block-library/blocks/archives/editor-rtl.css`	196 B	0 B
`build/block-library/blocks/archives/editor.css`	196 B	0 B
`build/block-library/blocks/audio/editor-rtl.css`	194 B	0 B
`build/block-library/blocks/audio/editor.css`	194 B	0 B
`build/block-library/blocks/audio/style-rtl.css`	225 B	0 B
`build/block-library/blocks/audio/style.css`	225 B	0 B
`build/block-library/blocks/block/editor-rtl.css`	283 B	0 B
`build/block-library/blocks/block/editor.css`	283 B	0 B
`build/block-library/blocks/button/editor-rtl.css`	576 B	0 B
`build/block-library/blocks/button/editor.css`	577 B	0 B
`build/block-library/blocks/button/style-rtl.css`	552 B	0 B
`build/block-library/blocks/button/style.css`	552 B	0 B
`build/block-library/blocks/buttons/editor-rtl.css`	345 B	0 B
`build/block-library/blocks/buttons/editor.css`	346 B	0 B
`build/block-library/blocks/buttons/style-rtl.css`	419 B	0 B
`build/block-library/blocks/buttons/style.css`	419 B	0 B
`build/block-library/blocks/calendar/style-rtl.css`	319 B	0 B
`build/block-library/blocks/calendar/style.css`	319 B	0 B
`build/block-library/blocks/categories/editor-rtl.css`	210 B	0 B
`build/block-library/blocks/categories/editor.css`	209 B	0 B
`build/block-library/blocks/categories/style-rtl.css`	208 B	0 B
`build/block-library/blocks/categories/style.css`	208 B	0 B
`build/block-library/blocks/code/style-rtl.css`	216 B	0 B
`build/block-library/blocks/code/style.css`	216 B	0 B
`build/block-library/blocks/columns/editor-rtl.css`	300 B	0 B
`build/block-library/blocks/columns/editor.css`	299 B	0 B
`build/block-library/blocks/columns/style-rtl.css`	529 B	0 B
`build/block-library/blocks/columns/style.css`	528 B	0 B
`build/block-library/blocks/embed/editor-rtl.css`	594 B	0 B
`build/block-library/blocks/embed/editor.css`	595 B	0 B
`build/block-library/blocks/embed/style-rtl.css`	489 B	0 B
`build/block-library/blocks/embed/style.css`	489 B	0 B
`build/block-library/blocks/file/editor-rtl.css`	314 B	0 B
`build/block-library/blocks/file/editor.css`	313 B	0 B
`build/block-library/blocks/file/style-rtl.css`	352 B	0 B
`build/block-library/blocks/file/style.css`	352 B	0 B
`build/block-library/blocks/freeform/editor-rtl.css`	2.55 kB	0 B
`build/block-library/blocks/freeform/editor.css`	2.55 kB	0 B
`build/block-library/blocks/gallery/style-rtl.css`	1.17 kB	0 B
`build/block-library/blocks/gallery/style.css`	1.17 kB	0 B
`build/block-library/blocks/group/editor-rtl.css`	433 B	0 B
`build/block-library/blocks/group/editor.css`	432 B	0 B
`build/block-library/blocks/group/style-rtl.css`	190 B	0 B
`build/block-library/blocks/group/style.css`	190 B	0 B
`build/block-library/blocks/heading/editor-rtl.css`	248 B	0 B
`build/block-library/blocks/heading/editor.css`	248 B	0 B
`build/block-library/blocks/heading/style-rtl.css`	212 B	0 B
`build/block-library/blocks/heading/style.css`	212 B	0 B
`build/block-library/blocks/html/editor-rtl.css`	384 B	0 B
`build/block-library/blocks/html/editor.css`	385 B	0 B
`build/block-library/blocks/image/editor-rtl.css`	801 B	0 B
`build/block-library/blocks/image/editor.css`	800 B	0 B
`build/block-library/blocks/image/style-rtl.css`	569 B	0 B
`build/block-library/blocks/image/style.css`	570 B	0 B
`build/block-library/blocks/latest-comments/editor-rtl.css`	277 B	0 B
`build/block-library/blocks/latest-comments/editor.css`	275 B	0 B
`build/block-library/blocks/latest-comments/style-rtl.css`	382 B	0 B
`build/block-library/blocks/latest-comments/style.css`	382 B	0 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	254 B	0 B
`build/block-library/blocks/latest-posts/editor.css`	254 B	0 B
`build/block-library/blocks/latest-posts/style-rtl.css`	634 B	0 B
`build/block-library/blocks/latest-posts/style.css`	634 B	0 B
`build/block-library/blocks/list/editor-rtl.css`	203 B	0 B
`build/block-library/blocks/list/editor.css`	203 B	0 B
`build/block-library/blocks/list/style-rtl.css`	201 B	0 B
`build/block-library/blocks/list/style.css`	201 B	0 B
`build/block-library/blocks/media-text/editor-rtl.css`	311 B	0 B
`build/block-library/blocks/media-text/editor.css`	311 B	0 B
`build/block-library/blocks/media-text/style-rtl.css`	642 B	0 B
`build/block-library/blocks/media-text/style.css`	640 B	0 B
`build/block-library/blocks/more/editor-rtl.css`	545 B	0 B
`build/block-library/blocks/more/editor.css`	545 B	0 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	503 B	0 B
`build/block-library/blocks/navigation-link/editor.css`	504 B	0 B
`build/block-library/blocks/navigation-link/style-rtl.css`	805 B	0 B
`build/block-library/blocks/navigation-link/style.css`	803 B	0 B
`build/block-library/blocks/navigation/editor-rtl.css`	1.38 kB	0 B
`build/block-library/blocks/navigation/editor.css`	1.38 kB	0 B
`build/block-library/blocks/nextpage/editor-rtl.css`	507 B	0 B
`build/block-library/blocks/nextpage/editor.css`	507 B	0 B
`build/block-library/blocks/paragraph/editor-rtl.css`	236 B	0 B
`build/block-library/blocks/paragraph/editor.css`	236 B	0 B
`build/block-library/blocks/post-author/editor-rtl.css`	329 B	0 B
`build/block-library/blocks/post-author/editor.css`	329 B	0 B
`build/block-library/blocks/post-author/style-rtl.css`	303 B	0 B
`build/block-library/blocks/post-author/style.css`	303 B	0 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	358 B	0 B
`build/block-library/blocks/post-comments-form/style.css`	358 B	0 B
`build/block-library/blocks/post-content/editor-rtl.css`	262 B	0 B
`build/block-library/blocks/post-content/editor.css`	262 B	0 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	206 B	0 B
`build/block-library/blocks/post-excerpt/editor.css`	206 B	0 B
`build/block-library/blocks/post-featured-image/editor-rtl.css`	453 B	0 B
`build/block-library/blocks/post-featured-image/editor.css`	453 B	0 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	223 B	0 B
`build/block-library/blocks/post-featured-image/style.css`	223 B	0 B
`build/block-library/blocks/preformatted/style-rtl.css`	193 B	0 B
`build/block-library/blocks/preformatted/style.css`	193 B	0 B
`build/block-library/blocks/pullquote/editor-rtl.css`	304 B	0 B
`build/block-library/blocks/pullquote/editor.css`	304 B	0 B
`build/block-library/blocks/pullquote/style-rtl.css`	428 B	0 B
`build/block-library/blocks/pullquote/style.css`	428 B	0 B
`build/block-library/blocks/query-loop/editor-rtl.css`	217 B	0 B
`build/block-library/blocks/query-loop/editor.css`	216 B	0 B
`build/block-library/blocks/query-loop/style-rtl.css`	427 B	0 B
`build/block-library/blocks/query-loop/style.css`	429 B	0 B
`build/block-library/blocks/query/editor-rtl.css`	279 B	0 B
`build/block-library/blocks/query/editor.css`	279 B	0 B
`build/block-library/blocks/quote/editor-rtl.css`	195 B	0 B
`build/block-library/blocks/quote/editor.css`	195 B	0 B
`build/block-library/blocks/quote/style-rtl.css`	284 B	0 B
`build/block-library/blocks/quote/style.css`	285 B	0 B
`build/block-library/blocks/rss/editor-rtl.css`	307 B	0 B
`build/block-library/blocks/rss/editor.css`	309 B	0 B
`build/block-library/blocks/rss/style-rtl.css`	394 B	0 B
`build/block-library/blocks/rss/style.css`	393 B	0 B
`build/block-library/blocks/search/editor-rtl.css`	285 B	0 B
`build/block-library/blocks/search/editor.css`	285 B	0 B
`build/block-library/blocks/search/style-rtl.css`	454 B	0 B
`build/block-library/blocks/search/style.css`	456 B	0 B
`build/block-library/blocks/separator/editor-rtl.css`	229 B	0 B
`build/block-library/blocks/separator/editor.css`	229 B	0 B
`build/block-library/blocks/separator/style-rtl.css`	352 B	0 B
`build/block-library/blocks/separator/style.css`	352 B	0 B
`build/block-library/blocks/shortcode/editor-rtl.css`	603 B	0 B
`build/block-library/blocks/shortcode/editor.css`	603 B	0 B
`build/block-library/blocks/site-logo/editor-rtl.css`	321 B	0 B
`build/block-library/blocks/site-logo/editor.css`	321 B	0 B
`build/block-library/blocks/site-logo/style-rtl.css`	238 B	0 B
`build/block-library/blocks/site-logo/style.css`	238 B	0 B
`build/block-library/blocks/social-link/editor-rtl.css`	283 B	0 B
`build/block-library/blocks/social-link/editor.css`	283 B	0 B
`build/block-library/blocks/social-links/editor-rtl.css`	811 B	0 B
`build/block-library/blocks/social-links/editor.css`	810 B	0 B
`build/block-library/blocks/social-links/style-rtl.css`	1.44 kB	0 B
`build/block-library/blocks/social-links/style.css`	1.44 kB	0 B
`build/block-library/blocks/spacer/style-rtl.css`	184 B	0 B
`build/block-library/blocks/spacer/style.css`	184 B	0 B
`build/block-library/blocks/subhead/editor-rtl.css`	223 B	0 B
`build/block-library/blocks/subhead/editor.css`	223 B	0 B
`build/block-library/blocks/subhead/style-rtl.css`	210 B	0 B
`build/block-library/blocks/subhead/style.css`	210 B	0 B
`build/block-library/blocks/table/editor-rtl.css`	593 B	0 B
`build/block-library/blocks/table/editor.css`	593 B	0 B
`build/block-library/blocks/table/style-rtl.css`	501 B	0 B
`build/block-library/blocks/table/style.css`	501 B	0 B
`build/block-library/blocks/tag-cloud/editor-rtl.css`	237 B	0 B
`build/block-library/blocks/tag-cloud/editor.css`	235 B	0 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	221 B	0 B
`build/block-library/blocks/tag-cloud/style.css`	221 B	0 B
`build/block-library/blocks/template-part/editor-rtl.css`	714 B	0 B
`build/block-library/blocks/template-part/editor.css`	714 B	0 B
`build/block-library/blocks/text-columns/editor-rtl.css`	220 B	0 B
`build/block-library/blocks/text-columns/editor.css`	220 B	0 B
`build/block-library/blocks/text-columns/style-rtl.css`	283 B	0 B
`build/block-library/blocks/text-columns/style.css`	283 B	0 B
`build/block-library/blocks/verse/editor-rtl.css`	194 B	0 B
`build/block-library/blocks/verse/editor.css`	194 B	0 B
`build/block-library/blocks/video/editor-rtl.css`	617 B	0 B
`build/block-library/blocks/video/editor.css`	617 B	0 B
`build/block-library/blocks/video/style-rtl.css`	303 B	0 B
`build/block-library/blocks/video/style.css`	304 B	0 B
`build/block-library/common-rtl.css`	1.01 kB	0 B
`build/block-library/common.css`	1.01 kB	0 B
`build/block-library/theme-rtl.css`	860 B	0 B
`build/block-library/theme.css`	860 B	0 B
`build/block-serialization-spec-parser/index.js`	3.06 kB	0 B
`build/deprecated/index.js`	768 B	0 B
`build/dom-ready/index.js`	571 B	0 B
`build/edit-navigation/style-rtl.css`	938 B	0 B
`build/edit-navigation/style.css`	944 B	0 B
`build/editor/editor-styles-rtl.css`	476 B	0 B
`build/editor/editor-styles.css`	478 B	0 B
`build/editor/style-rtl.css`	3.89 kB	0 B
`build/editor/style.css`	3.89 kB	0 B
`build/element/index.js`	4.63 kB	0 B
`build/escape-html/index.js`	735 B	0 B
`build/format-library/style-rtl.css`	620 B	0 B
`build/format-library/style.css`	621 B	0 B
`build/html-entities/index.js`	623 B	0 B
`build/is-shallow-equal/index.js`	698 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/notices/index.js`	1.86 kB	0 B
`build/nux/style-rtl.css`	731 B	0 B
`build/nux/style.css`	727 B	0 B
`build/plugins/index.js`	2.54 kB	0 B
`build/primitives/index.js`	1.43 kB	0 B
`build/redux-routine/index.js`	2.84 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/warning/index.js`	1.14 kB	0 B

_{compressed-size-action}

packages/editor/src/components/post-text-editor/test/index.js

noisysocks

This looks good, thanks for fixing. 👍

The only bothersome thing I noticed in my testing is that you get lots of block validation errors in the console while you're typing out a block. But, this isn't really new—it happened before when you blur the textfield. And, I doubt many users type out a block manually.

…t is not forgotten when a dislpay mode is changed

…nge to editor has been introduced and given throttle time has passed

… setTimeout in index

noisysocks · 2021-01-17T23:34:37Z

Thanks for fixing this longstanding issue!!

ocean90 · 2021-01-20T13:37:16Z

packages/editor/src/components/post-text-editor/test/index.js

@@ -7,13 +7,14 @@ import Textarea from 'react-autosize-textarea';
 /**
 * WordPress dependencies
 */
-import { useSelect } from '@wordpress/data';
+import * as wp from '@wordpress/data';


@grzim This looks like some leftover from before 2259816? Should this be reverted?

Yes, it should be removed, useSelect is mocked with jest.mock call in another place. So const useSelect = wp.useSelect; is redundant.

mkaz · 2021-04-05T16:31:01Z

It looks like this PR might be causing the issue here: #29988

Co-authored-by: grzim <[email protected]>

* revert #27717 (#30524) Co-authored-by: grzim <[email protected]> * Use getAuthors for 'showCombobox' check (#30218) * Use getAuthors for 'showCombobox' check * Add inline comment * Gallery: Set 'addToGallery' prop to false when images don't have IDs. (#30122) This also sets MediaPlaceholder value to an empty object. With both props set to "falsy" values, the gallery media frame is initialized in the "Create Gallery" state. This lets users replace placeholder images from patterns. Co-authored-by: Grzegorz <[email protected]> Co-authored-by: grzim <[email protected]> Co-authored-by: George Mamadashvili <[email protected]>

grzim requested a review from draganescu Dec 14, 2020

ntsekouras reviewed Dec 15, 2020

View changes

packages/editor/src/components/post-text-editor/test/index.js Outdated Show resolved Hide resolved

grzim requested a review from noisysocks Dec 16, 2020

noisysocks approved these changes Jan 5, 2021

View changes

grzegorz_marzencki added 4 commits Dec 14, 2020

add throttle time after which editor value is saved. Thanks to this i…

33afa8b

…t is not forgotten when a dislpay mode is changed

add test case to check if resetEditorBlocks was called when a the cha…

8aa1913

…nge to editor has been introduced and given throttle time has passed

use jest.mock instead of es proxy in test. Use useThrottle instead of…

2259816

… setTimeout in index

return to setTimeout, to throttle on every change

Loading status checks…

eab4a74

youknowriad force-pushed the save-editor-value-on-change branch from 608fe1f to eab4a74 Jan 11, 2021

naming change from 'throttle' to 'debounce'

Loading status checks…

d75bf82

grzim deleted the save-editor-value-on-change branch Jan 17, 2021

github-actions bot added this to the Gutenberg 9.9 milestone Jan 17, 2021

ocean90 reviewed Jan 20, 2021

View changes

mkaz mentioned this pull request Apr 5, 2021

added check for HTML tags #30313

Open

mcsf mentioned this pull request Apr 5, 2021

Can't recover from invalid markup in code editor #29988

Open

grzim pushed a commit that referenced this pull request Apr 6, 2021

revert #27717

Loading status checks…

8a25fc4

grzim mentioned this pull request Apr 6, 2021

Code Editor: Revert save editors value on change (#27717) #30524

Merged

6 of 7 tasks complete

gziolo added a commit that referenced this pull request Apr 6, 2021

revert #27717 (#30524)

cce445f

Co-authored-by: grzim <[email protected]>

gziolo mentioned this pull request Apr 6, 2021

WordPress minor release - second round of bug fixes #30528

Merged

WordPress / gutenberg

Save editors value on change #27717

Save editors value on change #27717

grzim commented Dec 14, 2020 •

edited

github-actions bot commented Dec 14, 2020 •

edited

noisysocks left a comment

noisysocks commented Jan 17, 2021

This comment has been minimized.

This comment has been minimized.

mkaz commented Apr 5, 2021

WordPress / gutenberg

Save editors value on change #27717

Save editors value on change #27717

Conversation

grzim commented Dec 14, 2020 • edited

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

github-actions bot commented Dec 14, 2020 • edited

noisysocks left a comment

noisysocks commented Jan 17, 2021

This comment has been minimized.

ocean90 Jan 20, 2021 Member

This comment has been minimized.

gziolo Apr 6, 2021 • edited Member

mkaz commented Apr 5, 2021

grzim commented Dec 14, 2020 •

edited

github-actions bot commented Dec 14, 2020 •

edited

ocean90 Jan 20, 2021
Member

gziolo Apr 6, 2021 •

edited

Member