Gutenberg Development Course

$79.00

This course covers how #React integrates with #WordPress, how to leverage WordPress components, and how to build your own custom blocks.

SKU: GUTENBERG Category:

Course Outline

01 – Core Gutenberg Architecture [11 videos]

  • 01.01 – A Walk Through of Core Gutenberg Files [3:18]
  • 01.02 – Main Gutenberg Plugin File [2:37]
  • 01.03 – /element – Element Library [4:03]
  • 01.04 – /blocks – The Blocks Library [3:21]
  • 01.05 – /component – The Components Library [2:31]
  • 01.06 – /editor – The Editor Library [4:03]
  • 01.07 – /data – Data Library [2:03]
  • 01.08 – /date – Date Library [1:32]
  • 01.09 – /i18n – Client Side Internationalization Library [2:12]
  • 01.10 – /docs – Docs Library [1:54]
  • 01.11 – Tooling and Configuration Files [4:53]

02 – A High Level Overview of Blocks [5 videos]

  • 02.01 – Important JavaScript Libraries that Ship with Gutenberg [4:00]
  • 02.02 – Do Custom Blocks Belong in Plugins or Themes? [1:40]
  • 02.03 – The Modern JS vs ES5 Approach [6:47]
  • 02.04 – Basic Block Architecture [6:15]
  • 02.05 – Enqueuing Block JS and CSS [7:05]

03 – Working with registerBlockType [9 videos]

  • 03.01 – An Overview of registerBlockType [7:00]
  • 03.02 – registerBlockType – Title Setting [3:29]
  • 03.03 – registerBlockType – Category Setting [1:51]
  • 03.04 – registerBlockType – Icon Setting [4:39]
  • 03.05 – registerBlockType – Keywords Setting [04:06]
  • 03.06 – registerBlockType – Supports Setting [3:32]
  • 03.07 – registerBlockType – Attribute Settings [7:51]
  • 03.08 – registerBlockType – Edit Setting [6:00]
  • 03.09 – registerBlockType – Save Setting [3:32]

04 – Example Block Walkthroughs [13 videos]

  • 04.01 – Getting Setup with the Example Plugin Files [15:19]
  • 04.02 – Example – Static Block [11:27]
  • 04.03 – Example – RichText Block [11:34]
  • 04.04 – Example – Text Alignment Toolbar [8:27]
  • 04.05 – Example – Block Alignment Toolbar [6:16]
  • 04.06 – Example – Custom Toolbars in Blocks [9:37]
  • 04.07 – Example – Inspector Controls [8:48]
  • 04.08 – Example – Inspector Control Fields [19:47]
  • 04.09 – Example – Block Form Fields [8:20]
  • 04.10 – Example – Media Upload Button [11:54]
  • 04.11 – Example – URL Input [8:22]
  • 04.12 – Example – Dynamic Block [13:45]
  • 04.13 – Example – Meta Box [9:52]

05 – Addendums [2 articles]

  • Block Templates
  • Custom Block Color Schemes

Sample Videos

Reviews