Drupal Enabled Drag and Drop Content Management

Until recently, content management systems essentially fell into one of two camps:

• Intuitive, easy-to-create and manage SAAS solutions, such as WIX and Squarespace, or
• Flexible and scalable solutions, such as Drupal, for websites with complex data models and a depth of content.  

Quantum leaps in functionality that leverage component-based web design systems have broken down the wall between these two camps. This gap can now be bridged within Drupal, allowing for drag and drop content management capabilities. 

Promet’s strategy for achieving this new UI and content management paradigm incorporates two open-source solutions: Emulsify®, a component-driven Drupal theme, and Provus, our Drupal kickstart that packages commonly used features into reusable components for a drag-and-drop editing experience. 

During Drupal GovCon last month, Aaron Couch and I delivered a presentation on Drag and Drop Content Management Systems for Government Websites. The types of requirements that we addressed during this presentation are, of course, not unique to government agencies. 

Key among them: 

• Improve digital services across the board, 
• Push more transactions and interactions online for purposes of reducing costs and ensuring agility,
• Meet increasingly high expectations among citizens and customers,
• Communicate changes quickly, and 
• Enhance efficiencies by leveraging the potential of “Create Once Publish Everywhere” (COPE). 

Foundations of Component-Based Theming

This new world of drag-and-drop possibilities is built upon the realization that despite differences in content modeling, the pages of most websites consist of various combinations of the same “things”—media galleries, lists of content, cards, search, maps, and social media. We call these things “components.”

With Promet's new approach to component-driven theming, new potential has emerged for customizable content models that are built with easily “themable” and reusable components, that are then stored in a library that serves as an efficient starting point for projects. 

Fueled by Emulsify, Layout Builder, and Provus

While there are a number of component-based themes for Drupal, we’ve singled out the Emulsify® design system as a Drupal starter theme that gives us a huge lift in building reusable components. Emulsify functions as an example of Atomic Design, which refers to a methodology for envisioning the site as a collection of components, based on graduated building blocks from Atoms, to Molecules, to Organisms, to Templates, to Pages. 

This capability combines both a starter component library and Storybook, which is a tool for building user interface components and supports both Twig and React. Storybook can be turned on from within the Emulsify theme, resulting in a highly efficient new workflow for projects. For more on Storybook, check out a recent Drupal GovCon presentation entitled, Component Driven Theming with Storybook, that Promet’s Aaron Couch participated in, along with Emulsify contributors Brian Lewis and Evan Willhite.

Drupal Layout Builder is a drag-and-drop page-building tool in Drupal Core that allows content editors to build out sections of the site. Layout Builder can be implemented as a no-code, site-building tool that retains the features of Drupal, such as flexible content model, revisioning, and custom user permissions and workflows. 

Developed by Promet, Provus provides a kickstart to Drupal site building, packaging commonly used features such as calendaring, FAQs, people, news, and blogs with a drag-and-drop content editing experience. Provus also offers a large array of site-building components like galleries, maps, content lists that can be added and arranged by non-technical users, enabling non-technical users to build and edit a site within an inherently flexible content model. Provus is open source and we welcome the Drupal community’s contributions to the project.

Beyond Traditional Drupal Theming

Having identified that component-based theming tools are key to next-level efficiencies in website building, our next step was to single out an optimal approach for delivering reusable components. 

Traditional Drupal theming includes CSS and JavaScript selectors that are intertwined with their context, connecting them to the backend implementation. The result of this “theme for the page,” approach is assets that can’t be reused across projects. 

With a component-based approach, however, selectors are isolated and can be reused. 

Let’s take an example of creating front-end assets for a typical carousel component. In the example below, the assets are tied to the Drupal implementation and combined with other elements. They are not only tied to a paragraph, but the specific name of that paragraph. Reusing this is difficult if there are any changes to the data model. We've identified that a flexible data model is what we want to build.

Read: Provus Frequently Asked Questions

Traditional Drupal Theming

Component-Based Solution

With a component-based approach, on the other hand, all of the assets including the JS, CSS, and template are grouped together. As indicated below, the selectors only reference the elements in the template, so they are isolated within a coherent whole.

Making component-based theming work in Drupal, can simply be a matter of embedding. We are able to leverage Twig’s ability to embed or include templates to render the component. If the backend implementation changes or we want to move it to another project the component itself is not changed. 

Below is an example of embedding the previous component. In this case, changing the block type or backend implementation simply requires embedding the same component.

Drag-and-Drop Content Management Systems represent a new level of advantages and possibilities for development teams, and even more so for clients. At Promet Source, we’re excited about the approach to component-based theming that we’ve developed and looking forward to the conversations and amazing new solutions that lie ahead for clients. 

Interested in learning more about the potential for drag-and-drop content management systems and what this can mean for you? Contact us today.