WP Manifestindependent plugin directory
manifest / content / acf-editorjs

ACF EditorJS Field

ACF field for EditorJS rich text editor

by Giant Peach · github.com/giant-peach-design/acf-editorjs · website

★ 1stars
91composer installs

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/giant-peach-design/acf-editorjs/archive/refs/heads/main.zip

On Packagist as giantpeach/acf-editorjs:

composer require giantpeach/acf-editorjs
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/giant-peach-design/acf-editorjs ↗

A WordPress plugin that adds Editor.js as a field type for Advanced Custom Fields.

Features

  • Rich text editing with Editor.js
  • Multiple block types: Header, Paragraph, List, Quote, Code, Table, Warning, Image, Embed
  • Configurable tools per field
  • JSON data storage
  • Composer installation support

Requirements

  • PHP >= 7.4
  • WordPress >= 5.0
  • Advanced Custom Fields >= 5.8

Installation

Via Composer

  1. Add the plugin to your project:

    composer require giantpeach/acf-editorjs

  2. The plugin will be installed to your mu-plugins or plugins directory (depending on your composer configuration).

Manual Installation

  1. Download the plugin
  2. Upload to your /wp-content/plugins/ directory
  3. Activate the plugin through the 'Plugins' menu in WordPress

Usage

Once activated, you'll have a new "EditorJS" field type available in ACF field groups.

Field Settings

  • Default Value: Set the default content for new posts
  • Placeholder Text: Placeholder shown in empty editor
  • Available Tools: Choose which Editor.js tools to enable
  • Minimum Height: Set the minimum height of the editor

Retrieving Data

The field returns Editor.js data as an array:

$content = get_field('editorjs_field');

// Returns array like:
// [
//     'time' => 1234567890,
//     'blocks' => [
//         [
//             'type' => 'paragraph',
//             'data' => [
//                 'text' => 'Hello world!'
//             ]
//         ]
//     ],
//     'version' => '2.22.0'
// ]

Rendering Content

You'll need to create your own renderer for the Editor.js data. Example:

function render_editorjs_content($data) {
    if (empty($data['blocks'])) {
        return '';
    }

    $html = '';
    foreach ($data['blocks'] as $block) {
        switch ($block['type']) {
            case 'paragraph':
                $html .= '<p>' . esc_html($block['data']['text']) . '</p>';
                break;
            case 'header':
                $level = $block['data']['level'];
                $html .= '<h' . $level . '>' . esc_html($block['data']['text']) . '</h' . $level . '>';
                break;
            // Add more block types as needed
        }
    }

    return $html;
}

Development

Building Assets

The plugin includes EditorJS and its tools locally for better control and performance:

  1. Install dependencies: npm install
  2. Build all assets: npm run build
  3. For development with watch mode: npm run dev

Build Process

  • npm run build - Builds the complete bundle
  • npm run dev - Builds and watches for changes
  • npm run clean - Removes the dist directory

The build process creates:

  • dist/acf-editorjs.iife.js - Complete bundle with EditorJS core, tools, and field initialization (~357KB)

License

MIT