Editor Block

Editor Block

OpenWP includes a Gutenberg block for AI-powered content generation directly in the WordPress editor.

Block Registration

Block Name: openwp/ai-content-generator Entry Point: src/editor/index.js → build/ai-content-generator-block.js

Components

Component	File	Purpose
Block Registration	blocks/ai-content-generator/index.js	Block metadata and registration
Edit Component	blocks/ai-content-generator/edit.jsx	Editor interface
Prompt Box	components/prompt-box.jsx	User prompt input
AI Toolbar	components/ai-block-toolbar.jsx	Block toolbar actions
Generation Preview	components/generation-preview.jsx	Live content preview
Generation Progress	components/generation-progress.jsx	Progress indicator
AI Modify Popover	components/ai-modify-popover.jsx	Refine/modify generated content
Badge Selector	components/badge-selector.jsx	Content type and tone selection
Global Modal	global-modal.jsx	Modal dialog for AI operations

Streaming Hook

src/editor/hooks/use-streaming-generation.js provides the useStreamingGeneration hook:

const { generate, isGenerating, progress, content, error } = useStreamingGeneration();

// Start generation
await generate({
    prompt: "Write a hero section for a SaaS product",
    content_type: "hero_section",
    tone: "professional",
});

The hook:

1. Calls POST /openwp/v1/editor/generate via SSE streaming
2. Accumulates text deltas in real-time
3. Provides progress updates
4. Returns final Gutenberg block markup

Content Generation Flow

User enters prompt in Prompt Box
    │
    ▼
Badge Selector (content type + tone)
    │
    ▼
POST /openwp/v1/editor/generate (SSE stream)
    │
    ├── Agent Engine builds specialized editor prompt
    ├── LLM generates Gutenberg block markup
    ├── Text deltas streamed to Generation Preview
    └── Final content inserted into editor

Generated Content Format

The LLM generates rich Gutenberg block markup including:

• <!-- wp:heading --> - Headings (H1-H6)
• <!-- wp:paragraph --> - Text paragraphs
• <!-- wp:list --> - Bullet/numbered lists
• <!-- wp:columns --> - Multi-column layouts
• <!-- wp:buttons --> - CTA buttons
• <!-- wp:group --> - Section groups with backgrounds
• <!-- wp:cover --> - Hero sections with background images
• <!-- wp:image --> - Images (Unsplash URLs)
• <!-- wp:spacer --> - Vertical spacing
• <!-- wp:separator --> - Horizontal dividers

Block Recovery

src/editor/utils/recover-blocks.js handles block validation and recovery when generated content doesn't perfectly match Gutenberg's expected format.

Content Types

Type	Description
hero_section	Landing page hero with CTA
feature_section	Feature grid/highlights
faq_section	FAQ accordion
cta_section	Call to action
blog_intro	Blog post introduction
testimonials_section	Customer testimonials
pricing_section	Pricing tables
about_section	About us content
full_landing_page	Complete landing page
full_blog_post	Full blog post

Tone Options

Tone	Style
professional	Corporate, polished
friendly	Warm, approachable
persuasive	Sales-oriented
casual	Relaxed, informal
technical	Developer-focused