WordPress: Developing Blocks with Gutenberg

WordPress: Developing Blocks with Gutenberg
WordPress: Developing Blocks with Gutenberg
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 1h 45m | 357 MB

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.

Topics include:

  • 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
Table of Contents

1 Building custom WordPress blocks
2 Course overview and prerequisites
3 Using GitHub exercise files
4 Block building dev environment
5 Example project walk-through
6 podkit.php The heart of the plugin
7 Install dependencies and test the plugin
8 Sidebar A practical approach to blocks
9 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
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
20 Explore the post response and build out edit return
21 Save Dynamic Block using PHP
22 Modify the REST API response
23 Add a conditional featured image
24 Next steps on the learning journey