Styling your WordPress Blocks - Tutorial

[jonathanbossenger]

Topic Description

Following on from the Converting a Shortcode into a Block tutorial, this tutorial will guide the new block developer on the process of styling the Edit component and the save function of a WordPress block.

Related Resources

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

• Add CSS style for a block
• Using styles and stylesheets

Guidelines

Review the [team guidelines] (https://make.wordpress.org/training/handbook/guidelines/)

Tutorial Development Checklist

• Vetted by instructional designers for content idea
• Provide feedback of the idea
• Gather links to Support and Developer Docs
• Consider any MarComms (marketing communications) resources and link to those
• 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
• Create an outline of the workshop
• Tutorial 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/
• Tutorial submitted to WPTV https://wordpress.tv/submit-video/
• Tutorial published on WPTV
• Tutorial is captioned https://make.wordpress.org/training/handbook/workshops/workshop-subtitles-and-transcripts/
• Tutorial created on Learn.WordPress.org
• Tutorial post is reviewed for grammar, spelling, etc.
• Tutorial published on Learn.WordPress.org
• Tutorial announced to training team
• Tutorial announced to creator
• Tutorial announced to Marketing Team for promotion
• Gather feedback from workshop viewers/participants

[jonathanbossenger]

03-Styling-Your-WordPress-Blocks.mp4

[jonathanbossenger]

Two things I noticed after a self-review:

1. 1:00 - 1:15 it should be the wp_enque_scripts hook, not the init hook
2. 07:40 consider adding a bit about using the time() function in place of the version number when enqueuing the style during development for cache busting

[westnz]

Great work Jonathan! Smooth tutorial!!

• I suggest removing the frame at :021 as the transition to 'What you will learn" is a bit taxing on the eyes.
• Apologies for my ignorance, but I assume 'How to apply custom class attributes to your JSX code' is the same 'Block className properties'? 😆 I think it would be good if you number your learning outcomes, especially as they are in two different columns. I have thought about this before but forgot to mention it.
• 1:59 Sounds like the 'To' at the start of the sentence is missing.
• 2:19-2:20 Check recording of "specific styles".

Hope this is helpful.

[jonathanbossenger]

@westnz thanks for the feedback.