Block Editor Library - Quick Start

🚀 3 Ways to Use Your Block Editor

1. React Component (Easiest)

npm install @your-org/block-editor

import { BlockEditor } from '@your-org/block-editor';
import '@your-org/block-editor/dist/styles/themes.css';

function App() {
  return (
    <BlockEditor
      config={{ theme: 'wordpress' }}
      onSave={(content) => console.log('Saved:', content)}
    />
  );
}

2. Browser Script (No Build Required)

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="./dist/browser.js"></script>
<link rel="stylesheet" href="./dist/styles/themes.css">

<script>
  const editor = window.BlockEditorAPI.init('editor-container', {
    theme: 'wordpress'
  });
</script>

3. Next.js/Vue.js/Any Framework

// Works with any framework that supports React components
import { BlockEditorAPI } from '@your-org/block-editor';

// Initialize in your framework's lifecycle
const editor = BlockEditorAPI.init(containerElement, config);

📦 Installation Commands

# NPM
npm install @your-org/block-editor

# Yarn  
yarn add @your-org/block-editor

# Local development
npm link @your-org/block-editor

🎨 Themes Available

• 'wordpress' - WordPress Gutenberg style
• 'modern' - Clean, modern design
• 'minimal' - Simple, distraction-free

⚡ Quick Examples

Basic Usage

<BlockEditor 
  placeholder="Start writing..."
  onSave={(content) => saveToAPI(content)}
/>

With Image Search

<BlockEditor
  config={{
    enableImageSearch: true,
    imageSearchConfig: {
      apiKey: 'your-unsplash-key'
    }
  }}
/>

WordPress Integration

<BlockEditor
  config={{
    enableWordPressIntegration: true,
    wordPressConfig: {
      apiUrl: 'https://yoursite.com/wp-json/wp/v2'
    }
  }}
/>

🔧 API Methods

// Get content as WordPress HTML
const content = editor.getContent();

// Get raw blocks data
const blocks = editor.getBlocks();

// Set content from WordPress HTML
editor.setContent('<!-- wp:paragraph --><p>Hello</p><!-- /wp:paragraph -->');

// Add new block
editor.addBlock('core/heading', { content: 'New Heading', level: 2 });

// Save content
editor.save();

📱 File Sizes

• Browser build: 54KB (gzipped: ~18KB)
• React component: 45KB
• CSS themes: 8KB

🌐 Browser Support

• ✅ Chrome 80+
• ✅ Firefox 75+
• ✅ Safari 13+
• ✅ Edge 80+

📚 Full Documentation

See USAGE_GUIDE.md for complete examples and advanced usage.

🆘 Need Help?

1. Check the examples in /examples/ folder
2. Look at react-integration.html for a working demo
3. Open browser dev tools to see console logs
4. Make sure React/ReactDOM are loaded before the editor