Master the future of WordPress Development with the new JavaScript driven Gutenberg Editor.
Welcome! I’m educator, Zac Gordon, and in this course we learn how to develop with the new WordPress Editor, Gutenberg.
Course Overview
In this course we learn the following:
- 01: Course Introduction (video coming)
- 02: Core Gutenberg Architecture
In this section we look at how Gutenberg is built under the hood with JavaScript and React. This is helpful because a lot of what we build will mimic the core architecture, and some of what exists in core we can use within our own apps. - 03: High Level Overview of Blocks
In this section we talk about Gutenberg and block development from a high level without getting into too much code. Learn about where to put your blocks, how their basic architecture works, and the basic hooks to start enqueuing our block JS and CSS. We will also discuss the ES5 v Modern JS approach. - 04: Working with registerBlockType
Here we look in depth at the core function used to create blocks. This includes all of the various settings and types of data you should use pass to each setting. Along the way we will look at how to build a simple plugin. - 05: Example Block Walkthroughs
This section is where we look in depth at a number of different types of blocks and common components you might want to use when building blocks. Use these blocks to learn or modify them for your own use. - 06: Addendums and Updates
This section will include updates to the course and links to supplement resources before they are converted to course videos.
What You Will Learn
Included With the Course
Course GiHub Repo
Course Video Files
Course Videos
Core Gutenberg Architecture
- 02.01 – A Walk Through of Core Gutenberg Files – https://drive.google.com/open?id=1enkho4_1zCc2jGUQ7I8sEWjgZwC91qEI
- 02.02 – Main Gutenberg Plugin File – https://drive.google.com/open?id=1PUtVS3P60iGB0npJ3VvFX3bYBAvNmzfq
- 02.03 – element – Element Library – https://drive.google.com/open?id=1vY9qx3FqMJOcG9ppb0RcfmQMU5HoYRev
- 02.04 – editor and data – The Editor and Data Libraries – https://drive.google.com/open?id=1qPzFOr18lIKtWNMIPT32JgAi000PflFa
- 02.05 – component – The Components Library – https://drive.google.com/open?id=1AxThp0vplu5SLHPbDYNainIGB44uXrPz
- 02.06 – blocks – The Blocks Library – https://drive.google.com/open?id=1Vozitf8ypgXmREbrg_rpGjpu5f3UvVRF
- 02.07 – i18n – Client Side Internationalization Library – https://drive.google.com/open?id=14uqFKX-Peawx7MvwDetGnliQPn4h-Cyf
- 02.08 – Tooling and Configuration Files – https://drive.google.com/open?id=1squnr8lSatoAXRbWJjTJ5oDS_EdbISET
High Level Overview of Blocks
- 03.01 – Important JavaScript Libraries that Ship with Gutenberg – https://drive.google.com/open?id=1Hu2rr_8Kbs4rSJUZIWLwrJAIlmNmbv4r
- 03.02 – Do Custom Blocks Belong in Plugins or Themes – https://drive.google.com/open?id=1KHDSDOGUjmCwaO3qfzfYVJjy2pHZyn9g
- 03.03 – The Modern JS vs ES5 Approach – https://drive.google.com/open?id=1-hMpt76VuJLk54RzyregkCpNdJGUdTjD
- 03.04 – Basic Block Architecture – https://drive.google.com/open?id=1TpP2p2_DXkSjUZ08nfk0qpYPqGLVUXyp
- 03.05 – Enqueuing Block JS and CSS – https://drive.google.com/open?id=1vrsvwFYQxLhAdsCe3QMLPbco-uQ-PMsn
Working with registerBlockType
- 04.01 – An Overview of registerBlockType – https://drive.google.com/open?id=1QEIEO_v_iQiPHxbrw47LMTSAfMuF32hI
- 04.02 – Getting Setup with the Demo Files – https://drive.google.com/open?id=1mdv02x1lvpw-QH89oTODSHLIg8THUblc
- 04.03 – registerBlockType – Title Setting – https://drive.google.com/open?id=1vXqSTWYp8FlZakNki_EeDMvtUNSW291d
- 04.04 – registerBlockType – Category Setting – https://drive.google.com/open?id=1W1SslRJBkD3LLuqvoI0lp-b978oM9FY3
- 04.05 – registerBlockType – Icon Setting – https://drive.google.com/open?id=1fPPdAK5Jw2km_SLHge8v4ESSCCDkBKiu
- 04.06 – registerBlockType – Keywords Setting – https://drive.google.com/open?id=1YgNRnBiX2OZ2mdJdT6B25qtb_4fxX0ea
- 04.07 – registerBlockType – Edit Setting – https://drive.google.com/open?id=1aHhNm23UlXuz3MMVZT7kdqVK3US0KcEi
- 04.08 – registerBlockType – Save Setting – https://drive.google.com/open?id=1zNtt57sKw2Q5dsCHwkhG5eHJLJE0vXXR
- 04.09 – registerBlockType – Attribute Settings – https://drive.google.com/open?id=1NGdNgmxOEBvJhsu4qoU4hte9x5qQBMUx
- 04.10 – registerBlockType – Settings Review – https://drive.google.com/open?id=1JSplj_tl0gKjaiDntHezXQBKig7_wl8X
Example Block Walkthroughs
- 05.00 – Walk Through of Example Plugin Files – https://drive.google.com/open?id=1U0IW3gtup5bQuuRBYNkQMAwZErMWeZ5V
- 05.01 – Example – Static Block – https://drive.google.com/open?id=1GGkRlCBrh8r4k2Ll2cfsnMtCfjKCHYQu
- 05.02 – Example – Editable Block – https://drive.google.com/open?id=1yNGwgJvSbnDNnk6X6aYRxysBZzHe0vHx
- 05.03 – Example – Editable Multiline Block – https://drive.google.com/open?id=1dpxaJfOBYragb0YLxZ_eXcP-vR8MTRON
- 05.04 – Example – Alignment Toolbar – https://drive.google.com/open?id=1bJb7vearK487fLJOHHcc5sNN6bYbTvsu
- 05.05 – Example – Custom Toolbars in Blocks – https://drive.google.com/open?id=10ORMw4vHApPjDm4Y9_CEquyqpiszy32d
- 05.06 – Example – Inspector Controls – https://drive.google.com/open?id=1eW66xrBQrETPJZsI6p5N0AI13wZ2jIrZ
- 05.07 – Example – Inspector Color Controls – https://drive.google.com/open?id=1LTgLmIC_66BGE3OBxuOVcR-gVJ-abAxa
- 05.08 – Example – Custom Input Field – https://drive.google.com/open?id=13fW22r6FZ-XPe0H4JVEnGXFOnQM-Y-GO
- 05.09 – Example Custom Textarea and Input Fields – https://drive.google.com/open?id=1YunlRJovD9A4VhFRYW0yyYglITfo2En3
- 05.10 – Example – Media Upload Button – https://drive.google.com/open?id=13Vgi15puFfj2vkXrttrCXcSsCz4_4vQA
- 05.11 – Example – URL Input – https://drive.google.com/open?id=1EuhJj_VzbcPcqDIwPbXP0BzVTo1-lmqN
- 05.12 – Example – Dynamic Block – https://drive.google.com/open?id=1sz2FdV23V3bWqnJ2jMKTFlCpdIS7MPJO
- 05.13 – Example – Dynamic Block Alternative – https://drive.google.com/open?id=13v-cxi0hGCeRE7kYJKmJFt2vNZxyM5Ch