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

DimensionsPanel: Fix unexpected value decoding/encoding #52661

Merged
merged 2 commits into from
Jul 18, 2023

Conversation

t-hamano
Copy link
Contributor

@t-hamano t-hamano commented Jul 16, 2023

Try to: Fixes: #51619

What?

This PR attempts to fix #51619 and #51891, regressions caused by #50956.

Why?

#50956 took the following search and approach to fix the issue reported in #50940 where the SpacingSizesControl value was reset when the global style was saved.

  • The value that DiemsionsPanel is trying to decode (padding/margin) is an object with top/bottom/left/right properties
  • However, getValueFromVariable, which decodeValue calls internally, returns the object as is when it receives it
  • Therefore, I made sure to decode each property value individually

However, this seems to have resulted in the following two regressions:

  • #51619: unintentional switch to custom input when moving the slider.
  • #51891: Actual values are output as values, not CSS variables (var(--wp--preset--spacing--{slug}))

I have done a lot of research and I suspect that #50956 caused the unintended decoding of the value.

How?

After some trial and error, I found that if the decoding process is not performed when the value is in user preset format (var: prefixed), it works as expected. Or perhaps we should keep the decoding process and add a new encoding process. For example, in BorderPanel, the color values are encoded.

Testing Instructions

Enable EmptyTheme and update theme.json as follows:

theme.json
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "650px",
			"wideSize": "1200px"
		},
		"spacing": {
			"spacingSizes": [
				{
					"name": "Static Value",
					"size": "8px",
					"slug": "1"
				},
				{
					"name": "Clamp Value",
					"size": "clamp(1rem, 0.818rem + 0.91vw, 1.5rem);",
					"slug": "2"
				},
				{
					"name": "CSS Variable (Custom)",
					"size": "var(--wp--custom--font-size--20)",
					"slug": "3"
				},
				{
					"name": "CSS Variable (Font Size)",
					"size": "var(--wp--preset--font-size--24)",
					"slug": "4"
				}
			]
		},
		"typography": {
			"fontSizes": [
				{
					"name": "24px",
					"size": "24px",
					"slug": "24"
				}
			]
		},
		"custom": {
			"font-size": {
				"20": "20px"
			}
		}
  }
}

This theme.json has many variations in the spacingSizes property.

Test for #51619

  • When the slider is moved, it does not switch to custom input.
Screencast
51619.mp4

Test for #51891

  • When moving the slider, the value is always updated as a CSS variable (var(--wp--preset--spacing--{slug})).
  • When you enter an arbitrary value in a custom input, it will be updated with that value.
  • If you enter a value (8) that exists in spacingSizes in the custom input, it will be reflected in the slider.
Screencast
51891.mp4

Test for #50940

  • When spacing is updated in global style, the value of the control is not reset and the position of the slider is maintained.
Screencast
50940.mp4

@t-hamano t-hamano self-assigned this Jul 16, 2023
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Jul 16, 2023
@t-hamano t-hamano marked this pull request as ready for review July 16, 2023 15:02
@t-hamano t-hamano requested a review from ellatrix as a code owner July 16, 2023 15:02
@github-actions
Copy link

github-actions bot commented Jul 16, 2023

Size Change: +60 B (0%)

Total Size: 1.43 MB

Filename Size Change
build/block-editor/index.min.js 209 kB +60 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.28 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/index.min.js 6.99 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.26 kB
build/block-editor/content.css 4.25 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-editor/style-rtl.css 14.8 kB
build/block-editor/style.css 14.8 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 126 B
build/block-library/blocks/audio/theme.css 126 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 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 624 B
build/block-library/blocks/button/style.css 623 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 647 B
build/block-library/blocks/cover/editor.css 650 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/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 178 B
build/block-library/blocks/details/style.css 178 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 126 B
build/block-library/blocks/embed/theme.css 126 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 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/file/view-interactivity.min.js 317 B
build/block-library/blocks/file/view.min.js 375 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/freeform/editor-rtl.css 2.58 kB
build/block-library/blocks/freeform/editor.css 2.58 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 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 336 B
build/block-library/blocks/html/editor.css 337 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.42 kB
build/block-library/blocks/image/style.css 1.42 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view-interactivity.min.js 1.46 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 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 712 B
build/block-library/blocks/navigation-link/editor.css 711 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 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 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.23 kB
build/block-library/blocks/navigation/style.css 2.22 kB
build/block-library/blocks/navigation/view-interactivity.min.js 988 B
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 438 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 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 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 319 B
build/block-library/blocks/post-featured-image/style.css 319 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 314 B
build/block-library/blocks/post-template/style.css 314 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 302 B
build/block-library/blocks/query-pagination/style.css 299 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 450 B
build/block-library/blocks/query/editor.css 449 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 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 587 B
build/block-library/blocks/search/style.css 584 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 531 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 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 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.43 kB
build/block-library/blocks/social-links/style.css 1.42 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 645 B
build/block-library/blocks/table/style.css 644 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 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 174 B
build/block-library/blocks/video/style.css 174 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 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.1 kB
build/block-library/editor.css 12.1 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 202 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 13.7 kB
build/block-library/style.css 13.7 kB
build/block-library/theme-rtl.css 686 B
build/block-library/theme.css 691 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51 kB
build/commands/index.min.js 14.9 kB
build/commands/style-rtl.css 827 B
build/commands/style.css 827 B
build/components/index.min.js 241 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12 kB
build/core-commands/index.min.js 2.26 kB
build/core-data/index.min.js 16.4 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.46 kB
build/customize-widgets/style.css 1.45 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.28 kB
build/date/index.min.js 17.8 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.63 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 35.3 kB
build/edit-post/style-rtl.css 7.58 kB
build/edit-post/style.css 7.57 kB
build/edit-site/index.min.js 88.5 kB
build/edit-site/style-rtl.css 13.1 kB
build/edit-site/style.css 13.1 kB
build/edit-widgets/index.min.js 16.9 kB
build/edit-widgets/style-rtl.css 4.52 kB
build/edit-widgets/style.css 4.52 kB
build/editor/index.min.js 45.5 kB
build/editor/style-rtl.css 3.58 kB
build/editor/style.css 3.58 kB
build/element/index.min.js 4.8 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.62 kB
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/index.min.js 10.2 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.64 kB
build/keycodes/index.min.js 1.84 kB
build/list-reusable-blocks/index.min.js 2.18 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/notices/index.min.js 948 B
build/plugins/index.min.js 1.77 kB
build/preferences-persistence/index.min.js 1.84 kB
build/preferences/index.min.js 1.24 kB
build/primitives/index.min.js 943 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 951 B
build/react-i18n/index.min.js 615 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.71 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 11 kB
build/router/index.min.js 1.77 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 1.83 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.57 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 958 B
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.16 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@t-hamano t-hamano added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 17, 2023
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.

What an interesting problem, thanks for diving deep into this one @t-hamano! Apologies, the following comments will be fairly long, hope my thoughts are more useful than they are rambling 😄

This does appear to fix the issue, the following before / after shows the Before state as containing the "real" values rather than the reference to the variable:

Before After
image image

Something I'm curious about though, is why we need to skip calling getValueFromVariable for each of these sides 🤔

From a quick look, it seems that the spacing input control attempts to match a value back to its spacing preset here, I'm wondering if there's a problem somehow related to that logic?

// Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
value = getPresetValueFromCustomValue( value, spacingSizes );

In terms of the "real" values accidentally being serialized, I noticed that I can only ever see this happening when some form of axial sides are used. When we go to update a non-axial value (or more specifically, a grouped value like blockGap without axial sides), everything seems okay for me without this PR (as far as I can tell), and when I make a change as in the markup of the screenshots above, I see that the side being updated appears to use the var: prefix correctly, but it's the other side that winds up using the decoded value. E.g. I update horizontal and it gets the correct syntax, but vertical gets the wrong one.

So, could it possibly be to do with the logic in SpacingSizesControl when we update a particular side, but the remaining sides are passed in without conversion back to the preset syntax? For example, the value we're changing should wind up using the correct syntax here, however in the axial logic, the existing (decoded) values are spread and stored for the remaining sides:

The same thing appears to happen for individual sides here:

I guess this gets back to your initial question of whether or not we should skip decoding (as in this PR), or if we should intentionally re-encode the remaining sides that are not the one currently being updated. It could be good to add re-encoding for the remaining sides, to match the implicit re-encoding that's happening for the sides that are being updated. Not sure how complex that'd be to do 🤔

I don't feel too strongly about which way to go, and given the time constraints for 6.3, and that this is quite a small fix code-wise, I think I'd lean slightly toward going with this PR in the short-term as it appears to be testing well. The only change I'd suggest before landing is to add optional chaining for the .startsWith call.

What do you think? I know you've spent much longer looking at this than I have, so apologies if I've missed some nuances here 🙂

'',
rawValue[ key ]
);
if ( rawValue[ key ].startsWith( 'var:' ) ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we need to add either optional chaining or to check if the value is a string before attempting to call .startsWith? Over in getValueFromVariable, the startsWith calls only occur if the value is a string.

@t-hamano
Copy link
Contributor Author

Thank you for the detailed survey, @andrewserong!

So, could it possibly be to do with the logic in SpacingSizesControl when we update a particular side, but the remaining sides are passed in without conversion back to the preset syntax?

Yes, perhaps we should explore this a bit more deeply to find the root cause. I will look into this a bit more in the next few days, although we'are under time constraints for the 6.3 release 👀

@t-hamano
Copy link
Contributor Author

So, could it possibly be to do with the logic in SpacingSizesControl when we update a particular side, but the remaining sides are passed in without conversion back to the preset syntax? For example, the value we're changing should wind up using the correct syntax here, however in the axial logic, the existing (decoded) values are spread and stored for the remaining sides:

The following changes, which encode the existing (decoded) values, appear to work as expected.

Diff
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/axial.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/axial.js
index 3ca76d9c8f..6811349b74 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/axial.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/axial.js
@@ -2,7 +2,12 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { LABELS, ICONS, hasAxisSupport } from '../utils';
+import {
+       LABELS,
+       ICONS,
+       getPresetValueFromCustomValue,
+       hasAxisSupport,
+} from '../utils';
 
 const groupedSides = [ 'vertical', 'horizontal' ];
:...skipping...
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/axial.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/axial.js
index 3ca76d9c8f..6811349b74 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/axial.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/axial.js
@@ -2,7 +2,12 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { LABELS, ICONS, hasAxisSupport } from '../utils';
+import {
+       LABELS,
+       ICONS,
+       getPresetValueFromCustomValue,
+       hasAxisSupport,
+} from '../utils';
 
 const groupedSides = [ 'vertical', 'horizontal' ];
 
@@ -20,7 +25,17 @@ export default function AxialInputControls( {
                if ( ! onChange ) {
                        return;
                }
-               const nextValues = { ...values };
+
+               // Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+               const nextValues = {
+                       ...Object.keys( values ).reduce( ( acc, key ) => {
+                               acc[ key ] = getPresetValueFromCustomValue(
+                                       values[ key ],
+                                       spacingSizes
+                               );
+                               return acc;
+                       }, {} ),
+               };
 
                if ( side === 'vertical' ) {
                        nextValues.top = next;
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/separated.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/separated.js
index ddfa3ebca8..e9e2f82880 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/separated.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/separated.js
@@ -2,7 +2,12 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { ALL_SIDES, LABELS, ICONS } from '../utils';
+import {
+       ALL_SIDES,
+       LABELS,
+       ICONS,
+       getPresetValueFromCustomValue,
+} from '../utils';
 
 export default function SeparatedInputControls( {
        minimumCustomValue,
@@ -20,7 +25,17 @@ export default function SeparatedInputControls( {
                : ALL_SIDES;
 
        const createHandleOnChange = ( side ) => ( next ) => {
-               const nextValues = { ...values };
+               // Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+               const nextValues = {
+                       ...Object.keys( values ).reduce( ( acc, key ) => {
+                               acc[ key ] = getPresetValueFromCustomValue(
+                                       values[ key ],
+                                       spacingSizes
+                               );
+                               return acc;
+                       }, {} ),
+               };
+
                nextValues[ side ] = next;
 
                onChange( nextValues );
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/single.js b/packages/block-editor/src/components/spacing-sizes-control/in
put-controls/single.js
index 2bb0a409da..df6beb0f8f 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/single.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/single.js
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { LABELS } from '../utils';
+import { LABELS, getPresetValueFromCustomValue } from '../utils';
 
 export default function SingleInputControl( {
        minimumCustomValue,
@@ -16,7 +16,17 @@ export default function SingleInputControl( {
        values,
 } ) {
        const createHandleOnChange = ( currentSide ) => ( next ) => {
-               const nextValues = { ...values };
+               // Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+               const nextValues = {
+                       ...Object.keys( values ).reduce( ( acc, key ) => {
+                               acc[ key ] = getPresetValueFromCustomValue(
+                                       values[ key ],
+                                       spacingSizes
+                               );
+                               return acc;
+                       }, {} ),
+               };
+
                nextValues[ currentSide ] = next;
 
                onChange( nextValues );

The only thing that has not yet been resolved is when a CSS variable that automatically generates the font size is specified as a value in the size property of spacingSizes, as reported in #51619. When I use the theme.json I attached at the beginning of this PR and decode each spacing preset with getValueFromVariable(), only the spacing preset that specifies the CSS variable that the font size generates is decoded to the actual value (24px).

// "size": "8px"
console.log( getValueFromVariable( { settings }, '', 'var:preset|spacing|1' ) );
// > Expected: "8px"
// > ✅ Actual  : "8px"

// "size": "clamp(1rem, 0.818rem + 0.91vw, 1.5rem);"
console.log( getValueFromVariable( { settings }, '', 'var:preset|spacing|2' ) );
// > Expected: "clamp(1rem, 0.818rem + 0.91vw, 1.5rem);"
// > ✅ Actual  : "clamp(1rem, 0.818rem + 0.91vw, 1.5rem);"

// "size": "var(--wp--custom--font-size--20)"
console.log( getValueFromVariable( { settings }, '', 'var:preset|spacing|3' ) );
// > Expected: "var(--wp--custom--font-size--20)"
// > ✅ Actual  : "var(--wp--custom--font-size--20)"

// "size": "var(--wp--preset--font-size--24)"
console.log( getValueFromVariable( { settings }, '', 'var:preset|spacing|4' ) );
// > Expected: "var(--wp--preset--font-size--24)"
// > ❌ Actual  : "24px" No actual value expected

As a result, when the slider is moved to that value, the value is saved as a preset value (var(--wp--preset--spacing--{slug})) but switches to a custom input.

b19b7f5c3cd2a48ccfe5dbc190c5feca.mp4

If only this part could be solved, everything might work fine.

@t-hamano t-hamano force-pushed the fix/dimensions-panel-decode branch from 9adea18 to c209e7f Compare July 17, 2023 11:43
@t-hamano
Copy link
Contributor Author

I tried a different approach.

  1. In SpacingSizesControl component, when any value (uni-directional, horizontal or vertical) is changed, encode the existing value using getPresetValueFromCustomValue to match the format of the new changed value.
  2. Narrow down the features passed to getValueFromVariable()'s first argument in decodeValue to only those related to spacing (spacing/dimensions) so that if a preset value in spacingSizes refers to another preset value (such as var(--wp--preset--font-size--{slug})), it will not resolve to the actual value

As far as I have tested, everything works correctly and I believe this is the logic that should be expected. However, I am a little concerned that the second point, the approach of narrowing down the functionality, may affect other functions 🤔.

@t-hamano t-hamano changed the title DimensionsPanel: Fix unexpected value decoding DimensionsPanel: Fix unexpected value decoding/encoding Jul 17, 2023
@github-actions
Copy link

Flaky tests detected in c209e7f.
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/5575194831
📝 Reported issues:

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.

Nice progress on this @t-hamano! I think this is honing in on a good direction, and I agree with your assessment that we should only be decoding dimensions and spacing sizes for the dimensions panel, so I think that approach looks good to me 👍

While testing, I noticed an issue with the added calls to getPresetValueFromCustomValue which is that undefined value unintentionally match against the 0 preset, so if you go to change the top/bottom padding for example, the left/right padding will unexpectedly be set to the 0 preset. This issue isn't caused by this PR per se, but it's exposed by it. I think I've found a fix for it, so I've opened up a separate PR over in #52711 if you have time to take a look.

I think if we merge that PR and this one, we should be in a good place for the functionality. What do you think?

Thanks again for all the detailed investigation here!

@t-hamano
Copy link
Contributor Author

Thanks for bringing the issue to my attention, @andrewserong!

I would like to rebase and re-test this PR after #52711 is merged. I, too, believe that these two PRs are sufficient solutions 😊

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 testing nicely for me now after the rebase, the linked issues are resolved and I haven't encountered any issues with any of the dimensions controls in the post or site editors and global styles. LGTM, thanks again for the work here! ✨

@t-hamano
Copy link
Contributor Author

Thanks for the testing! I have also tried the testing instruction at the beginning of this PR in various ways, and I believe they all work as expected 🚀

@t-hamano t-hamano merged commit d69ee81 into trunk Jul 18, 2023
@t-hamano t-hamano deleted the fix/dimensions-panel-decode branch July 18, 2023 04:43
@github-actions github-actions bot added this to the Gutenberg 16.3 milestone Jul 18, 2023
@ramonjd
Copy link
Member

ramonjd commented Jul 18, 2023

I just cherry-picked this PR to the update/second-round-RC1 branch to get it included in the next release: 77f25c0

@ramonjd ramonjd removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 18, 2023
ramonjd added a commit that referenced this pull request Jul 18, 2023
* Try restoring the site editor animation (#51956)

* Try restoring the site editor animation

* fix header animation

* Remove accidental addition of layout prop

* tidy up formatting

* fix animate presence issue

* Fix animation between sidebar view and distraction free edit view

* Leave sidebar present and maintain canvas to
sidebar animation

The sidebar is necessary for routing on mobile so we have to maintain its presence in the DOM. Just hiding it isn't enough though, as it is still able to be reached with keyboard tabs and screen readers. Using the relatively new `inert` property disables the element from user interaction, so we add that when we don't want the sidebar to be shown.

* Fix mobile view for pattern library

On Mobile, the canvas mode wasn't being set to edit when using the pattern library. This updates it to use the showSidbar value instead, keeping it in sync with the inert setting.

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>

* Change password input to type text so contents are visible. (#52622)

* Iframe: Silence style compat warnings when in a BlockPreview (#52627)

* Do not autofocus page title field in the Create new page modal dialog. (#52603)

* Use lowercase p in "Manage Patterns" (#52617)

* Remove theme patterns title (#52570)

* Block editor store: also attach private APIs to old store descriptor (#52088)

As a workaround, until #39632 is merged, make sure that private actions
and selectors can be unlocked from the original store descriptor (the
one created by `createReduxStore`) and not just the one registered in
the default registry (created by `registerStore`).

Without this workaround, specific setups will unexpectedly fail, such as
the action tests in the `reusable-blocks` package, due to the way that
those tests create their own registries in which they register stores
like `block-editor`.

Context: #51145 (comment)

Props jsnajdr

* Block removal prompt: let consumers pass their own rules (#51841)

* Block removal prompt: let consumers pass their own rules

Following up on #51145, this untangles `edit-site` from `block-editor`
by removing the hard-coded set of rules `blockTypePromptMessages` from
the generic `BlockRemovalWarningModal` component. Rules are now to be
passed to that component by whichever block editor is using it.

Names and comments have been updated accordingly and improved.

* Site editor: Add e2e test for block removal prompt

* Fix Shift+Tab to Block Toolbar (#52613)

* Fix Shift+Tab to Block Toolbar

* Add changelog entry

* Show warning on removal of Post Template block in the site editor. (#52666)

* Avoid copying global style presets via the styles compatibility hook (#52640)

* i18n: Make the tab labels of `ColorGradientSettingsDropdown` component translatable (#52669)

* Rich Text/Footnotes: fix getRichTextValues for useInnerBlocksProps.save (#52682)

* Rich Text/Footnotes: fix getRichTextValues for useInnerBlocksProps.save

* Address feedback

* Patterns: Remove `reusable` text from menu once rename hint has been dismissed (#52664)

* Show uncategorized patterns on the Editor > Patterns page (#52633)

* Patterns: fix bug with Create Patterns menu not showing in site editor page editing (#52671)

* Pass the root client id into the reusable blocks menu

* Check that clientIds array is defined

* Make check for array item more specific

* Search block: Enqueue view script through block.json (#52552)

* Search block: Enqueue view script through block.json

* Remove extra space

* Use `_get_block_template_file` function and set $area variable. (#52708)

* Use `_get_block_template_file` function and set $area variable.

* Update packages/block-library/src/template-part/index.php

Co-authored-by: Felix Arntz <felixarntz@users.noreply.github.com>

---------

Co-authored-by: Felix Arntz <felixarntz@users.noreply.github.com>

* Site Editor: Don't allow creating template part on the Patterns page for non-block themes (#52656)

* Don't allow template part to be created on the Patterns page for non-block themes

* Remove unnecessary theme directory name in E2E test

* Change Delete page menu item to Move to trash. (#52641)

* Use relative path internally to include packages in dependencies (#52712)

* Spacing Sizes: Fix zero size (#52711)

* DimensionsPanel: Fix unexpected value decoding/encoding (#52661)

---------

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>
Co-authored-by: Robert Anderson <robert@noisysocks.com>
Co-authored-by: Andrea Fercia <a.fercia@gmail.com>
Co-authored-by: Rich Tabor <hi@richtabor.com>
Co-authored-by: James Koster <james@jameskoster.co.uk>
Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com>
Co-authored-by: Haz <hazdiego@gmail.com>
Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com>
Co-authored-by: Glen Davies <glendaviesnz@users.noreply.github.com>
Co-authored-by: Carolina Nymark <myazalea@hotmail.com>
Co-authored-by: Petter Walbø Johnsgård <petter@dekode.no>
Co-authored-by: Jonny Harris <spacedmonkey@users.noreply.github.com>
Co-authored-by: Felix Arntz <felixarntz@users.noreply.github.com>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release
Projects
No open projects
3 participants