WordPress Block Development Course

Custom Blocks in the Gutenberg Editor Illustration from Zac Gordon

Learn How to Build Custom Blocks for WordPress with JavaScript.

What Folks Are Saying

If you’re looking into starting developing custom blocks for Gutenberg, this is the course for you.

Igor Benić, WP Developer & Educator

This is easily one of the best resources to learn Gutenberg development! ?

Ahmad Awais, create-guten-block Creator

What You Will Learn

  • Core WP JS Libraries
  • Block Architecture
  • Block Settings
  • React & JSX
  • How to Build Custom Blocks
  • How to Use WP Components
  • Important Tooling

Get the Course

Custom Blocks in the Gutenberg Editor Illustration from Zac Gordon

Get the Course from Zac on his site JavaScript for WordPress.

Course Outline

01 – Core Gutenberg Architecture

  • A Walk Through of Core Gutenberg Files
  • Main Gutenberg Plugin File
  • /element – Element Library
  • /blocks – The Blocks Library
  • /component – The Components Library
  • /editor – The Editor Library
  • /data – Data Library
  • /date – Date Library
  • /i18n – Client Side Internationalization Library
  • /docs – Docs Library
  • Tooling and Configuration Files

2. A High Level Overview of Blocks

  • Important JavaScript Libraries that Ship with Gutenberg
  • Do Custom Blocks Belong in Plugins or Themes?
  • The Modern JS vs ES5 Approach
  • Basic Block ArchitectureEnqueuing Block JS and CSS

3. Working with registerBlockType

  • An Overview of registerBlockType
  • registerBlockType – Title Setting
  • registerBlockType – Category Setting
  • registerBlockType – Icon Setting
  • registerBlockType – Keywords Setting
  • registerBlockType – Supports Setting
  • registerBlockType – Attribute Settings
  • registerBlockType – Edit Setting
  • registerBlockType – Save Setting

4. Example Block Walkthroughs

  • Getting Setup with the Example Plugin Files [15:19]
  • Example – Static Block
  • Example – RichText Block
  • Example – Text Alignment Toolbar
  • Example – Block Alignment Toolbar
  • Example – Custom Toolbars in Blocks
  • Example – Inspector Controls
  • Example – Inspector Control Fields
  • Example – Block Form Fields
  • Example – Media Upload Button
  • Example – URL Input
  • Example – Dynamic Block
  • Example – Meta Box

Get the Course

Custom Blocks in the Gutenberg Editor Illustration from Zac Gordon

Get the Course from Zac on his site JavaScript for WordPress.

About The Instructor

Zac Gordon WordPress Gutenberg

Zac Gordon – An experienced high-school, college and online educator with a focus on teaching JavaScript for WordPress Deeply.