Add new persistence api to the preferences package #40246

talldan · 2022-04-12T05:25:36Z

What?

This PR contains only the changes to the preferences package from #39795. It should hopefully be easier to review.

So you know where this PR fits in, #39795 demonstrates the following:

A new API in the preferences package for configuring a persistence layer (these are the changes in this PR)
A new package with a persistence layer that saves preferences primarily to user meta. It also backs up to local storage in cases where an HTTP request might be interrupted or the user goes offline.
Migration code to port the current local storage preferences to the new persistence layer.
An inline script to configure preferences to use the new persistence package.

Why?

After #39632 is merged, all Gutenberg preferences will be managed by the preferences package. It has become the logical place to add this API. Doing so will finally allow us to solve #15105, which is a long standing problem for users.

Another goal is to deprecate the registerStore function and the existing persistence plugin that's part of @wordpress/data (https://github.com/WordPress/gutenberg/blob/trunk/packages/data/src/plugins/persistence/README.md).

How?

A new action has been added to the preferences package for configuring the persistence layer:

wp.data.dispatch( 'core/preferences' ).setPersistenceLayer( 
    {
        async get() { // returns preferences from a source (local storage, rest api etc.) }, 
        set() { // sets preferences at a source }
    }
);

And in the preferences reducer a higher-order reducer is used to call the persistence layer get and set functions.

Testing Instructions

The best way to test is to checkout the try/preferences-configurable-persistence-layer branch from #39795.

Open up an editor and change a preference (e.g. top toolbar)
Open up another browser, login to the same account, and open up the same editor

Expected: top toolbar should be active

github-actions · 2022-04-12T05:35:06Z

Size Change: +134 B (0%)

Total Size: 1.22 MB

Filename	Size	Change
`build/preferences/index.min.js`	1.33 kB	+134 B (+11%)	⚠️

ℹ️ View Unchanged

Filename	Size
`build/a11y/index.min.js`	993 B
`build/admin-manifest/index.min.js`	1.24 kB
`build/annotations/index.min.js`	2.77 kB
`build/api-fetch/index.min.js`	2.27 kB
`build/autop/index.min.js`	2.15 kB
`build/blob/index.min.js`	487 B
`build/block-directory/index.min.js`	6.49 kB
`build/block-directory/style-rtl.css`	1.01 kB
`build/block-directory/style.css`	1.01 kB
`build/block-editor/default-editor-styles-rtl.css`	378 B
`build/block-editor/default-editor-styles.css`	378 B
`build/block-editor/index.min.js`	149 kB
`build/block-editor/style-rtl.css`	15.5 kB
`build/block-editor/style.css`	15.5 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`	65 B
`build/block-library/blocks/archives/style.css`	65 B
`build/block-library/blocks/audio/editor-rtl.css`	150 B
`build/block-library/blocks/audio/editor.css`	150 B
`build/block-library/blocks/audio/style-rtl.css`	111 B
`build/block-library/blocks/audio/style.css`	111 B
`build/block-library/blocks/audio/theme-rtl.css`	125 B
`build/block-library/blocks/audio/theme.css`	125 B
`build/block-library/blocks/avatar/editor-rtl.css`	116 B
`build/block-library/blocks/avatar/editor.css`	116 B
`build/block-library/blocks/avatar/style-rtl.css`	59 B
`build/block-library/blocks/avatar/style.css`	59 B
`build/block-library/blocks/block/editor-rtl.css`	161 B
`build/block-library/blocks/block/editor.css`	161 B
`build/block-library/blocks/button/editor-rtl.css`	445 B
`build/block-library/blocks/button/editor.css`	445 B
`build/block-library/blocks/button/style-rtl.css`	560 B
`build/block-library/blocks/button/style.css`	560 B
`build/block-library/blocks/buttons/editor-rtl.css`	292 B
`build/block-library/blocks/buttons/editor.css`	292 B
`build/block-library/blocks/buttons/style-rtl.css`	275 B
`build/block-library/blocks/buttons/style.css`	275 B
`build/block-library/blocks/calendar/style-rtl.css`	207 B
`build/block-library/blocks/calendar/style.css`	207 B
`build/block-library/blocks/categories/editor-rtl.css`	84 B
`build/block-library/blocks/categories/editor.css`	83 B
`build/block-library/blocks/categories/style-rtl.css`	79 B
`build/block-library/blocks/categories/style.css`	79 B
`build/block-library/blocks/code/style-rtl.css`	103 B
`build/block-library/blocks/code/style.css`	103 B
`build/block-library/blocks/code/theme-rtl.css`	124 B
`build/block-library/blocks/code/theme.css`	124 B
`build/block-library/blocks/columns/editor-rtl.css`	108 B
`build/block-library/blocks/columns/editor.css`	108 B
`build/block-library/blocks/columns/style-rtl.css`	406 B
`build/block-library/blocks/columns/style.css`	406 B
`build/block-library/blocks/comment-author-avatar/editor-rtl.css`	125 B
`build/block-library/blocks/comment-author-avatar/editor.css`	125 B
`build/block-library/blocks/comment-template/style-rtl.css`	127 B
`build/block-library/blocks/comment-template/style.css`	127 B
`build/block-library/blocks/comments-pagination-numbers/editor-rtl.css`	123 B
`build/block-library/blocks/comments-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/comments-pagination/editor-rtl.css`	222 B
`build/block-library/blocks/comments-pagination/editor.css`	209 B
`build/block-library/blocks/comments-pagination/style-rtl.css`	235 B
`build/block-library/blocks/comments-pagination/style.css`	231 B
`build/block-library/blocks/comments-query-loop/editor-rtl.css`	95 B
`build/block-library/blocks/comments-query-loop/editor.css`	95 B
`build/block-library/blocks/cover/editor-rtl.css`	546 B
`build/block-library/blocks/cover/editor.css`	547 B
`build/block-library/blocks/cover/style-rtl.css`	1.56 kB
`build/block-library/blocks/cover/style.css`	1.56 kB
`build/block-library/blocks/embed/editor-rtl.css`	293 B
`build/block-library/blocks/embed/editor.css`	293 B
`build/block-library/blocks/embed/style-rtl.css`	417 B
`build/block-library/blocks/embed/style.css`	417 B
`build/block-library/blocks/embed/theme-rtl.css`	124 B
`build/block-library/blocks/embed/theme.css`	124 B
`build/block-library/blocks/file/editor-rtl.css`	300 B
`build/block-library/blocks/file/editor.css`	300 B
`build/block-library/blocks/file/style-rtl.css`	255 B
`build/block-library/blocks/file/style.css`	255 B
`build/block-library/blocks/file/view.min.js`	353 B
`build/block-library/blocks/freeform/editor-rtl.css`	2.44 kB
`build/block-library/blocks/freeform/editor.css`	2.44 kB
`build/block-library/blocks/gallery/editor-rtl.css`	961 B
`build/block-library/blocks/gallery/editor.css`	964 B
`build/block-library/blocks/gallery/style-rtl.css`	1.51 kB
`build/block-library/blocks/gallery/style.css`	1.51 kB
`build/block-library/blocks/gallery/theme-rtl.css`	122 B
`build/block-library/blocks/gallery/theme.css`	122 B
`build/block-library/blocks/group/editor-rtl.css`	333 B
`build/block-library/blocks/group/editor.css`	333 B
`build/block-library/blocks/group/style-rtl.css`	57 B
`build/block-library/blocks/group/style.css`	57 B
`build/block-library/blocks/group/theme-rtl.css`	78 B
`build/block-library/blocks/group/theme.css`	78 B
`build/block-library/blocks/heading/style-rtl.css`	76 B
`build/block-library/blocks/heading/style.css`	76 B
`build/block-library/blocks/html/editor-rtl.css`	332 B
`build/block-library/blocks/html/editor.css`	333 B
`build/block-library/blocks/image/editor-rtl.css`	731 B
`build/block-library/blocks/image/editor.css`	730 B
`build/block-library/blocks/image/style-rtl.css`	529 B
`build/block-library/blocks/image/style.css`	535 B
`build/block-library/blocks/image/theme-rtl.css`	124 B
`build/block-library/blocks/image/theme.css`	124 B
`build/block-library/blocks/latest-comments/style-rtl.css`	284 B
`build/block-library/blocks/latest-comments/style.css`	284 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	199 B
`build/block-library/blocks/latest-posts/editor.css`	198 B
`build/block-library/blocks/latest-posts/style-rtl.css`	447 B
`build/block-library/blocks/latest-posts/style.css`	446 B
`build/block-library/blocks/list/style-rtl.css`	88 B
`build/block-library/blocks/list/style.css`	88 B
`build/block-library/blocks/media-text/editor-rtl.css`	266 B
`build/block-library/blocks/media-text/editor.css`	263 B
`build/block-library/blocks/media-text/style-rtl.css`	493 B
`build/block-library/blocks/media-text/style.css`	490 B
`build/block-library/blocks/more/editor-rtl.css`	431 B
`build/block-library/blocks/more/editor.css`	431 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	708 B
`build/block-library/blocks/navigation-link/editor.css`	706 B
`build/block-library/blocks/navigation-link/style-rtl.css`	115 B
`build/block-library/blocks/navigation-link/style.css`	115 B
`build/block-library/blocks/navigation-submenu/editor-rtl.css`	299 B
`build/block-library/blocks/navigation-submenu/editor.css`	299 B
`build/block-library/blocks/navigation-submenu/view.min.js`	375 B
`build/block-library/blocks/navigation/editor-rtl.css`	2.03 kB
`build/block-library/blocks/navigation/editor.css`	2.04 kB
`build/block-library/blocks/navigation/style-rtl.css`	1.93 kB
`build/block-library/blocks/navigation/style.css`	1.92 kB
`build/block-library/blocks/navigation/view.min.js`	2.85 kB
`build/block-library/blocks/nextpage/editor-rtl.css`	395 B
`build/block-library/blocks/nextpage/editor.css`	395 B
`build/block-library/blocks/page-list/editor-rtl.css`	363 B
`build/block-library/blocks/page-list/editor.css`	363 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`	157 B
`build/block-library/blocks/paragraph/editor.css`	157 B
`build/block-library/blocks/paragraph/style-rtl.css`	260 B
`build/block-library/blocks/paragraph/style.css`	260 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/style-rtl.css`	446 B
`build/block-library/blocks/post-comments-form/style.css`	446 B
`build/block-library/blocks/post-comments/style-rtl.css`	521 B
`build/block-library/blocks/post-comments/style.css`	521 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	73 B
`build/block-library/blocks/post-excerpt/editor.css`	73 B
`build/block-library/blocks/post-excerpt/style-rtl.css`	69 B
`build/block-library/blocks/post-excerpt/style.css`	69 B
`build/block-library/blocks/post-featured-image/editor-rtl.css`	721 B
`build/block-library/blocks/post-featured-image/editor.css`	721 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	153 B
`build/block-library/blocks/post-featured-image/style.css`	153 B
`build/block-library/blocks/post-template/editor-rtl.css`	99 B
`build/block-library/blocks/post-template/editor.css`	98 B
`build/block-library/blocks/post-template/style-rtl.css`	323 B
`build/block-library/blocks/post-template/style.css`	323 B
`build/block-library/blocks/post-terms/style-rtl.css`	73 B
`build/block-library/blocks/post-terms/style.css`	73 B
`build/block-library/blocks/post-title/style-rtl.css`	80 B
`build/block-library/blocks/post-title/style.css`	80 B
`build/block-library/blocks/preformatted/style-rtl.css`	103 B
`build/block-library/blocks/preformatted/style.css`	103 B
`build/block-library/blocks/pullquote/editor-rtl.css`	198 B
`build/block-library/blocks/pullquote/editor.css`	198 B
`build/block-library/blocks/pullquote/style-rtl.css`	370 B
`build/block-library/blocks/pullquote/style.css`	370 B
`build/block-library/blocks/pullquote/theme-rtl.css`	167 B
`build/block-library/blocks/pullquote/theme.css`	167 B
`build/block-library/blocks/query-pagination-numbers/editor-rtl.css`	122 B
`build/block-library/blocks/query-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/query-pagination/editor-rtl.css`	221 B
`build/block-library/blocks/query-pagination/editor.css`	211 B
`build/block-library/blocks/query-pagination/style-rtl.css`	234 B
`build/block-library/blocks/query-pagination/style.css`	231 B
`build/block-library/blocks/query/editor-rtl.css`	369 B
`build/block-library/blocks/query/editor.css`	369 B
`build/block-library/blocks/quote/style-rtl.css`	213 B
`build/block-library/blocks/quote/style.css`	213 B
`build/block-library/blocks/quote/theme-rtl.css`	223 B
`build/block-library/blocks/quote/theme.css`	226 B
`build/block-library/blocks/read-more/style-rtl.css`	132 B
`build/block-library/blocks/read-more/style.css`	132 B
`build/block-library/blocks/rss/editor-rtl.css`	202 B
`build/block-library/blocks/rss/editor.css`	204 B
`build/block-library/blocks/rss/style-rtl.css`	289 B
`build/block-library/blocks/rss/style.css`	288 B
`build/block-library/blocks/search/editor-rtl.css`	165 B
`build/block-library/blocks/search/editor.css`	165 B
`build/block-library/blocks/search/style-rtl.css`	397 B
`build/block-library/blocks/search/style.css`	398 B
`build/block-library/blocks/search/theme-rtl.css`	64 B
`build/block-library/blocks/search/theme.css`	64 B
`build/block-library/blocks/separator/editor-rtl.css`	140 B
`build/block-library/blocks/separator/editor.css`	140 B
`build/block-library/blocks/separator/style-rtl.css`	233 B
`build/block-library/blocks/separator/style.css`	233 B
`build/block-library/blocks/separator/theme-rtl.css`	194 B
`build/block-library/blocks/separator/theme.css`	194 B
`build/block-library/blocks/shortcode/editor-rtl.css`	474 B
`build/block-library/blocks/shortcode/editor.css`	474 B
`build/block-library/blocks/site-logo/editor-rtl.css`	759 B
`build/block-library/blocks/site-logo/editor.css`	759 B
`build/block-library/blocks/site-logo/style-rtl.css`	181 B
`build/block-library/blocks/site-logo/style.css`	181 B
`build/block-library/blocks/site-tagline/editor-rtl.css`	86 B
`build/block-library/blocks/site-tagline/editor.css`	86 B
`build/block-library/blocks/site-title/editor-rtl.css`	84 B
`build/block-library/blocks/site-title/editor.css`	84 B
`build/block-library/blocks/social-link/editor-rtl.css`	177 B
`build/block-library/blocks/social-link/editor.css`	177 B
`build/block-library/blocks/social-links/editor-rtl.css`	674 B
`build/block-library/blocks/social-links/editor.css`	673 B
`build/block-library/blocks/social-links/style-rtl.css`	1.37 kB
`build/block-library/blocks/social-links/style.css`	1.36 kB
`build/block-library/blocks/spacer/editor-rtl.css`	332 B
`build/block-library/blocks/spacer/editor.css`	332 B
`build/block-library/blocks/spacer/style-rtl.css`	48 B
`build/block-library/blocks/spacer/style.css`	48 B
`build/block-library/blocks/table/editor-rtl.css`	471 B
`build/block-library/blocks/table/editor.css`	472 B
`build/block-library/blocks/table/style-rtl.css`	481 B
`build/block-library/blocks/table/style.css`	481 B
`build/block-library/blocks/table/theme-rtl.css`	188 B
`build/block-library/blocks/table/theme.css`	188 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	226 B
`build/block-library/blocks/tag-cloud/style.css`	227 B
`build/block-library/blocks/template-part/editor-rtl.css`	149 B
`build/block-library/blocks/template-part/editor.css`	149 B
`build/block-library/blocks/template-part/theme-rtl.css`	101 B
`build/block-library/blocks/template-part/theme.css`	101 B
`build/block-library/blocks/text-columns/editor-rtl.css`	95 B
`build/block-library/blocks/text-columns/editor.css`	95 B
`build/block-library/blocks/text-columns/style-rtl.css`	166 B
`build/block-library/blocks/text-columns/style.css`	166 B
`build/block-library/blocks/verse/style-rtl.css`	87 B
`build/block-library/blocks/verse/style.css`	87 B
`build/block-library/blocks/video/editor-rtl.css`	571 B
`build/block-library/blocks/video/editor.css`	572 B
`build/block-library/blocks/video/style-rtl.css`	173 B
`build/block-library/blocks/video/style.css`	173 B
`build/block-library/blocks/video/theme-rtl.css`	124 B
`build/block-library/blocks/video/theme.css`	124 B
`build/block-library/common-rtl.css`	934 B
`build/block-library/common.css`	932 B
`build/block-library/editor-rtl.css`	10.2 kB
`build/block-library/editor.css`	10.2 kB
`build/block-library/index.min.js`	175 kB
`build/block-library/reset-rtl.css`	478 B
`build/block-library/reset.css`	478 B
`build/block-library/style-rtl.css`	11.3 kB
`build/block-library/style.css`	11.3 kB
`build/block-library/theme-rtl.css`	689 B
`build/block-library/theme.css`	694 B
`build/block-serialization-default-parser/index.min.js`	1.12 kB
`build/block-serialization-spec-parser/index.min.js`	2.83 kB
`build/blocks/index.min.js`	46.9 kB
`build/components/index.min.js`	223 kB
`build/components/style-rtl.css`	14.9 kB
`build/components/style.css`	14.9 kB
`build/compose/index.min.js`	11.2 kB
`build/core-data/index.min.js`	14.5 kB
`build/customize-widgets/index.min.js`	11 kB
`build/customize-widgets/style-rtl.css`	1.39 kB
`build/customize-widgets/style.css`	1.39 kB
`build/data-controls/index.min.js`	663 B
`build/data/index.min.js`	8.64 kB
`build/date/index.min.js`	32 kB
`build/deprecated/index.min.js`	518 B
`build/dom-ready/index.min.js`	336 B
`build/dom/index.min.js`	4.58 kB
`build/edit-navigation/index.min.js`	15.8 kB
`build/edit-navigation/style-rtl.css`	4.04 kB
`build/edit-navigation/style.css`	4.05 kB
`build/edit-post/classic-rtl.css`	546 B
`build/edit-post/classic.css`	547 B
`build/edit-post/index.min.js`	30 kB
`build/edit-post/style-rtl.css`	7.18 kB
`build/edit-post/style.css`	7.18 kB
`build/edit-site/index.min.js`	46.9 kB
`build/edit-site/style-rtl.css`	7.79 kB
`build/edit-site/style.css`	7.76 kB
`build/edit-widgets/index.min.js`	16.3 kB
`build/edit-widgets/style-rtl.css`	4.4 kB
`build/edit-widgets/style.css`	4.39 kB
`build/editor/index.min.js`	38.4 kB
`build/editor/style-rtl.css`	3.71 kB
`build/editor/style.css`	3.71 kB
`build/element/index.min.js`	4.29 kB
`build/escape-html/index.min.js`	548 B
`build/format-library/index.min.js`	6.62 kB
`build/format-library/style-rtl.css`	571 B
`build/format-library/style.css`	571 B
`build/hooks/index.min.js`	1.66 kB
`build/html-entities/index.min.js`	454 B
`build/i18n/index.min.js`	3.79 kB
`build/is-shallow-equal/index.min.js`	535 B
`build/keyboard-shortcuts/index.min.js`	1.83 kB
`build/keycodes/index.min.js`	1.41 kB
`build/list-reusable-blocks/index.min.js`	1.75 kB
`build/list-reusable-blocks/style-rtl.css`	838 B
`build/list-reusable-blocks/style.css`	838 B
`build/media-utils/index.min.js`	2.94 kB
`build/notices/index.min.js`	957 B
`build/nux/index.min.js`	2.12 kB
`build/nux/style-rtl.css`	751 B
`build/nux/style.css`	749 B
`build/plugins/index.min.js`	1.98 kB
`build/primitives/index.min.js`	949 B
`build/priority-queue/index.min.js`	611 B
`build/react-i18n/index.min.js`	704 B
`build/react-refresh-entry/index.min.js`	8.44 kB
`build/react-refresh-runtime/index.min.js`	7.31 kB
`build/redux-routine/index.min.js`	2.69 kB
`build/reusable-blocks/index.min.js`	2.24 kB
`build/reusable-blocks/style-rtl.css`	256 B
`build/reusable-blocks/style.css`	256 B
`build/rich-text/index.min.js`	11.2 kB
`build/server-side-render/index.min.js`	1.61 kB
`build/shortcode/index.min.js`	1.52 kB
`build/token-list/index.min.js`	668 B
`build/url/index.min.js`	1.99 kB
`build/vendors/react-dom.min.js`	38.5 kB
`build/vendors/react.min.js`	4.34 kB
`build/viewport/index.min.js`	1.08 kB
`build/warning/index.min.js`	280 B
`build/widgets/index.min.js`	7.21 kB
`build/widgets/style-rtl.css`	1.16 kB
`build/widgets/style.css`	1.16 kB
`build/wordcount/index.min.js`	1.07 kB

_{compressed-size-action}

talldan · 2022-04-26T02:48:44Z

Will close this as the reviews are all happening on #39795.

talldan added 3 commits April 12, 2022 11:59

Add new persistence API to preferences package

d1a306c

Improve docs

1f90a3d

Avoid removing old persistence system until new one is in place

e273624

talldan added the [Type] Enhancement A suggestion for improvement. label Apr 12, 2022

talldan self-assigned this Apr 12, 2022

talldan added the [Package] Preferences /packages/preferences label Apr 12, 2022

Update changelog PR reference

d7d4ee0

talldan mentioned this pull request Apr 12, 2022

Add new preferences persistence API, and save editor preferences in user meta #39795

Merged

talldan closed this Apr 26, 2022

talldan deleted the add/new-persistence-api-to-preferences-package branch April 26, 2022 02:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add new persistence api to the preferences package #40246

Add new persistence api to the preferences package #40246

talldan commented Apr 12, 2022

github-actions bot commented Apr 12, 2022

talldan commented Apr 26, 2022

Add new persistence api to the preferences package #40246

Add new persistence api to the preferences package #40246

Conversation

talldan commented Apr 12, 2022

What?

Why?

How?

Testing Instructions

github-actions bot commented Apr 12, 2022

talldan commented Apr 26, 2022