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 v2: Move prototype from G2 #32923

Closed
wants to merge 16 commits into from

Conversation

tyxla
Copy link
Member

@tyxla tyxla commented Jun 23, 2021

Description

This is an initial version of the v2 interface of global styles, as moved from ItsJonQ/g2#293 into this repository. Bunch of kudos to @ItsJonQ for the hard work on the prior art.

It is still in progress and needs a bunch of love - addressing navigation/routing, moving some components, promoting some components, and fixing the related imports.

It's not intended to be merged - rather, to inform next discussions and upcoming work.

How has this been tested?

Types of changes

A new feature, foundations for the v2 of Global Styles.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@tyxla tyxla added [Status] In Progress Tracking issues with work in progress Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Jun 23, 2021
@tyxla tyxla self-assigned this Jun 23, 2021
@github-actions
Copy link

github-actions bot commented Jun 23, 2021

Size Change: +4.6 kB (0%)

Total Size: 1.05 MB

Filename Size Change
build/components/index.min.js 213 kB +4.58 kB (+2%)
build/components/style-rtl.css 15.8 kB +11 B (0%)
build/components/style.css 15.8 kB +11 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 931 B
build/admin-manifest/index.min.js 1.09 kB
build/annotations/index.min.js 2.7 kB
build/api-fetch/index.min.js 2.19 kB
build/autop/index.min.js 2.08 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.2 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-editor/index.min.js 120 kB
build/block-editor/style-rtl.css 13.8 kB
build/block-editor/style.css 13.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 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 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/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 474 B
build/block-library/blocks/button/editor.css 474 B
build/block-library/blocks/button/style-rtl.css 600 B
build/block-library/blocks/button/style.css 600 B
build/block-library/blocks/buttons/editor-rtl.css 315 B
build/block-library/blocks/buttons/editor.css 315 B
build/block-library/blocks/buttons/style-rtl.css 370 B
build/block-library/blocks/buttons/style.css 370 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 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 131 B
build/block-library/blocks/code/theme.css 131 B
build/block-library/blocks/columns/editor-rtl.css 206 B
build/block-library/blocks/columns/editor.css 205 B
build/block-library/blocks/columns/style-rtl.css 497 B
build/block-library/blocks/columns/style.css 496 B
build/block-library/blocks/cover/editor-rtl.css 666 B
build/block-library/blocks/cover/editor.css 670 B
build/block-library/blocks/cover/style-rtl.css 1.23 kB
build/block-library/blocks/cover/style.css 1.23 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 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 322 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 927 B
build/block-library/blocks/gallery/editor.css 934 B
build/block-library/blocks/gallery/style-rtl.css 1.6 kB
build/block-library/blocks/gallery/style.css 1.59 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 70 B
build/block-library/blocks/group/theme.css 70 B
build/block-library/blocks/heading/style-rtl.css 114 B
build/block-library/blocks/heading/style.css 114 B
build/block-library/blocks/home-link/style-rtl.css 247 B
build/block-library/blocks/home-link/style.css 247 B
build/block-library/blocks/html/editor-rtl.css 283 B
build/block-library/blocks/html/editor.css 284 B
build/block-library/blocks/image/editor-rtl.css 728 B
build/block-library/blocks/image/editor.css 728 B
build/block-library/blocks/image/style-rtl.css 482 B
build/block-library/blocks/image/style.css 487 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 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 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 488 B
build/block-library/blocks/media-text/style.css 485 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 489 B
build/block-library/blocks/navigation-link/editor.css 488 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/editor-rtl.css 1.72 kB
build/block-library/blocks/navigation/editor.css 1.72 kB
build/block-library/blocks/navigation/style-rtl.css 1.42 kB
build/block-library/blocks/navigation/style.css 1.41 kB
build/block-library/blocks/navigation/view.min.js 2.52 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 310 B
build/block-library/blocks/page-list/editor.css 310 B
build/block-library/blocks/page-list/style-rtl.css 241 B
build/block-library/blocks/page-list/style.css 241 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 261 B
build/block-library/blocks/paragraph/style.css 261 B
build/block-library/blocks/post-author/editor-rtl.css 210 B
build/block-library/blocks/post-author/editor.css 210 B
build/block-library/blocks/post-author/style-rtl.css 182 B
build/block-library/blocks/post-author/style.css 181 B
build/block-library/blocks/post-comments-form/style-rtl.css 140 B
build/block-library/blocks/post-comments-form/style.css 140 B
build/block-library/blocks/post-comments/style-rtl.css 360 B
build/block-library/blocks/post-comments/style.css 359 B
build/block-library/blocks/post-content/editor-rtl.css 138 B
build/block-library/blocks/post-content/editor.css 138 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 398 B
build/block-library/blocks/post-featured-image/editor.css 398 B
build/block-library/blocks/post-featured-image/style-rtl.css 143 B
build/block-library/blocks/post-featured-image/style.css 143 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 378 B
build/block-library/blocks/post-template/style.css 379 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 60 B
build/block-library/blocks/post-title/style.css 60 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 378 B
build/block-library/blocks/pullquote/style.css 378 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 270 B
build/block-library/blocks/query-pagination/editor.css 262 B
build/block-library/blocks/query-pagination/style-rtl.css 239 B
build/block-library/blocks/query-pagination/style.css 236 B
build/block-library/blocks/query-title/editor-rtl.css 85 B
build/block-library/blocks/query-title/editor.css 85 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 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 220 B
build/block-library/blocks/quote/theme.css 222 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 374 B
build/block-library/blocks/search/style.css 375 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 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 250 B
build/block-library/blocks/separator/style.css 250 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 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 462 B
build/block-library/blocks/site-logo/editor.css 464 B
build/block-library/blocks/site-logo/style-rtl.css 153 B
build/block-library/blocks/site-logo/style.css 153 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 165 B
build/block-library/blocks/social-link/editor.css 165 B
build/block-library/blocks/social-links/editor-rtl.css 812 B
build/block-library/blocks/social-links/editor.css 811 B
build/block-library/blocks/social-links/style-rtl.css 1.3 kB
build/block-library/blocks/social-links/style.css 1.3 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 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 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 636 B
build/block-library/blocks/template-part/editor.css 635 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/editor-rtl.css 90 B
build/block-library/blocks/term-description/editor.css 90 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 853 B
build/block-library/common.css 849 B
build/block-library/editor-rtl.css 9.54 kB
build/block-library/editor.css 9.52 kB
build/block-library/index.min.js 151 kB
build/block-library/reset-rtl.css 527 B
build/block-library/reset.css 527 B
build/block-library/style-rtl.css 10.2 kB
build/block-library/style.css 10.2 kB
build/block-library/theme-rtl.css 658 B
build/block-library/theme.css 663 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/blocks/index.min.js 46.9 kB
build/compose/index.min.js 10.2 kB
build/core-data/index.min.js 12.3 kB
build/customize-widgets/index.min.js 11.1 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 614 B
build/data/index.min.js 7.1 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 428 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.53 kB
build/edit-navigation/index.min.js 14.9 kB
build/edit-navigation/style-rtl.css 3.37 kB
build/edit-navigation/style.css 3.37 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/index.min.js 29 kB
build/edit-post/style-rtl.css 7.2 kB
build/edit-post/style.css 7.2 kB
build/edit-site/index.min.js 26.6 kB
build/edit-site/style-rtl.css 5.07 kB
build/edit-site/style.css 5.07 kB
build/edit-widgets/index.min.js 16.1 kB
build/edit-widgets/style-rtl.css 4.06 kB
build/edit-widgets/style.css 4.06 kB
build/editor/index.min.js 37.7 kB
build/editor/style-rtl.css 3.74 kB
build/editor/style.css 3.73 kB
build/element/index.min.js 3.17 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 5.36 kB
build/format-library/style-rtl.css 668 B
build/format-library/style.css 669 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.6 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.49 kB
build/keycodes/index.min.js 1.25 kB
build/list-reusable-blocks/index.min.js 1.85 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.88 kB
build/notices/index.min.js 845 B
build/nux/index.min.js 2.03 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.83 kB
build/primitives/index.min.js 921 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.63 kB
build/reusable-blocks/index.min.js 2.28 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.32 kB
build/shortcode/index.min.js 1.48 kB
build/token-list/index.min.js 562 B
build/url/index.min.js 1.74 kB
build/viewport/index.min.js 1.02 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.27 kB
build/widgets/style-rtl.css 1.17 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

Copy link
Member Author

@tyxla tyxla 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 in a very early stage of exploring g2, as well as the prototype, so this doesn't work at all at this time. However, it can give us some ideas as to what to start with to unblock it. Some tasks we can start are:

  • Extracting some missing g2 components
  • Promoting some experimental components
  • Prototyping the global styles state, reusing and extending the existing global styles work.
  • Discussing and making decisions wrt the navigation/routing.

I've left some comments and thoughts as I'm pausing work on it for today, just in case they can be helpful if anyone would like to chime in.

cc @ciampo @sarayourfriend

packages/components/src/index.js Outdated Show resolved Hide resolved
packages/components/src/item-group/item-group/component.js Outdated Show resolved Hide resolved
} );

// App State
const initialState = {
Copy link
Member Author

Choose a reason for hiding this comment

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

The state needs a bunch of love. We'll likely need to work on a new @wordpress/data store for this one.

Copy link
Contributor

Choose a reason for hiding this comment

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

Will we need to just adopt whatever global styles currently uses for state management? I'm assuming there's a lot of intermediary stuff that needs to be done when the state changes that's already being handled in the current implementation?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes, it makes sense to reuse as much as possible from the existing global styles UI as a whole, not only the state but also the existing components. Which is one more thing we'll have to consider as we move forward to this version.

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah we need to see how global styles are read/written and think about the best way to integrate that into the sidebar

Copy link
Member

Choose a reason for hiding this comment

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

cc @nosolosw and @jorgefilipecosta here for input

Copy link
Member

Choose a reason for hiding this comment

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

A good starting point would be to look at the useGlobalStylesContext hook, it gives access to the current settings & styles (see in use). They follow the theme.json specification.

Copy link
Member

Choose a reason for hiding this comment

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

Another good place to check the logic is the implementation of the GlobalStylesProvider /packages/edit-site/src/components/editor/global-styles-provider.js.
Basically, the source of truth for the global styles user data is in wordpress/data in a post type that contains global styles information. (retrieved using useGlobalStylesEntityContent that just returns the content of the post type useEntityProp( 'postType', 'wp_global_styles', 'content' );).

The provider contains a JSON object representation of that same data (memoized each time the data changes). And also contains mergedStyles the result of merging the user theme.json with the theme and core theme.json data provided by the server.

The provider provides setters and getters for user styles and settings that deal with variable retrieving etc. The consumer of the API just reads and writes values if the values can be represented with CSS variables or come from CSS variables the consumer is not aware.

On each change, there are also effects on the provider that update the compiled CSS of the theme.json tree so the user sees style updates in real-time.

@@ -0,0 +1,6 @@
export { ColorsElementScreen } from './colors-element';
Copy link
Member Author

Choose a reason for hiding this comment

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

Nit: from a dev experience standpoint, is it valid to call these "screens"?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think Q was taking a lot of hints from React Native development generally (View and Text component for example) and the navigation matches a lot of how RN does things, including the concept of Screens.

Copy link
Member Author

Choose a reason for hiding this comment

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

The thing that can create confusion here is that a "screen" usually takes a whole screen, while here it's just a section of the entire UI.

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, I'm not sure what to call it. A view?

Copy link
Member Author

Choose a reason for hiding this comment

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

I like that better, although it's used for some other things (a View component) 😉 I guess it should be fine regardless since it's an isolated term within the global styles. The problem with isolated terms is that as a project matures, they end up across the entire codebase, and isolated terms end up being not so isolated anymore 😉

Copy link
Contributor

@sarayourfriend sarayourfriend Jun 23, 2021

Choose a reason for hiding this comment

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

💯

How about GlobalStylesNavigationScreenAndOrViewThing 😂 Surely that won't leak into the rest of the project lol!

In all seriousness though, I agree. Not sure what best to call these things but maybe something specific to global styles would suffice.

Copy link
Member Author

Choose a reason for hiding this comment

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

😉

On a serious note, I agree - GlobalStylesScreen or GlobalStylesView would suffice for me.

Copy link
Contributor

Choose a reason for hiding this comment

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

I personally prefer View over Screen too.

I also think that we should come up with a solution that works for any sidebars (and "self-contained" pieces of UI), not just the Global Styles sidebar specifically.

I believe Q put some of these concepts behind the Navigation namespace, for example NavigationScreen etc

import { Screen, ScreenHeader } from '../components';
import { useAppState } from '../state';

const typographyOptions = [
Copy link
Member Author

Choose a reason for hiding this comment

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

Seems like this belongs with the global styles state and not specifically with this screen?

};
}

const fontWeights = [ 100, 200, 300, 400, 500, 600, 700, 800, 900 ];
Copy link
Member Author

Choose a reason for hiding this comment

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

We'll need a more central location for those.

Copy link
Member

Choose a reason for hiding this comment

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

Currently, only appearance control component is aware of the weights gutenberg/packages/block-editor/src/components/font-appearance-control/index.js. I guess we can keep the same logic and just update that component for the new design (it is experimental).

*/
import { useAppState } from '../state';

export function ColorPickerModal() {
Copy link
Member

Choose a reason for hiding this comment

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

Should we call this one ColorPickerDropdown or Menu? We are looking at something like this, design wise:

image

label: o,
} ) );

export const Inspector = () => {
Copy link
Member

Choose a reason for hiding this comment

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

Should this be using the default sidebar inspector for blocks? Should it be named something else otherwise?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yep, I think we should name this otherwise to prevent from term confusion 😉

/**
* WordPress dependencies
*/
import { Item, NavigatorLink } from '@wordpress/components';
Copy link
Member

Choose a reason for hiding this comment

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

Let's think about how we'd reconcile this with the existing navigator set of components currently in use. We can do reconciliation as a separate step, but we should be thinking about it.

Copy link
Contributor

Choose a reason for hiding this comment

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

We touched this point briefly in a conversation with @griffbrad — if I remember correctly, Q had created a new set of Navigation components because the existing set did not satisfy his requirements. Am I remembering correctly?

Choose a reason for hiding this comment

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

Correct. Here’s the original conversation for context on the differences: #24107 (comment)

Copy link
Contributor

Choose a reason for hiding this comment

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

That's very useful. It also sheds some light on why the Router + Navigation system in this prototype don't use react-router directly (and instead provide a very similar, first-party implementation)

*/
import { Surface } from '@wordpress/components';

export const Screen = styled( Surface, { props: { variant: 'tertiary' } } )`
Copy link
Member

Choose a reason for hiding this comment

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

What's the variant: tertiary expressing?

Copy link
Contributor

Choose a reason for hiding this comment

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

It appears to be a mistake: I can't get this API to do anything: https://codesandbox.io/s/competent-grothendieck-weds7?file=/src/App.js

Nor is it documented in Emotion's documentation or types.

Copy link
Contributor

Choose a reason for hiding this comment

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

Copy link
Contributor

Choose a reason for hiding this comment

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

From the README:

tertiary: Used as the app/site wide background. Visible in dark mode only. Use case is rare.

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes it's a prop of Surface but the actual usage here doesn't make any sense or do anything it seems.


/**
* These are the "routes" that bind navigation paths with components for the
* indivudal screens.
Copy link
Member

Choose a reason for hiding this comment

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

not sure if we'll keep any of this, but there's a typo "indivudal"


return (
<AppProvider>
<ColorPickerModal />
Copy link
Member

Choose a reason for hiding this comment

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

Curious why this needs to be included here

/**
* External dependencies
*/
import { startCase } from 'lodash';
Copy link
Member

Choose a reason for hiding this comment

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

We likely don't need this

return (
<ListGroup>
<ListGroupHeader>{ title }</ListGroupHeader>
<HStack alignment="left" wrap>
Copy link
Member

Choose a reason for hiding this comment

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

This whole component already exists but is less polished, we should reconcile

Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

What's the best way to test this UI/PR? I tried to replace the GlobalStylesSidebar component to use the v2 one in packages/edit-site/src/components/sidebar/index.js. But I'm getting an error

styled-base.browser.esm.js:29 Uncaught Error: You are trying to create a styled element with an undefined component.
You may have forgotten to import it.

];

/**
* GlobalStylesHeaer and Sidebar can largely be ignored.
Copy link
Member

Choose a reason for hiding this comment

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

small typo GlobalStylesHeaer -> GlobalStylesHeader.

return (
<AppProvider>
<ColorPickerModal />
<Navigator initialPath={ initialPath }>
Copy link
Member

Choose a reason for hiding this comment

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

I agree I think we can maintain the navigation @wordpress/data or even in react state plus context inside GlobalStylesProvider.


const handleOnClick = ( i ) => () => {
appState.setColorPickerKey(
`color.palettes[${ index }].colors[${ i }].color`
Copy link
Member

Choose a reason for hiding this comment

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

We already have getStyle setStyle etc abstractions on packages/edit-site/src/components/editor/global-styles-provider.js.
This logic is complex e.g: when the user sets a color if the color being set is a theme color or user color the color should be referenced using a CSS var instead of the value. When the value is for example CSS custom variable the components should retrieve the value for that value and show it.
Our getters and setters try to abstract everything from developers.

};
}

const fontWeights = [ 100, 200, 300, 400, 500, 600, 700, 800, 900 ];
Copy link
Member

Choose a reason for hiding this comment

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

Currently, only appearance control component is aware of the weights gutenberg/packages/block-editor/src/components/font-appearance-control/index.js. I guess we can keep the same logic and just update that component for the new design (it is experimental).

} );

// App State
const initialState = {
Copy link
Member

Choose a reason for hiding this comment

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

Another good place to check the logic is the implementation of the GlobalStylesProvider /packages/edit-site/src/components/editor/global-styles-provider.js.
Basically, the source of truth for the global styles user data is in wordpress/data in a post type that contains global styles information. (retrieved using useGlobalStylesEntityContent that just returns the content of the post type useEntityProp( 'postType', 'wp_global_styles', 'content' );).

The provider contains a JSON object representation of that same data (memoized each time the data changes). And also contains mergedStyles the result of merging the user theme.json with the theme and core theme.json data provided by the server.

The provider provides setters and getters for user styles and settings that deal with variable retrieving etc. The consumer of the API just reads and writes values if the values can be represented with CSS variables or come from CSS variables the consumer is not aware.

On each change, there are also effects on the provider that update the compiled CSS of the theme.json tree so the user sees style updates in real-time.

@tyxla
Copy link
Member Author

tyxla commented Jun 29, 2021

Thanks for the feedback @jorgefilipecosta!

What's the best way to test this UI/PR? I tried to replace the GlobalStylesSidebar component to use the v2 one in packages/edit-site/src/components/sidebar/index.js. But I'm getting an error

It's not testable yet. It's currently in an exploratory phase and there are several big parts to be ironed out first - the biggest one seems to be the navigation / routing part.

We'll be looking into reusing as much as possible from the existing v1 functionality.

@tyxla
Copy link
Member Author

tyxla commented Jun 29, 2021

Thank you all for the great feedback! There's a lot to grok here, and I think we need to set some prerequisites separately before we're able to move this one forward.

I've decided to take a simplistic approach with the navigation and opened #33064 for that - would appreciate some 👀 . If we agree on this approach, it will unblock a big part of this PR and allow us to greatly simplify the navigation / routing part, allowing space for some of its features to be built incrementally as we work on the v2 prototype.

@tyxla
Copy link
Member Author

tyxla commented Jul 13, 2021

I'm tinkering with moving the minimal amount of some necessary components along from g2 now. This still needs more work, I will continue tomorrow.

@@ -91,6 +96,7 @@ export { default as __experimentalNavigationBackButton } from './navigation/back
export { default as __experimentalNavigationGroup } from './navigation/group';
export { default as __experimentalNavigationItem } from './navigation/item';
export { default as __experimentalNavigationMenu } from './navigation/menu';
export * from './navigator';
Copy link
Member Author

Choose a reason for hiding this comment

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

All the ones we use from here should be __experimental.

Copy link
Contributor

@sarayourfriend sarayourfriend left a comment

Choose a reason for hiding this comment

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

Not that all this has to be addressed now but there are a lot of tiny issues with the router code that would be good to address before committing to it.

);
}

export default memo( NavigatorSwitch );
Copy link
Contributor

Choose a reason for hiding this comment

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

Is it necessary to memo this component? Its only prop is children.

Copy link
Member Author

Choose a reason for hiding this comment

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

Agreed - I don't see why we'd need a memo here at a first glance. Just moved it as it was part of the prototype PR.

Comment on lines +14 to +16
const contextProps = {
animationDuration,
};
Copy link
Contributor

Choose a reason for hiding this comment

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

Should this be wrapped in useMemo?

Comment on lines +15 to +23
// React 15 compat
function isModifiedEvent( event ) {
return !! (
event.metaKey ||
event.altKey ||
event.ctrlKey ||
event.shiftKey
);
}
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 support React 15?

Copy link
Member Author

Choose a reason for hiding this comment

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

I don't think so. I removed some support as I was porting from g2, but this remained. I think we can remove it safely.

Comment on lines +19 to +31
class MemoryRouter extends Component {
constructor() {
super();

this.history = createHistory( this.props );
}

render() {
return (
<Router children={ this.props.children } history={ this.history } />
);
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

We could avoid a class component by using a closure and doing something similar to react-nagivation:

const createMemoryRouter = () => {
  let history;

  return function MemoryRouter(props) {
    history = createHistory(props);
    return <Router children={this.props.children} history={history} />;
  };
}

Comment on lines +36 to +37
// Preact uses an empty array as children by
// default, so use null if that's the case.
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 support Preact?

Copy link
Member Author

Choose a reason for hiding this comment

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

AFAIK no.

/**
* The public API for putting history on context.
*/
class Router extends Component {
Copy link
Contributor

Choose a reason for hiding this comment

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

This can also be a function component.

/**
* The public API for rendering the first <Route> that matches.
*/
class Switch extends Component {
Copy link
Contributor

Choose a reason for hiding this comment

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

Ditto, function component here too.

Comment on lines +12 to +38
function withRouter( Component ) {
const displayName = `withRouter(${
Component.displayName || Component.name
})`;
const C = ( props ) => {
const { wrappedComponentRef, ...remainingProps } = props;

return (
<RouterContext.Consumer>
{ ( context ) => {
return (
<Component
{ ...remainingProps }
{ ...context }
ref={ wrappedComponentRef }
/>
);
} }
</RouterContext.Consumer>
);
};

C.displayName = displayName;
C.WrappedComponent = Component;

return hoistNonReactStatics( C, Component );
}
Copy link
Contributor

Choose a reason for hiding this comment

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

This should use createHigherOrderComponent from compose.

Copy link
Member Author

Choose a reason for hiding this comment

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

Good call.

Comment on lines +4 to +8
import { withRouter } from './router';

const withNavigator = withRouter;

export default withNavigator;
Copy link
Contributor

Choose a reason for hiding this comment

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

Why is this re-export necessary?

Copy link
Member Author

Choose a reason for hiding this comment

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

It's structural / organizational IMHO. I don't see a good reason to have it.

import RouterContext from './router-context';

// A public higher-order component to access the imperative API
function withRouter( Component ) {
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 this? Why can't we just use useRouter?

Copy link
Member Author

Choose a reason for hiding this comment

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

I don't think we'll need it, but it was added likely due to the fact there are a bunch of Component instances lying around.

@tyxla tyxla force-pushed the try/global-styles-sidebar-v2 branch from 76db905 to 423dcc9 Compare July 14, 2021 11:31
className={ classnames( 'component-color-indicator', className ) }
className={ classnames(
'component-color-indicator',
{ 'is-circular': circular },
Copy link
Member Author

Choose a reason for hiding this comment

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

This is a workaround, which we may want to go with, or not. The ColorCircle component in g2 seemed a bit more capable, but we should reconsider if we need those capabilities here.

Copy link
Contributor

Choose a reason for hiding this comment

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

Conversation started in #33820

export { default as NavigatorRouter } from './navigator-router';
export { default as NavigatorScreen } from './navigator-screen';
export { default as NavigatorScreens } from './navigator-screens';
export { default as NavigatorSwitch } from './navigator-switch';
Copy link
Member Author

Choose a reason for hiding this comment

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

We should reconsider if we could ditch any of those navigator components eventually.

import { useHistory } from './router';

function NavigatorButton( props, forwardedRef ) {
/* eslint-disable no-unused-vars */
Copy link
Member Author

Choose a reason for hiding this comment

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

Let's fix this instead of disabling the lint error.

*/
import { useHistory, useLocation, useParams, useRouteMatch } from './router';

export const useNavigatorHistory = useHistory;
Copy link
Member Author

Choose a reason for hiding this comment

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

These re-exports seem to go through several layers, we may want to re-organize and re-export at a single location.

const combinedProps = { ...routeProps, ...otherProps };

/* eslint-disable no-nested-ternary */
const content = children
Copy link
Member Author

Choose a reason for hiding this comment

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

This is a ternary nightmare and needs to be fixed to be more comprehensible.

labelPosition="side"
/>
</CardBody>
<Panel>
Copy link
Member Author

Choose a reason for hiding this comment

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

For the PoC we're using Panel instead of the ListGroup component group from g2. Let's re-evaluate this decision, do we need the ListGroup components here? Or is there anything more suitable than Panel we can use?

const GlobalStylesHeader = () => {
return (
<CardHeader>
<Heading level={ 5 }>Global Styles</Heading>
Copy link
Member Author

Choose a reason for hiding this comment

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

Noting that we're intentionally not localizing any strings here, this is just a PoC PR.

</ZStack>
</Spacer>
<View>
<Text variant="muted">23 colors</Text>
Copy link
Member Author

Choose a reason for hiding this comment

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

This is currently static.

<NavLink to="/colors/palette">
<HStack>
<Spacer>
<ZStack isLayered={ false } offset={ -15 }>
Copy link
Member Author

Choose a reason for hiding this comment

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

We changed this offset to reflect the additional margin that ColorIndicator already contains.

</RenderComponent>
<RenderComponent prop={ getIsDefined( 'fontSize' ) }>
<Grid>
<FontSizePicker
Copy link
Member Author

Choose a reason for hiding this comment

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

FontSizePicker needs some love in this context. We need to compare it to the g2 implementation and find a better way to have the slider inline with the number field for font size picker.

@tyxla
Copy link
Member Author

tyxla commented Jul 14, 2021

I've pulled the Navigator components from g2, and with some changes, I've made the prototype work in a Storybook story. Here's a very quick demo:

gsv2quickdemo.mov

To spin it up locally, run npm run storybook:dev and open http://localhost:50240/?path=/story/edit-site-experimental-global-styles-v2--default

There are a lot of visual glitches as you can see, as well as things that are not looking the same way as in the g2 prototype, but those are areas where we'll need to make decisions as to whether to migrate components or adopt the different behavior.

As non-mergeable as this PR is, I believe this prototype unveils a whole ton of work for us, including component migration work and unification work. We also still need to figure out how to reuse and adapt as much as possible from the v1 in terms of components, app state and logic.

@ciampo
Copy link
Contributor

ciampo commented Aug 5, 2021

Rebased and cleaned up some code after merging #33701 (which promoted ItemGroup and Item)

@ciampo ciampo force-pushed the try/global-styles-sidebar-v2 branch from 09516c3 to ed97074 Compare September 9, 2021 13:13
@ciampo ciampo mentioned this pull request Sep 14, 2021
12 tasks
@jorgefilipecosta
Copy link
Member

Hi @ciampo, what is the plan to include this sidebar on the edit site? What are the next steps and how can I best help this PR?
I guess we can register two global styles sidebars there for now. The second one being the new version? Initially, the new version would just include the router/navigation system and then we would update the components affecting both new and old versions when the progress is considerable we just move the new version code to be the old version?

@ciampo
Copy link
Contributor

ciampo commented Sep 14, 2021

what is the plan to include this sidebar on the edit site? What are the next steps and how can I best help this PR?
I guess we can register two global styles sidebars there for now. The second one being the new version?

This PR served as a way to start the migration of the prototype into this repo — and consequently to understand better the next steps necessary in order to fully complete this integration.

Registering a new version of the Global Styles Sidebar and iterating on it is exactly what we had in mind!

Initially, the new version would just include the router/navigation system

Yes, as we start work on it, we should keep the router/navigation system that comes with the prototype. We can (and should) look into iterating on it as work proceeds! In particular, from my point of view, I can already see how we may need to:

  • reconcile this prototype's navigation systems with the set of components already available in Gutenberg
  • potentially swap the prototype's custom routing system with a third party solution (currently the prototype's routing system is a slightly custom version of react-router), and make sure that this routing solution can work well when embedded in an app with its own routing solution (e.g. gutenberg)

and then we would update the components affecting both new and old versions when the progress is considerable we just move the new version code to be the old version?

Yes. We would keep iterating on the experimental version, updating all of the necessary dependencies, until the new version is ready to replace the old one.

@griffbrad
Copy link

While we iterate on the other components, we can keep the navigation components local/private to this experimental sidebar implementation for now. We expect they'll ultimately be used in many other contexts, so we'd like to ensure we have a good, general API for them and a good backward compatibility approach relative to the existing Navigation components. However, that doesn't need to hold back iteration on other aspects of the Global Styles sidebar right now.

@youknowriad
Copy link
Contributor

@griffbrad just wanted to mention that there's no need of a heavy backward compatible approach here, it's fine to replace the existing component if we also replace its usage (only the site editor left sidebar) since it's all experimental.

@ntsekouras
Copy link
Contributor

it's fine to replace the existing component if we also replace its usage (only the site editor left sidebar)

Just noting that __experimentalNavigation is also used in the Preferences.

@tyxla
Copy link
Member Author

tyxla commented Oct 20, 2021

Given the different approach that we took for the new version of Global Styles, this is unused and can be closed.

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 [Status] In Progress Tracking issues with work in progress
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants