Gutenberg Example: Learn Gutenberg block development with practical React examples.

This repository provides a progression of Gutenberg block examples for WordPress, aimed at developers learning to create custom blocks with React. Starting from a basic static block, each example adds complexity: editable text, ACF integration, edit/preview toggles, iframe scoped rendering, and combined block templates. The accompanying plugin handles registration and enqueuing for easy testing.

Basic block – Minimal React block with static content to understand the core registration and render flow.
Text control – Editable text using the WordPress data API, with attribute saving and front-end output.
ACF block – Uses the Advanced Custom Fields plugin to define fields and render with PHP templates.
Preview mode – Adds a toggle to switch between edit and front-end preview within the editor.
Iframe preview – Experimental preview inside an iframe to scope CSS and JavaScript, avoiding admin conflicts.
Block template – Combines a React block and an ACF block into a single PHP template via the template hook.

Also includes Webpack configuration for compiling assets and Docker setup scripts for local development.

Gutenberg Example

A collection of React-based WordPress block examples, from basic to ACF and iframe previews. Perfect for developers learning block creation.

Gutenberg Example

Package Contents

Version History

Comments

More themes and plugins like Gutenberg Example