Styling your site with global styles - Tutorial

[courtneyr-dev]

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

Workshop Development Checklist

• [x] Vetted by instructional designers for content idea
• [x] Provide feedback of the idea
• [ ] Workshop submitted to the team for Q/A review https://blog.wordpress.tv/submission-guidelines/ & https://make.wordpress.org/training/2021/08/17/proposal-brand-guidelines-for-learn-wordpress-content/
• [ ] Workshop submitted to WPTV https://wordpress.tv/submit-video/
• [ ] Workshop published on WPTV
• [ ] Workshop is captioned https://learn.wordpress.org/handbook/handbook/workshop-captions-and-transcripts/
• [ ] Workshop created on Learn.WordPress.org
• [ ] Workshop post is reviewed for grammar, spelling, etc.
• [ ] Workshop published on Learn.WordPress.org
• [ ] Workshop announced to training team
• [ ] Workshop announced to creator
• [ ] Workshop announced to Marketing Team for promotion
• [ ] Gather feedback from workshop viewers/participants

[courtneyr-dev]

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

[artdecotech]

I'll take this revision! @azhiya

[courtneyr-dev]

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

[azhiya]

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]

Now that the Lesson Plan is finished, is this workshop moving forward? 😃

[artdecotech]

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

[westnz]

WOW! You are on the ball @artdecotech

Fantastic work! Here is some feedback:

• You cover all the important aspects and features of Styles.
• You go at a pace that is easy to follow. 🦾
• I would suggest adding a welcome/introduction message at the start. 🗣️
• You mention "This lesson will cover how to style your site with Global Styles, you can change the ...", but I was wondering if you could add a slide/text with the specific lesson outcomes/objectives at the start.
• I like the yellow circle around your cursor.
• You might consider (not necessary) using an example at the end with a before and after - showing how a functioning site has changed after changing styles from the front end.

Well done Alycia

[artdecotech]

@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]

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

[courtneyr-dev]

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

[courtneyr-dev]

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

[fikekomala]

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

[courtneyr-dev]

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]

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

[courtneyr-dev]

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

[courtneyr-dev]

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

[westnz]

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]

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]

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

[courtneyr-dev]

video demo, an image describing the feature.

[westnz]

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]

Remember to add info about Font Library.

[lada7042]

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]

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.
• [ ] 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.
• [x] Media assets are all in the public domain (CC0).

Additional Feedback

• For any external links, as an idea and if possible, to display the link on the screen. Eg for Font Pair website, visually show the link on the screen as a popup, so it is very clear on the website link.
• You mentioned an external site for font pairing, perhaps also mention about a resource for color pairing, such as using Coolors.co for example.
• I found the section about styling header fonts, particularly at the end part when showing how to set font sizing, you explained about that the user may want to change different heading sizes, but I feel that it wasn't shown very clearly about how to do that and what effect it has. Maybe touching on using the Style Book, might help as that will show live previewing. Also about the colors section, you mentioned styling for certain components but did not visually show that process.
• I recommend to mention the Style Book. That will also help to be able to visually see all the blocks and live changes.
• The screen goes black in the last few seconds of the video

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

[lada7042]

@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]

Tutorial/Lessons Review Checklist

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

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.

[lada7042]

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.

[lada7042]

Thank you @ironnysh Going to redo.

[westnz]

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

[lada7042]

Thanks @westnz