Skip to content
This repository was archived by the owner on Jun 18, 2025. It is now read-only.
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# Example Code From The Developer’s Guide to the Block Editor Course
The [Developer’s Guide to the Block Editor](https://learn.wordpress.org) course is a deep dive into WordPress development with Gutenberg. This is the example code for that course, presented as functional plugins and a theme.

You can use this code to inspire your next Gutenberg block or even use it as the beginning of your own creation. Not sure how to create a block or what a block or a Gutenberg is yet? No worries, we have detailed tutorials for all of these concepts and code.

## Are You New New to WordPress or Gutenberg?
>[What Is Gutenberg?](https://wordpress.org/gutenberg)

* For a quick start guide to WordPress development with Gutenberg: [The Gutenberg Handbook](https://wordpress.org/gutenberg/handbook/)

## What's Included?
Each example plugin or theme has a branch in this repo. Here you will find a list of all of the examples, with links to their branch. You can download the plugin or theme using the green "Clone or Download" button and then selecting download ZIP.

Alternatively, you may use git to clone the linked branch.

### Basic Blocks Plugins With Simple Controls
> This is example code for [Introduction To Block Basics](https://learn.wordpress.org)
* [Using plain, vanilla JavaScript. Uses no build tooling or ESNext syntax](https://github.com/wordpress/gutenberg-tutorial/tree/plainjs)
* [Using VueJS. Uses no build tooling, or ESNext syntax](https://github.com/wordpress/gutenberg-tutorial/tree/vue)
* [Using separate components from React or WordPress. Uses webpack and ESNext syntax](https://github.com/wordpress/gutenberg-tutorial/tree/react)
* [A practical example of a block with meta data storage for block attributes](https://github.com/wordpress/gutenberg-tutorial/tree/static-events)

### Example Theme
> This is example code for [Gutenberg For Themers](https://learn.wordpress.org)
* [Twenty Seventeen child theme showing CSS for full-width blocks, loading assets for customizing block display and more](https://github.com/WordPress/gutenberg-tutorial/tree/theme)

### From Shortcodes and Meta-boxes To Blocks
> This is example code for [From Shortcodes And Metaboxes To Blocks With Backwards-Compatibility](https://learn.wordpress.org)
* [Replacing what would have otherwise been an enclosing shortcode with a block](https://github.com/WordPress/gutenberg-tutorial/tree/enclosing-shortcode)
* [Replacing what would have otherwise been a non-enclosing shortcode, with a block](https://github.com/WordPress/gutenberg-tutorial/tree/non-enclosing-shortcode)
* [Using a Gutenberg Block to to provide a new UI for a pre-existing shortcode](https://github.com/WordPress/gutenberg-tutorial/tree/prexisting-shortcode)
* [Working with meta boxes along with Gutenberg blocks](https://github.com/WordPress/gutenberg-tutorial/tree/metabox)

### Advanced Block Development
> This is example code for [Advanced Topics In Block Development](https://learn.wordpress.org)
* [A basic "counter" plugin showing communicating between two blocks using WordPress' Redux abstraction](https://github.com/WordPress/gutenberg-tutorial/tree/counter)
* __Coming Soon__ Complex example of re-using components between Gutenberg, other admin screens and the front-end as well as nested and multi-column blocks created programmatically

## License
Like WordPress, this code is licensed under the terms of the GNU General Public License Version 2 or greater. __Please__ feel [free](https://wordpress.org/about/philosophy#gpl) to modify, reuse, or redistribute this code. That's what is here for.