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

Global Styles: Try color and typography presets in Site View #59594

Merged
merged 8 commits into from
Mar 15, 2024

Conversation

scruffian
Copy link
Contributor

@scruffian scruffian commented Mar 5, 2024

What?

This adds color and typography presets to the Site View of the Site Editor.

Why?

These are top level settings that should be easy to change

How?

Just adding the components to the top level of Styles in Site View.

Testing Instructions

  1. Open the Site Editor
  2. Go to Styles
  3. Change the colors and typography presets
  4. Check that the site updates as expected

Screenshots or screencast

Screenshot 2024-03-07 at 13 37 35

Also test the mobile view:
Screenshot 2024-03-07 at 13 38 00
Screenshot 2024-03-07 at 13 37 52

@scruffian scruffian added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Mar 5, 2024
@scruffian scruffian self-assigned this Mar 5, 2024
Copy link

github-actions bot commented Mar 5, 2024

Size Change: -39 B (0%)

Total Size: 1.71 MB

Filename Size Change
build/edit-site/index.min.js 217 kB -72 B (0%)
build/edit-site/style-rtl.css 15 kB +18 B (0%)
build/edit-site/style.css 15 kB +15 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.32 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 578 B
build/block-directory/index.min.js 7.26 kB
build/block-directory/style-rtl.css 1.03 kB
build/block-directory/style.css 1.03 kB
build/block-editor/content-rtl.css 4.4 kB
build/block-editor/content.css 4.4 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
build/block-editor/index.min.js 252 kB
build/block-editor/style-rtl.css 15.6 kB
build/block-editor/style.css 15.6 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 415 B
build/block-library/blocks/button/editor.css 414 B
build/block-library/blocks/button/style-rtl.css 627 B
build/block-library/blocks/button/style.css 626 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 421 B
build/block-library/blocks/columns/style.css 421 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.69 kB
build/block-library/blocks/cover/style.css 1.68 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 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 322 B
build/block-library/blocks/embed/editor.css 322 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 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 227 B
build/block-library/blocks/form-input/editor.css 227 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 340 B
build/block-library/blocks/form-submission-notification/editor.css 340 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 471 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 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.72 kB
build/block-library/blocks/gallery/style.css 1.72 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 647 B
build/block-library/blocks/group/editor.css 647 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 189 B
build/block-library/blocks/heading/style.css 189 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 878 B
build/block-library/blocks/image/editor.css 878 B
build/block-library/blocks/image/style-rtl.css 1.6 kB
build/block-library/blocks/image/style.css 1.59 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.min.js 1.54 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 306 B
build/block-library/blocks/media-text/editor.css 305 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 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 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 259 B
build/block-library/blocks/navigation-link/style.css 257 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.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view.min.js 1.02 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 377 B
build/block-library/blocks/page-list/editor.css 377 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 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 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-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 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 666 B
build/block-library/blocks/post-featured-image/editor.css 662 B
build/block-library/blocks/post-featured-image/style-rtl.css 342 B
build/block-library/blocks/post-featured-image/style.css 342 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 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 409 B
build/block-library/blocks/post-template/style.css 408 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 125 B
build/block-library/blocks/preformatted/style.css 125 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 354 B
build/block-library/blocks/pullquote/style.css 354 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 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 140 B
build/block-library/blocks/read-more/style.css 140 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 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 629 B
build/block-library/blocks/search/style.css 628 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 478 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 229 B
build/block-library/blocks/separator/style.css 229 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 204 B
build/block-library/blocks/site-logo/style.css 204 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 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.48 kB
build/block-library/blocks/social-links/style.css 1.48 kB
build/block-library/blocks/spacer/editor-rtl.css 350 B
build/block-library/blocks/spacer/editor.css 350 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 395 B
build/block-library/blocks/table/editor.css 395 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 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 185 B
build/block-library/blocks/video/style.css 185 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.11 kB
build/block-library/common.css 1.11 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.4 kB
build/block-library/editor.css 12.4 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 218 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.8 kB
build/block-library/style.css 14.8 kB
build/block-library/theme-rtl.css 688 B
build/block-library/theme.css 693 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.8 kB
build/commands/index.min.js 15.6 kB
build/commands/style-rtl.css 935 B
build/commands/style.css 930 B
build/components/index.min.js 224 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.9 kB
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.77 kB
build/core-data/index.min.js 72.8 kB
build/customize-widgets/index.min.js 11.2 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.95 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 558 B
build/edit-post/classic.css 558 B
build/edit-post/index.min.js 24.2 kB
build/edit-post/style-rtl.css 5.58 kB
build/edit-post/style.css 5.57 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.17 kB
build/edit-widgets/style.css 4.16 kB
build/editor/index.min.js 64 kB
build/editor/style-rtl.css 5.36 kB
build/editor/style.css 5.35 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.03 kB
build/format-library/style-rtl.css 492 B
build/format-library/style.css 490 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/file.min.js 447 B
build/interactivity/image.min.js 1.67 kB
build/interactivity/index.min.js 13 kB
build/interactivity/navigation.min.js 1.15 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 1.36 kB
build/interactivity/search.min.js 618 B
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.74 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 851 B
build/list-reusable-blocks/style.css 849 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 2 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 742 B
build/patterns/index.min.js 5.73 kB
build/patterns/style-rtl.css 553 B
build/patterns/style.css 552 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 2.05 kB
build/preferences/index.min.js 2.81 kB
build/preferences/style-rtl.css 710 B
build/preferences/style.css 712 B
build/primitives/index.min.js 975 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 623 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.73 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.5 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.1 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.72 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 957 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.17 kB
build/widgets/style.css 1.17 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@jasmussen
Copy link
Contributor

Nice! Incredibly fast work. Here's a screenshot of the site editor > styles section:
site editor styles

First question is whether each of these categories should be their own drilldown, simply due to the height of the page as is. Especially with TT4 the variations take up a lot of space. So instead of Site Editor > Styles having all three, you'd have Site Editor > Styles > Variations|Fonts|Colors. Happy to try one and then move to the other based on a little time in the plugin.

A few small things. This heading should use the same heading style as inside the style inspector:

big heading

ie. this one:

style inspector heading

All the cards should have $radius-block-ui (2px) rounded corners. These are sharp:

font presets with sharp corners

There may actually be some componentry you can copy from here:
font presets in global styles inspector

I believe @richtabor or @SaxonF had some mockups for the color presets as well, though, I don't recall the latest feedback on that.

Something went wrong with the font presets, though, they all have the same style. That's both in the site view sidebar, and also in the global styles inspector:
presets wrong

In trunk, in the style inspector looks right:
presets right in trunk

Nice work!

@scruffian
Copy link
Contributor Author

There may actually be some componentry you can copy from here:

Thanks. It is actually using the same components but they look different in that context for some reason! Wr probably need to move some CSS around...

@scruffian
Copy link
Contributor Author

Thanks for the feedback @jasmussen, I have updated this PR as suggested and also the screenshots in the description.

The only thing I haven't done is to make the colors and typography sections part of a drill down, since you weren't sure if that was necessary and it does make things more complex. Happy to try it if you think we need to...

@scruffian scruffian marked this pull request as ready for review March 7, 2024 13:40
Copy link

github-actions bot commented Mar 7, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @unprintedch.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: unprintedch.

Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@jasmussen
Copy link
Contributor

Nice, this is getting really close. Here's a GIF of me clicking in the site editor styles sidebar:

review

There's a discrepancy with the borders here:

Screenshot 2024-03-08 at 10 01 27

The colors have an outer ring, the font presets do not. I can't tell if both or none of them should have that outer border in the dark material or not, probably if there's a unified "preset" component that gets used that'll be the answer. But CC: @jameskoster @SaxonF for any input.

There's still the open question around whether these three should be additional drilldowns, since the many TT4 variations push these two things down. We can go either way in the first merge, then revisit.

@scruffian
Copy link
Contributor Author

Thanks! They styles don't have a border, so I'm guessing that is preferable, but I'll wait to see what @jameskoster anf @SaxonF think

@jasmussen
Copy link
Contributor

I'd lean in the same direction, though there's also this one to consider:

Screenshot 2024-03-08 at 10 25 53

@jameskoster
Copy link
Contributor

This comment is an observation about presets in general – it's not specific to this PR, but it's something that feels particularly prevalent here. It may just be me, so I'm keen to hear thoughts of others.

I worry the interplay between the selected states is going to confuse users. Not only because of the styling discrepancy Joen mentioned (easily fixed), but in general it just feels odd to: Select a style variation, then select a typography preset, then find that my chosen style variation is no longer selected. Technically I understand why that happens, but it feels a bit uncanny to use imo.

I think there are ways to fix that (tweaking the iA, or removing the 'selected' styles), but I'll wait and see if anyone else feels the same before diving in.


Regarding the aforementioned styling discrepancy, I find the treatment of the Style Variations and Typography tiles to work best. IE the white ring on the selected tile:

Screenshot 2024-03-08 at 15 29 40

That seems most closely aligned with the tiles in the Styles panel here:

Screenshot 2024-03-08 at 15 34 15

@unprintedch
Copy link

Hello.
I'm a little late to the game. It is a very good thing to put more customization here. But why oversimpilyfing it with these big buttons?
I also made a proposition in the same direction. here it is not as final as yours but thats the idea.
I would love to hear feedback.

@scruffian
Copy link
Contributor Author

There's a lot of discussion about the hover / focus / selected states in #59508

IMO we should merge this as is and iterate there...

<h3 className="edit-site-global-styles-variation-title">
{ __( 'Typography' ) }
</h3>
<TypographyVariations />
Copy link
Member

Choose a reason for hiding this comment

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

I think we should check if variations exist before showing the headings.

Here's emptytheme (no typography styles):

Screenshot 2024-03-13 at 3 23 54 pm

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks, I updated the PR, though when I tested with emptytheme I don't see the above as I don't have any style variations :hmm:

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 ended up including some of the changes from #59717 so that this works as expected

Copy link
Member

Choose a reason for hiding this comment

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

Ah, I see now. It's failing the uniqueTypographyVariations test.

Empty theme has the following "typography" variation:

{
    "settings": {},
    "styles": {
        "elements": {
            "h2": {}
        },
        "blocks": {
            "core/post-title": {
                "typography": {
                    "fontWeight": "700"
                }
            }
        }
    },
    "title": "variation"
}

But it doesn't have any fontFamilies, so it fails.

The same thing might happen for colors if there are no color settings:

Screenshot 2024-03-14 at 3 11 51 pm

I've pushed a change to check for this in a30eb5b. Seems to work okay, feel free to revert.

@jasmussen
Copy link
Contributor

I'd tend to agree. @unprintedch your instincts are correct, there's a big opportunity for the Styles section of the site editor. The work in this PR improves the situation, but importantly does not preclude explorations such as those you point to from still happening in the future.

One of the philosophies that's being refined and discussed, notably in #59745, is the role of the site view (dark background, preview on the right) and the edit view (fullscreen editor), in terms of which options you edit where. A tentative delineation is that you only ever edit high level, site-wide options in the site view, and that you need to enter edit view for more granualar stuff. So font sets, color sets would be high level, individual fonts, individual colors, would be granular, low level. This is far from a solidified rule, and I can definitely see reason to changing the heading font across your site in the site view, without having to pick only a set, so it's still fertile ground to explore. But a reason, still, to move forward with this is that should we decide to move more controls into the site view styles panel, it would require componentry (inputs, toggles, checkboxes, etc) to work on a dark background, that support doesn't yet exist, and would be a prerequisite for a lot of the block editing tools to function there.

@@ -69,6 +75,18 @@ function SidebarNavigationScreenGlobalStylesContent() {
};
}, [] );

const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
property: 'color',
filter: ( variation ) => !! variation?.settings?.color,
Copy link
Member

Choose a reason for hiding this comment

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

To make things consistent, maybe the same should be applied to the global styles side bar:

diff --git a/packages/edit-site/src/components/global-styles/variations/variations-color.js b/packages/edit-site/src/components/global-styles/variations/variations-color.js
index 04b8c47696..8377029148 100644
--- a/packages/edit-site/src/components/global-styles/variations/variations-color.js
+++ b/packages/edit-site/src/components/global-styles/variations/variations-color.js
@@ -16,6 +16,7 @@ import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hook
 export default function ColorVariations() {
 	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
 		property: 'color',
+		filter: ( variation ) => !! variation?.settings?.color,
 	} );
 
 	if ( ! colorVariations?.length ) {
diff --git a/packages/edit-site/src/components/global-styles/variations/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
index c59e9e872c..5526d06d13 100644
--- a/packages/edit-site/src/components/global-styles/variations/variations-typography.js
+++ b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
@@ -26,6 +26,8 @@ export default function TypographyVariations() {
 	const typographyVariations =
 		useCurrentMergeThemeStyleVariationsWithUserConfig( {
 			property: 'typography',
+			filter: ( variation ) =>
+				!! variation?.settings?.typography?.fontFamilies,
 		} );
 
 	const { base } = useContext( GlobalStylesContext );

Or, maybe create an optional headingText/headingElement prop to these components so the heading renders with the component?

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 not sure we need to do this. There could be instances where the style variation doesn't introduce any new settings, but the style variation itself still changes the look of the site - for example look at how TT3 deal with typography - the setting all live in the parent variation, but each child uses them differently.

Copy link
Member

Choose a reason for hiding this comment

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

Fair point. Then we could revert a30eb5b. Still, it would be good to have a way to show variations without settings to avoid a blank area. 🤔

Maybe a fallback preview icon or something?

Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

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

LGTM - I think the view styles sidebar is a good place to have these variations 👍🏻

I left some follow up comments.

Some variations might not have color/typography settings so perhaps we should filter them out, or, if not, create alternative preset buttons?

@scruffian scruffian enabled auto-merge (squash) March 15, 2024 13:04
@scruffian scruffian merged commit 69b2229 into trunk Mar 15, 2024
57 checks passed
@scruffian scruffian deleted the try/presets-in-site-view branch March 15, 2024 13:33
@github-actions github-actions bot added this to the Gutenberg 18.0 milestone Mar 15, 2024
@unprintedch
Copy link

but importantly does not preclude explorations such as those you point to from still happening in the future.

Good!

is the role of the site view (dark background, preview on the right) and the edit view (fullscreen editor), in terms of which options you edit where. A tentative delineation is that you only ever edit high level, site-wide options in the site view, and that you need to enter edit view for more granualar stuff.

To be clear about wording:
site view/high level >> global changes that affect the entire site
edit view/low level >> local changes that affect only page or one instance of a block/pattern

But a reason, still, to move forward with this is that should we decide to move more controls into the site view styles panel, it would require componentry (inputs, toggles, checkboxes, etc) to work on a dark background, that support doesn't yet exist, and would be a prerequisite for a lot of the block editing tools to function there.

How can i help?

@jasmussen
Copy link
Contributor

site view/high level >> global changes that affect the entire site
edit view/low level >> local changes that affect only page or one instance of a block/pattern

I'd suggest add a bit more nuance:

  • site view: low granularity, high level features that make sweeping changes
  • edit view: high granularity, access to all features

The thing is, you'll still be able to make some local changes even in the site view, such as renaming a navigaiton block or a pattern, as well as bulk editing two or three pages rather than all pages. And in the fullscreen editor/edit view, you'll still have synced patterns or template parts where you make global changes.

How can i help?

The overwhelming amount of work on this happens right here in GH, on the main tracking issues, or in any of the "needs design" or "needs design feedback" labels. There's also a label for tracking issues. Thank you for contributing!

@unprintedch
Copy link

I just started to read this:
#53322
It is clear and interesting.
I realize the complexity and the need for having a clear global understanding.
But I must say this preview looks very promising.

carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Mar 27, 2024
…ss#59594)

* Global Styles: Try presets in Site View

* get typography working in mobile

* add border radius

* tidy up styles

* only output the preset headers if there are presets

* Filtering for settings before showing titles.

* Remove the filters that might remove variations that are valid

* move the unique typography variations to a hook

---------

Co-authored-by: ramon <ramonjd@gmail.com>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
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 Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

5 participants