Skip to main content

Decoupled Drupal 8 and a Next-level Admin UX

Our work with an online media website brings admin UI/UX in Drupal 8 to new heights.

Project Highlights

For businesses like this online media brand, the website is truly the cornerstone of success. Even two versions behind, Drupal worked smoothly as a publishing platform for this online media company, with an advanced administrative interface. However, custom features and integrations were keeping them gridlocked to this outdated version, posing a number of potential security vulnerabilities. When it came time for an upgrade, only the right partner could be trusted to support the evolution of the online media company’s sophisticated system with a migration to Drupal 8. 

With Mediacurrent as a partner, the client team became empowered to harness the power of Drupal 8 on a maintainable codebase. This partnership has achieved major strides in evolving Drupal with a fully decoupled editorial user experience and many of these advancements were contributed back to the open source community. 

Results

  • 6: Total number of modules contributed to via patches or maintainership focusing on improving Drupal's UX/UI for admins  
  • Deprecated internal middleware by leveraging Drupal’s core REST API for sending content to a custom Solr index.
  • Minimize clicks to publish editorial content
  • Improved performance and page load times

The Next Level of UX for Authors

Although Drupal 8 already offered a major upgrade in editorial experience, Mediacurrent and the online media website took it one step further, bringing admin UI/UX in Drupal to new heights.

Understanding that site editors are key to the success of the online media website’s Drupal platform, this persona shaped many development decisions to build a flexible and intuitive editorial experience. By developing on several key Drupal modules and contributing them back to the community, these strides toward a better admin interface can now be appreciated and further improved by all Drupal 8 users.

Content Strategy

Fully Decoupled Architecture

The website’s decoupled architecture requires Drupal’s core web services to provide data to the front end so pushing content to other places becomes more manageable. Once content is published for an article, it can be available for use in many different places, including mobile apps and various feeds.

Agile

A Satisfying UI for Admins

Now, the online media website has a decoupled site to match their decoupled development team. UX, front end and back end work is focused strictly on the administration user interface and not public consumption. Reducing clicks, drags and time to edit are paramount in administration decisions. Combining Paragraphs, Paragraphs Browser, Autocomplete Deluxe, Entity Browser and custom integrations, we matched the editorial workflows.

Code

Improving Image Management

Freeing the online media website from the limitations of their old custom approach, we leveraged a Drupal media entity to allow flexibility and upgrades in the future. Now, a custom module interface allows them to continue using its legacy React app for managing images.

computer screen displaying generic website homepage

Development

Component Creation

On Drupal 6, the online media website leveraged an internal React based app for creating custom components for their articles and pages. The data for these is stored in custom table schemas. To allow future scalability we leveraged Paragraphs module to offer a similar workflow. Paragraphs on its own had a few problems to overcome based on existing workflows:

  • No organization of components
  • Components only added to the bottom of the stack
  • Cannot save individual paragraphs without saving the entire article

To counteract these we leveraged paragraphs browser module for organization of the selected components. We worked in the community space to extend patches for adding paragraphs between existing paragraphs and contributed the work back to both the paragraphs and paragraphs browser module. We leveraged custom code in our paragraphs field widget to allow saving of the paragraph independently of the article.

Drupal 8 Development

We worked with the online media website to replatform from Drupal 6 onto a stable, flexible Drupal 8 infrastructure. The following are a few key modules used for this build:  

  • Paragraphs - Allows recreation of component workflow from Drupal 6 in a standard format that will apply in future software states.
  • Paragraphs Browser - Allows organization of paragraphs available for each field. Groups paragraphs and allows for subsetting available paragraphs based on the online media website brand.
  • Autocomplete Deluxe - Leveraged for autocomplete taxonomy fields and finalized Drupal 8 upgrade started in community. Mediacurrent took over maintainership during site build.
  • Entity Browser - Allowed for more robust content search in reference fields.
  • Entity Browser Live Preview - Allowed creating previews of content in entity reference fields. Let’s editors quickly jump in to view or edit referenced content.
  • Quill - This open source WYSIWYG editor was one of the online media website’s legacy tools that supported their editorial workstream. Mediacurrent took over maintainership to finalize Drupal 8 migration work.
  • Image Pool - Custom module interface allowing legacy React app to be used for managing images in the online media website’s digital asset management system. In Drupal 6 this was all custom, storing strictly an ID in a text field. In Drupal 8, we leveraged a media entity to allow flexibility and upgrades in the future.
  • JSON Web Token Authentication  - Adds a security layer to communications for accessing core Rest endpoints and handshakes between front end and back end interfaces.
  • JSON Normalizer / rest data for consumed services - Custom development to tuned core REST outputs to match legacy JSON documents leveraged at the online media website.

Giving Back

For this project, Mediacurrent took over maintainership of the Quill and Autocomplete Deluxe modules. We also worked on Paragraphs and Paragraphs Browser, extending patches for adding paragraphs between existing paragraphs. Finally, we supported the online media website in their Drupal community involvement with Drupal.org initiatives and contrib work.

drawing of a lightbulb on a sticky note

Final Thoughts

Through close collaboration, constant communication and commitment to Drupal 8 best practices, the the online media website team remains on the bleeding edge of technology. With Mediacurrent serving as a trusted strategic partner, the online media website has embraced a new era of publishing and has become empowered to harness the power of Drupal 8 on a maintainable codebase.

Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow