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

Simplify CustomCSS UI #49721

Merged
merged 3 commits into from
May 2, 2023
Merged

Simplify CustomCSS UI #49721

merged 3 commits into from
May 2, 2023

Conversation

youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Apr 11, 2023

WHAT

🤖 Generated by Copilot at 78052d1

This pull request introduces a new AdvancedPanel component for editing custom CSS in global styles panels. It also refactors the custom-css component in the edit-site module to use this new component and the useGlobalStyle hook.

🤖 Generated by Copilot at 78052d1

AdvancedPanel is the tool of the brave
Editing custom CSS to shape your own grave
useGlobalStyle hook unleashes the power
Refactoring custom-css to make the world cower

WHY

Adds an AdvancedPanel component to the Styles UI folder (to be reused in block inspector too) and removes custom logic for the CSS panel (just map the behavior of all other global styles panels)

HOW

🤖 Generated by Copilot at 78052d1

  • Add a reusable component for editing custom CSS with validation and preview (link)
  • Export the AdvancedPanel component from the global-styles module (link)
  • Refactor the custom-css component in edit-site to use the AdvancedPanel component and the useGlobalStyle hook (link, link)

@github-actions
Copy link

github-actions bot commented Apr 11, 2023

Size Change: +1.88 kB (0%)

Total Size: 1.37 MB

Filename Size Change
build/api-fetch/index.min.js 2.33 kB +61 B (+3%)
build/block-editor/index.min.js 201 kB +236 B (0%)
build/block-editor/style-rtl.css 15.2 kB +61 B (0%)
build/block-editor/style.css 15.2 kB +57 B (0%)
build/block-library/blocks/cover/style-rtl.css 1.61 kB +12 B (+1%)
build/block-library/blocks/cover/style.css 1.6 kB +12 B (+1%)
build/block-library/blocks/search/style-rtl.css 434 B +26 B (+6%) 🔍
build/block-library/blocks/search/style.css 432 B +26 B (+6%) 🔍
build/block-library/blocks/site-logo/editor-rtl.css 756 B +267 B (+55%) 🆘
build/block-library/blocks/site-logo/editor.css 756 B +267 B (+55%) 🆘
build/block-library/editor-rtl.css 11.8 kB +245 B (+2%)
build/block-library/editor.css 11.8 kB +247 B (+2%)
build/block-library/index.min.js 204 kB +490 B (0%)
build/block-library/style-rtl.css 12.8 kB +19 B (0%)
build/block-library/style.css 12.8 kB +19 B (0%)
build/blocks/index.min.js 51.1 kB +12 B (0%)
build/commands/style-rtl.css 807 B +18 B (+2%)
build/commands/style.css 804 B +18 B (+2%)
build/components/index.min.js 210 kB +998 B (0%)
build/components/style-rtl.css 11.8 kB +9 B (0%)
build/components/style.css 11.8 kB +4 B (0%)
build/core-data/index.min.js 16.3 kB -15 B (0%)
build/data/index.min.js 8.68 kB -4 B (0%)
build/edit-post/index.min.js 35.3 kB +77 B (0%)
build/edit-post/style-rtl.css 7.84 kB +3 B (0%)
build/edit-post/style.css 7.83 kB +3 B (0%)
build/edit-site/index.min.js 63.2 kB -1.33 kB (-2%)
build/edit-site/style-rtl.css 10.2 kB -91 B (-1%)
build/edit-site/style.css 10.2 kB -83 B (-1%)
build/editor/index.min.js 46.1 kB +199 B (0%)
build/private-apis/index.min.js 952 B +10 B (+1%)
build/rich-text/index.min.js 11.1 kB +12 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 483 B
build/block-directory/index.min.js 7.2 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.17 kB
build/block-editor/content.css 4.17 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 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 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 138 B
build/block-library/blocks/audio/theme.css 138 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 91 B
build/block-library/blocks/avatar/style.css 91 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 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 628 B
build/block-library/blocks/button/style.css 627 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/details-summary/editor-rtl.css 65 B
build/block-library/blocks/details-summary/editor.css 65 B
build/block-library/blocks/details-summary/style-rtl.css 61 B
build/block-library/blocks/details-summary/style.css 61 B
build/block-library/blocks/details/style-rtl.css 54 B
build/block-library/blocks/details/style.css 54 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 138 B
build/block-library/blocks/embed/theme.css 138 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 269 B
build/block-library/blocks/file/style.css 270 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 984 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 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 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 340 B
build/block-library/blocks/html/editor.css 341 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 652 B
build/block-library/blocks/image/style.css 652 B
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
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 716 B
build/block-library/blocks/navigation-link/editor.css 715 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 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.21 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 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 501 B
build/block-library/blocks/post-comments-form/style.css 501 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 322 B
build/block-library/blocks/post-featured-image/style.css 322 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 281 B
build/block-library/blocks/post-template/style.css 281 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 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 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 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 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 329 B
build/block-library/blocks/shortcode/editor.css 329 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.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 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 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 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/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 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.12 kB
build/block-library/common.css 1.12 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/commands/index.min.js 14.8 kB
build/compose/index.min.js 12.4 kB
build/core-commands/index.min.js 2.08 kB
build/customize-widgets/index.min.js 12.2 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 718 B
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.76 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.56 kB
build/edit-widgets/style.css 4.56 kB
build/editor/style-rtl.css 3.49 kB
build/editor/style.css 3.48 kB
build/element/index.min.js 4.95 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.26 kB
build/format-library/style-rtl.css 557 B
build/format-library/style.css 556 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.79 kB
build/keycodes/index.min.js 1.94 kB
build/list-reusable-blocks/index.min.js 2.14 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.99 kB
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.52 kB
build/react-i18n/index.min.js 702 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.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/router/index.min.js 1.77 kB
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.55 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.74 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 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.3 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@github-actions
Copy link

Flaky tests detected in 78052d1.
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/4667803675
📝 Reported issues:

@glendaviesnz
Copy link
Contributor

One issue I noticed with this implementation is that it is not possible to delete the theme.json css and start from scratch - as soon as the input is empty it rerenders with the theme.json value:

css-issue.mp4

@youknowriad
Copy link
Contributor Author

I fixed the empty string issue in this branch but also extracted the fix as a more generic fix in #49750

@youknowriad
Copy link
Contributor Author

Personally I don't feel like folks need access to the original custom CSS, it could be argued the same for any other theme.json property, not just CSS. That said, I can add a "clear" link to reset only CSS if needed.

@youknowriad youknowriad marked this pull request as ready for review April 13, 2023 11:44
@youknowriad youknowriad requested a review from ellatrix as a code owner April 13, 2023 11:44
@tellthemachines
Copy link
Contributor

Personally I don't feel like folks need access to the original custom CSS

Is it expected that the original CSS gets wiped as soon as something is entered in the input? That would be a breaking change relative to current behaviour as, without the existing CSS being pre-added in the input, there's no way of keeping it. Adding custom CSS doesn't necessarily mean we don't want the theme-defined styles to be preserved.

@youknowriad
Copy link
Contributor Author

the existing CSS being pre-added in the input

That should be the case in this PR too, but if you make modifications, it's your modifications that persist. Sounds legit to me. Am I missing anything?

@glendaviesnz
Copy link
Contributor

@tellthemachines this works the same as the existing functionality, ie. any custom css from theme.json is loaded into the input box initially, and is only removed if the user chooses to delete it and save:

custom-css-new.mp4

The key difference from what we currently have is there is no indication to the user where that CSS came from, and there is no way to see what it was if deleted other than doing a full restore of all global styles - this could be overcome by adding the clear option that @youknowriad mentions.

@tellthemachines
Copy link
Contributor

Oh, I meant that when I tested, the theme.json styles weren't appearing in the input at all, even before I started typing in it. If that's not the current behaviour on this branch, maybe it was an issue with my local dev env.

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

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

On further testing I think my previous issue was a local env one. Adding some custom CSS at the "styles" level in theme.json, in this branch:

  • the additional CSS field in global styles is immediately visible (imo this is nicer than trunk, where the field only displays by default if there is user CSS)
  • the theme.json CSS appears in the field, though the delimiting comments are gone.

*/
import { default as transformStyles } from '../../utils/transform-styles';

export default function AdvancedPanel( {
Copy link
Contributor

Choose a reason for hiding this comment

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

Is the intention that this component will be expanded with more functionality later? Otherwise it would be clearer to call it something like "CustomCSSPanel".

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The idea is the component is equivalent to the "Advanced" section of the block inspector panel. It can contain things like custom class, anchor, ... and any "common" advanced setting.

The issue here is kind of similar to the "filters" panel where we only have duotone and the "effects" panel where we only have "box shadow" so far.

Copy link
Contributor

Choose a reason for hiding this comment

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

Got it. So this panel would replace the block inspector Advanced section, once it's expanded to handle custom classes etc.?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That's my hope but I'm not entirely sure. Visually at least, it helps creates a relation between the two panels (local and global ones)

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not sure I understand. Visually the custom CSS panel in this branch looks the same as in trunk; they both use similar fonts and spacing as the block inspector panels.

Is the idea to potentially add custom CSS to the block inspector so it can be set on individual blocks? Right now the logic in this AdvancedPanel is pretty specific to custom CSS.

Copy link
Contributor Author

@youknowriad youknowriad May 1, 2023

Choose a reason for hiding this comment

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

I'm not sure I understand. Visually the custom CSS panel in this branch looks the same as in trunk; they both use similar fonts and spacing as the block inspector panels.
Is the idea to potentially add custom CSS to the block inspector so it can be set on individual blocks? Right now the logic in this AdvancedPanel is pretty specific to custom CSS.

My logic is the following. Within "inspector controls" we have "panels" and each panel has "controls".

  • Typography panel has a dozen of controls (font size, font family, line height...)
  • Color panel has some controls too (background, text, link, ...)
  • Dimensions panel has some controls too (height, width, padding, margin...)
  • Effects panel has some controls (only box shadows now)
  • Filters panel has some controls (only duotone now)
  • Advanced panel has some controls too (custom CSS). It turns out that for this one right now, custom CSS is global style only and the rest are block inspector only, that said, it was the same for "duotone" when I implemented the panel, and I believe it's the same for the effects panel too. But it doesn't mean that it will always be the case, custom CSS can be added to block inspector at any point.

Does that make sense?

Copy link
Contributor

Choose a reason for hiding this comment

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

custom CSS can be added to block inspector at any point

If that's the case then it makes sense to have this here. Though if we ever add more global styles controls here, it might be better to change the name of the site editor component from CustomCSSControl to something more generic too.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

better to change the name of the site editor component from CustomCSSControl to something more generic too.

I actually agree with this, It should be AdvancedPanel too there too. It's just that I got confused, I thought you were discussing the ones in the block editor package. I'll make the update.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ok, so I just took a look again. I think the issue right now with the naming is that we access the panel by clicking "Additional CSS" button and going into an "Custom CSS screen" which contains this component.

So if I update CustomCSSControl to AdvancedPanel, I'll be just moving the issue to another place because the CustomCSSScreen will include AdvancedPanel. (so same issue).

I think this is just a temporary issue though that will be solved when we unify the whole block sidebar in #49428 since we'll just be rendering all the panels inline exactly like the block inspector. So I think we shouldn't be doing anything here for now until the other PR.

Copy link
Contributor

Choose a reason for hiding this comment

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

That makes sense! Another thing that would be good to look at in a follow up would be adding a "reset" button that wipes any user-added CSS and restores the theme CSS if there is any.

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

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

I'm probably missing part of the picture here but it feels a bit weird to have a CustomCSSControl that only deals with passing generic global styles into an AdvancedPanel that in turn has all the specific logic for dealing with custom CSS. Shouldn't the naming be the other way around?

*/
import { default as transformStyles } from '../../utils/transform-styles';

export default function AdvancedPanel( {
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not sure I understand. Visually the custom CSS panel in this branch looks the same as in trunk; they both use similar fonts and spacing as the block inspector panels.

Is the idea to potentially add custom CSS to the block inspector so it can be set on individual blocks? Right now the logic in this AdvancedPanel is pretty specific to custom CSS.

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

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

Code looks good, let's get this merged to unblock work on #49428 and #49396 🚀

*/
import { default as transformStyles } from '../../utils/transform-styles';

export default function AdvancedPanel( {
Copy link
Contributor

Choose a reason for hiding this comment

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

That makes sense! Another thing that would be good to look at in a follow up would be adding a "reset" button that wipes any user-added CSS and restores the theme CSS if there is any.

@youknowriad youknowriad merged commit 949ca32 into trunk May 2, 2023
@youknowriad youknowriad deleted the update/CSS-panel branch May 2, 2023 07:25
@github-actions github-actions bot added this to the Gutenberg 15.8 milestone May 2, 2023
@bph bph added [Package] Components /packages/components Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Code Quality Issues or PRs that relate to code quality and removed [Package] Components /packages/components labels May 8, 2023
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] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants