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

Example code for building custom content blocks with React

A collection of practical examples for creating custom blocks for the Gutenberg editor. Demonstrates integration with Advanced Custom Fields and React-based preview modes.

Visit Gutenberg Example
fv_plugin

Gutenberg Example

Example code for building custom content blocks with React

Visit site

This is a repository of example code for developers learning to create custom content blocks for the Gutenberg editor. It is intended for web developers and theme builders who need practical, working examples to understand different implementation approaches.

  • Basic React Block: Shows the foundational structure for a simple, non-editable block built with React.
  • Editable Text Control: Expands on the basic example by adding an editable text field, demonstrating how to manage dynamic content.
  • ACF Integration: Provides an example of registering and rendering a block using the Advanced Custom Fields plugin, moving logic to PHP.
  • Edit/Preview Toggle: Implements a toggle switch in the editor to alternate between editing controls and a front-end preview of the block.
  • IFrame Preview: An experimental example that renders the block preview inside a scoped iframe to prevent CSS and JavaScript conflicts within the admin interface.

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 practical examples for creating custom blocks for the Gutenberg editor. Demonstrates integration with Advanced Custom Fields and React-based preview modes.

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