Admin Block Editor

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

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

# permit to disable listener, if you want front-end works, see further in the docs
admin_block_editor_disable_listener: false

# permit to use all the blocks pre-configured in this extension
admin_block_editor_blocks: \Pushword\AdminBlockEditor\Block\DefaultBlock::AVAILABLE_BLOCKS

admin_block_editor_type_to_prose: ['paragraph', 'image', 'list', 'blockquote', 'code'] # leave empty if you don't want a prose container around this blocks

Disable Listener and use filter

This extension is built like an entity filter.

By default, a listener apply Pushword\AdminBlockEditor\BlockEditorFilter before the defined filters in your app's config only on mainContent.

If you want to reorder the filters, just disable admin_block_editor_disable_listener and add Pushword\AdminBlockEditor\BlockEditorFilter in you app's config.

Performance : It's recommanded to use only BlockEditorFilter to increase speed on generating page.

Override block template

You just find the block you want to override in ./src/templates/block and override it in your templates/my-app.tld/block/my-block.html.twig

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-tools

  2. 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

  1. Add in your app configuration with admin_block_editor_blocks

Your configuration may looks like

admin_block_editor_blocks: [
      'paragraph',
      'list',
      'header',
      'raw',
      'quote',
      'code',
      'list',
      'delimiter',
      'table',
      'image',
      'embed',
      'attaches',
      'pages_list',
      'gallery',
      '\App\Block\MyCustomBlock`
  ]
  1. Create \App\Block\MyCustomBlock wich implements BlockInterface or inherit AbstractBlock

Usage

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
  • comment:HELLO-YOU will search in pages's main content for <!--HELLO-YOU--> (case sensitive)
  • 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