A Big Change is Coming to WordPress Development!

Perhaps you have heard?  Gutenberg is JavaScript driven, uses React under the hood, and provides an interactive single page interface for editing content as blocks.  This adds new abilities, libraries, toolsets and ways of developing within WordPress.

“Gutenberg takes what we love about WordPress and adds the benefits of modern JavaScript.” ~ Zac Gordon

Who is This Course For?

Though Gutenberg will affect different developers in different ways, this course will specifically help the following:

• Plugin Developers building shortcodes, widgets or custom fields.
• Theme Developers looking to style Gutenberg and set default block templates.
• Agencies who need to stay up to date on major changes coming to WordPress.

What Will You Learn?

In this course you will gain a solid foundation of how to start developing with the new WordPress editor.

• How Gutenberg Core works under the hood
• Important JavaScript libraries that ship with Gutenberg
• How to create custom blocks with core and custom components
• Options for Theme Developers to extend and customize Gutenberg
• The Modern JS Approach of using ES6+, JSX, React, webpack and more

Since Gutenberg is still in development, the course will receive updates as Gutenberg evolves.

Course Outline [38 Videos, 2 Articles]

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 topics

• 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

Get The “Gutenberg Development” Course

$129 – Get the Course

OR get the abridged version of the course on Udemy for just $39! 

 

Please Share!

Learn the future of WordPress Development with the #Gutenberg Development Course from @zgordon Click To Tweet

What Folks Have to Say