Implement skip serialization for color key in style att #29253

oandregal · 2021-02-23T11:30:55Z

In #29142 we added a mechanism for the color hook to skip serialization for preset colors. This adds the same logic for custom colors, that are serialized as inline CSS.

How to test

Add this to the block supports object of the social links block:

 "color": {
    "__experimentalSkipSerialization": true
},
"__experimentalSelector": ".wp-social-link"

Compile this branch, go to the post editor, and add a social links block.
Verify that there's an additional color panel with labels "Text color" and "Background color".

Select a custom color for the text and a custom color for the background. This shouldn't have any visual effect on the block.
Open the code editor and verify that the block attributes have the values you picked but there's no style DOM attribute. It should look like this:

<!-- wp:social-links {"style":{"color":{"text":"#157ba6","background":"#c31633"}}} -->
<ul class="wp-block-social-links"> ... </ul>
<!-- /wp:social-links -->

github-actions · 2021-02-23T11:47:09Z

Size Change: +5.66 kB (0%)

Total Size: 1.39 MB

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	+1 B (0%)
`build/annotations/index.js`	3.78 kB	+3 B (0%)
`build/api-fetch/index.js`	3.4 kB	+1 B (0%)
`build/block-directory/index.js`	9.1 kB	-5 B (0%)
`build/block-editor/index.js`	124 kB	-19 B (0%)
`build/block-editor/style-rtl.css`	12.1 kB	+15 B (0%)
`build/block-editor/style.css`	12.1 kB	+16 B (0%)
`build/block-library/blocks/buttons/editor-rtl.css`	315 B	+82 B (+35%)	🚨
`build/block-library/blocks/buttons/editor.css`	315 B	+82 B (+35%)	🚨
`build/block-library/blocks/buttons/style-rtl.css`	364 B	+46 B (+14%)	⚠️
`build/block-library/blocks/buttons/style.css`	363 B	+45 B (+14%)	⚠️
`build/block-library/blocks/navigation-link/editor.css`	395 B	-2 B (-1%)
`build/block-library/blocks/query/editor-rtl.css`	814 B	+655 B (+412%)	🆘
`build/block-library/blocks/query/editor.css`	812 B	+652 B (+408%)	🆘
`build/block-library/blocks/social-links/style-rtl.css`	1.32 kB	-43 B (-3%)
`build/block-library/blocks/social-links/style.css`	1.32 kB	-42 B (-3%)
`build/block-library/editor-rtl.css`	9.44 kB	+402 B (+4%)
`build/block-library/editor.css`	9.43 kB	+403 B (+4%)
`build/block-library/index.js`	148 kB	+3.24 kB (+2%)
`build/block-library/style-rtl.css`	8.83 kB	-15 B (0%)
`build/block-library/style.css`	8.84 kB	-14 B (0%)
`build/blocks/index.js`	48.3 kB	+4 B (0%)
`build/components/index.js`	272 kB	+9 B (0%)
`build/compose/index.js`	11.1 kB	-2 B (0%)
`build/data-controls/index.js`	831 B	+1 B (0%)
`build/date/index.js`	31.8 kB	+1 B (0%)
`build/deprecated/index.js`	769 B	+1 B (0%)
`build/dom/index.js`	4.94 kB	+3 B (0%)
`build/edit-navigation/index.js`	11 kB	-13 B (0%)
`build/edit-site/index.js`	26.3 kB	+110 B (0%)
`build/edit-widgets/index.js`	20.1 kB	-1 B (0%)
`build/editor/index.js`	42.1 kB	-7 B (0%)
`build/element/index.js`	4.61 kB	+1 B (0%)
`build/format-library/index.js`	6.77 kB	-1 B (0%)
`build/keyboard-shortcuts/index.js`	2.54 kB	+1 B (0%)
`build/keycodes/index.js`	1.95 kB	+2 B (0%)
`build/notices/index.js`	1.85 kB	-2 B (0%)
`build/nux/index.js`	3.41 kB	-3 B (0%)
`build/primitives/index.js`	1.42 kB	-1 B (0%)
`build/priority-queue/index.js`	791 B	+1 B (0%)
`build/redux-routine/index.js`	2.83 kB	+2 B (0%)
`build/rich-text/index.js`	13.4 kB	-1 B (0%)
`build/server-side-render/index.js`	2.81 kB	+49 B (+2%)
`build/token-list/index.js`	1.27 kB	-1 B (0%)
`build/url/index.js`	3.02 kB	+1 B (0%)
`build/viewport/index.js`	1.86 kB	+1 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/autop/index.js`	2.84 kB	0 B
`build/blob/index.js`	665 B	0 B
`build/block-directory/style-rtl.css`	1.01 kB	0 B
`build/block-directory/style.css`	1.01 kB	0 B
`build/block-library/blocks/archives/editor-rtl.css`	61 B	0 B
`build/block-library/blocks/archives/editor.css`	60 B	0 B
`build/block-library/blocks/audio/editor-rtl.css`	58 B	0 B
`build/block-library/blocks/audio/editor.css`	58 B	0 B
`build/block-library/blocks/audio/style-rtl.css`	103 B	0 B
`build/block-library/blocks/audio/style.css`	103 B	0 B
`build/block-library/blocks/block/editor-rtl.css`	161 B	0 B
`build/block-library/blocks/block/editor.css`	161 B	0 B
`build/block-library/blocks/button/editor-rtl.css`	475 B	0 B
`build/block-library/blocks/button/editor.css`	474 B	0 B
`build/block-library/blocks/button/style-rtl.css`	479 B	0 B
`build/block-library/blocks/button/style.css`	479 B	0 B
`build/block-library/blocks/calendar/style-rtl.css`	208 B	0 B
`build/block-library/blocks/calendar/style.css`	208 B	0 B
`build/block-library/blocks/categories/editor-rtl.css`	84 B	0 B
`build/block-library/blocks/categories/editor.css`	83 B	0 B
`build/block-library/blocks/categories/style-rtl.css`	79 B	0 B
`build/block-library/blocks/categories/style.css`	79 B	0 B
`build/block-library/blocks/code/style-rtl.css`	90 B	0 B
`build/block-library/blocks/code/style.css`	90 B	0 B
`build/block-library/blocks/columns/editor-rtl.css`	190 B	0 B
`build/block-library/blocks/columns/editor.css`	190 B	0 B
`build/block-library/blocks/columns/style-rtl.css`	421 B	0 B
`build/block-library/blocks/columns/style.css`	421 B	0 B
`build/block-library/blocks/cover/editor-rtl.css`	390 B	0 B
`build/block-library/blocks/cover/editor.css`	389 B	0 B
`build/block-library/blocks/cover/style-rtl.css`	1.25 kB	0 B
`build/block-library/blocks/cover/style.css`	1.25 kB	0 B
`build/block-library/blocks/embed/editor-rtl.css`	486 B	0 B
`build/block-library/blocks/embed/editor.css`	486 B	0 B
`build/block-library/blocks/embed/style-rtl.css`	396 B	0 B
`build/block-library/blocks/embed/style.css`	395 B	0 B
`build/block-library/blocks/file/editor-rtl.css`	199 B	0 B
`build/block-library/blocks/file/editor.css`	198 B	0 B
`build/block-library/blocks/file/style-rtl.css`	248 B	0 B
`build/block-library/blocks/file/style.css`	248 B	0 B
`build/block-library/blocks/freeform/editor-rtl.css`	2.45 kB	0 B
`build/block-library/blocks/freeform/editor.css`	2.45 kB	0 B
`build/block-library/blocks/gallery/editor-rtl.css`	689 B	0 B
`build/block-library/blocks/gallery/editor.css`	690 B	0 B
`build/block-library/blocks/gallery/style-rtl.css`	1.07 kB	0 B
`build/block-library/blocks/gallery/style.css`	1.06 kB	0 B
`build/block-library/blocks/group/editor-rtl.css`	318 B	0 B
`build/block-library/blocks/group/editor.css`	317 B	0 B
`build/block-library/blocks/group/style-rtl.css`	57 B	0 B
`build/block-library/blocks/group/style.css`	57 B	0 B
`build/block-library/blocks/heading/editor-rtl.css`	129 B	0 B
`build/block-library/blocks/heading/editor.css`	129 B	0 B
`build/block-library/blocks/heading/style-rtl.css`	76 B	0 B
`build/block-library/blocks/heading/style.css`	76 B	0 B
`build/block-library/blocks/html/editor-rtl.css`	281 B	0 B
`build/block-library/blocks/html/editor.css`	281 B	0 B
`build/block-library/blocks/image/editor-rtl.css`	717 B	0 B
`build/block-library/blocks/image/editor.css`	716 B	0 B
`build/block-library/blocks/image/style-rtl.css`	477 B	0 B
`build/block-library/blocks/image/style.css`	478 B	0 B
`build/block-library/blocks/latest-comments/editor-rtl.css`	159 B	0 B
`build/block-library/blocks/latest-comments/editor.css`	158 B	0 B
`build/block-library/blocks/latest-comments/style-rtl.css`	269 B	0 B
`build/block-library/blocks/latest-comments/style.css`	269 B	0 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	137 B	0 B
`build/block-library/blocks/latest-posts/editor.css`	137 B	0 B
`build/block-library/blocks/latest-posts/style-rtl.css`	523 B	0 B
`build/block-library/blocks/latest-posts/style.css`	522 B	0 B
`build/block-library/blocks/list/editor-rtl.css`	65 B	0 B
`build/block-library/blocks/list/editor.css`	65 B	0 B
`build/block-library/blocks/list/style-rtl.css`	63 B	0 B
`build/block-library/blocks/list/style.css`	63 B	0 B
`build/block-library/blocks/media-text/editor-rtl.css`	191 B	0 B
`build/block-library/blocks/media-text/editor.css`	191 B	0 B
`build/block-library/blocks/media-text/style-rtl.css`	535 B	0 B
`build/block-library/blocks/media-text/style.css`	532 B	0 B
`build/block-library/blocks/more/editor-rtl.css`	434 B	0 B
`build/block-library/blocks/more/editor.css`	434 B	0 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	395 B	0 B
`build/block-library/blocks/navigation-link/style-rtl.css`	704 B	0 B
`build/block-library/blocks/navigation-link/style.css`	702 B	0 B
`build/block-library/blocks/navigation/editor-rtl.css`	1.34 kB	0 B
`build/block-library/blocks/navigation/editor.css`	1.34 kB	0 B
`build/block-library/blocks/navigation/style-rtl.css`	195 B	0 B
`build/block-library/blocks/navigation/style.css`	195 B	0 B
`build/block-library/blocks/nextpage/editor-rtl.css`	395 B	0 B
`build/block-library/blocks/nextpage/editor.css`	395 B	0 B
`build/block-library/blocks/page-list/editor-rtl.css`	214 B	0 B
`build/block-library/blocks/page-list/editor.css`	214 B	0 B
`build/block-library/blocks/page-list/style-rtl.css`	527 B	0 B
`build/block-library/blocks/page-list/style.css`	526 B	0 B
`build/block-library/blocks/paragraph/editor-rtl.css`	109 B	0 B
`build/block-library/blocks/paragraph/editor.css`	109 B	0 B
`build/block-library/blocks/paragraph/style-rtl.css`	273 B	0 B
`build/block-library/blocks/paragraph/style.css`	273 B	0 B
`build/block-library/blocks/post-author/editor-rtl.css`	209 B	0 B
`build/block-library/blocks/post-author/editor.css`	209 B	0 B
`build/block-library/blocks/post-author/style-rtl.css`	183 B	0 B
`build/block-library/blocks/post-author/style.css`	184 B	0 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	250 B	0 B
`build/block-library/blocks/post-comments-form/style.css`	250 B	0 B
`build/block-library/blocks/post-content/editor-rtl.css`	139 B	0 B
`build/block-library/blocks/post-content/editor.css`	139 B	0 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	73 B	0 B
`build/block-library/blocks/post-excerpt/editor.css`	73 B	0 B
`build/block-library/blocks/post-featured-image/editor-rtl.css`	338 B	0 B
`build/block-library/blocks/post-featured-image/editor.css`	338 B	0 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	100 B	0 B
`build/block-library/blocks/post-featured-image/style.css`	100 B	0 B
`build/block-library/blocks/preformatted/style-rtl.css`	63 B	0 B
`build/block-library/blocks/preformatted/style.css`	63 B	0 B
`build/block-library/blocks/pullquote/editor-rtl.css`	183 B	0 B
`build/block-library/blocks/pullquote/editor.css`	183 B	0 B
`build/block-library/blocks/pullquote/style-rtl.css`	316 B	0 B
`build/block-library/blocks/pullquote/style.css`	316 B	0 B
`build/block-library/blocks/query-loop/editor-rtl.css`	90 B	0 B
`build/block-library/blocks/query-loop/editor.css`	89 B	0 B
`build/block-library/blocks/query-loop/style-rtl.css`	315 B	0 B
`build/block-library/blocks/query-loop/style.css`	317 B	0 B
`build/block-library/blocks/query-pagination-numbers/editor-rtl.css`	122 B	0 B
`build/block-library/blocks/query-pagination-numbers/editor.css`	121 B	0 B
`build/block-library/blocks/query-pagination/editor-rtl.css`	270 B	0 B
`build/block-library/blocks/query-pagination/editor.css`	262 B	0 B
`build/block-library/blocks/query-pagination/style-rtl.css`	168 B	0 B
`build/block-library/blocks/query-pagination/style.css`	168 B	0 B
`build/block-library/blocks/quote/editor-rtl.css`	61 B	0 B
`build/block-library/blocks/quote/editor.css`	61 B	0 B
`build/block-library/blocks/quote/style-rtl.css`	169 B	0 B
`build/block-library/blocks/quote/style.css`	169 B	0 B
`build/block-library/blocks/rss/editor-rtl.css`	201 B	0 B
`build/block-library/blocks/rss/editor.css`	202 B	0 B
`build/block-library/blocks/rss/style-rtl.css`	290 B	0 B
`build/block-library/blocks/rss/style.css`	290 B	0 B
`build/block-library/blocks/search/editor-rtl.css`	165 B	0 B
`build/block-library/blocks/search/editor.css`	165 B	0 B
`build/block-library/blocks/search/style-rtl.css`	342 B	0 B
`build/block-library/blocks/search/style.css`	344 B	0 B
`build/block-library/blocks/separator/editor-rtl.css`	99 B	0 B
`build/block-library/blocks/separator/editor.css`	99 B	0 B
`build/block-library/blocks/separator/style-rtl.css`	236 B	0 B
`build/block-library/blocks/separator/style.css`	236 B	0 B
`build/block-library/blocks/shortcode/editor-rtl.css`	504 B	0 B
`build/block-library/blocks/shortcode/editor.css`	504 B	0 B
`build/block-library/blocks/site-logo/editor-rtl.css`	201 B	0 B
`build/block-library/blocks/site-logo/editor.css`	201 B	0 B
`build/block-library/blocks/site-logo/style-rtl.css`	115 B	0 B
`build/block-library/blocks/site-logo/style.css`	115 B	0 B
`build/block-library/blocks/social-link/editor-rtl.css`	164 B	0 B
`build/block-library/blocks/social-link/editor.css`	165 B	0 B
`build/block-library/blocks/social-links/editor-rtl.css`	696 B	0 B
`build/block-library/blocks/social-links/editor.css`	696 B	0 B
`build/block-library/blocks/spacer/editor-rtl.css`	302 B	0 B
`build/block-library/blocks/spacer/editor.css`	302 B	0 B
`build/block-library/blocks/spacer/style-rtl.css`	48 B	0 B
`build/block-library/blocks/spacer/style.css`	48 B	0 B
`build/block-library/blocks/subhead/editor-rtl.css`	99 B	0 B
`build/block-library/blocks/subhead/editor.css`	99 B	0 B
`build/block-library/blocks/subhead/style-rtl.css`	80 B	0 B
`build/block-library/blocks/subhead/style.css`	80 B	0 B
`build/block-library/blocks/table/editor-rtl.css`	478 B	0 B
`build/block-library/blocks/table/editor.css`	478 B	0 B
`build/block-library/blocks/table/style-rtl.css`	390 B	0 B
`build/block-library/blocks/table/style.css`	390 B	0 B
`build/block-library/blocks/tag-cloud/editor-rtl.css`	118 B	0 B
`build/block-library/blocks/tag-cloud/editor.css`	118 B	0 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	94 B	0 B
`build/block-library/blocks/tag-cloud/style.css`	94 B	0 B
`build/block-library/blocks/template-part/editor-rtl.css`	557 B	0 B
`build/block-library/blocks/template-part/editor.css`	556 B	0 B
`build/block-library/blocks/text-columns/editor-rtl.css`	95 B	0 B
`build/block-library/blocks/text-columns/editor.css`	95 B	0 B
`build/block-library/blocks/text-columns/style-rtl.css`	166 B	0 B
`build/block-library/blocks/text-columns/style.css`	166 B	0 B
`build/block-library/blocks/verse/editor-rtl.css`	62 B	0 B
`build/block-library/blocks/verse/editor.css`	62 B	0 B
`build/block-library/blocks/verse/style-rtl.css`	87 B	0 B
`build/block-library/blocks/verse/style.css`	87 B	0 B
`build/block-library/blocks/video/editor-rtl.css`	504 B	0 B
`build/block-library/blocks/video/editor.css`	503 B	0 B
`build/block-library/blocks/video/style-rtl.css`	193 B	0 B
`build/block-library/blocks/video/style.css`	193 B	0 B
`build/block-library/common-rtl.css`	1.08 kB	0 B
`build/block-library/common.css`	1.08 kB	0 B
`build/block-library/theme-rtl.css`	736 B	0 B
`build/block-library/theme.css`	736 B	0 B
`build/block-serialization-default-parser/index.js`	1.88 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.06 kB	0 B
`build/components/style-rtl.css`	15.5 kB	0 B
`build/components/style.css`	15.5 kB	0 B
`build/core-data/index.js`	16.7 kB	0 B
`build/customize-widgets/index.js`	4.08 kB	0 B
`build/customize-widgets/style-rtl.css`	168 B	0 B
`build/customize-widgets/style.css`	168 B	0 B
`build/data/index.js`	8.86 kB	0 B
`build/dom-ready/index.js`	576 B	0 B
`build/edit-navigation/style-rtl.css`	1.26 kB	0 B
`build/edit-navigation/style.css`	1.25 kB	0 B
`build/edit-post/index.js`	307 kB	0 B
`build/edit-post/style-rtl.css`	6.81 kB	0 B
`build/edit-post/style.css`	6.8 kB	0 B
`build/edit-site/style-rtl.css`	4.41 kB	0 B
`build/edit-site/style.css`	4.41 kB	0 B
`build/edit-widgets/style-rtl.css`	3.2 kB	0 B
`build/edit-widgets/style.css`	3.2 kB	0 B
`build/editor/editor-styles-rtl.css`	543 B	0 B
`build/editor/editor-styles.css`	545 B	0 B
`build/editor/style-rtl.css`	3.89 kB	0 B
`build/editor/style.css`	3.89 kB	0 B
`build/escape-html/index.js`	735 B	0 B
`build/format-library/style-rtl.css`	637 B	0 B
`build/format-library/style.css`	639 B	0 B
`build/hooks/index.js`	2.28 kB	0 B
`build/html-entities/index.js`	622 B	0 B
`build/i18n/index.js`	4.01 kB	0 B
`build/is-shallow-equal/index.js`	698 B	0 B
`build/list-reusable-blocks/index.js`	3.14 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	629 B	0 B
`build/list-reusable-blocks/style.css`	628 B	0 B
`build/media-utils/index.js`	5.35 kB	0 B
`build/nux/style-rtl.css`	731 B	0 B
`build/nux/style.css`	727 B	0 B
`build/plugins/index.js`	2.55 kB	0 B
`build/react-i18n/index.js`	1.45 kB	0 B
`build/reusable-blocks/index.js`	3.77 kB	0 B
`build/reusable-blocks/style-rtl.css`	225 B	0 B
`build/reusable-blocks/style.css`	225 B	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.22 kB	0 B

_{compressed-size-action}

packages/block-editor/src/hooks/style.js

oandregal · 2021-02-26T10:22:38Z

OK, going to merge this in to enable working in the follow-up PRs. Happy to iterate later if we find anything else to improve.

Implement skip serialization for color key in style att

56a03fc

oandregal requested a review from ellatrix as a code owner February 23, 2021 11:30

oandregal requested review from youknowriad and aristath February 23, 2021 11:31

oandregal self-assigned this Feb 23, 2021

oandregal added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Feb 23, 2021

oandregal mentioned this pull request Feb 23, 2021

Next iteration of block supports mechanism #28913

Closed

20 tasks

Fix typo

473d2be

scruffian reviewed Feb 24, 2021

View reviewed changes

packages/block-editor/src/hooks/style.js Outdated Show resolved Hide resolved

Rename omitNonSerializableKeys to omitKeysNotToSerialize

6eff7a6

oandregal merged commit c857bdb into master Feb 26, 2021

oandregal deleted the update/style-hook-skip-serialization branch February 26, 2021 10:22

github-actions bot added this to the Gutenberg 10.2 milestone Feb 26, 2021

ockham mentioned this pull request Mar 19, 2021

Block Supports: Allow skipping serialization of border #30035

Merged

This was referenced Apr 15, 2021

Block Supports: Allow skipping serialization of font size #30879

Merged

Block Supports: Allow skipping serialization of typography attributes #30880

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement skip serialization for color key in style att #29253

Implement skip serialization for color key in style att #29253

oandregal commented Feb 23, 2021 •

edited

github-actions bot commented Feb 23, 2021 •

edited

oandregal commented Feb 26, 2021

Implement skip serialization for color key in style att #29253

Implement skip serialization for color key in style att #29253

Conversation

oandregal commented Feb 23, 2021 • edited

How to test

github-actions bot commented Feb 23, 2021 • edited

oandregal commented Feb 26, 2021

oandregal commented Feb 23, 2021 •

edited

github-actions bot commented Feb 23, 2021 •

edited