Admin Block Editor

Supercharge default admin with a rich text editor wich managed blocks.

Contents

Install

composer require pushword/admin-block-editor

That’s it! If you have a custom installation (not used the default installer), you may have a look inside vendor/pushword/admin/install.php.

Block editor is now ready.

Configuration

If you want to go forward than a default install, you can override default parameters in your config:

admin_block_editor:
  new_page: true # Set false to disable block editor for new page (because new page does not have an associated `app` yet)

Or you individually app by app:

# set false to disable block editor (and get the default Mardown Editor) for this app
admin_block_editor: true

Customize editor

You want to add a custom block? This is the path to follow:

  1. Create a new editor.js plugin. There are a few examples in admin-block-editor/src/assets/tools
  1. Override @PushwordAdminBlockEditor/editorjs_widget.html.twig to add your custom plugin

I recommend you to import @PushwordAdminBlockEditor/editorjs_widget.html.twig and to create only the block editorjs_block_to_add_new_plugin

Storage Format

Content is stored as markdown in the database. The editor converts EditorJS blocks to markdown on save, and converts markdown back to EditorJS blocks when loading the editor.

Usage

Outline panel

A collapsible left rail lists the blocks in use — in the block editor and in its Markdown/JSON source views alike. Headings nest their sections, group markers nest their content, and each row offers:

  • click to scroll to the block (highlighted on arrival),
  • a caret to fold or unfold a section,
  • drag handles — headings carry two, one for the heading alone and one for the whole section; keyboard: Alt+Arrow moves a block one row, Alt+Shift+Arrow swaps a section with the neighbouring one, bodies included,
  • delete, for the block or the whole section/group (undo restores everything).

The rail overlays the admin navigation; collapse it (state is remembered) to get the menu back — the opener stays pinned top-left.

Pages List Block

The search input permit to perfom action like:

  • CHILDREN will search for children page
  • parent_children will search for children page from the parent page
  • slug:hellow-world will search for page with slug being exactly tagada
  • slug:hellow-world OR slug:hello-me … or operator
  • slug:hellow-world OR pizza OR comment:HELLO-YOU …
  • slug:%page% containing page in slug
  • exampleTag will search in pages’s tags for exampleTag (case sensitive)
  • comment:HELLO-YOU will search in pages’s main content for <!--HELLO-YOU--> (case sensitive)