Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gutenberg Resources
WordPress Block Development Made Easy
https://webdevstudios.com/2020/06/16/wordpress-block-development/
Using Markdown and Localization in the WordPress Block Editor
https://css-tricks.com/using-markdown-and-localization-in-the-wordpress-block-editor/
Gutenberg blocks: Add custom default class names
https://poolghost.com/add-custom-default-class-names-to-gutenberg-blocks/
How to Create a Simple Gutenberg Block Pattern in WordPress
https://speckyboy.com/create-simple-gutenberg-block-pattern-wordpress/
WordPress Block Patterns Resource List
https://gutenbergtimes.com/the-wordpress-block-patterns-resource-list/
How WordPress Parses Dynamic Block Attributes
https://jasonyingling.me/how-wordpress-parses-dynamic-block-attributes/
Autoplay Video in the WordPress Media & Text Block
https://jasonyingling.me/autoplay-video-in-the-wordpress-media-text-block/
How to Enable Frontend Editing with Gutenberg Blocks
https://webdevstudios.com/2020/08/04/frontend-editing-gutenberg-blocks-1/
https://webdevstudios.com/2020/08/11/frontend-editing-gutenberg-blocks-2/
An Improved Server Side Render Component for Dynamic WordPress Blocks
https://wpgoplugins.com/an-improved-server-side-render-component-for-dynamic-wordpress-blocks/
Essentials for building your first Gutenberg block
https://blog.logrocket.com/building-first-gutenberg-block/
Build and Share WordPress Blocks in Isolation.
https://riad.blog/2020/07/22/introducing-blockbook-for-wordpress/
Better Gradient Presets in the WordPress Block Editor
https://richtabor.com/block-editor-gradients/
Using Gutenberg Block Variations in the WordPress Block Editor
https://richtabor.com/block-variations/
How to Turn off / Disable Unneeded WooCommerce Gutenberg blocks
https://rudrastyh.com/gutenberg/remove-woocommerce-blocks.html
How to add anchor support to Gutenberg blocks
https://junaid.dev/how-to-add-anchor-support-to-gutenberg-blocks-on-wordpress/
How to test your Gutenberg blocks with Jest and Puppeteer
https://www.liip.ch/en/blog/how-to-test-your-gutenberg-blocks
Rename class names in Gutenberg blocks
https://poolghost.com/rename-class-names-in-gutenberg-blocks/
Hide block styles in Gutenberg
https://soderlind.no/hide-block-styles-in-gutenberg/
Adding a custom attribute to Gutenberg block
https://chap.website/adding-a-custom-attribute-to-gutenberg-block/
Add an image selector to a Gutenberg block
https://www.liip.ch/en/blog/add-an-image-selector-to-a-gutenberg-block
How to extend existing Gutenberg blocks
https://www.liip.ch/en/blog/how-to-extend-existing-gutenberg-blocks-in-wordpress
How to extend blocks
https://junaid.dev/how-to-extend-blocks-in-the-gutenberg-editor-on-wordpress/
Using CSS Custom Properties for better UX in Frontend and Gutenberg
https://felix-arntz.me/blog/using-css-custom-properties-ux-frontend-gutenberg/
Reusable Blocks accessible in WordPress admin area
https://www.billerickson.net/reusable-blocks-accessible-in-wordpress-admin-area/
Setting up a Custom Palette in Gutenberg
https://davidwolfpaw.com/setting-up-a-custom-palette-in-gutenberg/
Using Gutenberg Filters to Extend Blocks
https://jschof.com/gutenberg-blocks/using-gutenberg-filters-to-extend-blocks/
Gutenberg Blocks without a build process
https://jschof.com/gutenberg-blocks/gutenberg-blocks-without-a-build-process/
How to Add CSS Classes to a Gutenberg Block
https://wpshout.com/quick-guides/add-css-classes-gutenberg-block/
Extending Gutenberg With SlotFill and Filters
https://10up.com/blog/2019/extending-gutenberg-with-slotfill/
Block Comments swaps out the comment form for a block editor based input
https://tomjn.com/2019/07/20/gutenberg-comments/
How To Remove wp-block-library
https://wpza.net/how-to-remove-wp-block-library-gutenberg/
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

@alexxpaull alexxpaull 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/

@tomkeysers

This comment has been minimized.

Copy link

@tomkeysers tomkeysers commented Nov 14, 2020

Nice collection.

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.