Skip to content

The accompanying code repository for my official Gutenberg docs tutorial on creating a custom instance of a “block editor”.

Notifications You must be signed in to change notification settings

sonhaichu/standalone-block-editor

 
 

Repository files navigation

Standalone Gutenberg Block Editor

alt text

One developer's experiment to create a standalone instance of the Block Editor within WPAdmin.

What?

This repo is part of a personal experiment to discover how easy (or otherwise) it is to create a standalone instance of the WordPress Block Editor.

The editor you see here is not be the same Block Editor you are familiar with when creating Posts in with WordPress. Rather it is an entirely custom block editor instance built using the lower-level @wordpress/block-editor npm package (and friends).

Why?

As part of my goal to learn Gutenberg deeply, I wanted to understand how it worked at a fundamental level. What better way than a deep dive into the core parts of the editor?

Disclaimer

This repo is by no means perfect and should not been seen as an "official" way to build custom instances of the Block Editor. There will be many bugs and errors - if you spot any please do raise an Issue and I'll do my best to correct them.

Getting Started

If you'd like to play around with this custom block editor then:

Clone this repo into the plugins directory of a WordPress installation.

// Change into your local WP install's Plugin directory.
cd {{mylocalwp}}/wp-content/plugins/

// Clone this repo into that directory.
git clone [email protected]:getdave/standalone-block-editor.git

Change into the cloned directory:

cd standalone-block-editor/

Install npm dependencies

npm install

Build the Plugin:

npm run build

...or alternatively to watch build automatically on file change:

npm run start

Activate the Plugin from within WP Admin.

More Information

If you're interesting in learning about how this works, I've written a full walk-through of the code in TUTORIAL.md.

About

The accompanying code repository for my official Gutenberg docs tutorial on creating a custom instance of a “block editor”.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 42.3%
  • PHP 29.9%
  • CSS 27.8%