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

Migrate block editor insert usage to preferences store #39632

Open
wants to merge 12 commits into
base: trunk
Choose a base branch
from

Conversation

talldan
Copy link
Contributor

@talldan talldan commented Mar 22, 2022

Part of #31965

What?

The block editor package maintains some block insertion data to aid the 'Most used blocks' feature in the inserter. It persists this data.

This PR migrates the data to the preferences store.

Why?

As outlined in #31965, the goal is to move persisted data out of our various stores to a centralized preferences store.

How?

This required adding the preferences store as a dependency of the block editor package.

The logic in the block editor's preferences reducer is now moved over to a new action updateInsertUsage that uses the preferences store. This new private action is dispatched in the insertBlocks and replaceBlocks actions.

The local storage data is migrated across to live under the preferences store from the old preferences system.

The preferences store's API usually uses a scope parameter that's usually set to 'core/edit-post' or 'core/edit-site', to indicate which editor the data belongs to. insertUsage stats are shared across editors, so I've used the 'core' scope.

Finally, this PR introduces a new private action in the preferences store, markNextChangeAsExpensive, which can be dispatched before updating a preference to delay the regularity with which the persistence layer makes HTTP requests to update user meta. It means you can insert loads of blocks quickly, but user meta will only update after a minute has passed. Insert usage still backs up immediately to a local storage persistence layer, so there's lots of resilience.

Testing Instructions

  1. Using trunk open the post editor
  2. In the editor preferences modal, in the blocks section, enable the 'Show most used blocks' setting
  3. Delete your WP local storage data and reload
  4. Open the main inserter and click one of the blocks repeatedly (not paragraph, which is already first) in the Most Used section until it becomes the first block (note - possibly a bug that the order of blocks update while the inserter is open)
  5. Checkout this branch and rebuild
  6. Reload the post editor and open the main inserter, the order of the most used blocks should be retained (local storage data was migrated correctly)
  7. Select a different block several times and make it the most used block.
  8. Reload the post editor and open the main inserter, the order of the most used blocks should be retained (data is still persisted)

@talldan talldan added [Type] Enhancement A suggestion for improvement. [Package] Block editor /packages/block-editor labels Mar 22, 2022
@talldan talldan self-assigned this Mar 22, 2022
@talldan talldan force-pushed the migrate/block-editor-insert-usage-to-preferences-store branch from ff58d97 to 6598078 Compare March 22, 2022 09:36
@github-actions
Copy link

github-actions bot commented Mar 22, 2022

Size Change: +585 B (+0.03%)

Total Size: 1.75 MB

Filename Size Change
build/block-editor/index.min.js 254 kB +109 B (+0.04%)
build/block-library/blocks/image/view.min.js 1.61 kB +29 B (+1.84%)
build/block-library/blocks/term-description/style-rtl.css 126 B +18 B (+16.67%) ⚠️
build/block-library/blocks/term-description/style.css 126 B +18 B (+16.67%) ⚠️
build/block-library/index.min.js 216 kB +49 B (+0.02%)
build/block-library/style-rtl.css 14.6 kB +3 B (+0.02%)
build/block-library/style.css 14.6 kB +3 B (+0.02%)
build/components/index.min.js 221 kB +45 B (+0.02%)
build/interactivity/image.min.js 1.74 kB +28 B (+1.63%)
build/preferences-persistence/index.min.js 2.23 kB +175 B (+8.51%) 🔍
build/preferences/index.min.js 3 kB +107 B (+3.69%)
build/private-apis/index.min.js 1.01 kB +1 B (+0.1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 951 B
build/annotations/index.min.js 2.26 kB
build/api-fetch/index.min.js 2.31 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 579 B
build/block-directory/index.min.js 7.29 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/content-rtl.css 4.58 kB
build/block-editor/content.css 4.58 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
build/block-editor/style-rtl.css 16.2 kB
build/block-editor/style.css 16.2 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 149 B
build/block-library/blocks/audio/editor.css 151 B
build/block-library/blocks/audio/style-rtl.css 132 B
build/block-library/blocks/audio/style.css 132 B
build/block-library/blocks/audio/theme-rtl.css 134 B
build/block-library/blocks/audio/theme.css 134 B
build/block-library/blocks/avatar/editor-rtl.css 115 B
build/block-library/blocks/avatar/editor.css 115 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 310 B
build/block-library/blocks/button/editor.css 310 B
build/block-library/blocks/button/style-rtl.css 538 B
build/block-library/blocks/button/style.css 538 B
build/block-library/blocks/buttons/editor-rtl.css 336 B
build/block-library/blocks/buttons/editor.css 336 B
build/block-library/blocks/buttons/style-rtl.css 328 B
build/block-library/blocks/buttons/style.css 328 B
build/block-library/blocks/calendar/style-rtl.css 240 B
build/block-library/blocks/calendar/style.css 240 B
build/block-library/blocks/categories/editor-rtl.css 132 B
build/block-library/blocks/categories/editor.css 131 B
build/block-library/blocks/categories/style-rtl.css 152 B
build/block-library/blocks/categories/style.css 152 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 122 B
build/block-library/blocks/code/theme.css 122 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 420 B
build/block-library/blocks/columns/style.css 420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 124 B
build/block-library/blocks/comment-author-avatar/editor.css 124 B
build/block-library/blocks/comment-content/style-rtl.css 90 B
build/block-library/blocks/comment-content/style.css 90 B
build/block-library/blocks/comment-template/style-rtl.css 200 B
build/block-library/blocks/comment-template/style.css 199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 221 B
build/block-library/blocks/comments-pagination/editor.css 211 B
build/block-library/blocks/comments-pagination/style-rtl.css 234 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 832 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 631 B
build/block-library/blocks/cover/editor-rtl.css 668 B
build/block-library/blocks/cover/editor.css 669 B
build/block-library/blocks/cover/style-rtl.css 1.62 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 314 B
build/block-library/blocks/embed/editor.css 314 B
build/block-library/blocks/embed/style-rtl.css 419 B
build/block-library/blocks/embed/style.css 419 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 326 B
build/block-library/blocks/file/style-rtl.css 278 B
build/block-library/blocks/file/style.css 279 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 198 B
build/block-library/blocks/footnotes/style.css 197 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 229 B
build/block-library/blocks/form-input/style-rtl.css 342 B
build/block-library/blocks/form-input/style.css 342 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 344 B
build/block-library/blocks/form-submission-notification/editor.css 341 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 470 B
build/block-library/blocks/freeform/editor-rtl.css 2.6 kB
build/block-library/blocks/freeform/editor.css 2.6 kB
build/block-library/blocks/gallery/editor-rtl.css 958 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.71 kB
build/block-library/blocks/gallery/style.css 1.71 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 402 B
build/block-library/blocks/group/editor.css 402 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 79 B
build/block-library/blocks/group/theme.css 79 B
build/block-library/blocks/heading/style-rtl.css 188 B
build/block-library/blocks/heading/style.css 188 B
build/block-library/blocks/html/editor-rtl.css 346 B
build/block-library/blocks/html/editor.css 347 B
build/block-library/blocks/image/editor-rtl.css 845 B
build/block-library/blocks/image/editor.css 843 B
build/block-library/blocks/image/style-rtl.css 1.54 kB
build/block-library/blocks/image/style.css 1.54 kB
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 355 B
build/block-library/blocks/latest-comments/style.css 354 B
build/block-library/blocks/latest-posts/editor-rtl.css 204 B
build/block-library/blocks/latest-posts/editor.css 204 B
build/block-library/blocks/latest-posts/style-rtl.css 509 B
build/block-library/blocks/latest-posts/style.css 510 B
build/block-library/blocks/list/style-rtl.css 107 B
build/block-library/blocks/list/style.css 107 B
build/block-library/blocks/media-text/editor-rtl.css 304 B
build/block-library/blocks/media-text/editor.css 303 B
build/block-library/blocks/media-text/style-rtl.css 516 B
build/block-library/blocks/media-text/style.css 515 B
build/block-library/blocks/more/editor-rtl.css 427 B
build/block-library/blocks/more/editor.css 427 B
build/block-library/blocks/navigation-link/editor-rtl.css 663 B
build/block-library/blocks/navigation-link/editor.css 664 B
build/block-library/blocks/navigation-link/style-rtl.css 192 B
build/block-library/blocks/navigation-link/style.css 191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 295 B
build/block-library/blocks/navigation-submenu/editor.css 294 B
build/block-library/blocks/navigation/editor-rtl.css 2.2 kB
build/block-library/blocks/navigation/editor.css 2.21 kB
build/block-library/blocks/navigation/style-rtl.css 2.25 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 392 B
build/block-library/blocks/nextpage/editor.css 392 B
build/block-library/blocks/page-list/editor-rtl.css 378 B
build/block-library/blocks/page-list/editor.css 378 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 236 B
build/block-library/blocks/paragraph/editor.css 236 B
build/block-library/blocks/paragraph/style-rtl.css 341 B
build/block-library/blocks/paragraph/style.css 340 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 522 B
build/block-library/blocks/post-comments-form/style.css 522 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-date/style-rtl.css 62 B
build/block-library/blocks/post-date/style.css 62 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 729 B
build/block-library/blocks/post-featured-image/editor.css 726 B
build/block-library/blocks/post-featured-image/style-rtl.css 341 B
build/block-library/blocks/post-featured-image/style.css 341 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 399 B
build/block-library/blocks/post-template/style.css 398 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 70 B
build/block-library/blocks/post-time-to-read/style.css 70 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 134 B
build/block-library/blocks/pullquote/editor.css 134 B
build/block-library/blocks/pullquote/style-rtl.css 342 B
build/block-library/blocks/pullquote/style.css 342 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 121 B
build/block-library/blocks/query-pagination-numbers/editor.css 118 B
build/block-library/blocks/query-pagination/editor-rtl.css 220 B
build/block-library/blocks/query-pagination/editor.css 208 B
build/block-library/blocks/query-pagination/style-rtl.css 287 B
build/block-library/blocks/query-pagination/style.css 283 B
build/block-library/blocks/query-title/style-rtl.css 64 B
build/block-library/blocks/query-title/style.css 64 B
build/block-library/blocks/query/editor-rtl.css 452 B
build/block-library/blocks/query/editor.css 451 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 238 B
build/block-library/blocks/quote/style.css 238 B
build/block-library/blocks/quote/theme-rtl.css 221 B
build/block-library/blocks/quote/theme.css 225 B
build/block-library/blocks/read-more/style-rtl.css 138 B
build/block-library/blocks/read-more/style.css 138 B
build/block-library/blocks/rss/editor-rtl.css 101 B
build/block-library/blocks/rss/editor.css 101 B
build/block-library/blocks/rss/style-rtl.css 288 B
build/block-library/blocks/rss/style.css 287 B
build/block-library/blocks/search/editor-rtl.css 183 B
build/block-library/blocks/search/editor.css 183 B
build/block-library/blocks/search/style-rtl.css 672 B
build/block-library/blocks/search/style.css 671 B
build/block-library/blocks/search/theme-rtl.css 113 B
build/block-library/blocks/search/theme.css 113 B
build/block-library/blocks/search/view.min.js 475 B
build/block-library/blocks/separator/editor-rtl.css 100 B
build/block-library/blocks/separator/editor.css 100 B
build/block-library/blocks/separator/style-rtl.css 248 B
build/block-library/blocks/separator/style.css 248 B
build/block-library/blocks/separator/theme-rtl.css 195 B
build/block-library/blocks/separator/theme.css 195 B
build/block-library/blocks/shortcode/editor-rtl.css 286 B
build/block-library/blocks/shortcode/editor.css 286 B
build/block-library/blocks/site-logo/editor-rtl.css 806 B
build/block-library/blocks/site-logo/editor.css 803 B
build/block-library/blocks/site-logo/style-rtl.css 218 B
build/block-library/blocks/site-logo/style.css 218 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-title/editor-rtl.css 123 B
build/block-library/blocks/site-title/editor.css 123 B
build/block-library/blocks/site-title/style-rtl.css 71 B
build/block-library/blocks/site-title/style.css 71 B
build/block-library/blocks/social-link/editor-rtl.css 338 B
build/block-library/blocks/social-link/editor.css 338 B
build/block-library/blocks/social-links/editor-rtl.css 676 B
build/block-library/blocks/social-links/editor.css 675 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.5 kB
build/block-library/blocks/spacer/editor-rtl.css 346 B
build/block-library/blocks/spacer/editor.css 346 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 394 B
build/block-library/blocks/table/editor.css 394 B
build/block-library/blocks/table/style-rtl.css 640 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/tag-cloud/style-rtl.css 266 B
build/block-library/blocks/tag-cloud/style.css 265 B
build/block-library/blocks/template-part/editor-rtl.css 393 B
build/block-library/blocks/template-part/editor.css 393 B
build/block-library/blocks/template-part/theme-rtl.css 113 B
build/block-library/blocks/template-part/theme.css 113 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 165 B
build/block-library/blocks/text-columns/style.css 165 B
build/block-library/blocks/verse/style-rtl.css 98 B
build/block-library/blocks/verse/style.css 98 B
build/block-library/blocks/video/editor-rtl.css 553 B
build/block-library/blocks/video/editor.css 554 B
build/block-library/blocks/video/style-rtl.css 192 B
build/block-library/blocks/video/style.css 192 B
build/block-library/blocks/video/theme-rtl.css 134 B
build/block-library/blocks/video/theme.css 134 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.9 kB
build/block-library/editor.css 11.8 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/theme-rtl.css 702 B
build/block-library/theme.css 707 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 52.2 kB
build/commands/index.min.js 16.1 kB
build/commands/style-rtl.css 955 B
build/commands/style.css 952 B
build/components/style-rtl.css 12 kB
build/components/style.css 12 kB
build/compose/index.min.js 12.9 kB
build/core-commands/index.min.js 2.78 kB
build/core-data/index.min.js 72.8 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.35 kB
build/customize-widgets/style.css 1.35 kB
build/data-controls/index.min.js 641 B
build/data/index.min.js 8.98 kB
build/date/index.min.js 18 kB
build/deprecated/index.min.js 458 B
build/dom-ready/index.min.js 325 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 580 B
build/edit-post/index.min.js 12.6 kB
build/edit-post/style-rtl.css 2.34 kB
build/edit-post/style.css 2.33 kB
build/edit-site/index.min.js 211 kB
build/edit-site/posts-rtl.css 6.7 kB
build/edit-site/posts.css 6.7 kB
build/edit-site/style-rtl.css 11.8 kB
build/edit-site/style.css 11.8 kB
build/edit-widgets/index.min.js 17.6 kB
build/edit-widgets/style-rtl.css 4.2 kB
build/edit-widgets/style.css 4.2 kB
build/editor/index.min.js 98.3 kB
build/editor/style-rtl.css 9.1 kB
build/editor/style.css 9.1 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.07 kB
build/format-library/style-rtl.css 506 B
build/format-library/style.css 505 B
build/hooks/index.min.js 1.54 kB
build/html-entities/index.min.js 445 B
build/i18n/index.min.js 3.58 kB
build/interactivity/debug.min.js 16.5 kB
build/interactivity/file.min.js 447 B
build/interactivity/index.min.js 13.4 kB
build/interactivity/navigation.min.js 1.16 kB
build/interactivity/query.min.js 742 B
build/interactivity/router.min.js 2.8 kB
build/interactivity/search.min.js 615 B
build/is-shallow-equal/index.min.js 526 B
build/keyboard-shortcuts/index.min.js 1.31 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.16 kB
build/list-reusable-blocks/style-rtl.css 846 B
build/list-reusable-blocks/style.css 846 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.3 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.59 kB
build/nux/style-rtl.css 749 B
build/nux/style.css 745 B
build/patterns/index.min.js 7.36 kB
build/patterns/style-rtl.css 687 B
build/patterns/style.css 685 B
build/plugins/index.min.js 1.81 kB
build/preferences/style-rtl.css 578 B
build/preferences/style.css 578 B
build/primitives/index.min.js 829 B
build/priority-queue/index.min.js 1.54 kB
build/react-i18n/index.min.js 630 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.76 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.74 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.1 kB
build/router/index.min.js 1.96 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.03 kB
build/token-list/index.min.js 581 B
build/url/index.min.js 3.85 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react-jsx-runtime.min.js 560 B
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 965 B
build/warning/index.min.js 250 B
build/widgets/index.min.js 7.19 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@talldan
Copy link
Contributor Author

talldan commented Mar 22, 2022

Looks like there are some failing tests - some more unit tests that need various mocks in place now that they touch the preferences store. I'll update those tomorrow.

@talldan
Copy link
Contributor Author

talldan commented Mar 24, 2022

There's a discussion in #39672 (comment) about whether preferences should be a dependency of block-editor. In the case of this PR, it's difficult to avoid that.

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.

Tested and all works well, both migrating usage from trunk and persisting new usage ✅

possibly a bug that the order of blocks update while the inserter is open

If it is a bug, it's a very fun one 😄

Couple questions below, code looks good otherwise.

packages/block-editor/package.json Outdated Show resolved Hide resolved
packages/data/src/plugins/persistence/index.js Outdated Show resolved Hide resolved
packages/block-editor/src/store/test/actions.js Outdated Show resolved Hide resolved
@talldan
Copy link
Contributor Author

talldan commented Mar 25, 2022

Thanks for the review! I'll hold off on merging this and switch it to a draft until this conversation about adding preferences as a dependency of block-editor (#39672 (comment)) is resolved.

@talldan talldan marked this pull request as draft March 25, 2022 05:14
@talldan talldan force-pushed the migrate/block-editor-insert-usage-to-preferences-store branch from dd14c00 to 35c4e0c Compare April 5, 2022 06:26
@talldan talldan force-pushed the migrate/block-editor-insert-usage-to-preferences-store branch from 35c4e0c to 6e3679b Compare April 28, 2022 07:04
@talldan
Copy link
Contributor Author

talldan commented May 13, 2022

Status update on this one, this conversation is very relevant to this PR - #39795 (comment).

Now that preferences are saved via the REST API, merging this would mean that every block insert would result in an API request, which is probably undesirable.

I'm going to be AFK for a month so won't be able to solve this one quickly, but happy to look at it when I return.

@talldan talldan force-pushed the migrate/block-editor-insert-usage-to-preferences-store branch from 6e3679b to 6d99419 Compare October 13, 2022 03:30
@talldan talldan force-pushed the migrate/block-editor-insert-usage-to-preferences-store branch from 6d99419 to 9cc9e08 Compare March 28, 2023 06:45
@talldan talldan force-pushed the migrate/block-editor-insert-usage-to-preferences-store branch from 67aadf8 to 7367bdb Compare June 30, 2023 06:40
@talldan
Copy link
Contributor Author

talldan commented Jun 30, 2023

It's not a particularly complicated function. Instead of having it private / unstable could any callers that need it just call select( preferencesStore ).get directly?

Alternatively it can stay as a non-exported function but have it so that callers pass in select as an argument.

Same for __unstableGetInsertUsageForBlock.

Yeah, I don't like it, the reason it's there is the usage in the getDependants function of the memoized getInserterItems selector:

export const getInserterItems = createSelector(
	( state, rootClientId = null ) => {
	        // ...
	},
	( state ) => [
	        // ...,
		__unstableGetInsertUsage(),
	]
);

I don't think there's a way to call select properly, and it's a registry selector so it has to be exported to be bound.

My understanding is that this PR will unlock the ability to use private registry selectors in the block editor store, so I've switched it to being a private registry selector called getInsertUsage and deleted __unstableGetInsertUsageForBlock.

I don't know if there's another way around this, but this provides some nice symmetry with updateInsertUsage being a private action, and the tests are also better now.

@talldan talldan force-pushed the migrate/block-editor-insert-usage-to-preferences-store branch from 4fc359d to 353c350 Compare June 30, 2023 08:11
@talldan
Copy link
Contributor Author

talldan commented Jun 30, 2023

My saying 30 days came from nowhere 😅 I don't think it really matters how we do it just so long as the object doesn't grow unboundedly as users install and insert new blocks. Sorting the key/value pairs and then calling .slice( 100 ) also works.

I tried limiting it to the 100 most recently inserted blocks. I did it this way so that if a person goes away for three months, and then comes back they still have some insertUsage data.

I think 100 should be enough to not have an adverse effect on the frecency. I did also consider only keeping the 100 most frecent blocks, but this causes an issue in that new blocks can never get into an established top 100 (since they need some existing insertUsage data for their count to increase), so I think using keeping 100 based on time is the right approach.

Since the slicing happens in updateInsertUsage, we should check the performance results.

I think I've addressed all the review feedback now.

Copy link
Member

@jsnajdr jsnajdr left a comment

Choose a reason for hiding this comment

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

I like this a lot and am looking forward to see it merged! I pointed out a few bugs and nits, but conceptually this is perfectly OK IMO.

packages/block-editor/src/store/actions.js Outdated Show resolved Hide resolved
packages/block-editor/src/store/actions.js Outdated Show resolved Hide resolved
packages/block-editor/src/store/private-actions.js Outdated Show resolved Hide resolved
@@ -2008,7 +1996,8 @@ export const getInserterItems = createSelector(
}

const id = `core/block/${ reusableBlock.id }`;
const { time, count = 0 } = getInsertUsage( state, id ) || {};
const insertUsage = getInsertUsage();
const { time, count = 0 } = insertUsage?.[ id ] ?? {};
const frecency = calculateFrecency( time, count );
Copy link
Member

Choose a reason for hiding this comment

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

The getInsertUsage and calculateFrecency calls could be one day combined into one getBlockFrecency( id ) selector. They are always used together, there's no other use of the insert usage data than calculating frecency for a particular block.

// This is a leading edge debounce. If there's no promise or timeout
// in progress, call the debounced function immediately.
if ( ! activePromise && ! timeoutId ) {
if ( ! isTrailing && ! activePromise && ! timeoutId ) {
Copy link
Member

Choose a reason for hiding this comment

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

I think this debounce logic has been a little bit flawed from the beginning, and the long expensiveRequestDebounceMS makes it worse.

If I call the debounced function repeatedly, the timeout keeps getting cancelled and rescheduled, and as a result the save can be never performed. Or only after a very long time, much longer than the intended timeout.

To avoid this "starvation" problem, we should do throttling rather than debouncing. Once the 60sec timeout is active, keep it running, but on further calls only update the function to be called when it finally expires.

The Lodash debounce function has a maxWait option that achieves something similar.

If we fix this behavior, then maybe we can remove also the invocation on the leading edge? I don't know why it was originally added -- why can't we always wait 2.5s? Maybe it's a workaround for this starvation problem?

Copy link
Member

Choose a reason for hiding this comment

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

Just noting that we already have both throttle and debounce utilities as part of the @wordpress/compose package, and the built-in debounce() also supports a maxWait option. Just in case that could be something you'd like to utilize instead of a custom debounce logic.

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 I call the debounced function repeatedly, the timeout keeps getting cancelled and rescheduled, and as a result the save can be never performed. Or only after a very long time, much longer than the intended timeout.
To avoid this "starvation" problem, we should do throttling rather than debouncing. Once the 60sec timeout is active, keep it running, but on further calls only update the function to be called when it finally expires.

I'll look into it. It's not really much of an issue with the shorter delay, but perhaps becomes more apparent with the longer delay. 🤔

The main aim is to avoid repeated REST requests. WordPress servers are very bad at handling multiple requests at the same time, but perhaps it's ok to throttle.

If we fix this behavior, then maybe we can remove also the invocation on the leading edge? I don't know why it was originally added -- why can't we always wait 2.5s? Maybe it's a workaround for this starvation problem?

The most common use case is infrequent preferences calls, so triggering the request right away is usually fine. It also reduces the chances that the delay/request might be in flight while the user unloads the page, causing the request to never go through.

Just noting that we already have both throttle and debounce utilities as part of the @wordpress/compose package, and the built-in debounce() also supports a maxWait option. Just in case that could be something you'd like to utilize instead of a custom debounce logic.

@tyxla It needs to support async functions, which most libraries don't. The code here ensures requests are never made in parallel—it delays from after a promise completion rather than from function invocation. It might be there's another way of doing this that allows leverage of worpdress/compose, any suggestions appreciated.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've updated it to work as @jsnajdr describes so that we can try it out.

I think it works well. I've kept the debounce for the non-expensive call a short 1 second, and the expensive one 5 seconds, and there's a 10 second max wait.

The values feel a bit arbitrary, but I figure it should be ok to prevent spamming of HTTP requests if the user is duplicating lots of blocks.

The function is now also very simple, which is a bonus.

I think all the other feedback has also been addressed. I still need to give this a thorough test as so long has passed since the last time I looked at this PR.

packages/block-editor/src/store/private-actions.js Outdated Show resolved Hide resolved
sethrubenstein pushed a commit to pewresearch/gutenberg that referenced this pull request Jul 13, 2023
…ordPress#52088)

As a workaround, until WordPress#39632 is merged, make sure that private actions
and selectors can be unlocked from the original store descriptor (the
one created by `createReduxStore`) and not just the one registered in
the default registry (created by `registerStore`).

Without this workaround, specific setups will unexpectedly fail, such as
the action tests in the `reusable-blocks` package, due to the way that
those tests create their own registries in which they register stores
like `block-editor`.

Context: WordPress#51145 (comment)

Props jsnajdr
tellthemachines pushed a commit that referenced this pull request Jul 17, 2023
…52088)

As a workaround, until #39632 is merged, make sure that private actions
and selectors can be unlocked from the original store descriptor (the
one created by `createReduxStore`) and not just the one registered in
the default registry (created by `registerStore`).

Without this workaround, specific setups will unexpectedly fail, such as
the action tests in the `reusable-blocks` package, due to the way that
those tests create their own registries in which they register stores
like `block-editor`.

Context: #51145 (comment)

Props jsnajdr
ramonjd added a commit that referenced this pull request Jul 18, 2023
* Try restoring the site editor animation (#51956)

* Try restoring the site editor animation

* fix header animation

* Remove accidental addition of layout prop

* tidy up formatting

* fix animate presence issue

* Fix animation between sidebar view and distraction free edit view

* Leave sidebar present and maintain canvas to
sidebar animation

The sidebar is necessary for routing on mobile so we have to maintain its presence in the DOM. Just hiding it isn't enough though, as it is still able to be reached with keyboard tabs and screen readers. Using the relatively new `inert` property disables the element from user interaction, so we add that when we don't want the sidebar to be shown.

* Fix mobile view for pattern library

On Mobile, the canvas mode wasn't being set to edit when using the pattern library. This updates it to use the showSidbar value instead, keeping it in sync with the inert setting.

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>

* Change password input to type text so contents are visible. (#52622)

* Iframe: Silence style compat warnings when in a BlockPreview (#52627)

* Do not autofocus page title field in the Create new page modal dialog. (#52603)

* Use lowercase p in "Manage Patterns" (#52617)

* Remove theme patterns title (#52570)

* Block editor store: also attach private APIs to old store descriptor (#52088)

As a workaround, until #39632 is merged, make sure that private actions
and selectors can be unlocked from the original store descriptor (the
one created by `createReduxStore`) and not just the one registered in
the default registry (created by `registerStore`).

Without this workaround, specific setups will unexpectedly fail, such as
the action tests in the `reusable-blocks` package, due to the way that
those tests create their own registries in which they register stores
like `block-editor`.

Context: #51145 (comment)

Props jsnajdr

* Block removal prompt: let consumers pass their own rules (#51841)

* Block removal prompt: let consumers pass their own rules

Following up on #51145, this untangles `edit-site` from `block-editor`
by removing the hard-coded set of rules `blockTypePromptMessages` from
the generic `BlockRemovalWarningModal` component. Rules are now to be
passed to that component by whichever block editor is using it.

Names and comments have been updated accordingly and improved.

* Site editor: Add e2e test for block removal prompt

* Fix Shift+Tab to Block Toolbar (#52613)

* Fix Shift+Tab to Block Toolbar

* Add changelog entry

* Show warning on removal of Post Template block in the site editor. (#52666)

* Avoid copying global style presets via the styles compatibility hook (#52640)

* i18n: Make the tab labels of `ColorGradientSettingsDropdown` component translatable (#52669)

* Rich Text/Footnotes: fix getRichTextValues for useInnerBlocksProps.save (#52682)

* Rich Text/Footnotes: fix getRichTextValues for useInnerBlocksProps.save

* Address feedback

* Patterns: Remove `reusable` text from menu once rename hint has been dismissed (#52664)

* Show uncategorized patterns on the Editor > Patterns page (#52633)

* Patterns: fix bug with Create Patterns menu not showing in site editor page editing (#52671)

* Pass the root client id into the reusable blocks menu

* Check that clientIds array is defined

* Make check for array item more specific

* Search block: Enqueue view script through block.json (#52552)

* Search block: Enqueue view script through block.json

* Remove extra space

* Use `_get_block_template_file` function and set $area variable. (#52708)

* Use `_get_block_template_file` function and set $area variable.

* Update packages/block-library/src/template-part/index.php

Co-authored-by: Felix Arntz <felixarntz@users.noreply.github.com>

---------

Co-authored-by: Felix Arntz <felixarntz@users.noreply.github.com>

* Site Editor: Don't allow creating template part on the Patterns page for non-block themes (#52656)

* Don't allow template part to be created on the Patterns page for non-block themes

* Remove unnecessary theme directory name in E2E test

* Change Delete page menu item to Move to trash. (#52641)

* Use relative path internally to include packages in dependencies (#52712)

* Spacing Sizes: Fix zero size (#52711)

* DimensionsPanel: Fix unexpected value decoding/encoding (#52661)

---------

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>
Co-authored-by: Robert Anderson <robert@noisysocks.com>
Co-authored-by: Andrea Fercia <a.fercia@gmail.com>
Co-authored-by: Rich Tabor <hi@richtabor.com>
Co-authored-by: James Koster <james@jameskoster.co.uk>
Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com>
Co-authored-by: Haz <hazdiego@gmail.com>
Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com>
Co-authored-by: Glen Davies <glendaviesnz@users.noreply.github.com>
Co-authored-by: Carolina Nymark <myazalea@hotmail.com>
Co-authored-by: Petter Walbø Johnsgård <petter@dekode.no>
Co-authored-by: Jonny Harris <spacedmonkey@users.noreply.github.com>
Co-authored-by: Felix Arntz <felixarntz@users.noreply.github.com>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
@talldan
Copy link
Contributor Author

talldan commented Apr 2, 2024

I don't have any time to work on this in the forseeable future, so would be happy for someone to volunteer to take this over.

edit: As of mid July 2024, I've started working on this again.

Copy link

github-actions bot commented Apr 2, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: adamziel <zieladam@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@talldan talldan force-pushed the migrate/block-editor-insert-usage-to-preferences-store branch 4 times, most recently from 3d066cf to 6eb84df Compare July 15, 2024 06:48
Update tests

Make updateInsertUsage a proper action that can be unit tested

Fix reusable block tests

Update test

Try fixing private actions with new store registration

Update tests

Add special handling for the insertUsage migration as it was performed later than others

Remove unused function

Add mark next change as expensive action to preferences store

Update debounce function to handle a longer debounce for expensive changes

Mark the insertUsage preference change as expensive

Make expensive calls use a trailing edge debounce

Fix duplicate keys in tests

Improve trailing edge test

Fix tests, and ensure options object is optional

Make updateInsertUsage a private API

Make markNextChangeAsExpensive a private API

Update docs

Update package-lock

Opt-in preferences as a core module using private apis

Do not unlock what is already unlocked

Remove time property from INSERT_BLOCKS and REPLACE_BLOCKS action objects

Rename `match` to `variation`

Rename file to create-async-debouncer

Add an extra param for defining the debounce of expensive requests

Add a default value of `false` for the `isExpensive` option

Make `__unstableGetInsertUsage` a private selector called `getInsertUsage`. Remove `__unstableGetInsertUsageForBlock`

Only run the migration when needed

Keep the `insertUsage` data at a maximum of 100 records

Fix linting issues

Update docs
@talldan talldan force-pushed the migrate/block-editor-insert-usage-to-preferences-store branch from 8f3f287 to 152c653 Compare July 18, 2024 02:56
@talldan
Copy link
Contributor Author

talldan commented Jul 18, 2024

The changes to debouncing caused some interesting issues in e2e tests.

A couple of e2e tests use the preferences API to set up a test state (setFixedToolbar( true )), and then call it again at the end of the test case to tear down (setFixedToolbar( false )). The switch to only using a trailing edge debounce results in the second call never triggering an HTTP request, and on the starting the next test case the true state would be restored from user meta.

Instead I've switched to resetPreferences which bypasses the preferences API (it updates user meta directly and playwright will wait for it to complete before moving on, while the other way is a 'fire and forget').

It also looks like preferences state is only ever reset at the start of running an entire test suite, not before individual files or test cases, so there can be lingering preferences state. Surprisingly it doesn't cause that many issues. 🤔

Comment on lines +42 to +44
await editor.setPreferences( 'core/edit-site', {
welcomeGuide: false,
} );
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 test actually fails in trunk if you run it locally. It only passes in CI in trunk because other tests that run before it set welcomeGuide to false 😬

I'm not sure why it started failing on CI in this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Block editor /packages/block-editor [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants