WordPress: Developing Blocks with Gutenberg

1h 49mIntermediate2019-05-24

Authors

Morten Rand-Hendriksen

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

Course details

Gutenberg, the block-based editing environment introduced in WordPress 5.0, gives designers a more streamlined editing experience. By putting every piece of content in its own block (each with its own unique properties) WordPress has made it easier for users to create flexible, unique layouts. And—with some JavaScript, CSS, and PHP—you can take even more control over the editing and publishing experience by creating custom blocks. In this course, Morten Rand-Hendriksen shows you how to do just that. After going over the basics of block building, he shows how to use and extend block features, including how to add style variations to custom blocks. Plus, he shows how to create dynamic blocks, which use the WordPress REST API to pull content from a database and display it within a block.

Learning objectives
Anatomy of a basic block
Using attributes to capture data
Finding and using components
Adding wide and full block alignments
Adding style variations to custom blocks
Creating a dynamic block

Skills covered

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

Concepts

0. Introduction

01 - Building custom WordPress blocks
02 - Course overview and prerequisites
03 - Using GitHub exercise files

1. Getting Started

04 - Block building dev environment
05 - Example project walk-through
06 - podkit.php - The heart of the plugin
07 - Install dependencies and test the plugin
08 - Sidebar - A practical approach to blocks

2. Block-Building Basics

09 - Anatomy of a basic block
10 - Add an editable RichText field
11 - Use attributes to capture data
12 - Create a function to update the field
13 - Sidebar - Props scoping
14 - Add media upload to the block
15 - How to find and use components

3. Using and Extending Block Features

16 - Add block alignments - Wide and full
17 - Add an alignment toolbar to the block
18 - Add inspector controls in the sidebar
19 - Add block styles

4. Create a Dynamic Block

20 - Fetch a post from the database
21 - Explore the post response and build out edit return
22 - Save Dynamic Block using PHP
23 - Modify the REST API response
24 - Add a conditional featured image

Conclusion

25 - Next steps on the learning journey