WordPress: Developing Blocks with Gutenberg

Take control of the editing and publishing experience by creating custom content blocks with Gutenberg, the block-based editing environment introduced in WordPress 5.0.

Introduction

• Building custom WordPress blocks
• Course overview and prerequisites
• Using GitHub exercise files

1. Getting Started

• Block building dev environment
• Example project walk-through
• podkit.php: The heart of the plugin
• Install dependencies and test the plugin
• Sidebar: A practical approach to blocks

2. Block-Building Basics

• Anatomy of a basic block
• Add an editable RichText field
• Use attributes to capture data
• Create a function to update the field
• Sidebar: Props scoping
• Add media upload to the block
• How to find and use components

3. Using and Extending Block Features

• Add block alignments: Wide and full
• Add an alignment toolbar to the block
• Add inspector controls in the sidebar
• Add block styles

4. Create a Dynamic Block

• Fetch a post from the database
• Explore the post response and build out edit return
• Save Dynamic Block using PHP
• Modify the REST API response
• Add a conditional featured image

Conclusion

• Next steps on the learning journey