Global Styles Sidebar: tweak preview box

[ciampo]

What?

This PR tweaks a few aspects around the preview box in the Global Styles sidebar, as flagged in #38934:

• outer size of the box changed to 248x152
• size of color swatches changed to 32x32

Why?

This is in order to follow the design specs highlighted in #38934

How?

• Changed normalizedWidth from 250 to 248 px
• Changed the height from 150 to 152 px, and extracted to a new local normalizedHeight variable
• Changed the size of the color swatch to 32 px, and extracted to a new local normalizedColorSwatchSize variable

Testing Instructions

• Select a theme that supports Full Site Editing
• Visit the site editor (from any WPAdmin screen, select "Appearance" and then "Editor" in the WPAdmin menu on the left)
• Notice the size of the preview box in the Global Styles sidebar on the right part of the screen — it should be 248 x 152 px
• Within that preview box, notice the size of the color swatch — it should be a circle with a diameter of 32 px

Screenshots or screencast

[github-actions]

Size Change: +126 B (0%)

Total Size: 1.22 MB

Filename	Size	Change
build/block-editor/index.min.js	149 kB	+274 B (0%)
build/block-editor/style-rtl.css	15.4 kB	-123 B (-1%)
build/block-editor/style.css	15.3 kB	-126 B (-1%)
build/block-library/index.min.js	173 kB	+23 B (0%)
build/data/index.min.js	8.65 kB	+53 B (+1%)
build/edit-post/style-rtl.css	7.06 kB	-8 B (0%)
build/edit-post/style.css	7.06 kB	-8 B (0%)
build/edit-site/index.min.js	46.7 kB	+27 B (0%)
build/reusable-blocks/index.min.js	2.26 kB	+14 B (+1%)

ℹ️ 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-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	116 B
build/block-library/blocks/avatar/editor.css	116 B
build/block-library/blocks/avatar/style-rtl.css	59 B
build/block-library/blocks/avatar/style.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	76 B
build/block-library/blocks/heading/style.css	76 B
build/block-library/blocks/html/editor-rtl.css	332 B
build/block-library/blocks/html/editor.css	333 B
build/block-library/blocks/image/editor-rtl.css	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	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	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.93 kB
build/block-library/blocks/navigation/style.css	1.92 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	260 B
build/block-library/blocks/paragraph/style.css	260 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	213 B
build/block-library/blocks/quote/style.css	213 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	149 B
build/block-library/blocks/template-part/editor.css	149 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	9.96 kB
build/block-library/editor.css	9.96 kB
build/block-library/reset-rtl.css	478 B
build/block-library/reset.css	478 B
build/block-library/style-rtl.css	11.3 kB
build/block-library/style.css	11.3 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.5 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/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-site/style-rtl.css	7.74 kB
build/edit-site/style.css	7.71 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/style-rtl.css	256 B
build/reusable-blocks/style.css	256 B
build/rich-text/index.min.js	11.2 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}

[jasmussen]

Nice one.

One thing, I don't know if it should be this PR or another — the margin between the two dots is 8px:

It should be 16px.

[ciampo]

Thank you for the review, @jasmussen !

It should be 16px.

Just pushed an update to fix that — I'll wait for CI checks to ✅ and merge

Update: native e2e tests failures didn't seem related, merging anyway