diff --git a/README.md b/README.md index e69de29..f6318a1 100644 --- a/README.md +++ b/README.md @@ -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.