PHPackages                             giantpeach/acf-editorjs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. giantpeach/acf-editorjs

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

giantpeach/acf-editorjs
=======================

ACF field for EditorJS rich text editor

148JavaScript

Since Jul 23Pushed 11mo agoCompare

[ Source](https://github.com/Giant-Peach-Design/acf-editorjs)[ Packagist](https://packagist.org/packages/giantpeach/acf-editorjs)[ RSS](/packages/giantpeach-acf-editorjs/feed)WikiDiscussions main Synced today

READMEChangelogDependenciesVersions (1)Used By (0)

ACF EditorJS Field
==================

[](#acf-editorjs-field)

A WordPress plugin that adds [Editor.js](https://editorjs.io/) as a field type for Advanced Custom Fields.

Features
--------

[](#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
------------

[](#requirements)

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

Installation
------------

[](#installation)

### Via Composer

[](#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

[](#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
-----

[](#usage)

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

### Field Settings

[](#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

[](#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

[](#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 .= '' . esc_html($block['data']['text']) . '';
                break;
            case 'header':
                $level = $block['data']['level'];
                $html .= '' . esc_html($block['data']['text']) . '';
                break;
            // Add more block types as needed
        }
    }

    return $html;
}
```

Development
-----------

[](#development)

### Building Assets

[](#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

[](#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
-------

[](#license)

MIT

###  Health Score

18

—

LowBetter than 8% of packages

Maintenance38

Infrequent updates — may be unmaintained

Popularity12

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity14

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/e66b81ebd507f82992c477ab3e567933436d0a810a0886e6005b2e8b0fdf317a?d=identicon)[Giant Peach](/maintainers/Giant%20Peach)

---

Top Contributors

[![tom-gurney](https://avatars.githubusercontent.com/u/6736496?v=4)](https://github.com/tom-gurney "tom-gurney (6 commits)")

### Embed Badge

![Health badge](/badges/giantpeach-acf-editorjs/health.svg)

```
[![Health](https://phpackages.com/badges/giantpeach-acf-editorjs/health.svg)](https://phpackages.com/packages/giantpeach-acf-editorjs)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)