GrootMadeGrootMade
Pricing
GrootConnectRegister
Explore allThemesPluginsKitsCollectionsPacksAuthorsCategoriesTagsTrendingDownload PluginPricingResourcesBlogChangelogContact usDocumentationCommunity
GrootMadeGrootMade
ExplorePricingDashboardBlogContact usTermsPrivacy

The WP® trademark is the intellectual property of the WP Foundation, and the Woo® and WooCommerce® trademarks are the intellectual property of WooCommerce, Inc. Uses of the WP®, Woo®, and WooCommerce® names in this website are for identification purposes only and do not imply an endorsement by WP Foundation or WooCommerce, Inc. GrootMade is not endorsed or owned by, or affiliated with, the WP Foundation or WooCommerce, Inc.

Petra

AI assistant for GrootMade

Hi! I'm Petra 👋 Ask me to help you find the perfect WP plugin, theme, or template kit.

Need human help?
Join our DiscordChat on Telegram
Join Discord
ExploreGutenberg Example

Gutenberg Example

Learn Gutenberg block development with practical React examples.

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

Visit Gutenberg Example
fv_plugin

Gutenberg Example

Learn Gutenberg block development with practical React examples.

Visit site

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.

Package Contents

Package contents information is not available yet.

Version History

No version history available for this item yet.

Comments

No comments yet. Be the first to start the conversation!

Security Scan

More themes and plugins like Gutenberg Example

About

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

  • Gutenberg Example
  • v1.0.2
  • 6 days ago
  • Apr 25, 2026
  • Access: Silver
  • David Bushell
  • Plugin
  • 0
  • No comments