API Reference

IMPORTANT: Accessing Block Content

You cannot directly access raw block content from WordPress.

To use WP Block to HTML with raw block data, you'll need to install a plugin to expose this content. We're developing an official plugin with proper security measures to safely expose this data.

In the meantime, you can use a plugin like Post Raw Content to access block data.

Note: You can still use this package without a plugin by working with the rendered HTML content that WordPress provides by default. The package will handle rendered HTML content automatically using the contentHandling: 'rendered' option.

Stay tuned for our official plugin release!

Welcome to the WP Block to HTML API reference documentation. This section provides detailed information about the library's API, including core functions, configuration options, developer resources, and TypeScript definitions.

Overview

WP Block to HTML is a JavaScript library that converts WordPress block data into clean HTML or framework-specific components. The library offers a flexible and extensible API that allows you to:

• Convert WordPress blocks to framework-agnostic HTML
• Customize the conversion process with various options
• Apply CSS framework-specific classes
• Create custom block transformers
• Optimize for server-side rendering
• Integrate with various JavaScript frameworks

Core Functions

The Core Functions section documents the main functions that power WP Block to HTML:

• convertBlocks(): Convert WordPress blocks to HTML
• processBlocksForSSR(): Optimize blocks for server-side rendering
• createBlockHandler(): Create custom block transformers
• getClassMap(): Retrieve CSS framework class mappings
• createCustomClassMap(): Create custom class mappings

import { convertBlocks } from 'wp-block-to-html';

const html = convertBlocks(blocks, {
  cssFramework: 'tailwind',
  contentHandling: 'raw'
});

Configuration Options

The Configuration Options section details all the configuration options available when using the library, including:

• CSS framework selection
• Content handling modes
• Block transformer customization
• SSR optimization settings

const options = {
  cssFramework: 'tailwind',
  contentHandling: 'raw',
  blockTransformers: customTransformers,
  ssrOptions: {
    enabled: true,
    optimizationLevel: 'balanced',
    lazyLoadMedia: true
  }
};

Developer Documentation

For developers looking to extend the library or contribute to its development:

• Internal Architecture: Understand the library's architecture
• Plugin Development: Create plugins to extend the library
• Contribution Guidelines: Guidelines for contributing
• Performance Optimization: Optimize for large sites

Block Handlers

Documentation for the various block handlers included in the library:

• Text Blocks: Paragraphs, headings, lists, quotes, etc.
• Media Blocks: Images, galleries, videos, etc.
• Layout Blocks: Columns, groups, rows, etc.

import { paragraphBlockHandler } from 'wp-block-to-html/blocks/text';
import { imageBlockHandler } from 'wp-block-to-html/blocks/media';

const customTransformers = {
  'core/paragraph': paragraphBlockHandler,
  'core/image': imageBlockHandler
};

CSS Frameworks

Documentation for using different CSS frameworks:

• Tailwind CSS: Use Tailwind CSS classes
• Bootstrap: Use Bootstrap classes
• Custom Frameworks: Create your own CSS framework adapter

// Using Tailwind CSS
const html = convertBlocks(blocks, { cssFramework: 'tailwind' });

// Using Bootstrap
const html = convertBlocks(blocks, { cssFramework: 'bootstrap' });

// Using a custom framework
const html = convertBlocks(blocks, { classMap: customClassMap });

TypeScript

TypeScript definitions for the library:

• Interfaces: TypeScript interfaces
• Types: TypeScript types

import { 
  WordPressBlock, 
  ConversionOptions, 
  BlockTransformer 
} from 'wp-block-to-html';

const blocks: WordPressBlock[] = [...];
const options: ConversionOptions = {...};

Framework Integration

For framework-specific documentation, visit the Frameworks section.

Examples

For practical examples, visit the Examples section.

Need Help?

If you need additional help:

• Check out our GitHub repository
• Open an issue if you encounter a bug
• Refer to our Getting Started guide for basics