WordPress Block Development Course

What Folks Are Saying

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

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

About The Instructor