Streamline your Block Theme development with Create Block Theme - Tutorial

[jonathanbossenger]

Topic Description

An introduction to the theme development tools available in the create block theme plugin

• create a blank theme
• overwrite the active theme
• clone the active theme
• create a child theme
• export the current theme

Related Resources

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

• (Create Block Theme)[https://wordpress.org/plugins/create-block-theme/]

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/tutorials/tutorial-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]

streamline-create-block-theme.mp4

[abhansnuk]

Another enjoyable video @jonathanbossenger . A couple of comments in review, some of which are more general for us to think about for videos in general.

• On the first slide, can we avoid the overlap with the php image and the text, and in the final sentence put some space between learn and the WordPress logo to make it easier to read.

• Really like the welcome at the beginning. Generally for videos, could we look at having these on other videos @afshanadiya with 'Welcome to Learn.WordPress.org' to reinforce the web address and where people can go to for this information?

• About 1.07 where a separate tutorial is referenced, are we cross-linking to this on the page, and adding a link / signpost to it (if it exists already) at the end of this video/ in general to videos?

• A general note for the future, as I am unsure if you can amend these screens now. Towards the end of this sequence 3.44-4.17 the screens are changing very fast for readme, parts, header. The way they do may cause some visual disturbance for some users or mean they do not follow what is trying to be shown.

• Where you are going from one area of a site to the code editor or a different part of the CMS, it can be helpful to tell the viewer what they should be looking at next if they are following along. Eg about 6.12 when you go back to the code editor.

• For this video and more of a general question @azhiya, are we going to use examples of colors for text and background that are not accessible? The color contrast in the dark theme example at 5.22 and 8.01-8.04, 8.53, 9.43 is very low and makes the text very hard to read.

[jonathanbossenger]

@abhansnuk thanks for the review.

For this video and more of a general question @azhiya, are we going to use examples of colors for text and background that are not accessible? The color contrast in the dark theme example at 5.22 and 8.01-8.04, 8.53, 9.43 is very low and makes the text very hard to read.

I feel I should point out that I specifically used the colors from the dark theme in the Material Design spec, so as to be accessible in my demos.

[abhansnuk]

Thanks @jonathanbossenger that is useful to know. These colors are displaying without much contrast on the video in all the views I used. I have looked on multiple devices with different color contrasts, including Windows' accessible settings for color contrast, which only enhanced it very slightly. I did not view it on a large specialist graphic design, calibrated screen. This can happen sometimes on video representation of screens.

It is useful to know that you used this to be accessible. I attach an image of the dark option from the video in case it helps.

In general terms, choosing accessible colors in demos may be a point we need to help others preparing video (if it is not in the tips / checklist)

[westnz]

Well done @jonathanbossenger

This is such a cool plugin!

• Sarah told me about this website: https://capitalizemytitle.com/. I think the title of the tutorial could be in capital letters: Streamline Your Block Theme Development With Create Block Theme
• Easy-to-follow tutorial!
• Great pace and audio quality
• You explain things very clearly.
• I also found the black/purple/green a bit hard to read. Here is an idea. As you know Twenty Twenty-Three theme has 10 different styles that are tagged as Accessibility Ready. Maybe we could use one of those colour combinations in future if we are looking for an example.

[jonathanbossenger]

@abhansnuk I wonder if I could ask you to review the set of colors (and screenshot) I've suggested on this post, and let me know if that works better in terms of contrast?

[jonathanbossenger]

Leaving some general review feedback here from earlier comments/feedback.

On the first slide, can we avoid the overlap with the php image and the text, and in the final sentence put some space between learn and the WordPress logo to make it easier to read.

It's a bit hard to change this now, but I've made a note to fix this in the future.

About 1.07 where a separate tutorial is referenced, are we cross-linking to this on the page, and adding a link / signpost to it (if it exists already) at the end of this video/ in general to videos?

Unfortunately, we don't have the option to cross-link inside videos, but I do include links to any other tutorials mentioned in the text portion of the tutorial content on Learn WordPress.

A general note for the future, as I am unsure if you can amend these screens now. Towards the end of this sequence 3.44-4.17 the screens are changing very fast for readme, parts, header. The way they do may cause some visual disturbance for some users or mean they do not follow what is trying to be shown.

This was partly intentional, as I'm trying to keep the video to less than 10 minutes and focus on the topic at hand, namely the Create Block Theme plugin.

Where you are going from one area of a site to the code editor or a different part of the CMS, it can be helpful to tell the viewer what they should be looking at next if they are following along. Eg about 6.12 when you go back to the code editor.

I will make a note of this for future tutorial videos.

[jonathanbossenger]

Sarah told me about this website: https://capitalizemytitle.com/. I think the title of the tutorial could be in capital letters: Streamline Your Block Theme Development With Create Block Theme

Good point, I'll make sure to update my titles in future.

I also found the black/purple/green a bit hard to read. Here is an idea. As you know Twenty Twenty-Three theme has 10 different styles that are tagged as Accessibility Ready. Maybe we could use one of those colour combinations in future if we are looking for an example.

Thanks, I've tried a new color scheme (details here) which I'm going to use to update this video. What I was trying to do is stay away from already existing block theme styles.

[jonathanbossenger]

streamline-create-block-theme-v2.mp4

Updated with new dark theme colours.

[pbking]

I have reviewed this for technical accuracy and give it a 👍 . The pacing is great and I appreciate that you kept this to (nearly) under 10 minutes.

[abhansnuk]

Just coming back on titles. My understanding from core, docs and marketing, and previously from training too, that the style for headlines is sentence case not title case. This is also better for accessibility.

[jonathanbossenger]

Just coming back on titles. My understanding from core, docs and marketing, and previously from training too, that the style for headlines is sentence case not title case. This is also better for accessibility.

Noted. @westnz we might want to confirm this with the training team, and if required, have the guidelines on tutorial creation updated.

[jonathanbossenger]

https://learn.wordpress.org/tutorial/streamline-your-block-theme-development-with-create-block-theme/