Web blog

Bootstrap 4 Gutenberg blocks for Drupal 8

This module provides some of the essential Bootstrap components to a Drupal 8 Gutenberg editor. It uses some essential WordPress dependencies but all neatly wrapped up as a Drupal module.

I’d been contributing to a Bootstrap Gutenberg WordPress plugin for bit of research into whether WordPress could be used for my work website. As part of that same research, but using Drupal as an option, I was disappointed in the lack of Gutenberg Bootstrap support for that CMS even though it supported Gutenberg editor as a module. After a short time to learn the basics of developing Drupal modules it seemed pretty straight forward to lift the JavaScript/React code from WordPress to Drupal with very few errors encountered.

The module provides full grid support and well as a few Bootstrap components. Joe at Advanced Bootstrap Blocks had done a terrific job of making grid elements such as container, rows and grids fully customisable with margins, padding, offsets etc. I really wasn’t unable to do anything that I could have done if I was simply hard coding HTML with classnames. In addition, I added jumbotrons, alerts and cards/card decks to the existing React code. I hope to add modals and accordions at some stage too.

Next steps also are to write some e2e testing for each component using Jest and Puppet frameworks. Unfortunetely some other life and work priorities have got in the way but I hope to pick this up another time as I definetely see potential for Gutenberg in Drupal and this module and think it could be a very worthwhile addition to the Drupal eco system.

Anyway, the project can be found at

Leave a Reply

Your email address will not be published. Required fields are marked *