Block Editor for Statamic Icon

Block Editor for Statamic

Block Editor for Statamic Main Screenshot

Bring the WordPress Block Editor into Statamic

Block Editor for Statamic adds a production-ready visual editing fieldtype to the Statamic Control Panel. Editors work in a full-size Block Editor overlay while the familiar Statamic navigation remains visible, then save the result directly to the entry.

Content stays portable: pages are stored as standard WordPress-compatible serialized block markup and rendered through your Laravel + Statamic application.

Highlights

  • Full-size Block Editor experience inside the Statamic Control Panel
  • Native block inserter, list view, toolbars, inspector controls and code editor
  • Statamic-managed patterns, including synced and unsynced patterns
  • A dedicated Statamic Assets browser for images, galleries, audio, video, files, covers and posters
  • Project-local theme.json support for colors, typography, spacing, widths, gradients and fonts
  • Native block styles with the standard is-style-{name} class workflow
  • Project-local icons and custom blocks registered through WordPress-compatible block.json
  • Laravel-aware frontend rendering with scoped styles and scripts
  • Content, wide and full-width alignments in both editor and frontend
  • Safe iframe embeds for YouTube, Vimeo, Spotify and SoundCloud

A native Statamic media workflow

Media blocks use Statamic Assets instead of a separate WordPress media library. Editors can browse every authorized container, navigate folders, search, upload and select the correct file type for the current block.

The asset detail panel supports alt text, title and caption metadata. Changes are written back to the Statamic asset, so media information remains available throughout the project.

Supported media workflows include:

  • Image and gallery selection
  • Cover and Media & Text blocks
  • Audio, video and file blocks
  • Video poster images
  • Container and folder browsing
  • Type-aware uploads and selection

Use your project's design system

Place an optional theme.json in your Statamic application to expose project colors, font families, font sizes, spacing presets, gradients, shadows and layout widths in the editor. The same settings generate scoped frontend styles, keeping the editing experience close to the published result.

Fonts and related theme files can live alongside theme.json under resources/vendor/statamic-gutenberg.

Block styles can be registered from a project PHP file, configuration or a Laravel service provider. Editors choose them from the standard Styles panel and the saved block receives the expected is-style-{name} class.

Patterns and custom blocks

Patterns can be managed as normal Statamic collection entries and organized with a taxonomy. Published patterns appear in the standard Patterns tab. Both synced references and normal editable pattern insertion are supported.

Custom blocks live in the host application, not in the add-on. Add a WordPress-compatible block.json folder with editor scripts, editor styles, frontend styles, server-side rendering and optional view scripts. The add-on discovers and loads those assets in the correct environment.

Frontend rendering

Supported blocks are parsed and rendered through the add-on's Laravel-aware renderer. Saved static markup is sanitized and enriched with block attributes when required, while dynamic and project-local blocks can use Blade or PHP rendering.

Add the frontend tags to your layout and render the augmented field inside an .sgb-content wrapper:

<head>
    {{ gutenberg:styles }}
</head>
<body>
    <main class="sgb-content">
        {{ content }}
    </main>
 
    {{ gutenberg:scripts }}
</body>

Add the fieldtype to a blueprint

content:
  type: gutenberg
  display: Content
  assets_container: assets
  render_mode: blade
  allow_unknown_blocks: false
  sanitize_html: true

Each field can define its own allowed blocks, Asset container and rendering options. Global defaults are available through the published configuration file.

Requirements

  • Laravel + Statamic 6
  • A PHP and Composer version compatible with the host Statamic project
  • At least one Statamic Asset container
  • Node.js and npm only when rebuilding the Control Panel assets from source

Scope

Block Editor for Statamic is not a complete WordPress runtime. It uses the official WordPress Block Editor packages but keeps content, media, patterns, configuration and rendering inside Statamic and Laravel.

Arbitrary WordPress plugin blocks that depend on a full WordPress REST or PHP runtime are not automatically supported. Destructive media editing such as crop, rotate and delete remains part of Statamic's normal Assets workflow.