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

• [x] Vetted by instructional designers for content idea
• [x] Provide feedback of the idea
• [x] Gather links to Support and Developer Docs
• [ ] Consider any MarComms (marketing communications) resources and link to those
• [x] Review any related material on Learn
• [ ] Define several SEO keywords to use in the article and where they should be prominently used
• [x] Description and Objectives finalized
• [x] Create an outline of the workshop
• [x] 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]

https://user-images.githubusercontent.com/180629/185601879-68d358ea-6131-42e6-afd0-3f8eae759509.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.

[jonathanbossenger]

After reviewing this content for an online workshop, this video needs to be updated to include the fact that the editorStyle and style files are enqueued in the editor.

[jonathanbossenger]

Apologies for my ignorance, but I assume 'How to apply custom class attributes to your JSX code' is the same 'Block className properties'? What I am trying to do here is shorten the learning outcome for the slide, but describe it a bit better in the spoken word. However, I could make sure that the text on the slide is closer to what I'm saying.

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.

That's a great point. I'll update this video and do that going forward.

[jonathanbossenger]

Updated video based on feedback

https://user-images.githubusercontent.com/180629/186689470-d49691a4-f101-4708-987e-5db56ecb0c0b.mp4

[jonathanbossenger]

Added to WordPress.tv

https://wordpress.tv/2022/09/05/styling-your-wordpress-blocks/

Will publish on Learn tomorrow

[jonathanbossenger]

Published https://learn.wordpress.org/tutorial/styling-your-wordpress-block/