Skip to content

Instantly share code, notes, and snippets.

@sasigit7
Forked from chrismccoy/gutenberg.txt
Created January 16, 2022 13:09
Show Gist options
  • Save sasigit7/1b9aadba74cd705daa920dade2203211 to your computer and use it in GitHub Desktop.
Save sasigit7/1b9aadba74cd705daa920dade2203211 to your computer and use it in GitHub Desktop.
Gutenberg Resources
Building WordPress Block Themes with the New Gutenberg Pattern Block
https://richtabor.com/pattern-block/
Extract one block from post content
https://allisontarr.com/2021/11/05/extract-one-block-from-post-content/
How to Add a Block Pattern to a WordPress Theme
https://getbutterfly.com/how-to-add-a-block-pattern-to-a-wordpress-theme/
How to create a parallax image in Gutenberg
https://artiss.blog/2018/11/how-to-add-a-parallax-image-to-your-gutenberg-posts/
Supporting Multiple “Block Styles” in the WordPress Block Editor
https://mrwweb.com/supporting-multiple-block-styles-in-the-wordpress-block-editor/
Storing Block Patterns in HTML Files for Nicer Code
https://mrwweb.com/storing-block-patterns-in-html-files-for-nicer-code-technical/
Building Custom Gutenberg Blocks: The Definitive Block Development Tutorial
https://kinsta.com/blog/gutenberg-blocks/
How to Build Block Patterns for the WordPress Block Editor
https://richtabor.com/build-block-patterns/
Improving Gutenberg Block Styles and Transforms, a Proposal
https://richtabor.com/better-styles-transforms/
A Primer on Full Site Editing for WordPress Theme Developers
https://richtabor.com/full-site-editing/
Add Markdown Comments to WordPress Posts with my new Block
https://richtabor.com/markdown-comments/
A Primer on Gutenberg Block Plugins for the WordPress Block Directory
https://richtabor.com/gutenberg-block-plugins/
How to Build & Publish Gutenberg Block Plugins to the Block Directory
https://richtabor.com/build-publish-gutenberg-block-plugins/
Standardizing Theme.json Site Spacing in WordPress Block Themes
https://richtabor.com/standardizing-theme-json-spacing/
Standardizing Theme.json Font Sizes in WordPress Block Themes
https://richtabor.com/standardizing-theme-json-font-sizes/
Standardizing Theme.json Color Slugs in WordPress Block Themes
https://richtabor.com/standardizing-theme-json-colors/
Using a Fluid Type Scale in WordPress Block Themes with Theme.json
https://richtabor.com/fluid-type-scale-theme-json/
Block Reference. A quick way to find a blocks CSS class, or if you need to copy the markup for use with your Full Site Editing theme
https://fullsiteediting.com/block-reference/
Adding Attributes To WordPress Block Types
https://joshpress.net/blog/add-block-attributes
How to add a WordPress Publishing Checklist to Posts within Gutenberg
https://richtabor.com/gutenberg-publishing-checklist/
Requesting data in gutenberg with getentityrecords
https://ryanwelcher.com/2021/08/requesting-data-in-gutenberg-with-getentityrecords/
How to Access and Parse Gutenberg Blocks with PHP
https://awhitepixel.com/blog/wordpress-gutenberg-access-parse-blocks-with-php/
Manage WordPress publishing tasks with the Todo List Block
https://richtabor.com/todo-list-block/
The Ultimate Guide to WordPress Block Templates in Gutenberg
https://richtabor.com/gutenberg-block-templates/
How to add and remove Gutenberg block styles with Javascript
https://richtabor.com/block-styles/
Log a Gutenberg block’s attributes to the console
https://notlaura.com/log-gutenberg-blocks-attributes-to-console/
Gutenberg lets you copy and paste layouts
https://chrislema.com/gutenberg-lets-you-copy-and-paste-layouts/
Trigger Gutenberg editor notices via the console
https://notlaura.com/trigger-gutenberg-editor-notices-via-the-console/
Getting Started with Block Themes: Patterns
https://themeshaper.com/2021/01/11/getting-started-with-block-themes-patterns/
WordPress Blocks Backwards Compatibility
https://webdevstudios.com/2020/12/29/wordpress-blocks-backwards-compatibility/
Stylin’ WordPress Gutenberg Columns Block
https://dbushell.com/2020/11/02/wordpress-gutenberg-columns-block-css-styles/
Gutenberg Components and Invalid Hook Call Error in React
https://www.ibenic.com/gutenberg-components-and-invalid-hook-call-error-in-react-what-do-do/
10 Stunning Button Hover Effects for Gutenberg Button Block
https://gutenberghub.com/10-stunning-button-hover-effects-for-gutenberg-button-block/
How to use Background Patterns in Gutenberg using CSS only
https://gutenberghub.com/how-to-use-background-patterns-in-gutenberg-using-css-only/
How to create a visual sitemap in Gutenberg without any plugin
https://gutenberghub.com/how-to-create-a-visual-sitemap-in-gutenberg-without-any-plugin/
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/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment