WordPress Content Blocks: Working with Themes

1hBeginner2019-01-22

Authors

Morten Rand-Hendriksen

Senior Staff Instructor, Speaker, Web Designer, and Software Developer

Course details

Building and styling WordPress sites has changed drastically with the introduction of Gutenberg, the block editor. New and older WordPress themes can be updated and integrated with the block editor to create unique and customized user experiences for content creators and visitors alike. This course demonstrates how to add block editor support to themes and customize the new block styles in a safe way. Join Morten Rand-Hendriksen as he shows how to add support and styles for wide alignment, theme-specific colors and fonts, and features such as responsive embedding. Plus, learn how to extend block styles with CSS and add style variations to individual block elements.

Learning objectives
Declaring support for default block styles
Adding support and styles for wide alignment
Supporting theme-specific colors and fonts
Extending block styles
Adding new style variations

Skills covered

WordPressContent Management Systems (CMS)Web DevelopmentOpen SourceDeep Dive (X:Y)

Concepts

0. Introduction

01 - Theme integration with WordPress content blocks
02 - How this course works

1. Theme Development Setup

03 - Block unit test data
04 - How themes without block support work
05 - Declare support for default styles
06 - Declare support for block editor styles

2. Adding Block Editor Support in Themes

07 - Add support for wide alignments
08 - Add styles for wide alignments
09 - Add support for theme-specific colors
10 - Add styles for theme-specific colors
11 - Disable custom color option
12 - Add support for font sizes
13 - Add styles for font sizes
14 - Disable custom font sizes
15 - Add support for responsive embeds

3. Customizing and Extending Block Styles

16 - Extending block styles
17 - Style variations
18 - Add new style variations
19 - Add styles to style variations

Conclusion

20 - Next steps