Tutorial - Using the Style Book

[wparasae]

Topic Description

Based off of @westnz 's comment about styling your site with global styles here, -- using a stylebook to globally style your website is an efficient and simple way to see what changes you are making on a global scale as you get started designing your block theme. This discusses the benefits and allows folks to more strongly differentiate between a local change and one that impacts an entire site globally and would complement that linked lesson plan.

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

• [ ]

Guidelines

Review the team guidelines

Tutorial Development Checklist

• Vetted by instructional designers for content idea
• Provide feedback of the idea
• Gather links to Support and Developer Docs
• Review any related material on Learn
• Define several SEO keywords to use in the article and where they should be prominently used
• Description and Objectives finalized
• Tutorial created and announced to the team for Q/A review
• Tutorial reviewed and ready to publish
• Tutorial submitted and published to WPTV
• Tutorial published on WPTV
• Tutorial captioned
• Tutorial created on Learn.WordPress.org
• Tutorial post reviewed for grammar, spelling, etc.
• Tutorial published on Learn.WordPress.org
• Tutorial announced to Marketing Team for promotion

[courtneyr-dev]

Only noting we no longer refer to Styles as Global Styles, like FSE is now just Site Editor.

[wparasae]

Really helpful reminder, Courtney. Thank you so much!

**Script Rough Draft [ revised ] **
One of WordPress 6.2's most exciting new features is called "The Stylebook" -- this style book creates a visual representation of all the styles that will automatically be applied across your website, saving you time and letting you design and actually see the changes you make, all from one dashboard. From colors to fonts to button sizes, this preview gives you a strong idea from the start about what your new block theme will look like. Let's find out how.

Imagine you are creating a new website using the block theme, Twenty Twenty-Three. To find its style book, from your dashboard, hover your mouse over the “Appearance” navigation link in the left-hand sidebar and select, "Editor”. Then, click on the site editor to the right. Click the "Styles" icon in the top right-hand corner. Then, select the "Eye" icon that appears. This is your block theme’s personal style book!

From here, you can see how the stylistic changes you make will affect the appearance of your website. Depending on your block theme's options, I can make sweeping changes to my fonts, change my background color, and in some themes, even adjust the layout options. This WordPress Stylebook provides five tabs--text, media, design, widgets and theme, so that I can quickly see the changes I make take effect without having any content on your site—yet!

Any future content I write or any existing content on my website will have this style applied to it. For example, let's say that this is a photography blog, and I would like every photo I upload to be displayed on my website in black and white. This saves me time as a photographer, as now I do not need to edit each photo individually in a separate program, or add a filter to every photo I upload.

The stylebook also also allows me to add individual styles onto specific blocks. For example, say I am a writer and will often use the quote block on this website.

I would like to customize just this one block, because I would always like my quotes to stand out from the rest of the text. I navigate to the quote block by clicking it on my screen under the 'text' tab. This takes me to the quote block. From here, I can make changes to the font that only affect the quote block.

I select a font that I’d like to use for my future or existing quotes, make it a little larger. Finally, I make it italic. Now, my quote block will always stand out, even if I make sweeping changes to the rest of the text

Pro-Tip: To avoid a theme design headache in the future, I recommend that you stylize individual blocks sparingly.
It's important to note that if you make individual changes block by block, changes that you intend to make globally, to the rest of your website, will not affect this particular block.

Notice how I changed the font globally under general styles > text. Did you notice that the quote block I just styled did not change?

Let's say you find and install a cool new font that you'd like to use everywhere. If If I styled every single text block individually, when I make what I hope will be a big change site-wide to ALL the text, my individually styled text blocks will not change.

To reset a single block’s style back to the default, I can head back to block’s individual styles settings either by clicking on it again,, or by navigating to it in the styles panel on the right by clicking 'blocks' and then 'quote'. If I reset this block to the "default" font, that tells WordPress to use the font I set in the site-wide styles you see when you first enter global styles.

Now, that will allow me to style my website’s fonts—quotes and all—in one place. The changes I will make to my text site-wide (rather than in this individual block) mean that if I change my font, it will now also apply to this individual block.

With thoughtful design, I can get started working on my new website from scratch, or I can give my existing content a brand new look with quick clicks of a button.

The style book also allows me to double-check my website for accessibility. For example, I noticed that the calendar widget on this theme is not accessible with the color scheme I picked; the contrast is not high enough. For this specific instance, I customize this block to my liking, and now anyone who requires strong contrast to be able to read will be able to read this calendar.

Now you know how to use the WordPress stylebook with your block theme!

To learn more about the features coming out in WordPress 6.2, please visit learn.wordpress.org for more tutorials, online workshops, and courses. See you next time!

[wparasae]

Video + Sound recording complete. Needs annotations and a re-record for some odd clicking noises.

[wparasae]

Brief Slides for this tutorial: https://docs.google.com/presentation/d/1VxN2fQqyXdiWfLXqF4mYqMFyEy0KIzKTBUfso-VGxYg/edit?usp=sharing

[wparasae]

Ready for Review: (Rough draft)
https://drive.google.com/file/d/1koty9aSIsFViqBgmP6puWdrX_PomU6Oh/view?usp=sharing
This is still a little rough around the edges, but I want to make sure I have plenty of time to perfect it before

1. Do I need to re-record the audio? I can't quite tell if this is just my environment, or if there is distracting background noise.
2. Was it confusing that the text below the "quote" block wasn't changing? It's pretty common with that particular block, but I can re-record if necessary.
3. Is there anything else I should include information-wise, or is this a clear example of how to use the stylebook?

Thank you all for your time!

[nomad-skateboarding-dev]

Overall Impression

This is needed and expertly done! It was clear and enjoyable to watch. 🙂

Specific Feedback

• In slide 2, possibly capitalize Style Book?
• The audio sounded good to me, no background noise.
• Your highlighting of the difference between styling a block's font individually vs globally was great!
• I didn't see any issues with your using the Quote block. I again thought it was great, and made it very clear what to do, when you changed the style/font multiple times so it sunk in for me.

[gudrunfrank]

Love it. Very clear and easy to follow.

[caraya]

I love it, thank you for putting it together 🙂

One question, how does the style book interact with styles set for individual blocks in theme.json? which one takes precedence?

[westnz]

Great tutorial, Sarah! It sunk in for me while watching as well!

[westnz]

@lada7042 will be updating this tutorial for the learning pathways project. Thank you, Laura

[lada7042]

@westnz Is there a time limit you have for these? I added to the script more on the features that are there: Browse styles, typography, colors, layout. I am keeping the quote block example but updating the information. The original mentioned checking accessibility in the style book I changed to to checking the font since the 2024 theme colors are already accessible.

[westnz]

Hey @lada7042
I aim for 5 minutes, but sometimes it is just not possible. If you can stay between 6 and 8 minutes, that is also fine. We are not too prescriptive, as some topics are more chunky. I would suggest keeping a good rhythm while speaking and not going too slowly. 😃

[gudrunfrank]

@westnz Most tutorials are only in English. Please remember that not all viewers are native speakers. To absorb technical content, it is very important that the presenter speaks slowly with enough pauses, even if the viewer understands English. The same is true for any beginner WordPress users. Understanding technical concepts is more difficult than watching a movie. :-)

[westnz]

Good point @gudrunfrank and completely agree. I definitely keep that in mind when creating content. Maintaining a consistent pace is another important factor to consider during the recording process. :-)

[lada7042]

@annezazu Could you please clarify a previous question that I don't know the answer to? I would like to be able to address it in the updated recording for the learning pathways.
How does the style book interact with styles set for individual blocks in theme.json? Which one takes precedence? Does global styles override individual block styles?

[annezazu]

How does the style book interact with styles set for individual blocks in theme.json? Which one takes precedence? Does global styles override individual block styles?

Do you mean something like having a style variation set in theme.json for an individual block? If so, you'll see it appear in Styles > Blocks > The block with the variation.

[westnz]

Hey @lada7042
How's the progress on this lesson coming along?

[lada7042]

@westnz Should be done by Friday?

[lada7042]

Please review Using the Style Book using the Reviewer template found in Guidelines for reviewing content

[westnz]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• Learning outcomes/objectives are clear.
• Technical concepts introduced in the content are accurate.
• The speed of demonstrations is easy to follow.
• The narration audio matches what is shown visually.
• Spelling and grammar are correct.
• Sound quality is consistent throughout the video.

Well done, Laura 😃

Some extra feedback:

• The subtitles will need to be removed and added separately to wp.tv and YouTube.
• The red and black Buttons block might be an accessibility issue. How about changing the Buttons block example and using high-contrast colors?
• Do you think we could shorten and streamline the video a bit? Showing style variations, for example, can be done in a shorter time frame.
• I suggest updating the section where you try to show how the Quote block has been updated after being modified in the Style Book.

[lada7042]

[lada7042]

Thanks @westnz for the review I updated the video with your recommendations.

[lada7042]

Please review Using the Style Book using the Reviewer template found in Guidelines for reviewing content

Using-Style-Book-Lesson.mp4

[SierraTR]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• [ x] Learning outcomes/objectives are clear.
• [x ] Technical concepts introduced in the content are accurate.
• [x ] The speed of demonstrations are easy to follow.
• [x ] The narration audio matches what is shown visually.
• [x ] Spelling and grammar are correct.
• [x ] Sound quality is consistent throughout the video.
• [ x] Brand Usage Guidelines and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

Well done.
Combined with the referenced lesson this covers all of the important points.

[lada7042]

transcript-
0:01
Welcome to Using the style book. Learning Outcomes. Learn best practices for using the style book, understand the difference between global styles and the style book, how they work together to learn how to add customization and styling before setting up your website. If you have not viewed styling your site with global styles, please do so to get a better understanding of global styles. Learn WordPress videos are found on YouTube under WordPress, the URL link is below also.

0:40
To find the style book, we're going to start in our dashboard. And we will scroll down the menu to appearance. We will go over to the editor and click on that to open that up. Under the design menu, you'll see the styles. We'll click on that. And we've opened up a kind of mini menu that shows WordPress default, it has comes with eight different style variations. So we can kind of stop here and I'm going to show you a couple of different ways to do the same thing. So this is going to be one way of choosing a different style combination for your theme. And there's different colors and fonts. So this is the default page that comes with the theme. And this is kind of the blog home template. Okay. So there's a bunch of kind of different blocks that they used. And what we can do is we can pick and click on the different color variations to see how they would look. And if you notice that the font will change also, as we go through the different colors. But we're just going to stick with the default for right now because I want to show you some other things on this page. Up here at the top, there is an eye icon. And when you hover over it says the style book and then there's a pencil icon that says Edit styles. So, if we click on the style book icon, the eye, what comes up is the headings, paragraphs, images, all the core blocks that are being used. And again, we can take and click on our different style variations, to see what looks good with the different blocks. The other feature that is good to point out is that down here is last modified so there's actually a revisions that we can click on. And it opens up our page. And it shows the style revisions. And it shows when I did the revision, and when I click on it on the day, it'll kind of give me a overview of what was changed and updated, which is kind of cool. Okay. And there's other ways to get to this also. So let's go back up here and we'll go into the edit styles.

3:25
So this will be the main page that people usually go to. And you'll notice that the Styles menu on the right opened up automatically, if it doesn't open up automatically, just come over to the halfmoon. And click on that to open it. And if you've watched the global styles video, you already know what these things can do. Okay. So again, here is our eye icon. Here is our clock icon that shows the revision. So here's the other way to get to it. So again, we have the blog, home template as kind of our default page, or browse styles just like in that first section. And we can do the same thing, we can look at the page and we can try the different color variations out and then go to the style book. And what that does is it provides those, the theme core blocks, but this time in a little bit easier to manage view because it has tabs and they've put the different blocks into the different tabs. So that's a little bit easier. So all the media's together, design features buttons, groups, such as widgets are those things that you might have like a list with links a calendar again list posts list page list, your social media icons is all kind of a widget, it's all together. And then our theme blocks will be together too. So again, I can go into my style variations, and I can see how the different colors are going to look within these areas. So it's kind of really cool. The media doesn't have much, the buttons is probably the bigger one, because of the fact that the button is going to have a different color in in some of them have different shapes to, to kind of find the best one that fits with you. Okay, so the other thing that you can do is when you're going through, and this is where the global styles and styles kind of work together.

5:58
So if we're doing kind of our blocks, and I, I like all the other colors, but I, I want to do a little pop, you know, I like the basic, if we look at the colors of this the palette, I like the grays and blacks, but I want to pop a color for my button right in the style book under the Design tab, you can also customize your your buttons and kind of see a preview. If we click on the block, it will open up the styling tools for this. So we can go in and change the background color. And we'll go with this light brown. And then we'll change the text to a black. And we can also change the appearance and make it a medium text. And we can also change the font. And that doesn't look good. So let's go back to our original. Well, we can use that we can use the system sans one. So there's different ways that we can add things and kind of preview them over here. So I'm going to hit save, and save again. And then when I go to my front end and refresh my page, you'll see that I have the styles done.

7:26
We are going to go over to the text and look at the quote block. Now most of our styling we want to do in the global styles, but sometimes there's a special block that might need some, just a special little something. So we're going to click on that open up the block, and we're going to add in a background color. So we can change that. Okay, we can also change the font and we'll do that. And then we can hit Save. And we'll hit Save again. And now when we go in when we tick off our style block, we can see that in our template that we can preview this here and then when we go to our front end and refresh our page, and we'll scroll down we can see how it looks there.

8:20
Check out more lessons@learn.wordpress.org or our YouTube channel at WordPress. Thank you

[lada7042]

//publish
https://wordpress.tv/2024/05/10/using-the-style-book/
Need to add subtitles

[westnz]

YouTube link: https://youtu.be/NLnKutKvrt8

[westnz]

Sensei lesson to be created: https://learn.wordpress.org/wp-admin/post.php?post=140825&action=edit

[lada7042]

Thank you @westnz Sensei lesson complete: https://learn.wordpress.org/lesson/using-the-style-book/