search

WordPress / Learn

WordPress.org Learn - The canonical source for the code and content behind https://learn.WordPress.org
275 stars 102 forks source link

Styling your site with global styles - Tutorial #676

Closed courtneyr-dev closed 7 months ago

courtneyr-dev commented 2 years ago

https://learn.wordpress.org/lesson-plan/how-to-style-your-site-with-global-styles/

Workshop Development Checklist

courtneyr-dev commented 2 years ago

Revise to include: https://github.com/WordPress/gutenberg/pull/35619

artdecotech commented 2 years ago

I'll take this revision! @azhiya

courtneyr-dev commented 2 years ago

Update to include https://github.com/WordPress/gutenberg/issues/39700

azhiya commented 2 years ago

This update is that we're waiting on the #core team to decide about WebFonts API that may impact Theme Variations which is part of the Global Styles update.

westnz commented 2 years ago

Now that the Lesson Plan is finished, is this workshop moving forward? šŸ˜ƒ

artdecotech commented 2 years ago

Hereā€™s the first draft for review @westnz @courtneyr-dev thank you! https://f.io/xVW25U3u

westnz commented 2 years ago

WOW! You are on the ball @artdecotech

Fantastic work! Here is some feedback:

Well done Alycia

artdecotech commented 2 years ago

@westnz thank you so much for the great suggestions. I also added some new bits based on some stuff we learned in the live workshop.

Here is the latest cut for your review cc @courtneyr-dev @azhiya:

https://f.io/1KUQ3wVS

Let me know your thoughts, I had to re-record the last little bit because I said "wordpress.org/learn" and that leads to a 404 page! šŸ™ˆ

azhiya commented 2 years ago

I love this @artdecotech. I think its good to go. I don't know if @courtneyr-dev wants to review it.

courtneyr-dev commented 2 years ago

https://github.com/WordPress/gutenberg/pull/44065

courtneyr-dev commented 2 years ago

WP 6.1 Fluid Typography https://github.com/WordPress/gutenberg/pull/39529

fikekomala commented 1 year ago

Seems like this one has been reviewed a lot of times. Why is it still in this column?

courtneyr-dev commented 1 year ago

6.2 Include Improved tools panels for the Styles typography controls from https://make.wordpress.org/core/2022/10/13/whats-new-in-gutenberg-14-3-12-october/

courtneyr-dev commented 1 year ago

6.2 Introduce Story Book and when/why to use it. (45960).

courtneyr-dev commented 1 year ago

6.2 (46141), (46561), (46663)

courtneyr-dev commented 1 year ago

6.2 reference that block editor can push styles to Global Styles. (https://github.com/WordPress/gutenberg/pull/46446)

westnz commented 1 year ago

Feedback from Anne about the upcoming release and Styles:

  1. In line preview of blocks when working with Styles: https://github.com/WordPress/gutenberg/issues/42919
  2. Add option to apply local changes to a block to your entire site: https://github.com/WordPress/gutenberg/issues/44361
  3. Style Book that allows you to see all blocks on your site as you style them: https://github.com/WordPress/gutenberg/issues/44420
  4. Add option to copy and paste block styles: https://github.com/WordPress/gutenberg/issues/44418
  5. Input for Custom CSS for Styles https://github.com/WordPress/gutenberg/issues/30142 and for individual blocks https://github.com/WordPress/gutenberg/issues/44412 Both are a work in progress.
webtechpooja commented 1 year ago

Hi @artdecotech

This task is assigned to you, so I would like to ask if you have some bandwidth to work on the updates. If you do not find time to work on this, It's OK. Please let us know so we can open this issue again, and someone else can volunteer.

Thanks

courtneyr-dev commented 1 year ago

https://make.wordpress.org/core/2023/05/20/whats-new-in-gutenberg-15-8-may-17/#add-revisions-ui-50089 6.3

courtneyr-dev commented 1 year ago

video demo, an image describing the feature.

westnz commented 1 year ago

Hey @artdecotech

Are you still keen to work on this? Happy to update this if you don't have the time, but would of course love for you to push this over the finish line?

westnz commented 9 months ago

Remember to add info about Font Library.

ghost commented 8 months ago

Ready for review- Trying a new way of editing. I know the voice is off in parts.

https://github.com/WordPress/Learn/assets/24979729/54d98286-2e96-4afe-9843-8bf166a47442

paulluxford commented 8 months ago

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

Additional Feedback

Being a WP trainer myself and creating videos, I understand the challenges of creating such content and I think you did a great job.

Overall a great start to such a much needed video. Well done @lada7042

ghost commented 8 months ago

@paulluxford thank you for the review. Great suggestions about adding the web address on the screen. As for the Style Book I am doing a separate lesson in this series. It was hard to decide which items to feature in global styles and what to feature in the Style Book. There are several things that overlap so I hope the next lesson pulls it all together.

ironnysh commented 8 months ago

Tutorial/Lessons Review Checklist

Hi @lada7042, I enjoyed this thorough tutorial. Nice work!

As you mentioned, the sound is slightly off in a few places. While watching, I found a few more ā€œbugsā€:

  1. Assuming the lesson will be posted after March 26, I think itā€™s better to skip the Gutenberg intro and disclaimer (~2:52-3:15).
  2. At 3:39, you mention the option to install fonts from the Google Fontsā€”the word ā€œlibraryā€ (or ā€œwebsiteā€) is missing.
  3. At 3:42, you mention that there are about 532 [fonts], but thatā€™s pages, not font families. If there are three on every page, itā€™s actually close to 1,600 available fonts :-)
  4. Around 5:07-5:23, the video seems to go out of sync with the audio.
  5. At 6:09 (when you explain how to set body text to Open Sans), the video and audio are again out of sync.
  6. At 7:53, you mention the option to change the buttonsā€™ font, which isnā€™t on the list.
  7. At 8:49, you explain what happens when clicking on Show details, but itā€™s shown only at 9:00.
  8. The explanation about resetting the color palette is a little confusing (it seems like an editing/sync issue).
  9. When you talk about the option to change the text and background color combo (both on the buttons and the headings), itā€™s worth mentioning the topic of accessibility and the requirement to pick a palette with sufficient color contrast.
  10. At 12:11, you try to show what happens when changing the CONTENT to 70 pixels. It should show immediately on the left-side preview, so not sure what happened there. Might be a good idea to do another take on this part.
  11. At around 13:00, the video and audio are out of sync again (until around 13:25).
  12. At 13:51, the left-side preview suddenly shows a different template.
  13. When you explain how to change the fonts of the Quote element, the video and audio are out of sync again.
  14. As @paulluxford mentioned above, the screen turns black at 15:28, but the audio continues.
ghost commented 8 months ago

I put this back into draft because I need to record the whole thing over. I had to edit too much and it isnā€™t right.

ghost commented 8 months ago

Thank you @ironnysh Going to redo.

westnz commented 7 months ago

Hey Laura Are you sure you shared the new recording as I see the seconds of both videos are the same?

ghost commented 7 months ago

Thanks @westnz

ghost commented 7 months ago

Here is the real re-record.

https://github.com/WordPress/Learn/assets/24979729/ac21bb37-8a76-4eb2-ba02-f21886f693c8

westnz commented 7 months ago

Review:

Well done, Laura, and thank you for all your hard work!

ghost commented 7 months ago

@westnz Thanks I condensed the font pair and palette sections. I removed 2 minutes. I added the outro. I am happy to re-record the video if you want me to add a mention of the style book.

ghost commented 7 months ago

Tutorial Development Checklist

ghost commented 7 months ago

wordpress.tv link - https://wordpress.tv/2024/04/10/styling-your-site-with-global-styles-2 wordpress version 6.5

ghost commented 7 months ago

Transcript -

0:01
Styling your site with global styles. Learning Outcome, change global styles to reflect your own brand. Change typography, colors layout, using the font library feature, how to apply a color palette change to an accent color, change the global style of blocks example of quote block. A couple of resources to think about beforehand is font pairing. A good design principle is to pick a one style of font for your heading and a different font style for your text. Here's an article from Google Fonts. Another resource is the font pair website FONTPAIR. Within their pairings tab, they've paired together fonts that work well. Color Palettes is another thing to think about before designing. Here are two resources that have free access Coolors has a trending color palette, which will give you the hex code number, which is always good to jot down so that you have those colors. Canva also has a color palette that's free. We're gonna go to our dashboard now. And we'll look at our site toolbar on the left, and go down to Appearance and over to editor and click on that. We'll go in under design, and go to styles. Click on that. And within the style Styles menu, you will see an icon which is the style book and we'll talk about that in a later lesson. And the pencil icon which when I hover over says Edit style. So we'll click on that. We're going to look at browse styles now.

2:20
I opened up my right menu at the upper right hand corner is a halfmoon. And I hover over in that that says styles. So I'm going to go down to browse styles. The 2024 theme comes with eight variations. The variations include different color and font combinations. When I click on one of the variations, I can see instantly how the different blocks will look on my site. I'm going to stick with the default theme. And we'll look at maybe changing a couple of the colors to better represent my color palette. Then go back out to the Style section. Typography. So we're going to look at our typography section. This section manages the settings for font families size appearance, from text to links to buttons. A good rule of design is to have, like I said before one font family for headings and a different plug compatible font family for the text. A new feature is our presets, we can look at the different font combinations. And if we wanted to change those, even though I'm in the default theme, I can still change the fonts, how I would like. The fonts that come with the theme are listed here. And you see that I have different combinations variants. So that means I have to wear variations of this one and two variations of this one. A new feature is to manage your fonts. And if you hover over this icon, I'm going to open up the font library. So the theme fonts are listed. Like I said, I also have the option to upload or install fonts. So let's look at install fonts first, and we're going to connect to Google fonts. So we need to allow access to our to the Google fonts and we can scroll through and there are 390 pages as of this recording, so there's a lot to choose from. So I had done a little bit of research. And so I know that I like this one particular, Open Sans. So I'm gonna click on that. Now the Open Sans, I'm gonna use for my main text. So I don't need follow these. And so I'm planning ahead that I need a, at least a normal, and I like it a little bit darker than the 300 normal. So I'm going to pick the 400, I'd like to be able to make some words a little bit bold. So I'm going to pick the 700. I'm also going to pick an italic, again, the 400 and a bold with that, so I have four of those. So I'm going to hit click Install button at the bottom. And if I scroll back up, it says that it was successful. So when I go back to the library tab, I see that install fonts, I have my font there, and I have the four variants active. The other way to upload is to upload. So I'm going to click on Upload. And just to remember that upload fonts appear and can be used, it needs to be support, you need to use a supportive format of a TTF, OTF, WOFF or a WOFF two format. So in the middle is the word upload font, I'm going to click on that. And I already have a folder of a font that I like, I'm going to open that font. And again, I don't need all of them. But this is going to be the font for my headings. So I definitely want to have a regular and I don't need any light. I'm definitely would like a bold, because my headings I'd like to make bold. So I think I'm going to just stick with that because I don't want to do any italic headings and stuff like that. So, again, I'm planning ahead of time, but is that beneficial for these steps. So the font was successful, I'm going to go back to my library, and I see that that font is available now. So I can close this up. And if I look over on my right menu, I see that I have those two options available for me too. The other section down here is the elements. So I can go in and on a global level, change all of my text. So now that I've added these two new fonts, I'm going to go into text. And I want to change it to the Open Sans. Okay. And then I want to keep it regular. Okay. So we're good with that, we're going to click Save. And it's going to save that, and I'm going to click back out and go into my headings. And so now the headings have different so I could do all of my headings, the same font family, okay. But remember that we have one h one per page, and then we have to do our structural formatting, then the next one would be an h two. And then we would go into h threes, and so on. So you see that there are different sizes of the font. So I probably want to kind of go through and style each of the font, double check the sizing of that is the default sizing isn't what I would like if I would like maybe the H threes to be a little bit bigger font, I can do that here. So let's look at this. We want to change our font family to Bellota and I want to make it the bold Okay, and I'm gonna go a little bit bigger than extra large because the font family is on the smaller sites. I'm going to click on this we're using rems Rem is just an easier to when you when it goes down to mobile, that it sizes a little bit better. So let's go to a 4.5. So you can see the difference up in this little window at the top. I'm not seeing any change over here. It might be just a little bug within there, so I'm going to click on that and save it and save again. And then I can go to, like I said, the h two is okay.

10:15
And we can go to the all? And I need to make sure that well, no, yeah, no, yeah, let's just see, you can always change your design in the middle, right? The h two, I'm going to keep in the Bellota. And then like that side, so I'm gonna say that, let me go back. Because I don't want all the font to be, can I just realize that I wouldn't want the H threes to be the fancier font. So the H threes, we're going to just make as the Open Sans. But I do want to make it a little bit bigger. Okay, so I'm gonna do that. And let's just look at our front end to see what happens there. So we've changed that to the bold that too, and that is staying. So things to play with on that. So I'm going to click back out of typography.

11:28
The next section is colors. So our color section takes care of kind of fine tuning our color palettes that we picked. Remember that I picked the default, and the default palette has 10 colors. Now if I've gotten this far, and I might want to change to one of the other ones, or just at least see how it is. I do have access to it right above. So if I click on the 10 colors of the color palette, we have the palette, we have our solid and we have our gradient, my focus just more on the solid right now. And like I said, there was one color this orange that I probably will not use, but I did want to kind of change that. So I can go into themes and the three dots over here. Click and it says Show Details. Okay. So the close up is going to show after I've changed the color. So the reset colors will appear in that, as of right now where I'm at on here, it just shows the show details. So I'm going to click on Show Details. And what's nice is that it shows the names of the different colors. And so I want to focus in on accent number three. So if I click on that, I can go ahead and change the color. I'm gonna change it to more of a bright red, a deeper red. Okay, so I found that I'm happy with that it's changed. And then I have to make sure I hit done. And then hit save. Okay, so on doing the color setting, it's nice to kind of just double check to make sure what you have changed. So don't just keep looking. Alright, so I can also add a custom color if I wanted to add more colors within here. So now that we go back out to from our palette, we go back to our colors menu.

13:49
The section down below is our colors. Okay, so we have. We can pick our basic text background heading, we could also do the H ones and stuff too. Okay. So what we want to do is the button. So I'd like to change that one up and have it as a universal color. So if I click on the button colors, I have the option for the text in the background and gradients. So let's look at the text. So right now it's white, and I know that we're going to kind of keep that so then look at our background and we're gonna change that to red. Okay, so now we're good with that. So then we make sure we hit save up here and that will change the global styles of the button and the color setting. So then whenever I add a button, it will be that those two colors right we're gonna go back out.

15:02
Our next section is layout. Alright, so we go down to layout. And the layout section styles the main content area, and gives the content and the wide in pixels. Okay, so that is from your left to all the way to your right. These are the default settings. So you see that there is some padding already part of it. And if you take a look up here in the heading, and I moved this, you can see how that changes. Okay, we also have a block spacing, default, that's already set there, too. So I click back out of layout.

15:55
Blocks is our next section. We will go down here to blocks and this menu opens up all of our blocks that are within this theme. And we can go in and we can customize the appearance of specific blocks and for the whole site. So that means that if you want all your heading blocks to have a certain background color, you could do that. Okay, you don't want to get too involved with doing each of these separately, because remember, we have our initial global styles up here that we've already changed. And if you start changing every little block, then it gets really confusing when you need to do change something, you don't know where you changed it. So it's always good to start in the global styles. And then if there's a particular block that you really want to kind of change, and you could do that. So I'm gonna just give an example of the quote block because that's kind of like a specialty block that you might want to do a different kind of font. So let's scroll down here to my example. So we have the quote block. I've added a group and the quote block has a paragraph within it. And then it has an area for citation which is the author's name. So if I want to change the font of this, okay, I can go to typography and go down to font. And remember that I have my Open Sans as my overall font. And I can either do it as regular or I can do it as italic. Things like that. And I can always change the size of it to if I just want it small, large, I can click on Save for that. So that would be an example.

18:21
I just touched on the basics of how to style your site with global styles. Go explore on your site and check out more lessons.