Toward an Optimal Content Editor UX in Drupal

The digital age has sparked an era of self-serve with more and more of the tasks that were once in the domain of the experts being handed over to lay people. Sometimes, the new ways of navigating are met with the resistance. Other times: relief and excitement concerning new possibilities for empowerment, efficiency, and control. 

Content editors are largely falling into the latter category as the days of relying on IT departments or web development agencies to keep a site updated and brand aligned are giving way to easy-to-manage, drag-and-drop flexibility for creating original pages that serve specific purposes beyond the limitations of standard templates.

Of course, the potential of better content editor UX goes far deeper than greater job satisfaction for this particular role. The ability for teams to easily update content, add new new pages, revise designs, and switch up layouts—essentially take ownership of their websites—positions organizations to ensure that sites to stay on track and seamlessly evolve as needed.

Content Editing in Focus

The current content editing capabilities are a bit uneven, with multiple options within a range of platforms, plugins, modules, and tools designed to streamline and simplify content. 

Studies show that content editors and site admins want more control over their content and a more streamlined, intuitive UI, better tools for media management and page building, along with WYSIWYG. These types of enhancements closely align with the Drupal Community’s current focus.

Raising the Bar within Drupal

Until recently, Drupal’s content editing reputation lagged behind the other top CMSs, as Drupal was largely considered to be at the challenging end of the content editing spectrum. While a less-than-simple content editor experience might have gone hand in hand with Drupal’s longstanding position as a top pick for large, complex sites that require considerable customization, the Drupal Community has been steadily chinking away at the sources of content editing complexity. 

The June 2020 launch of Drupal 9, represented a significant step forwarded for content editor UX with features such as:

• The availability of Claro as the default admin UI theme, which follows the new Drupal Admin Design System to provide a more intuitive, aesthetically appealing, and content editor friendly UI;
• The ability to craft layouts with the built-in visual layout builder, reuse blocks, and customize all parts of the page;
• Management of reusable media in the out-of-the-box media library;
• Greater enhancements to a structured, content-based system; 
• A customizable media library management system that allows content editors and designers collaborate on images, videos, and other assets in an intuitive interface;
• Superior taxonomy handling that extends to the media library, allowing for easy organization of library assets;
• The ability to make changes from mobile devices due to a mobile-first UI.
• Enhanced content workflows beyond the previous two optional default states of “Unpublished,” and “Published.” The core Workflows module allows for the addition of custom states (such as Unassigned, Assigned, or Draft) to better align with existing editorial processes. 

Paragraphs, Layout Builder, Provus

Drupal 9, combined with the options within primary content editing modules—specifically Layout Builder and Paragraphs—have served to vastly streamline and simplify solutions for designing, laying out, and revising pages. 
Leveraging Layout Builder, the 2020 introduction of Provus further raised the bar with a component based design system that allowed for built-in adherence to brand and style guidelines.

Provus has effectively leveled the content editing playing field among the easiest to create and manage SAAS solutions, such as WIX and Squarespace, and Drupal’s inherent scalability, flexibility and ability to accommodate complex content models.

Paragraphs Pros and Cons

Paragraphs is an extremely popular contributed module that provides content editors with a solid level of control with minimal clicks. It’s often considered the best option for web applications that call for a flexible content model, but not necessarily a range of layout options. 

With the Paragraphs, content editors essentially create Paragraph Types, each with their own set of fields that live within the parent content form. 

Paragraphs was originally designed to create collections of fields within a larger piece of content. Even though its original purpose was not specifically to manage layouts, Paragraphs has provided content editors in Drupal with a proven module to build pages with components that can be switched up as needed. 

Layout Builder in Drupal Core

Drupal Layout Builder is a drag-and-drop page-building tool in Drupal Core that can be implemented as a no-code, site-building tool. The current version of layout builder enables visual page editing using intuitive, block-style layouts. 

Key advantages of Layout Builder include:

• The ability to build default page templates for different content types such as FAQs, news updates, or product pages;
• The option to override default settings when needed; 
• The ability to create structured landing pages for a one-time offer or event that don’t follow a template; and 
• The representation of layouts in the back-end of the site, providing content editors with the advantage of preview functionality for viewing their layouts as they work. 

Layout Builder is ideal for providing content editors with a visual way to manage how content and layout fit together. This can be accomplished by configuring Block Types, similar to how Paragraph Types are configured, and then providing content editors with access to edit the layout of a page.

An essential difference between Layout Builder and Paragraphs is the ability within Layout Builder to add “Sections” for each page, with the potential for each section to function as a container for the page content.

Each Section can have its own layout, which means the potential for a high degree of flexibility. 
Often the decision concerning Paragraphs vs. Layout Builder hinges on flexibility and the degree to which it’s viewed as a necessary or desirable feature.

When needed, the Layout Builder Restrictions and Block Blacklist modules can inject a level of control over the block types and layouts that can be added to a page.

Provus for Drupal: Next-Level Solution

Further leveraging Layout Builder, Provus was designed by Promet Source as a new approach to designing, developing, and managing Drupal sites. Content editing capabilities incorporate an intuitive, no-code, drag-and-drop page building tools with a curated library of high-quality components that enable marketers and content editors to easily layer designs, add functionality, and rearrange layouts.

Provus empowers marketers and content editors with the ability to revise and reconfigure their sites within a customized framework of brand guidelines that are determined during development. The result is the assurance that all design and layout options adhere to organization’s guidelines for brand and site governance, and that a consistent level of aesthetic and design standards is carried through to every page.

Developed for Drupal, Provus provides for varying permissions levels to be set for everyone who has access to the site. 

Design governance which offers the assurance that content editor empowerment does not translate into mismatched, crowded, or sub-par page designs is a key factor fueling the success of Provus. Additional differentiators include:

• Self-adjusting features within components that create a foundation for both readability and ADA accessibility, by ensuring, for example, adequate contrast between fonts and background colors; 
• Customization options presented within an expertly calibrated design framework for ensuring adherence to quality design and UX standards on all devices, without breaking layouts or straying from an organization’s brand guidelines; and
• The ability of content editors to seamlessly edit components and change patterns within the view mode, eliminating time-consuming processes of re-entering content and switching back and forth between edit and publish modes.

Content editing capabilities have experienced a sharp upward trajectory recently, and as new possibilities emerge, there’s increasingly less patience for limited capabilities and cumbersome processes.

Promet’s open source, drag-and-drop, component-based approach to content editing is changing the game for content editing within Drupal, and now is the time to explore what it can do for you. Interested in learning more? Let's talk.