Global Styles: Add Style Book to Global Styles #45960
Conversation
|
|
|
Size Change: +2.05 kB (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
ockham
added
Global Styles
|
This is taking shape now! I updated the video in the description and listed my remaining todos which I'll work on next week. |
noisysocks
changed the title
|
I'm having some problems testing this PR due to some storybook errors (here's my log after running |
|
One thing I noticed in the video is the placement of the ellipsis menu and the eye icon: we should show the eye first and then the ellipsis. |
|
Oops sorry @javierarce I'll fix that up. |
noisysocks
changed the base branch from
trunk
to
update/split-navigator-container-from-provider
|
I stacked this onto #46099. @javierarce you should be able to build the branch with no compile errors now. |
|
Thanks! Ok, this looks great, but I found some things:
|
|
Thanks all for working on this, and thanks for the videos and screenshots shared. Excellent! I'm a bit late to join the conversation, so a few quick ones I've seen discussed in #44420, just to chime in on:
This is a riff on that and this PR, very quick and dirty:
I included in that a "welcome screen", which is mainly a way of saying: we could make that card itself be sort of interactive. Not only does it contain the tabs and the close button, but it contains info on how to use it. Not a strong opinion, and not a blocker for this PR — the main take-aways are the dark background. Thank you Javi and Robert! |
|
Awesome, thanks for giving it a spin and for the feedback! I'll get this ready to land as a first version. Hopefully in time for SotW. |
noisysocks
force-pushed
the
try/style-book
branch
from
e97c147
to
ed7a5be
Compare
noisysocks
changed the base branch from
update/split-navigator-container-from-provider
to
trunk
|
I've updated the Figma file with @jasmussen's iteration, including a proposal for how to show the block types when the canvas is resized.
|
noisysocks
force-pushed
the
try/style-book
branch
from
ed7a5be
to
7a345f6
Compare
|
Ready for review! I updated the PR description and included a re-recorded video.
Totally agree with this. It should be doable but requires a few tricky changes to how
It's difficult to align the labels perfectly because blocks can have different margins, line heights, etc. I implemented an approach which unsets the top and bottom margin of the block. I think this works well enough.
I didn't implement this as I have a few concerns 😀 It's strange to me that it has Gutenberg branding. This feature will ultimately ship in WordPress as a part of the Site Editor. I imagine many will see it and think "what's Gutenberg?" I also don't love that it adds an extra step between opening the Style Book and previewing the styles. Could we instead have onboarding text within the Style Book somewhere? At any rate, let's do this in a follow-up PR.
I skipped the part of this where the tabs turn into a dropdown. This behaviour should be something that |
noisysocks
changed the title
|
The ‘story book’ is such a cool feature. And naming things is hard. The Storybook that has been in the block editor until now is the interactive component tool for developers.. |
|
Open to suggestions 😀 it's not too late to rename. FWIW, the implemented name is Style Book, not Story Book. |
|
@jasmussen @jameskoster I updated the font size in #46341. |
|
Ah Style book. My brain just wasn't slowing down long enough to even see the difference. Sorry about that. |
* Add Style Book * Disable toolbar butons when Style Book is open * Disable Style Book when in Code Editor mode * Make cursor a hand when hovering an example * Remove top and bottom margin from block inside preview * Add border beneath tab bar, make tab bar scroll on mobile * Improve performance * Improve a11y * Add E2E tests * Make example titles uppercase * Hide toolbar when Style Book is open * Make tabs always have white background * Update tests * Add a little note of encouragement for future developers * Add border radius to Story Book * Fix vertical alignment of close button * Reduce font size and increase font weight of example labels * Remove hover outline * Use theme color for text instead of white or black * Use math.div()
ryanwelcher
changed the title
|
Hey @noisysocks, sorry for intruding into the thread, but is there any way to disable Style Book for certain blocks? We can remove the Some of our blocks are not style-able, or not style-able yet, so it'd be nice if there was an opt-out mechanism. |
|
The only way to opt out right now is by removing the |
|
The main reason is that Global Styles are not quite supported, or are currently buggy, so we'd rather hide it temporarily, then give the users a false impression that they can use Global Styles on those blocks. The secondary reason is that some of the blocks don't have any styles options whatsoever. |
|
Thinking about it some more I think an opt out mechanism might be inappropriate. The point of Style Book is to see how style changes affect everything that might be inserted. It's equivalent to inserting all of the blocks in one's library into a page to test them. Even if a block doesn't adopt any global style settings, element styles may indirectly affect the block and users / theme developers should be aware of that impact. |
bph
added
the
Needs Dev Note
|
Flagged for 'Single Post Dev Note`. It's a major enhancement for developers (their blocks show up into the style book) and the mechanism to opt-out via removing the 'example' attribute. |
Dev note for 6.2Style Book preview of blocks in global stylesIn WordPress 6.2 a new feature has been added to the global styles interface that allows a user to preview every block that can be inserted into their site. The Style Book can be accessed via the eye icon in the Styles header within global styles, and provides an at-a-glance preview of how global styles will affect the display of any block, without the user having to insert those blocks into a template. Following the structure of the block inserter, the Style Book will be populated by every block that can be inserted via the block inserter, and that also an Within the Style Book, a user can click on a preview of a block and it will navigate them to the block-level global styles where the block's styling can be adjusted. Overall, this makes it easier for a user to preview changes to block-level global styles, without having to insert the block within the current template. Even if a block has no direct styling controls, it is still valuable for blocks to appear in the Style Book, so that the user can see how the overall site design and styling settings will affect every block that can be inserted. For example, site-wide background and text colors, or font family or font sizes generally affect how all blocks will be displayed. However, there still might be cases where block developers wish to hide blocks from being inserted and therefore also hide them from the Style Book. The two ways to hide blocks from the Style Book are:
To read more on adjusting the The conditions of when to show or hide blocks from the Style Book are intentionally tied to the same logic as used by the block inserter. The principle behind the Style Book is that if a user can insert or view a preview of the block, then it should also be previewed within the context of global styles. @bph here's a draft above — does that about cover it? Happy to continue to edit / add or remove things from this one as needed. |
|
@andrewserong Thank you for drafting the dev note. I think it covers it. Maybe add an example block.json section If you agree that this is suitable for a single dev note post, would you please create a draft on the Make Blog so we can get into the review process? |
|
Yes, of course, thanks @bph — I've added a draft for the Style Book dev note over in: https://make.wordpress.org/core/?p=102735&preview=1&_ppp=03ed6e05f5 (also moved the links to be inline and added the |
|
Thanks for writing the note @andrewserong! |
What?
Resolves #44420.
Adds a new Style Book feature to Global Styles in the Site Editor. This displays a preview of all block types in a resizable editor frame.
Why?
From #44420:
How?
A new component called
StyleBookis added to@wordpress/edit-site. This uses the existingBlockPreviewcomponent to display a preview of every registered block in an iframe per block.Each iframe has the site styles loaded into it, allowing you to preview them. The background colour of
StyleBookis matched with the theme usinguseStyle( 'color.background' ). This all works becauseStyleBookis a descendent ofBlockEditorSettingsandGlobalStylesProvider.Clicking on a block preview opens that block in Global Styles. This is done by having
StyleBookbe aFillrendered byGlobalStylesUI. That lets us have access to the Global Styles navigation state usinguseNavigator. The style book is then mounted into the correct part of the editor DOM usingStyleBook.Slot.Testing Instructions
Screenshots or screencast
Kapture.2022-11-30.at.17.43.06.mp4