manifest / developer / learn-gutenberg-development

Learn Gutenberg Development

Hands-on WordPress Block Editor (Gutenberg) learning materials from 4WP.dev. WordPress Coding Standards. Launch track: @wordpress/components; expands to blocks, themes, and course-level examples.

by 4WP.dev · github.com/4wpdev/learn-gutenberg-development · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/4wpdev/learn-gutenberg-development/archive/refs/heads/main.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/4wpdev/learn-gutenberg-development ↗

Hands-on WordPress Block Editor (Gutenberg) learning materials from 4WP.dev. Code follows WordPress Coding Standards.

This repository is a WordPress plugin you can drop into wp-content/plugins/ (or symlink) for local experiments and tutorials.

Site: https://4wp.dev/

v0.1.2 — Button block refresh + custom SVG icons

Install-ready ZIP (includes compiled build/ — no npm install needed): download learn-gutenberg-development-0.1.2.zip from GitHub Releases, then in wp-admin go to Plugins → Add New → Upload Plugin and activate Learn Gutenberg Development.
Playground #1 (main branch snapshot): Open in Playground. Blueprint: playground-blueprint.json.
Playground #2 (tag v0.1.2): Open in Playground (v0.1.2). Blueprint: playground-blueprint-release-0.1.2.json (installs from the v0.1.2 tag archive).

Build the ZIP locally (maintainers):

npm install
npm run release:zip

Produces learn-gutenberg-development-0.1.2.zip in this directory (gitignored). Attach it when publishing the GitHub release for this tag.

Playground notes:

playground-blueprint.json installs from the main branch archive.
playground-blueprint-release-0.1.2.json installs from the v0.1.2 tag archive (not the GitHub Releases asset ZIP).
Keep build/ committed so Playground reflects the latest block code.

Scope

Components segment: @wordpress/components — short lessons, examples, and articles under 4wp.dev/gutenberg/components.
Broader track: the same repo grows with blocks, theme-related examples, and course-level content — not limited to components.
Lesson IDE (learn-gutenberg/lesson-ide): VS Code–style shell — file tree, CodeMirror editor, and front-end view demo.

Requirements

WordPress 6.x+ (Block Editor enabled)
Node.js and npm (for building JavaScript)
PHP 7.4+

Installation

From a release (recommended for learners): use the ZIP from Releases — see v0.1.2 section above.

From git (developers):

Clone this repo into wp-content/plugins/learn-gutenberg-development.
Run npm install and npm run build in this directory.
Activate Learn Gutenberg Development in the WordPress admin Plugins screen.

Repository layout

learn-gutenberg-development/
├── README.md
├── learn-gutenberg-development.php
├── package.json
├── assets/
├── includes/
├── src/blocks/<slug>/
├── build/blocks/<slug>/
├── playground-blueprint.json
├── playground-blueprint-release-0.1.2.json
└── scripts/build-release-zip.sh

Contributing & license

Maintained by 4WP.dev. License: GPL-2.0-or-later.