Decoupled Drupal 8 and a Next-level Admin UX
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.
- 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.
A Satisfying UI for Admins
Improving Image Management
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.
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.
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.