Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add spacing presets to the spacer block #44002

Merged
merged 15 commits into from
Apr 4, 2023

Conversation

glendaviesnz
Copy link
Contributor

@glendaviesnz glendaviesnz commented Sep 9, 2022

What?

Adds spacing presets to the spacer block

Why?

This has been requested by theme authors to allow better control of spacing across a site

How?

Adds the new spacing presets control to the Spacer block

Testing Instructions

  • Add a Spacer block in a post and make sure it can be edited with spacing presets and custom settings, both in the right panel and by dragging resizable box. Also test a horizontal spacer in the Navigation block
  • In theme.json set settings.spacing.spacingScale.steps to 0 and make sure only the custom sizing option appears
  • In theme.json set settings.spacing.customSpacingSize to false and check that custom sizing and resizable box do not show in Spacer block

Screenshots or screencast

spacer.mp4

@glendaviesnz glendaviesnz added [Type] Enhancement A suggestion for improvement. [Block] Spacer Affects the Spacer Block labels Sep 9, 2022
@glendaviesnz glendaviesnz self-assigned this Sep 9, 2022
@github-actions
Copy link

github-actions bot commented Sep 9, 2022

Size Change: +394 B (0%)

Total Size: 1.35 MB

Filename Size Change
build/block-editor/index.min.js 201 kB +52 B (0%)
build/block-editor/style-rtl.css 14.5 kB +13 B (0%)
build/block-editor/style.css 14.5 kB +14 B (0%)
build/block-library/blocks/spacer/editor-rtl.css 359 B +27 B (+8%) 🔍
build/block-library/blocks/spacer/editor.css 359 B +27 B (+8%) 🔍
build/block-library/editor-rtl.css 11.7 kB +19 B (0%)
build/block-library/editor.css 11.7 kB +22 B (0%)
build/block-library/index.min.js 203 kB +220 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 483 B
build/block-directory/index.min.js 7.2 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.11 kB
build/block-editor/content.css 4.1 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
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 91 B
build/block-library/blocks/avatar/style.css 91 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 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 628 B
build/block-library/blocks/button/style.css 627 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 409 B
build/block-library/blocks/columns/style.css 409 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 649 B
build/block-library/blocks/cover/editor.css 651 B
build/block-library/blocks/cover/style-rtl.css 1.61 kB
build/block-library/blocks/cover/style.css 1.6 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 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 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 269 B
build/block-library/blocks/file/style.css 270 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 984 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 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 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 830 B
build/block-library/blocks/image/editor.css 829 B
build/block-library/blocks/image/style-rtl.css 652 B
build/block-library/blocks/image/style.css 652 B
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 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 507 B
build/block-library/blocks/media-text/style.css 505 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 716 B
build/block-library/blocks/navigation-link/editor.css 715 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/editor-rtl.css 2.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.21 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 B
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 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 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 501 B
build/block-library/blocks/post-comments-form/style.css 501 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 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 322 B
build/block-library/blocks/post-featured-image/style.css 322 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/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 281 B
build/block-library/blocks/post-template/style.css 281 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 103 B
build/block-library/blocks/preformatted/style.css 103 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 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 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 463 B
build/block-library/blocks/query/editor.css 463 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 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 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 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 408 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 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 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 489 B
build/block-library/blocks/site-logo/editor.css 489 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 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 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 651 B
build/block-library/blocks/table/style.css 650 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 404 B
build/block-library/blocks/template-part/editor.css 404 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 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 179 B
build/block-library/blocks/video/style.css 179 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.12 kB
build/block-library/common.css 1.12 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.8 kB
build/block-library/style.css 12.8 kB
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 51.1 kB
build/components/index.min.js 208 kB
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.4 kB
build/core-data/index.min.js 16.3 kB
build/customize-widgets/index.min.js 12.2 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 8.68 kB
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.72 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 34.9 kB
build/edit-post/style-rtl.css 7.6 kB
build/edit-post/style.css 7.59 kB
build/edit-site/index.min.js 63.8 kB
build/edit-site/style-rtl.css 10.2 kB
build/edit-site/style.css 10.2 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.56 kB
build/edit-widgets/style.css 4.56 kB
build/editor/index.min.js 45.9 kB
build/editor/style-rtl.css 3.49 kB
build/editor/style.css 3.48 kB
build/element/index.min.js 4.95 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.26 kB
build/format-library/style-rtl.css 557 B
build/format-library/style.css 556 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.79 kB
build/keycodes/index.min.js 1.94 kB
build/list-reusable-blocks/index.min.js 2.14 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.99 kB
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 937 B
build/react-i18n/index.min.js 702 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.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 11.1 kB
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.55 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.74 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 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.3 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@cbirdsong
Copy link

cbirdsong commented Sep 9, 2022

(replying to your comment in #39371 here to keep things a bit more organized)

One question is whether when customSpaceSizes is disabled should the resizing drag handle also be disabled? It would be nice if when custom sizes are disabled it was still there but could only drag between the presets, but that would take a bit more work to sort.

The grab handle snapping between the presets was my immediate thought, but I think just removing it when custom values are disabled would be fine as an MVP if that means it can ship in 6.0. Personally, having responsive clamp-driven sizing on it in any capacity is greatly preferable to waiting another 3-4 months just so it will work with the grab handle.

@glendaviesnz glendaviesnz marked this pull request as ready for review September 11, 2022 23:17
@glendaviesnz
Copy link
Contributor Author

Currently a new spacer block defaults to 100px, do we instead want to default it to var:preset|spacing|80 which is a similar size in the Core spacing scale?

@glendaviesnz glendaviesnz force-pushed the add/spacing-presets-to-spacer-block branch 2 times, most recently from 562a0a5 to 8e3da3f Compare September 12, 2022 01:39
@glendaviesnz
Copy link
Contributor Author

I have hit a potential blocker with this in that the Mobile app currently allows editing of the Spacer block height and width, and if we start adding values like "height":"var:preset|spacing|40" to the attributes older copies of the mobile app won't know what to do with this. I think this will mean that if a post has preset values added on the web, if that post is edited on older versions of the mobile app the setting could be lost, or the app could error.

@fluiddot - do you have any thoughts on how to best handle an update to the Spacer block that involves adding in the ability to select from presets as well as custom values?

@dcalhoun
Copy link
Member

Hey @glendaviesnz. 👋🏻 Thanks for reaching out regarding the native editor experience.

It looks like the native editor CI tests are failing. I noticed the following error occurs when running this branch in the native Demo editor, which may explain some of the failures. The error relates to the lack of exporting getSpacingPresetCssVar from the native editor's @wordpress/block-editor package.

Native Editor Error
 ERROR  TypeError: (0, _blockEditor.getSpacingPresetCssVar) is not a function. (In '(0, _blockEditor.getSpacingPresetCssVar)(height)', '(0, _blockEditor.getSpacingPresetCssVar)' is undefined)

This error is located at:
    in Editor (at with-dispatch/index.js:98)
    in WithDispatch(Editor) (at with-select/index.js:58)
    in Unknown (at pure/index.tsx:41)
    in WithSelect(WithDispatch(Editor)) (at src/index.native.js:36)
    in Gutenberg (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in gutenberg(RootComponent) (at renderApplication.js:60)
 ERROR  TypeError: (0, _blockEditor.getSpacingPresetCssVar) is not a function. (In '(0, _blockEditor.getSpacingPresetCssVar)(height)', '(0, _blockEditor.getSpacingPresetCssVar)' is undefined)

This error is located at:
    in Editor (at with-dispatch/index.js:98)
    in WithDispatch(Editor) (at with-select/index.js:58)
    in Unknown (at pure/index.tsx:41)
    in WithSelect(WithDispatch(Editor)) (at src/index.native.js:36)
    in Gutenberg (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in gutenberg(RootComponent) (at renderApplication.js:60)

I think this will mean that if a post has preset values added on the web, if that post is edited on older versions of the mobile app the setting could be lost, or the app could error.

Yes, using a native app version that cannot parse the saved block state would likely display a invalid block error. A user attempting to recover or modify the block may lead to losing the preset setting for the block.

In regards to avoiding this scenario, my understanding is that we have little ability to guarantee it will not occur. In the past, I believe we have looked to reduce the likelihood that it occurs by shipping a native mobile release with support for the new block structure a few weeks before the web release, which provides time for users to upgrade the native app.

@geriux is it accurate to say this is the approach we took with List V2 and it is relevant here?

any thoughts on how to best handle an update to the Spacer block that involves adding in the ability to select from presets as well as custom values?

It looks like the presets are based upon CSS custom properties. In order to support those in the native editor, we may need to expand the categories of custom properties we parse within getGlobalStyles, and then integrate those new properties into the Spacer block.

@geriux WDYT? Am I interpreting the global styles code correctly? Any thoughts on size of effort for this?

export function getGlobalStyles( rawStyles, rawFeatures ) {
const features = rawFeatures ? JSON.parse( rawFeatures ) : {};
const mappedValues = getMappedValues( features, features?.color?.palette );
const colors = parseStylesVariables(
JSON.stringify( features?.color ),
mappedValues
);
const gradients = parseStylesVariables(
JSON.stringify( features?.color?.gradients ),
mappedValues
);
const customValues = parseStylesVariables(
JSON.stringify( features?.custom ),
mappedValues
);
const globalStyles = parseStylesVariables(
rawStyles,
mappedValues,
customValues
);
const fontSizes = normalizeFontSizes( features?.typography?.fontSizes );
return {
__experimentalFeatures: {
color: {
palette: colors?.palette,
gradients,
text: features?.color?.text ?? true,
background: features?.color?.background ?? true,
defaultPalette: features?.color?.defaultPalette ?? true,
defaultGradients: features?.color?.defaultGradients ?? true,
},
typography: {
fontSizes,
customLineHeight: features?.custom?.[ 'line-height' ],
},
},
__experimentalGlobalStylesBaseStyles: globalStyles,
};
}

@geriux
Copy link
Member

geriux commented Sep 14, 2022

Yes, using a native app version that cannot parse the saved block state would likely display a invalid block error. A user attempting to recover or modify the block may lead to losing the preset setting for the block.

This is correct, I've just tested the following snippet in the current production version of the app and it shows up Problem display the block

<!-- wp:spacer {"height":"var:preset|spacing|70","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div style="margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40);height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

@geriux is it accurate to say this is the approach we took with List V2 and it is relevant here?

It looks like it, I believe we might need to have to go with an approach similar if not the same to Quote, List V2.

@geriux WDYT? Am I interpreting the global styles code correctly? Any thoughts on size of effort for this?

This is different because the value is within the block's attributes so we will need to parse these values in the block itself. If we want to support default style values for the Spacer block coming from the theme.json we will need to adjust something there but we don't have support for those controls on native so I think that should be added once we add those controls.

@dcalhoun
Copy link
Member

Hey @glendaviesnz. 👋🏻 The mobile team discussed this subject in chat further. We captured the apparent blocker for merging this PR in #44234. We have a few competing priorities, but hope to spend time adding support for the native mobile editor next week.

Once the mobile support merges, we would include it in the next release. We create a new release every two weeks, which is then included in the subsequent WordPress mobile app release. Ideally, we allow users a couple of weeks to update their installed app after the WordPress mobile app release is published to the stores before shipping the web change.

Please let us know if you have any thoughts, questions, or concerns about this. Thank you! 🙇🏻

@glendaviesnz
Copy link
Contributor Author

Thanks for the update @dcalhoun, we have missed the 6.1 deadline on this so no panic to get the change in, so the timeframes you mention are no problem.

@richtabor
Copy link
Member

It looks like the blocker is cleared for this. Are we good to pick this back up?

@glendaviesnz glendaviesnz force-pushed the add/spacing-presets-to-spacer-block branch from 840188d to 1e1401b Compare March 21, 2023 03:47
@glendaviesnz
Copy link
Contributor Author

Thanks @richtabor I have rebased this if you want to give it a test

@github-actions
Copy link

github-actions bot commented Mar 21, 2023

Flaky tests detected in 5d19263.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4612262918
📝 Reported issues:

@glendaviesnz
Copy link
Contributor Author

@geriux, @dcalhoun it looks like we should be all set to merge this from the mobile side now with this merged - is that the case?

@dcalhoun
Copy link
Member

@geriux, @dcalhoun it looks like we should be all set to merge this from the mobile side now with this merged - is that the case?

@glendaviesnz how quickly would this feature be included in a Gutenberg release if it were merged? I.e. when is the next web release?

I believe the WordPress 21.9 mobile app release — which includes the mobile change — was delayed a bit. It may be one to two weeks before a majority of users receive the update from the app stores. @geriux does this align with your understanding as well?

@glendaviesnz
Copy link
Contributor Author

@dcalhoun 15.4 of the webclient is going out this week I think, so would be another two weeks after that. I don't believe there is any urgency around getting this in, so maybe the safest option is for you to ping me on this PR when you think the mobile client releases have been in the wild long enough to cover it and I will merge it at that point?

@dcalhoun
Copy link
Member

dcalhoun commented Mar 22, 2023

@glendaviesnz I set a reminder for myself to follow up one week from today. 👍🏻

@geriux
Copy link
Member

geriux commented Mar 22, 2023

@geriux does this align with your understanding as well?

It does, thanks @dcalhoun !

@richtabor
Copy link
Member

Works well, I'm just seeing the control a bit out of line:

CleanShot 2023-03-22 at 18 13 43

@richtabor
Copy link
Member

richtabor commented Mar 29, 2023

My non-designer eyes are having trouble seeing anything other than the misaligned spacing preset value label

The space between the label and the input (both Y sides of the label). It's different on trunk vs. this PR. 🙃

@glendaviesnz
Copy link
Contributor Author

@richtabor - I think it is closer now:

Screenshot 2023-03-29 at 4 55 30 PM

the one on left is trunk.

@richtabor
Copy link
Member

Looks good to me, thanks!

@dcalhoun
Copy link
Member

dcalhoun commented Apr 4, 2023

@glendaviesnz I believe the install base of the WordPress 21.9 app is to a percentage where it is relatively safe to merge this work for a web release. Thank you for your collaboration with the mobile team. 🙇🏻

@glendaviesnz glendaviesnz force-pushed the add/spacing-presets-to-spacer-block branch from a5fb088 to 5d19263 Compare April 4, 2023 20:57
@glendaviesnz glendaviesnz merged commit 721cb34 into trunk Apr 4, 2023
@glendaviesnz glendaviesnz deleted the add/spacing-presets-to-spacer-block branch April 4, 2023 21:34
@github-actions github-actions bot added this to the Gutenberg 15.6 milestone Apr 4, 2023
@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Apr 4, 2023

Thanks for confirming :shipit: @dcalhoun

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Spacer Affects the Spacer Block Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants