Improving Page Builder UX with Layout Paragraphs and Single Directory Components

Are you committed to using the Paragraphs module and have thousands of paragraphs in use? Are your content creators wanting a better authoring page building experience?

NCDIT Digital Commons platform has 85 North Carolina State agency web sites and thousands of paragraphs on a Drupal 10 multi-site platform. Our content authors want a better authoring experience than long scrolling form pages to build their complex page layouts. We developed a solution using Layout Paragraphs module and customizing the Claro admin theme using Bootstrap and the paragraphs using Single Directory Components to render a WYSWYG author editing experience on the admin. The admin theme was customized and converted paragraphs to single directory components to achieve a WYSWYG content editor authoring experience that comes close to other popular page building tools while preserving Drupal’s Structured Data Model. This presentation will walk through key steps of the technical process of converting paragraphs to Single Directory Components, configuring Layout Paragraphs, using Drupal Migrate module to migrate paragraphs into Layout Sections and adjusting the Barrio Subtheme SASS build to render components correctly in the admin theme.