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

Add: Styles section to the browse mode sidebar. #49014

Merged
merged 2 commits into from
Mar 31, 2023

Conversation

jorgefilipecosta
Copy link
Member

@jorgefilipecosta jorgefilipecosta commented Mar 12, 2023

This PR adds a style item to the browse mode sidebar following the design proposed at https://make.wordpress.org/design/2023/02/15/design-share-jan-30-feb-10/.

This is the first step in the addition of styles to the browse mode sidebar, the edit action to customize the styles instead of just selecting a style variation is not added yet.

Details

The style variations UI was not available as a standalone component we could use, there was a single component that included the global styles sidebar navigation effects like opening the zoomed out mode and rendering the the UI. We are extracting the rendering part that is now used by the browse mode sidebar and by the existing global styles sidebar.
The we use the newly extracted component the add a new menu item in the browse mode sidebar.

Screeshots

Screenshot 2023-03-12 at 12 01 24

Screenshot 2023-03-12 at 12 02 09

Testing

Verify that changing the style variations in the browse mode sidebar and the existing global styles sidebar is possible.

@github-actions
Copy link

github-actions bot commented Mar 12, 2023

Size Change: +373 B (0%)

Total Size: 1.34 MB

Filename Size Change
build/edit-site/index.min.js 63.5 kB +211 B (0%)
build/edit-site/style-rtl.css 10.2 kB +81 B (+1%)
build/edit-site/style.css 10.2 kB +81 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 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.11 kB
build/block-editor/content.css 4.1 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/index.min.js 201 kB
build/block-editor/style-rtl.css 14.5 kB
build/block-editor/style.css 14.5 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 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 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-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 649 B
build/block-library/blocks/cover/editor.css 651 B
build/block-library/blocks/cover/style-rtl.css 1.61 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/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 265 B
build/block-library/blocks/file/style.css 265 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 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 830 B
build/block-library/blocks/image/editor.css 829 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 134 B
build/block-library/blocks/post-excerpt/style.css 134 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 326 B
build/block-library/blocks/pullquote/style.css 325 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 463 B
build/block-library/blocks/query/editor.css 463 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/style-rtl.css 408 B
build/block-library/blocks/search/style.css 406 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 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 489 B
build/block-library/blocks/site-logo/editor.css 489 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 332 B
build/block-library/blocks/spacer/editor.css 332 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 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 404 B
build/block-library/blocks/template-part/editor.css 404 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.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 11.7 kB
build/block-library/editor.css 11.6 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 202 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.8 kB
build/block-library/style.css 12.7 kB
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/blocks/index.min.js 51.1 kB
build/components/index.min.js 208 kB
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.4 kB
build/core-data/index.min.js 16.3 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 663 B
build/data/index.min.js 8.68 kB
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.72 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 34.9 kB
build/edit-post/style-rtl.css 7.6 kB
build/edit-post/style.css 7.59 kB
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/index.min.js 45.8 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/private-apis/index.min.js 937 B
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/rich-text/index.min.js 11.1 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

@jorgefilipecosta jorgefilipecosta added [Type] Enhancement A suggestion for improvement. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Mar 12, 2023
@jorgefilipecosta jorgefilipecosta force-pushed the add/styles-section-to-the-browse-mode-sidebar branch 2 times, most recently from 0686ba8 to 6a4a301 Compare March 12, 2023 12:22
@github-actions
Copy link

github-actions bot commented Mar 12, 2023

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

@jasmussen
Copy link
Contributor

Thanks for the PR! Here's a quick GIF showing the new "Styles" item added to the site editor sidebar, and how it allows you to quickly pick a style variation:

styles

This is working well as it's showing high level global actions, which feel appropriate in this receded view, whereas intricate editing should go in the fullscreen editor. It even feels like this section helps contextualize what this new view is all about, even recontextualizing the Navigation screen: it's all high level. I'd love to get this in soon, even if we don't get it in 6.2.

I'd love to hear @jameskoster and @SaxonF's thoughts on this. Seems like there are a couple of metrics, styles, active states, focus states and such for the style variations as well. Here's one doodle:

Screenshot 2023-03-14 at 09 14 28

Note by the way we need an edit button just like on templates. This edit button should deep-link you into the fullscreen editor with the global styles open. I think wp-admin/site-editor.php?styles=open used to work for that, but that seems to have broken recently?

@draganescu
Copy link
Contributor

I love this PR because it surfaces the styles feature so well, and it also makes applying them a better experience. The problem I have with it is that it makes the sidebar a mix of settings and navigation which is a bit confusing.

@jasmussen
Copy link
Contributor

The problem I have with it is that it makes the sidebar a mix of settings and navigation which is a bit confusing.

Can you clarify what you mean with this? I see the ability to surface contextual controls in drilldown detail pages as a key value of the site editor going forward, and I could see us surfacing the most common controls contextually in these places, such as "posts per page" on the Index template, or even page template:

Site Editor

@draganescu
Copy link
Contributor

That is different @jasmussen and correct, because in your screenshot you already are in a new context and the sidebar is contextually adapting, showing new things. But initially, as this PR stands, we have navigation, templates, template parts, three actions which result in a list of things, click on one and you open something on the right side. And now we add the fourth which is different, it is a setting - the style to apply. The selected style does not open on the right side, it's globally applying to the whole website.

I think I saw some layout which included a sidebar menu item named "Design" and from there you can tweak design settings, such as style?

Nevertheless, I think we can add them as they're implemented here and reiterate on structuring the menu and interaction better later.

@jameskoster
Copy link
Contributor

This is working well as it's showing high level global actions, which feel appropriate in this receded view

I agree, this a compelling PR.

In addition to the button states Joen mentioned there are a couple other issues:

zindex

Screenshot 2023-03-14 at 11 46 17

The iframes in the thumbs are overlapping the panel header.

Animation
In Chrome, clicking the W button to return to the Styles panel is very clunky:

animation.mp4

I'm not sure we can do anything about that but I wanted to note it.


Not necessarily blockers to this PR, but I think we should pay a little more design attention to:

  1. What exactly do you see after clicking 'Edit styles'?
  2. How does the W button behave?

This edit button should deep-link you into the fullscreen editor with the global styles open

My worry with this approach is that the full-screen editor still feels like its optimised for template / content editing. So if you close the global styles panel and begin playing with some blocks, it could subsequently feel a bit unnatural to see the Styles panel when you click the W. A couple of options to consider there:

  1. The W button opens the sidebar to the root level. This would be simplest, but might feel awkward after a quick in-and-out edit. It would also be inconsistent with other flows. But perhaps it's okay as a short term solution.
  2. W button only returns to the Styles panel if the global styles panel is open.
  3. Create a full-screen editing view that is more optimised for Styles. This could be as simple as 'locking' the Styles panel open, making the canvas inert, hiding other tools, and displaying a 'Styles' title in the top bar:

Screenshot 2023-03-14 at 12 10 19

I suppose if we can get the edit button in there and see how it feels, that can help guide us.

@jasmussen
Copy link
Contributor

Those are excellent questions to ask, Jay, and they might be good to extract into a separate issue, because it's good to solve. We have all the pieces: a receced high level view, a low level technical view, a style book. But the questions emerging is: how much, if any, should you flow from one section into another? I.e. should you be able to go from styles to template editing, or should you have to go "back" before doing that? To an extent these lines are already somewhat blurred with templates and content being mixed, so it's good to think about, high level.

@jorgefilipecosta jorgefilipecosta force-pushed the add/styles-section-to-the-browse-mode-sidebar branch 4 times, most recently from c09c220 to dea59c1 Compare March 24, 2023 18:56
@jorgefilipecosta
Copy link
Member Author

Hi @jameskoster, @jasmussen this PR was updated, and the z-index and border issues were fixed.
Regarding the animations on clicking w, I think we have the same issue when we click browse styles on the current global styles sidebar. I think maybe we can try to address this separately.
Are there any other items that are a blocker to this PR, or is it ok to merge this as a first version?

@jasmussen
Copy link
Contributor

Nice one. This is coming along well.

stuff

Outside of any feedback others might have (cc: @SaxonF), from my pov the main thing missing here is a link to edit the full global styles. A deep link to the fullscreen editor with the global styles inspector open. And I wonder: should that be the edit link, or perhaps this one?
Screenshot 2023-03-27 at 08 53 07

@jorgefilipecosta jorgefilipecosta force-pushed the add/styles-section-to-the-browse-mode-sidebar branch from dea59c1 to 30670ce Compare March 27, 2023 09:15
@jorgefilipecosta
Copy link
Member Author

Outside of any feedback others might have (cc: @SaxonF), from my pov the main thing missing here is a link to edit the full global styles. A deep link to the fullscreen editor with the global styles inspector open. And I wonder: should that be the edit link, or perhaps this one?

Thank you for the feedback @jasmussen I added a button with the brush icon to switch to edit mode with the global styles sidebar open.

@jasmussen
Copy link
Contributor

Thanks for fast work. I'm not actually seeing any icons?

Screenshot 2023-03-27 at 11 56 08

Also, I'm not actually sure we want to use the brush. I think we should probably start with the normal Edit icon, and then see if that can work.

@jameskoster
Copy link
Contributor

I'm seeing the icon and it works as expected.

I do have some questions around the general experience though:

  • There's nothing guiding you towards the sidebar when you enter full-screen editing, and the full interactivity of the canvas is a bit distracting. Is there anything we can do to improve that?
  • The W button behaviour – returning to the Styles panel is ok if you make a few quick style adjustments, but after you start interacting with blocks etc is might be a bit unexpected?
    • If you follow a deep-link to /site-editor.php?path=%2Fwp_global_styles&canvas=edit, I'm not sure I'd expect to see the Styles panel when clicking the W button, it's a bit disorienting.

Switching variations in the dark material is a pretty nice feature on its own, I wonder if we should take some more time on the flows in/out of granular style editing, perhaps in a separate issue/PR?

@jasmussen
Copy link
Contributor

There's nothing guiding you towards the sidebar when you enter full-screen editing, and the full interactivity of the canvas is a bit distracting. Is there anything we can do to improve that?

Yes, I think there definitely is. But I also think that's a larger effort we can visualize separately. If we think of the "site view" (dark material nav on the left, preview on the right) as a mode of the single app that is the site editor, and "edit view" (fullscreen editor) as another mode, is there a similar mode for "style view"? Ultimately you'll flow in and out of these modes in a few different ways. To an extent, the fact that we zoom out the canvas in browse styles view, is an early attempt at such a mode.

Speaking of, should we explore a similar zoom out for this "browse styles" in the site view?

If you follow a deep-link to /site-editor.php?path=%2Fwp_global_styles&canvas=edit, I'm not sure I'd expect to see the Styles panel when clicking the W button, it's a bit disorienting.

Without getting too technical and just discussing the heuristic at a high level, I wonder if we could do this: If the styles inspector is open, Back button takes you to Design > Styles. If the regular inspector is open, or both inspectors are closed, the Back button takes you to Design. What do you think?

@jorgefilipecosta
Copy link
Member Author

@jasmussen, the button should be visible I guess maybe you need to pull and rebuild to see the changes?
I think this button going to edit mode with the global styles sidebar open is just a temporary solution. The final solution, in my mind, is to have the edit go to the full global styles sidebar keeping in browse mode. We are not going to this solution yet because our components don't work well on a dark background.

Without getting too technical and just discussing the heuristic at a high level, I wonder if we could do this: If the styles inspector is open, the Back button takes you to Design > Styles. If the regular inspector is open or both inspectors are closed, the Back button takes you to Design. What do you think?

This seems like an ok solution; if we agree on it, I can look into how to make it happen.

@jameskoster
Copy link
Contributor

jameskoster commented Mar 27, 2023

is there a similar mode for "style view"

I think it's worth exploring, yes. Maybe the canvas is permanently zoomed out when the Styles panel is open? And perhaps clicking a block on the canvas takes you to that block in the Styles panel (I think we had an issue for that somewhere).

Speaking of, should we explore a similar zoom out for this "browse styles" in the site view?

Again, this seems worthy of a dedicated exploration. Zooming out alone might not be all that useful, but zooming out and showing a mosaic of 3-4 other templates could be very handy.

If the styles inspector is open, Back button takes you to Design > Styles. If the regular inspector is open, or both inspectors are closed, the Back button takes you to Design. What do you think?

Using panel visibility seems sensible and likely a good place to start, but I'm not sure how intuitive it would be in practise. Just because a panel is open, that doesn't mean you're actively using it. This is likely one of those interactions that needs to be felt out. If it's easy to try in the PR then I wouldn't object.

But these are both quite tricky issues, which is why I think it might be worth tackling them separately after some further design exploration. Not a strong feeling though :)

@jasmussen
Copy link
Contributor

I got it working now. Nice:

styles

On observing this, yeah let's use the regular edit button, but thanks for trying the brush.

I think it's worth exploring, yes. Maybe the canvas is permanently zoomed out when the Styles panel is open? And perhaps clicking a block on the canvas takes you to that block in the Styles panel (I think we had an issue for that somewhere).

Again, this seems worthy of a dedicated exploration. Zooming out alone might not be all that useful, but zooming out and showing a mosaic of 3-4 other templates could be very handy.

Agreed.

Using panel visibility seems sensible and likely a good place to start, but I'm not sure how intuitive it would be in practise. Just because a panel is open, that doesn't mean you're actively using it. This is likely one of those interactions that needs to be felt out. If it's easy to try in the PR then I wouldn't object.

I wonder if this panel visibility could be the context that triggers the "mode" shift? That is:

  • Move from site view to edit view, click GS and shift to GS abstracted mode, press W and you're in styles.
  • Move from site view to GS view, click the inspector or close GS, press W and you're in Templates (or Design?)

In my mind, each of these contexts, if their modes are designed right, could set the context for what you're looking at, and thus the context for what you see when you press "Back". This kind of context shifting might be worth thinking about regardless, if you are to be able to flow from Pages > Add New and into Styles, etc.

Worth an exploration, sure, but it might allow this PR to move forward even if the GS panel isn't the biggest context shift yet?

@jameskoster
Copy link
Contributor

jameskoster commented Mar 28, 2023

Yes that's roughly how it works in my mind. There's a primary thing you're editing:

  • A page
  • A template / part
  • Styles

And the primary entity determines which panel is revealed when you click the W. But for that to feel intuitive, the primary entity needs to feel obvious and apparent. As discussed, the issue is that even with the Styles panel open, it doesn't feel primary which is why the W behavior might feel a little unnatural. But yes, if we're committed to addressing that then we can include it in this PR.

@SaxonF
Copy link
Contributor

SaxonF commented Mar 29, 2023

Move from site view to edit view, click GS and shift to GS abstracted mode, press W and you're in styles.

We would need to be very careful with this behaviour because of how we treat the relationship between sidebar/admin and frame. I'd mostly expect sidebar/admin to dictate what's in frame/editor and rarely the other way around as its a little more predictable. e.g. You might start editing a page, globally style something, then want to switch pages. If you're taken to styles instead of back to where your original entry point was you'd feel quite lost as there isn't anything anchoring the navigation.

@jasmussen
Copy link
Contributor

You might start editing a page, globally style something, then want to switch pages. If you're taken to styles instead of back to where your original entry point was you'd feel quite lost as there isn't anything anchoring the navigation.

Yep, I share this concern. But I do wonder if we can make a substantial enough visual shift when shifting between inspector and GS tabs, that this could help with that context?

Something to explore separately from this branch, IMO.

@jameskoster
Copy link
Contributor

FWIW this is why I've concluded in the past that the W should open to the root of the design section, at least in the short term, because it's the only behaviour that will always feel predictable. To be clear I'm not saying we should definitely do that, because there are trade-offs. But it might be worth trying separately, particularly after the Command Center (#49330) is merged and switching entities becomes a lot easier.

@jorgefilipecosta jorgefilipecosta force-pushed the add/styles-section-to-the-browse-mode-sidebar branch from 30670ce to f448186 Compare March 30, 2023 16:41
Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

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

Took this for a spin. Here's a GIF showing the new section, switching style variations, and going to edit the full global styles:

styles

Small detail, still seeing the brush icon, let's replace that with the Edit icon.

Giving tentative approval to this one, but would appreciate sanity checks. CC: @richtabor @jameskoster @SaxonF @mtias. I think we should land it, including the Edit button to go to the full global styles, for a few reasons:

  • Global styles as is, is very hidden inside the fullscreen editor. By adding a deep-link, we surface it with more clarity.
  • The site editor is meant to conceptually split configuration in high level controls in Site View (dark material on the left, preview on the right) and low level granular configuration in Edit View (fullscreen editor). By landing this first step, it lets us move forward in the plugin.

And there are a few things we need to move forward with. As relates to styles:

  • Explore also showing font pairs and color harmonies as high level controls in the Site View
  • Explore letting the global styles sidebar toggle a more visual shift in the fullscreen editor, to make it clear this is not like the inspector, perhaps make it be more of a modal experience.

But those explorations don't preclude landing this in the mean time, and by landing this, global styles will be more discoverable again.

@jorgefilipecosta jorgefilipecosta force-pushed the add/styles-section-to-the-browse-mode-sidebar branch from f448186 to 015bf99 Compare March 31, 2023 10:00
@jorgefilipecosta jorgefilipecosta force-pushed the add/styles-section-to-the-browse-mode-sidebar branch from 015bf99 to 6d681ca Compare March 31, 2023 10:01
@jorgefilipecosta jorgefilipecosta merged commit 78c4a2a into trunk Mar 31, 2023
@jorgefilipecosta jorgefilipecosta deleted the add/styles-section-to-the-browse-mode-sidebar branch March 31, 2023 11:07
@github-actions github-actions bot added this to the Gutenberg 15.6 milestone Mar 31, 2023
@youknowriad
Copy link
Contributor

It's nice to see this merged 👍

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 User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants