Flourish Block

A WordPress block plugin for embedding Flourish data visualizations.

Setup

1. Install dependencies:

npm install

2. Build the block:

npm run build

3. For development with automatic rebuilds:

npm start

Project Structure

• src/index.js - Main entry point, registers the block with the editor
• src/style.scss - Frontend styles for the block
• src/editor.scss - Editor-only styles
• inc/blocks.php - PHP block registration and render callback
• inc/namespace.php - Plugin namespace and hook setup
• build/ - Compiled assets (generated by npm build)

How It Works

• The block is registered as a dynamic block, meaning it's rendered server-side by PHP
• The editor shows a placeholder since save() => null
• The Flourish embed script is registered and enqueued only once via wp_register_script() and wp_enqueue_script() to avoid duplicates
• The render callback outputs the Flourish embed HTML with the specified visualization ID