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

Site editor: add global styles changes to save flow #57470

Merged
merged 2 commits into from
Jan 12, 2024

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented Jan 2, 2024

What?

Follow up to:

Part of:

This PR prints current, unsaved changes to global styles in the save flow panel of the site editor.

It uses the same comparison code as the global styles revisions change summary.

Why?

To provide the user with an overview of what's being saved, so, if I had to write a sales pitch I'd focus on "transparent and informative" as adjectival hooks, and then offer a free set of steak knives if that didn't work.

How?

By comparing the current user global styles object, which includes any saved and unsaved changes to global styles, with the saved record. The difference should reflect the unsaved changes that will be saved in the save flow.

Open questions

  1. This PR limits the changes printed to the screen to 10, after which a …and n more changes. appears to communicate the existence of more. Is that limit reasonable?
  2. Do we need any explanatory, preceding copy, e.g., "Your unsaved changes include: ...."?

Testing Instructions

  1. Head to the site editor and make a bunch of changes to global styles, e.g., elements, blocks, site-wide colors/typography.
  2. Click on the "Save" button to trigger the save flow
  3. In the global styles entity panel, you should see a summary of your changes, limited to 10 changes.

Also check that the <h3>Changes made to:</h3> order makes sense in context:

Screenshot 2024-01-09 at 11 29 09 am

Screenshots or screencast

2024-01-09.11.34.20.mp4

Copy link

github-actions bot commented Jan 2, 2024

Size Change: +215 B (0%)

Total Size: 1.69 MB

Filename Size Change
build/editor/index.min.js 59.3 kB +181 B (0%)
build/editor/style-rtl.css 5.23 kB +17 B (0%)
build/editor/style.css 5.23 kB +17 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 964 B
build/annotations/index.min.js 2.71 kB
build/api-fetch/index.min.js 2.29 kB
build/autop/index.min.js 2.11 kB
build/blob/index.min.js 590 B
build/block-directory/index.min.js 7.25 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.31 kB
build/block-editor/content.css 4.31 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/index.min.js 247 kB
build/block-editor/style-rtl.css 15.3 kB
build/block-editor/style.css 15.3 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 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 138 B
build/block-library/blocks/audio/theme.css 138 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 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 419 B
build/block-library/blocks/button/editor.css 417 B
build/block-library/blocks/button/style-rtl.css 633 B
build/block-library/blocks/button/style.css 632 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 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 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 421 B
build/block-library/blocks/columns/style.css 421 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-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 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-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 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 98 B
build/block-library/blocks/details/style.css 98 B
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 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 322 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 228 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 343 B
build/block-library/blocks/form-submission-notification/editor.css 342 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 452 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 957 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.75 kB
build/block-library/blocks/gallery/style.css 1.75 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 654 B
build/block-library/blocks/group/editor.css 654 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 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 340 B
build/block-library/blocks/html/editor.css 341 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 1.61 kB
build/block-library/blocks/image/style.css 1.6 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 2.02 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 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 505 B
build/block-library/blocks/media-text/style.css 503 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 671 B
build/block-library/blocks/navigation-link/editor.css 672 B
build/block-library/blocks/navigation-link/style-rtl.css 103 B
build/block-library/blocks/navigation-link/style.css 103 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/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 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.1 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 401 B
build/block-library/blocks/page-list/editor.css 401 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 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 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 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 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 666 B
build/block-library/blocks/post-featured-image/editor.css 662 B
build/block-library/blocks/post-featured-image/style-rtl.css 345 B
build/block-library/blocks/post-featured-image/style.css 345 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 409 B
build/block-library/blocks/post-template/style.css 408 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 69 B
build/block-library/blocks/post-time-to-read/style.css 69 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 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 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 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/style-rtl.css 312 B
build/block-library/blocks/query/style.css 308 B
build/block-library/blocks/query/view.min.js 647 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 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 140 B
build/block-library/blocks/read-more/style.css 140 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 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 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 602 B
build/block-library/blocks/search/style.css 602 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 475 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 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 329 B
build/block-library/blocks/shortcode/editor.css 329 B
build/block-library/blocks/site-logo/editor-rtl.css 760 B
build/block-library/blocks/site-logo/editor.css 760 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 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 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.49 kB
build/block-library/blocks/social-links/style.css 1.49 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 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 399 B
build/block-library/blocks/table/editor.css 399 B
build/block-library/blocks/table/style-rtl.css 646 B
build/block-library/blocks/table/style.css 645 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 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/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 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 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 191 B
build/block-library/blocks/video/style.css 191 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.3 kB
build/block-library/editor.css 12.3 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 215 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.7 kB
build/block-library/style.css 14.7 kB
build/block-library/theme-rtl.css 700 B
build/block-library/theme.css 705 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.6 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 947 B
build/commands/style.css 942 B
build/components/index.min.js 235 kB
build/components/style-rtl.css 12.1 kB
build/components/style.css 12.1 kB
build/compose/index.min.js 12.8 kB
build/core-commands/index.min.js 2.73 kB
build/core-data/index.min.js 72.7 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 651 B
build/data/index.min.js 8.94 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 462 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.68 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 27.9 kB
build/edit-post/style-rtl.css 6.3 kB
build/edit-post/style.css 6.29 kB
build/edit-site/index.min.js 194 kB
build/edit-site/style-rtl.css 14.9 kB
build/edit-site/style.css 14.9 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.73 kB
build/edit-widgets/style.css 4.72 kB
build/element/index.min.js 4.87 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.98 kB
build/format-library/style-rtl.css 500 B
build/format-library/style.css 500 B
build/hooks/index.min.js 1.57 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.61 kB
build/interactivity/file.min.js 442 B
build/interactivity/image.min.js 2.15 kB
build/interactivity/index.min.js 12.5 kB
build/interactivity/navigation.min.js 1.23 kB
build/interactivity/query.min.js 791 B
build/interactivity/search.min.js 610 B
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.76 kB
build/keycodes/index.min.js 1.49 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 964 B
build/nux/index.min.js 2.01 kB
build/nux/style-rtl.css 775 B
build/nux/style.css 771 B
build/patterns/index.min.js 5.36 kB
build/patterns/style-rtl.css 564 B
build/patterns/style.css 564 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.07 kB
build/preferences/index.min.js 1.26 kB
build/primitives/index.min.js 994 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 631 B
build/react-refresh-entry/index.min.js 9.46 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.71 kB
build/reusable-blocks/index.min.js 2.74 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 10.4 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.06 kB
build/token-list/index.min.js 587 B
build/url/index.min.js 3.83 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 967 B
build/warning/index.min.js 259 B
build/widgets/index.min.js 7.22 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@ramonjd ramonjd force-pushed the update/display-global-style-changes-save-flow branch 2 times, most recently from de963ec to 3335712 Compare January 2, 2024 01:47
@ramonjd ramonjd self-assigned this Jan 2, 2024
@ramonjd ramonjd added [Type] Enhancement A suggestion for improvement. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Feature] Saving Related to saving functionality [Status] In Progress Tracking issues with work in progress labels Jan 2, 2024
@ramonjd ramonjd changed the title Update/display global style changes save flow Site editor: add global styles changes to save flow Jan 2, 2024
@ramonjd ramonjd added the Needs Design Feedback Needs general design feedback. label Jan 2, 2024
@ramonjd ramonjd marked this pull request as ready for review January 2, 2024 22:42
@ramonjd ramonjd requested a review from apeatling January 2, 2024 22:42
@ramonjd ramonjd removed the [Status] In Progress Tracking issues with work in progress label Jan 2, 2024
Copy link
Contributor

@apeatling apeatling left a comment

Choose a reason for hiding this comment

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

When I make changes via global styles and hit save, this works perfectly, no issues there.

When I click and apply a previous revision and hit save, the items there don't seem to line up with the things that changed in the revisions list. I'm guessing that's actually correct though since it's comparing the one applied to the revision previous to that, not the current active revision. Is that right?

@ramonjd
Copy link
Member Author

ramonjd commented Jan 4, 2024

Thanks for testing @apeatling 🙇🏻

When I click and apply a previous revision and hit save, the items there don't seem to line up with the things that changed in the revisions list. I'm guessing that's actually correct though since it's comparing the one applied to the revision previous to that, not the current active revision. Is that right?

If something is added or taken away, it will count as a change.

I've been playing around and what I suspect we're seeing is the change list reporting the removal of the same items that we'd previously saved.

Maybe it would be clearer for users to have something like "Updated/Added/Removed" sections - that could involve a bit of refactoring of the change detection method I think, but theoretically doable.

@ramonjd
Copy link
Member Author

ramonjd commented Jan 4, 2024

Maybe it would be clearer for users to have something like "Updated/Added/Removed" sections - that could involve a bit of refactoring of the change detection method I think, but theoretically doable.

An alternative could be to just have some preceding copy, e.g., Changes have been made to: ?

@apeatling
Copy link
Contributor

Yeh, let's add "Changes made to:" and see how that looks, it might be clearer.

@ramonjd ramonjd force-pushed the update/display-global-style-changes-save-flow branch from 04f974c to 6e918b9 Compare January 9, 2024 00:29
@ramonjd
Copy link
Member Author

ramonjd commented Jan 9, 2024

let's add "Changes made to:" and see how that looks, it might be clearer.

Updated. Thank you!

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

This is looking good to try to me!

Most of the time when I make an update, each of the changes will be included as in:

I had to make quite a lot of changes before hitting the cap of 10, so that limit seems reasonable to me:

✅ Existing descriptions are displayed when they should
✅ Global styles includes "Changes made to:" list and is testing well

The only tiniest of nits I noticed is that the overall panel's "Are you ready to save" text uses a line-height of 1.5, applied automatically as part of the p tag:

image

The panel row gets a line-height of 1.4em since it's just text in a div instead of being a paragraph:

image

That's not at all a blocker to landing, but could be something to tweak if it's unintentional that we have different line-heights there. On the other hand, since the panel text is a bit more data-ey for each of the things that has changed, it might make sense to have the narrower line-height (in which case we could leave it anyway).

LGTM! ✨

@ramonjd
Copy link
Member Author

ramonjd commented Jan 12, 2024

Thanks for testing this one!

@ramonjd ramonjd merged commit 7ca256c into trunk Jan 12, 2024
57 checks passed
@ramonjd ramonjd deleted the update/display-global-style-changes-save-flow branch January 12, 2024 11:00
@github-actions github-actions bot added this to the Gutenberg 17.6 milestone Jan 12, 2024
@ramonjd
Copy link
Member Author

ramonjd commented Jan 12, 2024

That's not at all a blocker to landing, but could be something to tweak if it's unintentional that we have different line-heights there.

Good spotting. Happy to change if it's an eyesore.

@jasmussen
Copy link
Contributor

Nice work. Visually this could be a bit stronger, though. Here's a before/after with some suggestions:

Before After
Global Style changes, before Global Style changes, after, near term

Main differences:

  • The individual pieces changed are shown below the checkbox.
  • The wording is changed, instead of "Button block, Image block", it's just "Button, Image". Elements and settings can keep the suffix.
  • There's a period at the end of the summary.
  • The summary is $gray-700 and $helptext-font-size.

@ramonjd would you be up for a quick followup for the above pieces?

There's a bit more, that's not directly related to this PR, so you can pick and choose whether to include or omit:

  • There's a "time since the change" counter. Probably a mouthful to implement.
  • The individual items next to the checkbox are no longer bold, they are regular text.
  • The wording has been changed for pages being edited, to avoid the widow. Instead of "The following content has been modified." it's "The following has been modified.

Note that the above sketches consider the work that is being proposed in #49832 (comment) as well.

@ramonjd
Copy link
Member Author

ramonjd commented Feb 6, 2024

Thanks for the feedback @jasmussen!

I'll get a PR going we can test with your suggestions.

@ramonjd
Copy link
Member Author

ramonjd commented Feb 6, 2024

A preliminary PR is up:

It takes care of the following:

The individual pieces changed are shown below the checkbox.
The summary is $gray-700 and $helptext-font-size.
The individual items next to the checkbox are no longer bold, they are regular text.
The wording has been changed for pages being edited, to avoid the widow. Instead of "The following content has been modified." it's "The following has been modified.

And also updates the "ready to save" copy from "The following changes have been made to your site, templates, and content." to "There are <strong>%d site changes</strong> waiting to be saved."

The items are definitely doable:

The wording is changed, instead of "Button block, Image block", it's just "Button, Image". Elements and settings can keep the suffix.
There's a period at the end of the summary.
There's a "time since the change" counter. Probably a mouthful to implement.

They require a bit more fiddling so I can do separate follow ups.

For example, changes to the global styles changes list will also affect the revisions summaries. I don't think they're controversial, but it would be good to test the change independently.

The "time since the change" copy relies on the "modified" field for each entities. The global styles controller doesn't yet return the global styles post's 'modified' field. To be consistent I think we should enable it.

More to come...

@ramonjd
Copy link
Member Author

ramonjd commented Feb 6, 2024

The wording is changed, instead of "Button block, Image block", it's just "Button, Image". Elements and settings can keep the suffix.
There's a period at the end of the summary.

@ramonjd
Copy link
Member Author

ramonjd commented Feb 6, 2024

There's a "time since the change" counter. Probably a mouthful to implement.

I think I misunderstood this at first. I think you mean the "time since unsaved change"? Not the time since the record was last modified in the database?

If the former, then I suspect that would be a little more verbose to implement.

My guess is that we'd save the datetime every time an entity is "edited". I'm looking at the core data actions:

Assuming it's possible, it might take a PR or two of preparatory work to get there.

For the heck of it, I tested out the UI changes nevertheless, and, assuming the data is there, it'd require a small update to the entity-record-item.js component.

Screenshot 2024-02-06 at 2 46 56 pm

Something like

		<PanelRow>
			<CheckboxControl
				__nextHasNoMarginBottom
				label={
					<strong>
						{ decodeEntities( entityTitle ) || __( 'Untitled' ) }
					</strong>
				}
				checked={ checked }
				onChange={ onChange }
			/>
			<span>{ humanTimeDiff( entityModified ) }</span>
		</PanelRow>

@jasmussen
Copy link
Contributor

Thanks for all the work. I also left a comment on the other PR.

I think I misunderstood this at first. I think you mean the "time since unsaved change"? Not the time since the record was last modified in the database?

Right, it's meant to be a subtle reminder that these change can stack up across a site editor session, you might have made an accidental change somewhere in a template, just tinkering, and then forgetting about it. This would be there to say: "this change you made an hour ago", to help make you decide whether to include it in the save or not. I believe @jameskoster instigated this concept, and it would be a nice enhancement to look at. But worth noting, I wouldn't consider it urgent at all, and it's even something we can live without, if need be.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Saving Related to saving functionality Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants