In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

Bringing Gutenberg to Drupal: A Modern Admin UI, a Better Editing Experience in Drupal 8

Bringing Gutenberg to Drupal: A Modern Admin UI, a Better Editing Experience in Drupal 8

by Adriana Cacoveanu on Aug 17 2018

It's a robust, flexible and admin feature-packed CMS, there's no point in denying it. And yet: Drupal (still) lacks a modern UI that would make building rich web content —  such as landing pages — a breeze. But there is hope: the Gutenberg editor has been ported over, promising a better editing experience in Drupal 8.

The team behind this daring project? Frontkom, a Norwegian digital services agency that:

 

  • refused to just sit and wait (for a year or two) for the in-progress initiative of modernizing Drupal's admin UI to grow into a core solution
  • decided to capitalize on their experience in working with the Gutenberg page builder 
  • … and on this content editor's open source nature, too
  • to bring it over to Drupal 8

     

Now, if you're determined to improve the editorial UX on your Drupal site, to “spoil” your editors with a modern, intuitive and flexible admin UI, keep on reading...

 

1. The Drupal Gutenberg Project: Aiming for a Modern Admin UI in Drupal 8

And by “modern” I do mean the opposite of the Panels & Paragraphs & Layout combo solutions currently available for editing text in Drupal.

Solutions that only manage to make the entire workflow... discouragingly complex.

Especially if it's rich web content that editors need to create via the Drupal admin UI.

And this is precisely the context where the Drupal Gutenberg project was born: Drupal desperately needed/needs a modern, JavaScript-based admin UI.

With WordPress 5 users already enjoying this fancy content editor and the Frontkom team's having gained experience in using it, the idea of porting it to Drupal started to form:

"Why wouldn't we make it possible for Drupal users, too, to benefit from this content editor?" 

And here are some of the original Gutenberg project's features that lead them into thinking that, once ported, the editor would significantly improve the editing experience in Drupal 8:

 

  • it's (highly) decoupled
  • it's open-source
  • it's React.js-based 
  • it provides a simplified, smooth and cool functionality-packed admin UI
  • it's Medium and Squarespace's inspired
  • it turns the creation of complex landing pages into a breeze

     

Page editing in Drupal 8 wasn't going to be the same again!

Their initiative turned into a Drupal 8 module —  Gutenberg Editor —  currently still an experimental one. 

Curious enough?

The first step to satisfy your curiosity is to take a look at their live demoan interactive glimpse into the Gutenberg text editor implemented in Drupal 8.

 

2. The New Gutenberg for Drupal: Top Features Improving the Editing Experience in Drupal 8

 

2.1. All the Page Elements Are... Content Blocks

That's right, the team behind this project capitalized on the “everything is a block” Drupal 8 concept when adapting the Gutenberg UI to Drupal.

The result?

Both the Drupal core blocks and 20+ Gutenberg blocks are available in the resulting admin UI.

Basically, a Drupal 8 editor can insert into the web page that he/she's creating any of the core Drupal blocks and of the Gutenberg blocks of choice.

Speaking of which, let me point out just a few:

 

  • Heading
  • Image gallery
  • Auto embedded social posts
  • Buttons
  • Custom Drupal blocks
  • Layout blocks

     

Needless to add that you're free to enrich this list with your own custom blocks, too.

 

2.2. Easy Switch from Visual to Code Editor

That's right, the Gutenberg UI enables you/your editors to quickly switch to code editor —  opening up a neat markup —  and to apply any needed tweaks on the output.

 

2.3. Positioning Content Is Straightforwardly Intuitive

Editors get to select precisely where they want to position different types of content on a page.

And the very same results that they generate while in the Gutenberg admin UI get instantly reflected on the live web page, as well.

And there's more! More great admin features improving editing experience in Drupal. For instance:

Full control over font sizes and colors; tweaking them becomes a breeze with the new editor.

 

2.4. There's a Blocks Search Box

And not only that:

 

  1. using this search box you can track down precisely those content blocks that you need to add to your page
  2. but you can access them inline, as well, using “/”.

     

2.5. Full Control of the Layout

Another great thing about the content blocks available in the Gutenberg UI is that: they can have child blocks, too!

This way, it'll get unexpectedly easy for your editors to split their used blocks into columns on a grid.

 

2.6. Auto Embedded Social Posts/Videos

And all it takes is pasting their URL.

 

The Story of a Real Challenge: Making Gutenberg CMS-Agnostic

Open source, but not fully CMS-agnostic... 

The team behind the Drupal Gutenberg project had to come up with a suitable solution for this challenge. And they did come up with a multi-step solution to make the fancy text editor work in Drupal 8, as well:

 

  • first, they created a fork and removed the WordPress specific features
  • they used the Gutenberg editor as a dependency 
  • next, they set up a standalone NPM package
  • then they built the Gutenberg Editor module

     

In short: a fork of the initial Gutenberg project is still maintained while being used as a dependency of the new Drupal 8 module. Therefore, each time Gutenberg gets an update, the corresponding Drupal module, too, gets a new release.

Now, digging deeper into the project's architectural design, we discover 2 elements that the team had to re-write for Drupal:

 

  1. the URL defining the editor routes (edit page route, new page route, preview page route)
  2. the API-request, now configured to “talk to” Drupal (instead of the WordPress API)

     

How does the new module work?

 

  • as a text editor, which can be easily enabled for each content type
  • all it takes is a long text field for it to work: it replaces the node edit UI for that specific content type

     

Note: the Frontkom team also “promises” us to re-use many of the Drupal-specific stylings for the editor's UI elements in order to add a familiar Drupal feeling to it.

 

What Next? What's The Project Roadmap

Ok, so what we know for sure now, regarding this ambitious initiative turned into a Drupal module is that:

 

  1. the Drupal Gutenberg module is downloadable, yet still experimental (for developer use only)
  2. the team's still working on the project, implementing new features and functionalities aimed at making it feel more... Drupal native
  3. the final version will be presented to the eager/intrigued/curious/skeptical Drupal users and developers in the coming months

     

The END! Can't hide that I'm more than curious what you think about this contrib solution for improving the editing experience in Drupal 8:

 

  1. Are you looking forward to using it, hoping that this editor would make up for the inconvenience of working with Drupal's current admin UI?
  2. Are you skeptical about the perspective of being tied up to a WordPress page builder?

     
Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

What’s the Best Drupal Managed Hosting Provider? Here Are Your Top 4 Options
You want it to be easy to use, to provide you with as much automated maintenance as possible and... up to 100% uptime. So, what's the best Drupal managed hosting solution for your needs? And, let me guess: your “feature wishlist” is a bit longer actually:   autoscaling capability multi-site support: you want to be able to manage all your Drupal websites from a single dashboard CDN backups and easy restores on a daily basis support for migration Given your list of requirements, what are your best choices here? I've done my research and narrowed down your options to 4. 4 fully managed hosting solutions for Drupal that you should consider first. Here they are:   But First: Why Managed Hosting? What Does It Really Get You? Why would you want to go for a fully managed hosting solution for your Drupal website(s) instead of a... self-managed one? Because:   you gain so much time; time that you'd otherwise invest in setting the Drupal infrastructure yourself, from the ground up you avoid the risk of getting tangled up in software installation, configuration, infrastructure management (which can turn into a time and energy-consuming ordeal even if you have the know-how to set up a scalable VPS on AWS yourself) you avoid the headache of maintaining a whole infrastructure of Drupal sites you get remote administration that covers mundane, regular operations such as module updating   In short: you delegate your managed hosting provider with everything outside the codebase. Why spend time on the ongoing maintenance of your website when you can invest it in... improving it? In growing it?   1. Pantheon Drupal Hosting   Disclaimer: it's the Drupal hosting that we are using here, at OPTASY. But is Pantheon the best solution for your own use case? For your expectations of a hosting platform? It is if it's a simplified, easy to use hosting solution that you need for your Drupal website(s). One that provides you with:   great support solid tooling  almost instant patching great developer experience ease of use with Drupal high availability and scaling intuitive interface, which makes migrating and cloning your Drupal websites so much easier lots of integrations   But let's see precisely what services it provides you with.   Pantheon Drupal's Key Features   php7 Git 24/7 Drupal support  Once-click core updates  Built-in stagging environments: dev, test, live Global CDN Solr Developer dashboard   2. Acquia, One of the Best Drupal Managed Hosting Solutions   Acquia Drupal hosting is another great option to consider when you're trying to figure out which is the best service for you. Why? Because it provides you with:   some of the best tools: both powerful and easy to use enterprise-level security cloud hosting specifically tailored to suit Drupal websites unmatched scalability: Acquia Drupal 8 hosting powers some of the largest Drupal websites in the world    Acquia Drupal Hosting Key Features   Enterprise-grade security and recovery: a whole set of firewall controls and access and authentication controls; Acquia-hosted websites are known to be better equipped to recover from cyber attacks A hosting platform optimized for Drupal exclusively A turnkey solution: the built-in Node.js support enables you to develop your Drupal back-end apps, as well as your server-side rendered front-end apps, on the same hosting platform Robust development tools: APIs, integrations, and command-line tools that help you build and optimize your apps in no time Real-time monitoring, analyzing, and troubleshooting Close to 100% uptime: Drupal hosting Acquia makes the best choice for you if your uptime and performance requirements are way beyond basic Centralized dashboard for all your websites and a unique Drupal codebase Source: acquia.com   3. SiteGround Drupal Hosting Another popular hosting option for Drupal websites is Siteground, a platform robust enough to withstand the challenges of user-heavy, high traffic sites. It's also the most versatile managed hosting solution on this list, for it meets the needs of both small website owners and enterprise and large organizations. But why would you choose if over other Drupal 8 hosting services? SiteGround Drupal 8 Hosting Key Features   Daily backups 1-Click Drupal installation Responsive support from actual Drupal developers by mail, chat, helpdesk ticket Dynamic NGINX caching (available only on some of the hosting plans) Website transfer assistance with zero downtime   4. Cloudways Managed Drupal Cloud Hosting     Cloudways is not just one of your best Drupal managed to host options. It's also one of the most... different. It allows you to choose the cloud hosting provider for your Drupal infrastructure. You're free to go for Amazon AWS or Digital Ocean, Google Cloud or maybe Vultr, you name it. Why cloud hosting? Because it's easier to scale, more cost-effective, and faster.  In short: it's top performance hosting that scales that you get with Cloudways. But there are also other strong reasons why you'd want to choose to host your Drupal website(s) on Cloudways. Cloudways Managed Drupal Hosting Key Features   Composer support  ease of use: just sift through all the different options that it provides you with through an intuitive UI, select the ones that you prefer via quick one-click access, and set up your Drupal website in no time  HTTP/2 support PHP migration support Free migration SSD-Based Drupal Cloud Hosting CloudwaysCDN you get to host multiple Drupal websites on one server you can add more team members and share server access across your entire team  built-in caching options auto-scalable kyup servers: they downscale and upscale, depending on the amount of traffic on your website(s), with zero downtime managed platform: you can spin up servers and deploy your apps in the blink of an eye   Final Word  The key takeaway is that choosing the best hosting services for your Drupal site(s) is crucial. Imagine that you'd buy yourself a Porsche, but you don't afford a... garage for it. Or its maintenance costs. See my point? When you run your website on a performance powerhouse like Drupal, you need to look for a hosting platform that can match such a robust setup. And speaking of keeping your Drupal infrastructure secure and well-maintained, we have an entire team of Drupal experts that you can delegate your time-consuming maintenance tasks to:   updating Drupal modules running security patches as they get released monitoring your website's performance monitoring it for suspicious activities ...   Just drop us a line and let's tailor a Drupal security and maintenance plan to suit your website(s) needs.   Image by kropekk_pl from Pixabay ... Read more
Adriana Cacoveanu / May 28'2020
Drupal 9 Features: From “No New Features” to... 9 New Shiny Things You Can Expect to See in Drupal 9
What new Drupal 9 features can you expect to see on June 3rd, 2020? For, it's a bit confusing, isn't it?   on one hand, you have the “no new features“ statement on the other hand, you get answers like: “the easiest upgrade in a decade”, “newer PHP libraries”, “a brand new admin theme”, and so on   So, are there any new shiny things in Drupal 9 that you can look forward to? Or maybe get worried about... There is one shiny new feature and 8... improvements, from what I've seen. And I've grouped all together in a list. Here it is: 1. The New Shiny Thing: Easy Upgrade from Drupal 8 to Drupal 9 A smooth upgrade experience, this is the only new shiny thing that Drupal 9 ships with. In short, moving to Drupal 9 will be as easy as updating from one minor Drupal 8 version to another. Source: Drupal.org Word of caution: the upgrade path to Drupal 9 is “buttery smooth” if and only if you stick to a “healthy” routine of weeding out old and deprecated code from your current codebase. 2. Drupal 7 and 8 Will Continue to Get Supported Alongside Drupal 9 One of the biggest Drupal 9 vs Drupal 8 (and even Drupal 9 vs Drupal 7) difference is the overlap of security coverage: Till Drupal 9, whenever a new stable version got released, the previous one lost its support. Starting with the 9th version of the CMS, Drupal 7, and Drupal 8 will continue to get community support till November 2021. In other words, Drupal 8, cleaned-up of all deprecated API will continue to work on Drupal 9.  And Drupal 7 will get community support for... 1-1.5 years after Drupal 9 gets released.  One of the unexpected Drupal 9 features. For it disrupts the way that the Drupal community used to approach major versions once they were no longer “the latest” ones. 3. Claro Becomes the Default Administration Theme … once it gets stable. 4. New Drupal 9 Features: CKEditor 5 Gets Implemented ... in a future version of Drupal 9. Security support will drop for CKEditor 4 sometime around Drupal 9's end of life. Therefore, Drupal 9's roadmap includes adding CKEditor 5 to a future version (and eventually removing CKEditor 4 completely in Drupal 10).   5. The Workspace Module Goes from Experimental to Stable Source: Drupal.org How is this good news for you? Let's say that you need to prepare multiple versions of your Drupal site and, depending on certain factors, to push live only one of them. The Workspace module allows you do to precisely that: to replicate content between workspaces on the same Drupal site. And, luckily, the module will be generally available starting with Drupal 9... 6. What's New in Drupal 9? Twig 2 That's right, Drupal 9 comes with support for newer PHP libraries. Support for Twig 2 here included. 7. Drupal 9 Will Be Backward-Compatible with Drupal 8 from Day One What are the new Drupal 9 features? Minor upgrade versions of Drupal 8 will be backward-compatible with Drupal 9. This means that all your Drupal 8 components will work with Drupal 9. This ninth version of Drupal is built on top of Drupal 8, basically.  In other words: no need to panic that your (Drupal 8) website's key features will no longer be valid in Drupal 9. This is going to be the first time that 2 major versions of Drupal are fully compatible.   8. From Symfony 3 to Symfony 4.4 “What's new in Drupal 9?” Symfony 4.4. Since its third version will no longer be supported in November 2021, Symfony 4.4 gets integrated with Drupal 9. All while making sure that Drupal 9 is forward-compatible with Symfony 5, as well...   9. Olivero Becomes Drupal's New Default Theme New Drupal version, new front-end theme. Olivero will come to replace Bartik, the current default theme in Drupal.   Wrap-Up: 5 Drupal 9 Requirements Your Drupal Site Should Meet Now you know which are the predictable, the new and the... shiny new features in Drupal 9. What next? How do you ensure that your Drupal website's Drupal 9-ready? Here are 5 key steps to take for a buttery-smooth upgrade:   Make sure your environment is Drupal 9-compatible: PHP 7.3, MySQL 5.7.8, Drush 10   Update to the latest minor versions of Drupal 8 as soon as they get released: you'll be able to upgrade your website to Drupal 9 only from Drupal 8.8. and Drupal 8.9    Keep your modules up to date: do all your contributed modules run on their latest versions?   Weed out any deprecated API from the custom projects that your website's using   Update core to Drupal 9   Word of caution: if your website (still) runs on Drupal 7, upgrade to Drupal 8.  To sum up, the shortest path to a smooth upgrade to Drupal 9 is sticking to the best practices:   remove all deprecated code (go for an automated tool like drupal-check or Rector to identify deprecations on your website) update your Drupal core and contributed projects to their latest versions   Or, you can leave all the preparations to us. Just drop us a line and we'll evaluate your website's level of... readiness:   Is there any deprecated code still “lingering in there? Does it run on Drupal 7? Are there any outdated versions of PHP or MySQL that it is still using?   Then, we can come up with a plan to get it Drupal 9-ready. Image by Marsel Elia from Pixabay   ... Read more
Adriana Cacoveanu / May 20'2020
Top 10 Drupal Websites in Asia: From The Jakarta Post to... the Mitsui Chemicals
What are the top 10 Drupal websites in Asia?  What famous Asian brands, newspapers, NGOs, key players in various industries, have their websites powered by Drupal? To answer your question, we've done some digging and put together a selection of the best Drupal-based websites in Asia, ranging from the most popular to the most niche ones:   1. Mitsui Chemicals Inc., Japan   Japan's leading chemicals manufacturer runs its multi-site infrastructure on Drupal. Why Drupal?   because of the powerful multi-site and multi-language features that it provides, out of the box because Drupal enables them to store content centrally and then share it, personalized for each country, across their ecosystem of sub-sites: Japan, Germany, China, Singapore   In short: Mitsui Chemicals Inc. needed a robust CMS. One that could withstand its heavy structure of domains and groups of sites and enable them to manage all their content on a single platform. 2. ABS-CBN News and Current Affairs, Philippines The news division of this reputed media corporation in the Philippines —  ABS-CBN — has its website powered by Drupal. And the reasons why they chose this CMS are... pretty obvious:   we're talking about a complex network of various types of content: video, multimedia, story... the website delivers critical news in real-time, so Drupal's feature of processing and publishing data in real-time is critical for them the newspaper has a whole community of online readers built around it, so it depends on Drupal's access control system   A content-heavy, high trafficked website, that updates its content in real-time… Drupal's built precisely for this type of scenarios. And that's why ABS-CBN News and Current Affairs is listed among the top 10 Drupal websites in Asia. 3. The Haribon Foundation, Philippines Now, we couldn't have left out non-profit organizations from our list of popular Drupal websites in Asia, now could we? The Haribon Foundation is a biodiversity conservation organization in the Philippines, that trusted Drupal for turning its website into a user engaging one. One that tells their story right to all the future volunteers, donors, members, and partners. Why Drupal?   because it ships with plenty of built-in functionality, enabling them to get their website up and running in no time because it provides them with a robust taxonomy system, which enables them to categorize and organize their content  because it's scalable: it's built to accommodate all future initiatives, no matter how bold, and all future loads of traffic because it's open-source  because it's easy to use by non-technical users (anyone can create, add, publish, and further edit content)   4. The Beijinger, China A community website with an audience made of English-speaking expats living in Beijing, China. Why did they go with Drupal?   because of the different types of content that they display on their website, ranging from forums to events, to reviews, podcast, blog, directory, photo gallery because a significant part of the content is user-generated, which means that they can get the most of Drupal's user role and permission-based access control system  because they needed a CMS that could grant them the best editorial experience: adding and editing so many types of content, on different sections of the website, had to go... smoothly   5. The Jakarta Post, Indonesia, One of the Top 10 Drupal Websites in Asia The largest English language newspaper in Indonesia, The Jakarta Post is on the list of the key media sites using Drupal. A heavy load of content, that needs to be updated in real-time... these are just 2 of the key factors that turned Drupal into the only CMS suitable for this high trafficked newspaper site.   6. Amman Stock Exchange, Jordan Another one of the top 10 Drupal websites in Asia, due to:   the crucial role that this economic platform plays in the region  the outstanding user experience that it provides, despite the complex technical challenges that it needs to deal with “in the backstage”   Why did they choose Drupal over any other CMS option?   Drupal enabled them to provide their users a mobile-first experience: a seamless user experience was crucial for the Amman Stock exchange website, with users being enabled to view charts, graphs, and tables on the go, from any devices Drupal provides the right tools to “empower the end-user”: users can set up and easily manage their own portfolios on the website, set filters for the content that they receive, personalize their notifications, etc. Drupal's robust enough to withstand high spikes of traffic Drupal integrates seamlessly with their ecosystem of third-party systems, that provide the Amman Stock Exchange users with market and financial information Drupal is multi-lingual right out of the box: Amman Stock Exchange could provide a personalized experience to business owners and investors from all over the world   7. Pacific Aikido, Japan The Aikido dojo, which been teaching its classes in and around Tokyo since 1991, has its website powered by Drupal. And it's no surprise to anyone why they chose it:   Drupal makes it plain easy for the end-users to manage their own content: students and parents can log in and engage in conversations with the site owner, while the latter can upload and update content quick and easy Drupal's conveniently extensible: it enabled the team working on this project to implement the Image API and thus enable the site owner to upload his/her own images nice and easy   Images that get resized automatically, by default, once published on the website... The website's both a public-facing site and an easy to use private back-end, where students and parents can communicate with the site owner. 8. Playtika, Israel We can't put together a list of the most popular Drupal websites in Asia and not include Playtika, the leading gaming company based in Tel Aviv, Israel. Since Drupal ships with a whole collection of responsive tools and responsive themes, it made it a lot smoother for their UI and UX design to look great on both their web and mobile websites. 9. Al Bawaba, Jordan This independent digital news, blogging, and media platform — the largest one in the Middle East — is on all the “Top 10 Drupal websites” selections. Why did they decide to build their digital presence with Drupal?   because they have a large, diverse, and expanding content team — different types of editors, researchers, journalists, publishers — so they decided to leverage Drupal's system of user roles and its flexible content workflow because they depended on Drupal's powerful SEO features because they were facing increasingly high volumes of content (multimedia content here included) and Drupal's built with content-packed websites in mind   An efficient digital media assets solution and a conveniently scalable CMS were critical for this content producer and distributor in the Middle East. So, Drupal was the only CMS framework that checked all the requirements off their list.   10. Taiwan Environmental Information Center     Another NGO — the “product” of a larger non-profit and non-governmental organization: Taiwan Environmental Information Association —that's earned its place among the best Drupal websites in Asia. Their website stands out as an extensive network of environment-related information: editorials, green events, feature articles, news... Now, the reasons why they trusted Drupal with their digital presence are clear to anyone:   it's open-source it empowers the content team to add, edit, and publish content (multiple types of content) on the fly it's extensible and conveniently scalable it's non-technical user-friendly   The END! This is how our list of “top 10 Drupal websites in Asia looks like”. What other websites would you have added?Image by Lizbet Palmer from Pixabay   ... Read more
Adriana Cacoveanu / Apr 21'2020