Last Updated on April 3, 2025 by Neil Murray
Table of Contents #
- Gutenberg Project
- WordPress Packages
- Gutenberg Repositories
- WordPress/Gutenberg Plugins
- Gutenberg Blocks/Plugins
- Other
- Tutorials
- Articles
- Videos
Gutenberg Project #
- Github: WordPress/gutenberg
- Gutenberg Documentation
- Gutenberg Storybook – view and work with the Gutenberg UI components
- WordPress Components on Figma
WordPress Packages #
@wordpress Packages – WordPress JavaScript packages npm | GitHub
@wordpress/data – manage application state npm | GitHub
@wordpress/scripts – development & build tool npm | GitHub
Gutenberg Repositories #
- @wordpress/create-block – officially supported way to create blocks for a WordPress plugin
- create-guten-block – a zero-configuration #0CJS developer toolkit for building WordPress Gutenberg block plugins
- wp-continuous-deployment – continuous-deployment pipeline for WordPress plugins
WordPress/Gutenberg Plugins #
- Create Block Theme – by Automattic theme team
- Plugin Check (PCP) – tool for testing plugins complies with standards
Gutenberg Blocks/Plugins #
- Stopwatch Plugin – uses the WordPress Interactivity API
- List Block with Icons
- Gutenberg Custom Fields – by Riad Benguella
- Contact Form 7 – Gutenberg block
- Events Gutenberg
- Gravity Forms
- Atomic Blocks
- co-blocks | Github
- Demo Block Development
Other #
- Block X-ray Attributes – displays the attributes for the currently selected block
- Full Site Editing Course – by Carolina Nymark
- gutenberg-hig – human interface guidelines (HIG) for Gutenberg integrations
- SyntaxHighlighter Evolved – Is Gutenberg compatibility planned
Tutorials #
- React Testing Library Tutorial
- Course: Introduction to Block Development – Build your first custom block
- How to Develop Custom Gutenberg Blocks for WordPress: A Step-by-Step Guide
- Building a block theme using the Create Block Theme plugin
- Setting up a multi-block plugin using InnerBlocks and post meta
- Tutorial: building a custom block editor
- Tutorial: Build your first block
- How To Debug React Components Using React Developer Tools
Articles #
- How to extend core WordPress blocks with Blocks API
- Blocks in an iframed (template) editor
- How to work effectively with the useSelect hook
- Advanced WordPress development with wp-scripts
- Pattern or Post Type: Discover the Best Way to Structure Your Content
- Themes of the Future: A Design Framework and a Master Theme
- A Look at WordPress Themes of the Future
- Create Style Variations for WordPress Gutenberg Blocks: Part 1
- WordPress Gutenberg Block API
- 3 Tools to create custom Gutenberg WordPress Blocks visually
- How to use the @wordpress/hooks package in JavaScript Apps
- How to Convert a Shortcode to a Gutenberg Block
- Learning Gutenberg Series – good introduction to working with JS in WP
- Introducing the Atomic Blocks Plugin and Theme
- Gutenberg News – now defunct
- Going Gutenberg: Events Calendar plugin
- A Collection of Gutenberg Conversations, Resources, and Videos
- This Changes Everything: Gutenberg is Good Now
- A Page Builder Creator’s Opinion of Gutenberg
- Gutenberg Usability Testing Plan – Feedback Needed
- How Different CMS’s Handle Content Blocks
Videos #
- What Is React Testing Library?
- @wordpress/data package – accessing data in the Block Editor
- Contribute Developer Documentation to WordPress Gutenberg Project
- Live Stream June 6, 2024: Creating a slide deck with the Interactivity API
- Developer Hours: Creating WordPress Playground Blueprints for Testing and Demos
- Eileen Violini: Theme of the Future – Creating Block Themes And Patterns
- JavaScript Libraries Bundled with Gutenberg Editor in WordPress