Converting a classic theme to a block theme

[cynthianorman]

Details

• Content type: Lesson
• Content title: Converting a classic theme to a block theme
• Topic description: This lesson explores the possibilities of converting a classic theme into a hybrid theme or a complete block theme.
• Audience: Developer
• Experience Level: Intermediate

Learning Objectives

• Describe the various requirements of converting a classic theme.
• Differentiate between a hybrid theme and a block theme.
• List the steps to take in order to convert a classic theme into a block theme.

Related Resources and Other Notes

• https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/
• https://learn.wordpress.org/tutorial/using-block-template-parts-in-classic-themes/
• https://developer.wordpress.org/news/2024/07/04/15-ways-to-curate-the-wordpress-editing-experience/

Automation Code

[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
• [ ] Lesson reviewed
• [ ] Lesson video submitted and published to WPTV
• [ ] Lesson created on Learn.WordPress.org
• [ ] Lesson video published to YouTube
• [ ] Lesson on Learn.WordPress.org updated with YouTube video
• [ ] Lesson published to Learn.WordPress.org

[cynthianorman]

@jonathanbossenger for the 3rd learning objective of this lesson (List the steps to take in order to convert a classic theme into a block theme) I was hoping to get a little feedback before hitting record planned for July 10th.

1. Settings and styles

• Show Twenty Twenty
• Bridging the gap can start simply by adding theme.json and/or theme support within functions.php

2. Editing experience

• Curate the WP editing experience
• https://developer.wordpress.org/news/2024/07/04/15-ways-to-curate-the-wordpress-editing-experience/
• Use theme.json as much as possible, for example, applying styles to either the styles.typography.fontSize or styles.elements.link objects
• The goal being to reduce the amount of CSS in your stylesheets as possible, for example, TT3 doesn’t have any styles within a stylesheet as all styling is from theme.json
• Add support for block template parts
• This may require revising your CSS again by replacing some with theme.json (see Beginner WordPress Developer: Global Settings and Styles lesson)

3. Block Editor

• Start by building some pages with the Block Editor (not the Site Editor yet for building full on block templates)

4. Site Editor

• Building block templates and template parts within the Site Editor and replacing the PHP templates with HTML ones
• Once all of your HTML templates contain nothing but block, you’ll have a Block Theme

[jonathanbossenger]

@cynthianorman Yes, I like what you have laid out here.

The only other thing I would mention is that the reason I included the 2nd objective "Differentiate between a hybrid theme and a block theme" is that, depending on your classic theme functionality, you might not be able to fully transition your classic theme to a block theme, and so you might have to go with a hybrid theme.

I feel it's important that we include something about this in this lesson.

[cynthianorman]

@jonathanbossenger thanks so much for confirming (haha I wrote those learning objectives) So glad we're on the same page.

[jonathanbossenger]

:joy: that's funny; I thought I did. Sorry about that.

[cynthianorman]

https://youtu.be/B356yKKnCdw

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! ✨