Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gutenberg Resources
Extending Gutenberg With SlotFill and Filters
https://10up.com/blog/2019/extending-gutenberg-with-slotfill/
Add a custom sidebar panel to Gutenberg
https://richardtape.com/2018/10/05/add-a-custom-sidebar-panel-to-gutenberg/
How to create a custom block for gutenberg
https://organicthemes.com/create-custom-block-wordpress-gutenberg/
Writing a wrapper block for Gutenberg in WordPress
https://www.liip.ch/en/blog/writing-a-wrapper-block-for-gutenberg-in-wordpress
Reusable Blocks as Templates
https://themehybrid.com/weblog/reusable-blocks-as-templates
Removing Default Gutenberg Blocks
https://rudrastyh.com/gutenberg/remove-default-blocks.html
How to add a Carousel to Blog Posts and Pages using Gutenberg
https://natalieducey.com/2019/05/16/how-to-add-a-carousel-to-blog-posts-and-pages-using-gutenberg/
Getting Started with Gutenberg – A How-To Guide for Creating Engaging Blog Posts with Gutenberg.
https://natalieducey.com/2019/04/26/embracing-gutenberg-a-bloggers-journey-one-block-at-a-time-%EF%BB%BF/
Creating a Block Category
https://getwithgutenberg.com/2019/04/creating-a-block-category/
How to Internationalize Your Block
https://getwithgutenberg.com/2019/04/how-to-internationalize-your-block/
Getting Started with Block Development in ES.Next
https://getwithgutenberg.com/2019/03/getting-started-with-block-development-in-es-next/
Selecting and Dispatching with the Data Module
https://getwithgutenberg.com/2019/05/selecting-and-dispatching-with-the-data-store/
How to Create Gutenberg Sidebars using only PHP
https://rudrastyh.com/gutenberg/plugin-sidebars-with-php.html
Bye-bye Meta Boxes, Hello Gutenberg Sidebars
https://rudrastyh.com/gutenberg/plugin-sidebars.html
How to Create a Gutenberg Block if You Know Nothing
https://rudrastyh.com/gutenberg/create-a-block.html
How to Create Inspector Controls for a Custom Gutenberg Block
https://rudrastyh.com/gutenberg/inspector-controls.html
How to Create Custom Text Formats for Gutenberg Block Editor
https://jeffreycarandang.com/how-to-create-custom-text-formats-for-gutenberg-block-editor/
Extending Gutenberg Core Blocks with Custom Attributes and Controls
https://jeffreycarandang.com/extending-gutenberg-core-blocks-with-custom-attributes-and-controls/
How to Conditionally Load Front-end JavaScript for Gutenberg Blocks
https://richtabor.com/has-blocks-gutenberg-scripts/
Gutenberg Block Tutorial with registerBlockType() and NO Webpack, ES6, JSX or Babel
https://javascriptforwp.com/how-to-build-a-gutenberg-block-with-registerblocktype-and-no-webpack-es6-jsx-or-babel/
Gutenberg Components: Form Token Field
https://www.ibenic.com/gutenberg-components-form-token-field/
Developing Gutenberg Blocks with Parcel.js and Astroturf
https://roots.io/developing-gutenberg-blocks-with-parcel-js-and-astroturf/
Hot Module Replacement for Gutenberg Blocks
https://humanmade.com/2018/11/26/hot-module-replacement-for-gutenberg-blocks/
Gutenberg Component Autocomplete
https://www.ibenic.com/gutenberg-components-autocomplete/
Gutenberg Color Palette and Button Styling
https://www.billerickson.net/wordpress-color-palette-button-styling-gutenberg/
Block Styles in Gutenberg
https://www.billerickson.net/block-styles-in-gutenberg/
A Step By Step Guide To Converting A WordPress Shortcode To A Gutenberg Block
https://calderaforms.com/2019/01/convert-shortcode-gutenberg-block/
Gutenberg blocks visual constructor
https://lazyblocks.com/
Using React For WordPress Gutenberg Development
https://torquemag.io/2018/10/using-react-for-wordpress-gutenberg-development/
Working with Editor Styles in Gutenberg
https://jasonyingling.me/working-with-editor-styles-in-gutenberg/
Gutenberg Blocks in the Cloud
https://gutenbergcloud.org/
The Guten, the Berg, and the Ugly
https://blog.samuellevy.com/post/56-the-guten-the-berg-and-the-ugly.html
Notes on Building a Site with Gutenberg
https://jasonyingling.me/notes-on-building-a-site-with-gutenberg/
Register fields for Gutenberg blocks with less repetitive code
https://github.com/rtCamp/gutenberg-fields-middleware
20+ WordPress Gutenberg Editor Tips To Help You Work More Productively
https://wplift.com/gutenberg-tips
The Anatomy of Gutenberg Blocks in WordPress
https://atomicblocks.com/anatomy-of-gutenberg-blocks/
Creating a Responsive Gutenberg Price Table
https://casabona.org/2018/09/gutenberg-price-table/
How to deprecate code in Gutenberg editor blocks
https://atomicblocks.com/how-to-deprecate-gutenberg-editor-blocks/
WordPress Gutenberg Block API: Creating Custom Blocks
https://code.tutsplus.com/tutorials/wordpress-gutenberg-block-api-creating-custom-blocks--cms-31168
Add Theme Color Palette to the Gutenberg Block Editor for WordPress
https://studiopress.blog/theme-color-palette/
How to Make Your Plugin Compatible With Gutenberg using the Sidebar API
https://www.codeinwp.com/blog/make-plugin-compatible-with-gutenberg-sidebar-api/
A Comprehensive Guide to the New Block Editor
https://theeventscalendar.com/gutenberg-block-editor-free-ebook/
How To Make Your Website Accessible Using Gutenberg
https://calderaforms.com/2018/08/website-accessible-using-gutenberg/
Integrating Gutenberg Blocks in Existing WordPress Plugins
https://www.ibenic.com/integrating-gutenberg-blocks-in-plugins/
How to enable Inner Blocks in your Gutenberg Block
https://www.ibenic.com/enable-inner-blocks-gutenberg/
Using Create Guten Block to Build a Gutenberg Ready Plugin with Multiple Blocks
https://jasonyingling.me/using-create-guten-block-to-build-a-gutenberg-ready-plugin-with-multiple-blocks/
How to Adapt Your Plugin for Gutenberg
https://www.codeinwp.com/blog/adapt-your-plugin-for-gutenberg-block-api/
15+ Best Gutenberg-Compatible Themes
https://www.codeinwp.com/blog/best-gutenberg-compatible-themes/
Gutenberg Block Library
https://editorblockswp.com/library/
Sample Content Post for Testing Gutenberg
https://artisanthemes.io/sample-content-blocks-gutenberg/
Automatically Create Color Palettes in Gutenberg and the Customizer
https://jasonyingling.me/automatically-create-color-palettes-in-gutenberg-and-the-customizer/
Enqueueing Scripts and Styles for Gutenberg Blocks
https://jasonyingling.me/enqueueing-scripts-and-styles-for-gutenberg-blocks/
WordPress Gutenberg Blocks Example: Creating a Hero Image Block with Inspector Controls, Color Palette, and Media Upload
http://jschof.com/gutenberg-blocks/wordpress-gutenberg-blocks-example-creating-a-hero-image-block-with-inspector-controls-color-palette-and-media-upload-part-1/
WordPress Gutenberg Blocks Made Easy
http://jschof.com/gutenberg-blocks/gutenberg-blocks-made-easy/
Building WordPress Gutenberg Blocks : The Complete Guide
https://smartcatdesign.net/articles/building-gutenberg-blocks-guide/
WordPress Gutenberg Blocks: Setting up and enqueueing CSS in the editor and the view
http://jschof.com/gutenberg-blocks/gutenberg-blocks-setting-up-and-adding-css/
Changing a shortcode to a dynamic Gutenberg block
https://jacobmartella.com/2018/04/25/changing-shortcode-dynamic-gutenberg-block/
Gutenberg Extensibility Workshop
https://github.com/youknowriad/gutenberg-extensibility-workshop
Stackable adds the missing design blocks and options you need in the Gutenberg editor
https://wpstackable.com/
Advanced Gutenberg is an enhancement of Gutenberg Editor
https://www.joomunited.com/wordpress-products/advanced-gutenberg
Atomic Blocks is a collection of content blocks for the new Gutenberg block editor
https://github.com/ArrayHQ/atomic-blocks
Gutenberg Custom Fields
https://github.com/youknowriad/gcf
A Gutenberg Vue Prototype
https://github.com/youknowriad/gutenberg-vue
A Gutenberg compatible markdown editor. Write in Markdown, edit in Markdown and preview in HTML
https://github.com/youknowriad/averroes
Preparing WordPress themes for Gutenberg with the Block Unit Test
https://richtabor.com/gutenberg-block-unit-test/
Learning Gutenberg Series
https://css-tricks.com/learning-gutenberg-1-series-intro/
How to Add Customizer Colors to Gutenberg Block Color Palettes
https://richtabor.com/gutenberg-customizer-colors/
The Ultimate Guide to Gutenberg Color Palettes and Color Classes
https://richtabor.com/gutenberg-color-palettes/
The Ultimate Guide to Gutenberg Image Alignments in WordPress Themes
https://richtabor.com/gutenberg-image-alignments/
Building Custom Gutenberg Blocks with the RichText Component
https://jasonyingling.me/building-custom-gutenberg-blocks-with-the-richtext-component/
Building Dynamic Blocks for the Gutenberg Editor in WordPress
https://jasonyingling.me/building-dynamic-blocks-for-the-gutenberg-editor-in-wordpress/
How to Disable Custom Colors in the Gutenberg Block Editor
https://richtabor.com/disable-gutenberg-colors/
Insert photos from unsplash.com directly inside your Gutenberg Editor
https://github.com/youknowriad/dropit
A suite of page builder Gutenberg blocks for publishers, writers and content marketers
https://coblocks.com/
WordPress Gutenberg Block API: Extending Blocks
https://code.tutsplus.com/tutorials/wordpress-gutenberg-block-api-extending-blocks--cms-31320
Music: A Gutenberg-Powered Theme
https://themeshaper.com/2018/05/22/music-a-gutenberg-powered-theme/
How to Add JavaScript and CSS to Gutenberg Blocks
https://wpshout.com/links/how-to-add-javascript-and-css-to-gutenberg-blocks/
Gutenberg Migration Guide
https://github.com/danielbachhuber/gutenberg-migration-guide
Arrays, Attributes, and the Fundamental Flaw with Gutenberg
https://webdevstudios.com/2018/05/01/wordpress-gutenberg-arrays-attributes-and-the-fundamental-flaw/
Designing Themes with Gutenberg Blocks and Sketch
https://themeshaper.com/2018/03/07/designing-gutenberg-block-driven-themes-with-sketch/
Creating an editable field with Gutenberg Blocks
http://jschof.com/gutenberg-blocks/gutenberg-blocks-creating-an-editable-field/
Disabling Gutenberg on certain templates
https://www.billerickson.net/disabling-gutenberg-certain-templates/
What Will Gutenberg Mean For My WooCommerce Store?
https://codeable.io/what-gutenberg-woocommerce/
How To Get Started with Attributes in Gutenberg Blocks
https://reaktivstudios.com/blog/gutenberg-attributes/
How to Add JavaScript and CSS to Gutenberg Blocks the Right Way in Plugins and Themes
https://wp.zacgordon.com/2017/12/26/how-to-add-javascript-and-css-to-gutenberg-blocks-the-right-way-in-plugins-and-themes/
How to Build a Gutenberg Block with Custom Styles
https://modularwp.com/gutenberg-block-custom-styles/
How to Convert a Shortcode to a Gutenberg Block
https://pantheon.io/blog/how-convert-shortcode-gutenberg-block
How to Build a Gutenberg Block with a Toolbar Control
https://modularwp.com/gutenberg-block-toolbar-control/
Masonry Galleries & Gutenberg
http://moc.co/2018/02/masonry-galleries-gutenberg/
Gutenberg Design Basics
https://tam.blog/2018/01/gutenberg-design-basics/
Rendering Dynamic Gutenberg Blocks in Theme Template Parts
https://johnblackbourn.com/gutenberg-block-template-part/
How to Use the Tooltip Component in Gutenberg
https://wp.zacgordon.com/2018/01/01/how-to-use-the-tooltip-component-in-gutenberg/
Gutenberg Best Practices for Blocks and Themes
https://jasonyingling.me/gutenberg-best-practices-for-blocks-and-themes/
Implementing Gutenberg Image Alignment Options into your Theme
https://jasonyingling.me/implementing-gutenberg-image-alignment-options-theme/
Gutenberg Starter Theme
https://github.com/WordPress/gutenberg-starter-theme
Understanding Gutenberg Blocks
https://jasonyingling.me/understanding-gutenberg-blocks/
Getting your theme ready for Gutenberg
https://www.billerickson.net/getting-your-theme-ready-for-gutenberg/
Add Theme Color Palette to the WordPress Editor
https://briangardner.com/theme-color-palette/
Gutenberg Tutorials
http://gutenberg.news/category/tutorials/
How to build a gutenberg block plugin
https://wisdomplugin.com/build-gutenberg-block-plugin/
Examples for extending WordPress/Gutenberg with blocks
https://github.com/WordPress/gutenberg-examples/
Use Gutenberg to create Feature Blocks
https://github.com/Catapult-Themes/Feature-Block-Gutenberg
Gutenberg Courses
https://gutenberg.courses/
How to create a gutenberg block for displaying a post
https://www.ibenic.com/create-gutenberg-block-displaying-post
Example Gutenberg block with server-side rendering
https://gist.github.com/Shelob9/144055408101e2fdfc4bf34adc85dd04
Gutenberg React state example
https://gist.github.com/royboy789/61a03af9652b8c7f7ac3865666d8e515
Useful helpers, components or tools for building things with Gutenberg
https://github.com/humanmade/hm-gutenberg-tools
A limited frontend preview of the Gutenberg editor
https://github.com/tomjn/Frontenberg
Gutenberg Block built with Vue.js
https://gist.github.com/royboy789/dfd470c9ffc5d4391f90348033d6bd64
WordPress Gutenberg Boilerplate
https://github.com/ahmadawais/Gutenberg-Boilerplate
Mapbox Map block for the Gutenberg
https://github.com/mattheu/WordPress-Gutenberg-Mapbox-Block
Gravity Forms block for Gutenberg
https://github.com/lucasstark/gutenberg-gravityforms
Gutenberg Stars Block
https://gist.github.com/pento/19b35d621709042fc899e394a9387a54
How to Build Custom Gutenberg Blocks: a Beginner’s Guide
https://modularwp.com/how-to-build-gutenberg-blocks/
A custom Gutenberg block for WordPress that displays a custom profile
https://github.com/Invulu/organic-profile-block
Gutenberg Select Post - Duplicate Controls
https://gist.github.com/igorbenic/970abd2e503c6c976fde0ae6d0172193
Spacer Block for Gutenberg
https://github.com/thatplugincompany/gutenkit-spacer-block
Pricing tables for Gutenberg
https://github.com/thatplugincompany/gutenkit-pricing-table-block
How to add WordPress Theme Styles to Gutenberg
https://richtabor.com/add-wordpress-theme-styles-to-gutenberg/
Vue Custom Element Gutenberg Block
https://gist.github.com/aduth/369767f8153eaad1d955a8022f14ec34
A zero-configuration developer toolkit for building WordPress Gutenberg block plugins
https://github.com/ahmadawais/create-guten-block
Creating a custom gutenberg block
https://deliciousbrains.com/custom-gutenberg-block/
Couple examples of blocks and How to save post meta into blocks
https://github.com/tharsheblows/grueziblock
Beginners guide for building gutenberg blocks
https://gutenkit.com/the-beginners-guide-to-building-gutenberg-blocks-part-1/
@alexxpaull

This comment has been minimized.

Copy link

commented Mar 1, 2019

Thank you for sharing all the resources related to Gutenberg. I would like to suggest if you could also add enabling a Gutenberg editor on custom post type as I have recently found a tutorial to enable a Gutenberg editor on a custom post. https://www.cloudways.com/blog/gutenberg-wordpress-custom-post-type/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.