IO Builder

Summary

The IO builder is a visual builder (frontend editor, page builder...) for Drupal developed by iO: https://www.iodigital.com/en

Demo

https://www.youtube.com/watch?v=y0iptiuZ4Bc

Frontend editing of paragraphs

The main focus of the module was editing/adding paragraphs on nodes in the frontend. But the IO builder can be used for all fieldable entity types (media, taxonomy terms…)

It provides an out of the box integration with paragraphs and other entities, so that site builders can enable the modules required, configure their entities and start using the IO builder.

Plugins were created to extend the IO builder functionality main functionalities.

• IO Builder Contexts, the bridge between frontend and backend
• IO Builder Entity Actions, custom actions per entity type
• IO Builder Fields, to convert builds to an IO builder widget

We took a lot of inspiration from the Divi and Elementor plugins in WP.

How to use

Enable the module using drush

drush en io_builder
drush en io_builder_paragraphs

Enable the IO builder on the entity bundles/types where you wish to use it

For example on the manage page content type:
/admin/structure/types/manage/page

If you want to use a form display with less fields in the frontend, create a new form display with machine name io_builder. This will be used when the form display is rendered.

Add the IO builder toggle block

This is used to enable/disable the IO builder for editors.

Using the paragraphs field

Go to the IO builder form display for your content type:
/admin/structure/types/manage/page/io-builder-display/default

Here you get a list of all fields for your content type. You can select an IO Builder field plugin here based on the field type. Select IO Builder paragraphs field for your paragraphs field:

These IO builder fields are plugins where you can use the "build" array to add adjustments.

Twig/HTML attributes

The IO builder needs the attributes to be printed on entity wrappers to work properly.

The IO builder actions are added to the content variable, you can use this as follows:

{{ content.io_builder }}

Requirements:

PHP 7.4
Drupal >8.8|9

Roadmap:

• Create pages from scratch using the IO builder
• Do not store changes to entities immediately
• Optimise translations/revision support
• Menu link support...
• Feel free to add suggestions