Block Stylesheets

[cynthianorman]

Details

• Content type: Lesson
• Content title: Block stylesheets
• Topic description: We will explore creating block stylesheets without using the theme.json file.
• Audience: Developer
• Experience Level: Intermediate

Learning Objectives

• Describe a block stylesheet
• Create a custom block stylesheet

Related Resources and Other Notes

• https://developer.wordpress.org/themes/features/block-stylesheets/

[github-actions[bot]]

Lesson Development Checklist

• [x] Gather any relevant links to Support, Docs, or related material
• [x] Description and Objectives finalized
• [x] Lesson created and announced to the team for review
• [x] Lesson reviewed
• [x] Lesson video submitted and published to WPTV
• [x] Lesson created on Learn.WordPress.org
• [x] Lesson video published to YouTube
• [x] Lesson on Learn.WordPress.org updated with YouTube video
• [x] Lesson published to Learn.WordPress.org

[cynthianorman]

https://youtu.be/pG_RdfUZxFQ

This Intermediate Theme Developer Learning Pathway Lesson is ready to be reviewed. Please follow the steps listed under Guidelines for reviewing content. Thank you for your contribution! ✨

[jonathanbossenger]

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

Great lesson Cynthia.

The only piece of feedback I have is that I might be useful to either somehow highlight, or mention, that registering custom block stylesheets is done by using the wp_enqueue_block_style function, with the block name as the first parameter.

The whole time I was watching this was interested to know how this is done, and then you show an example, but don't mention the function reference for wp_enqueue_block_style, which I think will be useful.

So my suggestion would be, at 2:35, just after you mention the naming conventions and before the example, to include a short sentence along the lines of

To register block stylesheets you use the wp_enqueue_block_style function (screen shows function reference page), passing the block name as the first parameter and an array of arguments as the second parameter.

And then that flows perfectly into the example code.

[cynthianorman]

@jonathanbossenger thanks so much - done

[ironnysh]

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.
• [ ] Brand Usage Guidelines and Promotional Guidelines are being followed.
• [ ] Media assets are all in the public domain (CC0).

Great tutorial, @cynthianorman.

My favorite part is at 0:54, with the best named theme in the directory ;-)

[jonathanbossenger]

https://youtu.be/_LFPvFi5Xcc

[cynthianorman]

@jonathanbossenger

YouTube chapters

(0:05) Learning objectives (0:17) Describe a block stylesheet (2:07) Create a custom block stylesheet (3:17) Next steps

[cynthianorman]

//publish