WordPress 5.0 will soon replace the editor with the new Gutenberg editor as part of a multi-phase project to improve the experience of authoring rich content. Phase 2 will shift focus to tackle site customization, bringing more complex layout and page builder capabilities to Gutenberg.

As this phase kicks off soon, it’s valuable to see what other platforms are doing on this front. Drupal has traditionally appealed to a more technical audience, and probably wouldn’t count Squarespace, Wix, and Tumblr among their competitors, but the project is getting more friendly towards site builders and content editors. Drupal has brought improvements to its usability, media, and layout experiences over the past few years in support of users who have demanded a more modern, simplified admin UI. The project is currently testing a visual design tool for building layouts.

Two weeks ago, Drupal founder and project lead Dries Buytaert previewed the new Layout Builder, an experimental feature that is stabilizing and expected to land in Drupal 8.7 in May 2019. Layout Builder offers layouts for templated content, customizations to templated layouts, and custom pages. These uses are especially important when building sites with large amounts of content that occasionally require template overrides and one-off landing pages.

Buytaert described how Layout Builder approaches the creation of one-off dynamic pages, which he said is similar to the capabilities found in services such as Squarespace and projects like Gutenberg for WordPress and Drupal:

A content author can start with a blank page, design a layout, and start adding blocks. These blocks can contain videos, maps, text, a hero image, or custom-built widgets (e.g. a Drupal View showing a list of the ten most popular gift baskets). Blocks can expose configuration options to the content author. For instance, a hero block with an image and text may offer a setting to align the text left, right, or center. These settings can be configured directly from a sidebar.

Buytaert’s demo video shows the Layout Builder in action. Its capabilities are similar to many of WordPress’ third-party page builders, such as Elementor and Beaver Builder.

[youtube https://www.youtube.com/watch?v=qUkpzSllO30?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent&w=627&h=353]

Layout Builder Poses Accessibility Challenges

Layout Builder is anchored on one of Drupal’s stronger features – the ability to create structured content, but it faces some of the same accessibility challenges that WordPress’ Gutenberg editor has encountered.

In his post introducing Layout Builder, Buytaert made some pointed remarks about Drupal’s commitment to accessibility:

Accessibility is one of Drupal’s core tenets, and building software that everyone can use is part of our core values and principles. A key part of bringing Layout Builder functionality to a “stable” state for production use will be ensuring that it passes our accessibility gate (Level AA conformance with WCAG and ATAG). This holds for both the authoring tool itself, as well as the markup that it generates. We take our commitment to accessibility seriously.

Some contributors are not as optimistic about Drupal being able to fulfill these bold claims in time to ship the feature in 8.7.0. Andrew Macpherson, one of the accessibility topic maintainers for Drupal 8 core, has proposed Layout Builder offer an alternative UI that users can access without the visual preview UI.

“Dries’ blog post about layout builder yesterday says we’re on track to mark this as stable for D8.7.0,” Macpherson said. “I’m not at all optimistic about that, because as yet there is no feasible plan for how it can be made accessible.

“A minimum viable product for Layout Builder accessibility would be at least one method which works, for each user task, for each input/output method. I don’t think we can say we have found a feasible approach. We’re in deeply experimental territory here – there isn’t a well-established, reliable pattern we can just copy to make the current layout builder accessible. Essentially, we’re making stuff up in a hurry, for a novel UI, with limited opportunity for design validation. There’s no guarantee that users are going to understand it, or find it easy to use. That’s why I’m not optimistic about it getting past the accessibility gate in time for D8.7.0.”

Macpherson said that WCAG strongly advises against providing alternate versions but allows for them in instances where the main version cannot be made accessible.

“I think we are effectively in this situation now, although we are still exploring ideas,” he said.

Macpherson also recommended they continue striving to make the drag-and-drop, visual-preview layout builder UI accessible at the same time. He referenced emerging principles of Inclusive Design for application developers, which recommend “offering choice,” giving users different ways of completing tasks, especially those that may be complex or non-standard.

“Eventually, I’d like to see BOTH layout builder UIs being accessible, and offer genuinely useful choices for everyone,” Macpherson said. “But let’s take the time to do it well, instead of hastily bolting on fixes for one type of interaction method at a time, in a rush to ship a single layout builder UI. ”

Macpherson’s proposal is still under consideration, but it provides an interesting perspective on similar challenges WordPress contributors are facing with Gutenberg. Modernizing UIs to make the site building experience more accessible for those who don’t know how to code has to be balanced with considerations for those who may not be able see very well or use a mouse. Drupal contributors are exploring providing an alternative accessible UI as a solution to empower more users to take advantage of the new Layout Builder.