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

Block Supports: Allow skipping serialization of individual features #36293

Merged
merged 16 commits into from
Mar 29, 2022

Conversation

aaronrobertshaw
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw commented Nov 8, 2021

Related:

Description

This PR allows blocks to skip the serialization of individual features within a block support toolset. For example, only skipping the serialization of text-decoration styles for the typography support.

Updates include:

  • Modifying the addSaveProps filter from the style.js hook
  • Adding some tests for the skip serialization logic
  • Updating the individual block support hooks to handle array values for skip serialization flag
  • Updating application of link color and block gap styles to take into account block serialization config

How has this been tested?

  1. Ran style hook tests npm run test-unit packages/block-editor/src/hooks/test/style.js
  2. Tested static blocks:
    • Checked block supports still function
    • Ensured skipping serialization via the current boolean __experimentalSkipSerialization flag still works
    • Tested skipping individual features via an array configuration for __experimentalSkipSerialization
  3. Repeated the above checks but for dynamic blocks
  4. Ran PHP unit tests:
npm run test-unit-php /var/www/html/wp-content/plugins/gutenberg/phpunit/block-supports/spacing-test.php
npm run test-unit-php /var/www/html/wp-content/plugins/gutenberg/phpunit/block-supports/colors-test.php
npm run test-unit-php /var/www/html/wp-content/plugins/gutenberg/phpunit/block-supports/border-test.php
npm run test-unit-php /var/www/html/wp-content/plugins/gutenberg/phpunit/block-supports/typography-test.php

Testing Summary

You can use group/block.json as the basis for tests. Test using both the boolean – "__experimentalSkipSerialization": true – and the individual features, e.g.,

Individual skip serialization example for Group block.json
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			},
			"__experimentalSkipSerialization": [ "gradients", "link", "background", "text" ]
		},
		"spacing": {
			"margin": [ "top", "bottom" ],
			"padding": true,
			"blockGap": true,
			"__experimentalDefaultControls": {
				"padding": true,
				"blockGap": true
			},
			"__experimentalSkipSerialization": [ "blockGap", "margin", "padding" ]
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"style": true,
				"width": true
			},
			"__experimentalSkipSerialization": [ "color", "radius", "style", "width" ]
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontStyle": true,
			"__experimentalFontWeight": true,
			"__experimentalLetterSpacing": true,
			"__experimentalTextTransform": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			},
			"__experimentalSkipSerialization": [ "fontSize", "lineHeight", "fontStyle", "fontWeight", "letterSpacing", "textTransform" ]
		},

Group Block (static block)

Support Feature Works Boolean Skip Array Skip
Color Text
Color Background
Color Gradient
Color Link
Border Color
Border Radius
Border Style
Border Width
Spacing Padding

Buttons Block (static block)

Support Feature Works Boolean Skip Array Skip
Spacing Margin
Spacing Block Gap

Paragraph Block (static block)

Support Feature Works Boolean Skip Array Skip
Typography Font Size
Typography Line Height
Typography Font Style
Typography Font Weight
Typography Letter Spacing
Typography Text Transform

The following block supports were manually added for testing purposes.

Support Feature Works Boolean Skip Array Skip
Typography Font Family
Typography Text Decoration

Site Title ( dynamic block )

Support Feature Works Boolean Skip Array Skip
Color Text
Color Background
Color Gradient
Color Link
Typography Font Family
Typography Font Size
Typography Line Height
Typography Font Style
Typography Font Weight
Typography Letter Spacing
Typography Text Transform
Spacing Padding
Spacing Margin

The following block supports were manually added for testing purposes.

Support Feature Works Boolean Skip Array Skip
Border Color
Border Radius
Border Style
Border Width

Navigation ( dynamic block )

Support Feature Works Boolean Skip Array Skip
Spacing Block Gap
Typography Text Decoration

Types of changes

Enhancement.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@aaronrobertshaw aaronrobertshaw added [Feature] Block API API that allows to express the block paradigm. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Nov 8, 2021
@aaronrobertshaw aaronrobertshaw self-assigned this Nov 8, 2021
@github-actions
Copy link

github-actions bot commented Nov 8, 2021

Size Change: +190 B (0%)

Total Size: 1.21 MB

Filename Size Change
build/block-editor/index.min.js 147 kB +190 B (0%)
ℹ️ 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/style-rtl.css 15.4 kB
build/block-editor/style.css 15.4 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 59 B
build/block-library/blocks/avatar/editor.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 159 B
build/block-library/blocks/group/editor.css 159 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 114 B
build/block-library/blocks/heading/style.css 114 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 94 B
build/block-library/blocks/list/style.css 94 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 94 B
build/block-library/blocks/navigation-link/style.css 94 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.89 kB
build/block-library/blocks/navigation/style.css 1.88 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 273 B
build/block-library/blocks/paragraph/style.css 273 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 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 201 B
build/block-library/blocks/quote/style.css 201 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 235 B
build/block-library/blocks/template-part/editor.css 235 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 kB
build/block-library/editor.css 10 kB
build/block-library/index.min.js 171 kB
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/style-rtl.css 11.2 kB
build/block-library/style.css 11.2 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.8 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.3 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.61 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 29.6 kB
build/edit-post/style-rtl.css 7.07 kB
build/edit-post/style.css 7.07 kB
build/edit-site/index.min.js 45.2 kB
build/edit-site/style-rtl.css 7.6 kB
build/edit-site/style.css 7.58 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/preferences/index.min.js 1.2 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.1 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

@aaronrobertshaw aaronrobertshaw force-pushed the try/skip-individual-feature-serialization branch 2 times, most recently from d7d4d81 to fc2cb54 Compare November 15, 2021 12:22
@aaronrobertshaw aaronrobertshaw force-pushed the try/skip-individual-feature-serialization branch from fc2cb54 to cffa9f6 Compare December 7, 2021 07:26
@aaronrobertshaw aaronrobertshaw changed the title [WIP] Block Supports: Allow skipping serialization of individual features Block Supports: Allow skipping serialization of individual features Dec 7, 2021
@ramonjd
Copy link
Member

ramonjd commented Feb 21, 2022

This is working well for me so far.

I've been testing using the Group block.

Skipping serialization for individual properties, e.g.,

		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalSkipSerialization": [ "style" ],
                         ...

isolates that property, and it's no longer available in the block's props object via useBlockProps()

An empty array – "__experimentalSkipSerialization": [], – is equivalent to "__experimentalSkipSerialization": false, as I'd expect.

I've rebased to kick off the e2es again, and will keep testing the individual properties. 🍺

@ramonjd ramonjd force-pushed the try/skip-individual-feature-serialization branch from f192859 to bf5ca6c Compare February 21, 2022 05:49
@ramonjd
Copy link
Member

ramonjd commented Feb 22, 2022

We were getting a PHP warning –

Notice: Trying to get property 'supports' of non-object in /var/www/html/wp-content/plugins/gutenberg/lib/block-supports/colors.php on line 158

– because $block_type passed to gutenberg_skip_color_serialization( $block_type, 'link' ); in elements.php was NULL .

5d99fb7 checks $block_type before using it.

@ramonjd
Copy link
Member

ramonjd commented Feb 22, 2022

I think blockGap isn't working since it's controlled via the layout abstraction and there doesn't appear to be any skip serialization tests there.

Edit: 7bdb411 addresses this by ensuring that the blockGap value, where defined by the user in the editor, is not applied in the inline styles in the editor or on the frontend.

@ramonjd ramonjd force-pushed the try/skip-individual-feature-serialization branch 2 times, most recently from 62518a6 to 7bdb411 Compare February 23, 2022 02:36
@ramonjd
Copy link
Member

ramonjd commented Feb 23, 2022

The fixture failures are curious. They started failing after 7bdb411. Reverting the commit locally via GIT makes them pass again.

But also locally, when I roll back the changes individually in each file (basically reverting manually), the tests still fail.

The failures themselves are related to the order of block attributes only.

🤔

@andrewserong
Copy link
Contributor

The failures themselves related to the order of block attributes only.

@ramonjd just taking a look at the commit where the fixture tests started to fail. In that change, shouldSkipSerialization is now being imported from ../hooks/style.js — however that file has a side-effect in that at the end of the file it registers a bunch of addFilter calls against addAttribute, addSaveProps, etc. So, if those filters are being registered in a different order / at a different time — could that then mean that the attributes are being added to the attributes object in a different sequence, which could then cause serialization to save out the block attributes in a different order?

One thing to try might be to move shouldSkipSerialization to a utility file that doesn't have side effects when imported, to see if that fixes the issue (or if it winds up causing other issues 😅!)

@ramonjd ramonjd force-pushed the try/skip-individual-feature-serialization branch from af420ab to 4bf4fd7 Compare March 10, 2022 04:57
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.

This is working well! Tested skipping serialization of random features on a few blocks and all worked as expected.

I mostly left questions below to try and better understand what we're aiming for here.

lib/block-supports/utils.php Outdated Show resolved Hide resolved
@@ -18,6 +18,13 @@ function gutenberg_render_elements_support( $block_content, $block ) {
return $block_content;
}

$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$skip_link_color_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
Copy link
Contributor

Choose a reason for hiding this comment

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

Just a thought: I'm wondering what this might look like if elements is made generic as mentioned in #31524. If we can use it with any element in any style, perhaps skipping serialization will be redundant?

Copy link
Member

Choose a reason for hiding this comment

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

If we can use it with any element in any style, perhaps skipping serialization will be redundant?

That's a good question, and one I can't answer, though from a superficial reading of the supports file and the conversation of the PR you linked to, I'd probably side with you on that assumption. 😄

I'm not sure there are any plans slated for the future of the elements mechanism 🤔

cc @jorgefilipecosta

Copy link
Member

Choose a reason for hiding this comment

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

I'm not sure there are any plans slated for the future of the elements mechanism 🤔

Right now we are artificially limiting to some elements like links but the mechanism is generic and we can expand it. I'm not sure if someone is working on that.

I agree ideally the elements mechanism would remove the need to skip serialization but I guess until that mechanism is expanded we can have experimental flags to skip serializtion and then we check if we can use elements for these cases.

@@ -65,7 +66,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$style .= "$selector .alignleft { float: left; margin-right: 2em; margin-left: 0; }";
$style .= "$selector .alignright { float: right; margin-left: 2em; margin-right: 0; }";
if ( $has_block_gap_support ) {
$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';
$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap )';
Copy link
Contributor

Choose a reason for hiding this comment

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

If we're skipping serialization would we still expect there to be an output on the front end, even if it's a default value?

Copy link
Member

Choose a reason for hiding this comment

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

Yeah, this is another tricky one. 🤣

I agree in principle, and it did cross my mind, however there's a consideration that caused me to hesitate: --wp--style--block-gap's value comes from theme.json.

See: https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/themes/theme-json.md#what-is-blockgap-and-how-can-i-use-it

So my reasoning at the time was, since skipSerialization acts at the block level, and is indeed meant to offer finer-grained control of block supports, it probably shouldn't override the theme's settings.

Skipping serialization, as far as I understand it, skips user-facing block customization, that is the editor styles controls.

Aside from all that, blockGap is another one of those anomalies. It straddles block supports and layout, and doesn't make life easy when working with both.

Hopefully we can consolidate/homogenize the use of layout and blockGap in the effort to make styles and layouts consistent. See #39336

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah this is a tough one. On the whole I'm more inclined to leave it out because the theme only defines the variable value, not where to use it, and I'd expect skipSerialization to not output anything. But I think we can leave it as is and revisit later; outputting a couple of default styles shouldn't be a huge deal.

packages/block-editor/src/hooks/style.js Show resolved Hide resolved
* @param array $layout Layout object. The one that is passed has already checked the existence of default block layout.
* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
* @param string $gap_value The block gap value to apply.
* @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we not also allow skipping serialization for the whole layout feature too? The Navigation block already implements custom logic to apply the layout styles to its inner elements and blocks, so there's definitely a use case.

Copy link
Member

Choose a reason for hiding this comment

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

Should we not also allow skipping serialization for the whole layout feature too?

Good point! Thanks for mentioning it. I think this would be a good follow up PR.

I'm guessing @aaronrobertshaw started the work here with a view of extending block supports (border, spacing et. al) that already use skipSerialization in various block.jsons today.

The layout implementation, being a little "different" might also need a level of testing that might be more suited to a dedicated PR. 😄

Copy link
Contributor

Choose a reason for hiding this comment

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

Yup, layout is complex enough that a follow-up PR sounds right.

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'm only just getting up to speed after some recent AFK so might be missing some context.

When originally creating this I found a few block supports that simply didn't maintain/add the ability to skip serialization as per other block supports. Layout was one example of this. It also changed several times during the long life span of this PR. Early on, I had a skip for the entire layout feature but the support was reworked which, from memory, removed the code where that could easily be performed.

I think a separate PR would definitely be a good idea given how complicated layout support is and how much it's already changed in its relatively short life.

@ramonjd
Copy link
Member

ramonjd commented Mar 10, 2022

This is working well! Tested skipping serialization of random features on a few blocks and all worked as expected.

I mostly left questions below to try and better understand what we're aiming for here.

Thanks @tellthemachines I really appreciate the 👀

I've commandeered this while @aaronrobertshaw takes a well-deserved rest, so I might not have all the context on those questions. The linked PR #36104, which depends on and is the motivation for the changes in this PR, provides an example of the initial use case.

aaronrobertshaw and others added 16 commits March 28, 2022 15:21
…sometimes does not pass a valid $block_type, which must be an object. It is `NULL`. Perhaps due to a race condition. This commit checks if $block_type is an object before trying to use it.
… [ "blockGap" ]` has an effect on the frontend and in the editor.

The blockGap value, where defined by the user, will not be applied.

Added a comment clarifying the use of skip serialization in relation to blockGap
Adding skip serialization tests
…ents API)

Added a dev comment to warn about future changes (if any) to the Elements API
@aaronrobertshaw aaronrobertshaw force-pushed the try/skip-individual-feature-serialization branch from fa4a95c to aa0e91d Compare March 28, 2022 07:58
@aaronrobertshaw
Copy link
Contributor Author

I've rebased this and fixed some whitespace errors in the spacing block support PHP unit tests.

✅ Unit tests are passing
✅ Bulk skipping of serialization still works for static blocks across various block supports
✅ Skipping individual block support features for static blocks works
✅ Bulk skipping of serialization for dynamic blocks works
✅ Skipping individual block support features for static blocks works

Primarily used the Group and Paragraph blocks for testing static blocks opting into any missing supports as needed. Used the Site Title block for testing dynamic blocks.

I believe this is looking good but it would be great to get an extra review and approval.

Copy link
Contributor

@glendaviesnz glendaviesnz left a comment

Choose a reason for hiding this comment

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

This tested as advertised for me with Group, Button, Paragraph and Site Title, with existing settings, blanket skipping, and with individual feature skipping

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block API API that allows to express the block paradigm. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants