In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, 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

Drupal Commerce vs. Magento - Who Wins the Battle for eCommerce?
  In 2021, it is expected that about 27.2% of the world population will shop online at least once.  A lot of potential customers out there, right? As eCommerce is becoming the new norm, digital businesses seek out ways to thrive in this competitive landscape and position themselves as leading trend-setters.  To do that, companies need to realize the power of digital transformation and how they can embrace it in order to support the modern demands of speed and accessibility that customers require today.  This starts with leveraging the right tools for building robust digital assets. One of these tools is represented by eCommerce platforms, which are getting increasingly popular for businesses that seek to deploy an eCommerce system.  Drupal Commerce and Magento are two of the leading eCommerce solutions on the market and are often seen as direct competitors in the industry.  This article provides a side-by-side comparison of these two platforms in regards to technical capabilities, development, costs, scalability, security, and mobile responsiveness. Hopefully, this information will help you narrow down your choice in order to ensure that you choose the best fit for your business needs.    Key eCommerce Capabilities Enabled by Drupal and Magento Drupal Commerce was released in 2011 and offers an open-source application framework that supports retailers in building and managing inventory, track orders, or handle payments.  Magento's initial release was in 2008. This PHP-based eCommerce site provides high levels of PayPal protocol integration and supports 12 worldwide payment gateways.  Both platforms offer, through native features or third-party add-ons, the following benefits: Intuitive, easy-to-use user interface and control panels. No technical knowledge is required to customize and edit basic features. Full-featured CMS that supports social sharing. Business-centric structure for online stores. Native integration of inventory-driven advertising material Integration capabilities with third-party analytics, invoicing, or quoting solutions One thing to keep in mind is that neither of these eCommerce platforms is a "plug and play" solution and making the most out of their potential may require further expertise.    Headless eCommerce The headless version of Drupal Commerce has been in the spotlight in the last few years. This new initiative is an eCommerce solution that stores and delivers content without a front-end delivery layer. It's an API-driven implementation that transforms eCommerce functionality, making it available across a wide range of potential host environments.  A headless eCommerce model inclines towards a more SaaS-oriented, platform-agnostic solution that allows for better employee adoption and considerable time savings across IT departments.  When it comes to Magento, the open-source eCommerce platform, headless eCommerce is equally prioritized. Both Drupal Commerce and Magento are supporting headless models as the future of eCommerce.    Pricing Drupal eCommerce's technical cost of entry is free. However, depending on scope and scale, the costs of developing and maintaining performant and secure eCommerce servers might reach tens of thousands of dollars.  Drupal Commerce project costs are directly proportional with a business needs for specific development architecture, module integrations, custom theme styling, or particular feature integrations.  Magento's newer modules are not offered as open-source and upgrading from Magento Open Source to Magento Commerce might be challenging.  From this financial point of view, Drupal Commerce seems to be a clear winner.    Scalability Drupal Commerce has relevant capabilities of staying highly performant at scale. However, this CMS platform does not provide out-of-the-box database sharding and it can only be implemented on a third-party basis.  Drupal Commerce has lower requirements than Magento Commerce when it comes to the web server—the minimum required RAM for PHP is 64 MB and production systems usually require 128 or 256 MB.  Drupal Commerce-based implementation splits the eCommerce experience across three related Drupal domains. As a result, scaling is better, bottlenecks are eliminated, and the content and purchasing experiences are efficiently separated.  On the other hand, Magento's cloud hosting solves a large number of scalability issues, although at a higher price. The minimum RAM requirement of 2 GB will probably not scale well and distributed networks or caching may need to be deployed with greater care to keep up with the heavy load.    Security Drupal is proven to be the most secure CMS and Magento's infection rate is much higher than Drupal's. From the point of view of security, Drupal Commerce is a winner for businesses that want to prioritize secure platforms.  Source: Sucuri.net   Mobile Responsiveness As most websites transition to a mobile-first approach, eCommerce platforms that prioritize mobile responsiveness are a must.  Fortunately, both Magento Commerce and Drupal Commerce provide robust mobile capabilities to satisfy the need for accessibility and performance.  Drupal Commerce's themes allow building a fully responsive design for eCommerce websites and offer screen flexibility for creating versatile experiences. The most popular themes like Corolla or eStore provide: Multi-level responsive header menus Custom layouts and color options Box shadow and background textures Custom field additions Magento Commerce is close to Drupal when it comes to mobile optimization capabilities. Its responsive web design features help users create optimal viewing experiences for multiple devices. Magento Blank or Luma are out-of-the-box themes that deliver a fully responsive design.   Who's the winner for eCommerce? While both Drupal Commerce and Magento Commerce are reliable options for a digital company that wants to thrive in the eCommerce market, every business has its own unique needs and requirements. Choosing the software that best supports these needs is a process that involves a lot of research and planning.  If you want to speed up this process and ensure that you reach the right decision, don't hesitate to contact Optasy for professional advice and support.  Discover which platform is most suited to provide a robust eCommerce experience for you and your customers.  Photo credit: Mark Konig on Unsplash.   ... Read more
Raluca Olariu / Apr 06'2021
Drupal DevOps Best Practices for 2021
  Today, businesses interact with their customers in many forms of digital services on all kinds of devices. As the digital world is more and more present in our lives, delivering streamlined experiences at the tip of your customers' fingers is the key to success.  A vital role in delivering rapid, accessible IT services is played by DevOps, a set of practices that brings software development and IT operations together. And when it comes to Drupal web development, DevOps represents a valuable instrument that can maximize the potential of Drupal-delivered projects.    How does DevOps work and what benefits does a DevOps model deliver? DevOps, the culture that encompasses most digital businesses today, uses automation and advanced tech stacks to add a new layer of velocity to a company's infrastructure. “DevOps represents a change in IT culture, focusing on rapid IT service delivery through the adoption of agile, lean practices in the context of a system-oriented approach. DevOps emphasizes people (and culture) and seeks to improve collaboration between operations and development teams. DevOps implementations utilize technology — especially automation tools that can leverage an increasingly programmable and dynamic infrastructure from a life cycle perspective”. - Gartner, Inc. Businesses that incorporate a DevOps model into their workflows see benefits like:   Scalability. Fundamental processes like infrastructure and development are operated at scale, which allows for a more efficient approach to developing, testing, and producing environments in a repeatable and streamlined way. Faster and more reliable delivery. The modern customer's need for speed is real, and DevOps can support organizations in their quest to speeding up feature releases, bug fixes, and other types of upgrades. Continuous integration and delivery are two critical practices that can automate the release process. High velocity. Adopting an efficient DevOps model allows professionals to build digital innovations faster and keep up with the trends imposed by ever-changing markets. Security. When adopting DevOps, you don't have to compromise on safety as DevOps models provide automated compliance policies and configuration management mechanisms.   DevOps best practices To make the most out of DevOps, there are some key practices to follow when implementing your model:   Leverage microservices architecture, which allows breaking down large systems into more specific, independent projects. As a result, developers and architects have more flexibility over managing these projects, and applications are more pliable and allow faster innovation. Install minor updates on a regular basis to solve issues and fix bugs quicker. The DevOps model aids companies in deploying updates more often and constantly optimizing their ongoing processes. Use continuous integration and continuous delivery to overcome operational challenges in complex development workflows.  Don't forget about infrastructure as a code, as automating your infrastructure provides better computing resources and higher responsiveness to possible alterations.    DevOps for Drupal development Implementing a DevOps model into your Drupal development workflow will not only accelerate your development cycle and delivery but will also contribute to better user experiences and business outcomes.  As more companies are adopting DevOps models (according to a recent report, 60% of businesses are using or are considering DevOps for their organization), it is expected that DevOps will gradually become even more essential for any digital business. With this growth will come better opportunities for building future-ready Drupal deployments and web experiences suited for the modern customer’s complex needs.    Wrapping Up DevOps continues to grow in new industries, opening possibilities for enhancing security, product monitoring, development, and cluster computing. As it will become the new norm, DevOps will continue to integrate more departments, improve solutions and designs.  As we've seen, DevOps models can also support a Drupal development team that focuses on improving project timelines and delivery. Optasy is the right partner for fostering digital innovation and can help you create customized Drupal digital experiences.  What do you need support with?  Photo credit: PCB-Tech on Pixabay.   ... Read more
Raluca Olariu / Apr 02'2021
Tips and Tricks for Building Drupal Websites
  "A successful website does three things: It attracts the right kind of visitors It guides them to the main services or products you offer It collects contact details for future ongoing relation." - Mohamed Saad   When embarking on the quest to building successful websites, developers and website builders face various challenges such as: Crafting the site without coding Designing a good structure and making it appealing to visitors Adding specific modules and features Fixing bugs and disrupted features Connecting your brand new website to services like Google Analytics   Sailing through the rough waters of web development can be tricky at times. However, you shouldn't be discouraged. There are plenty of tools and techniques that can help you navigate website creation more skillfully, and this article will guide you through leveraging some of them. More specifically, we'll focus on Drupal web development and outline some essential tips for crafting more successful Drupal websites.  What types of websites can you create with Drupal? If your new to using this CMS, then you might be asking what Drupal can do for you. Well, Drupal is an excellent choice for almost any type of project: Personal or business websites E-commerce sites Blogs, portfolio, art, social networking websites Forums and news sites, etc. As you can see, Drupal is a versatile software that can address a wide range of needs and requirements. You only have to know how to use it to your advantage.  Keep reading and get more familiar with the world of Drupal web development.   3 Elements to Consider When You Start   1. Drupal modules. From managing user accounts to organizing basic content, Drupal offers a wide range of functional modules. It's important to remember that Drupal is known for its fantastic customization capabilities. Take advantage of the suitable modules to build personalized sites that match the needs of your visitors.    "Optimizing for impact means creating software that works for everyone. In recent years, our community has prioritized accessibility for users with disabilities, and features like lazy loading of images that help users with slower internet connections. Drupal's priority is to continue to foster diversity and inclusion within our community so all voices are represented in building an Open Web." - Dries Buytaert, founder of Drupal.   2. Web hosting allows all your site content to be seen anywhere at any time. There are some key factors to consider when choosing your web hosting service:               - loading speed: consider a host that loads faster than the current average, 850 ms.               - uptime score: look for hosts that provide high uptime scores, preferably above 99.5%.              - customer support: collaborate with a host that provides high-quality, responsive, and reliable support.              - cost: choose a host that you can afford and count on for reliability and professionalism.   3. Environment. Drupal web development is a complex process that requires focusing on functionality, appearance, or code integrity. Many elements contribute to successful side building and the environment that revolves around your Drupal project is one of them. Good environments can foster growth and are usually dependant on the following factors:                - How big the project is. This allows you to plan more efficiently, especially when dealing with multi-project environments.                  - The size of your company. This is related to the growth of your business and is underpinned by elements like discipline, culture, management, knowledge, etc.                - How skillful your team is. Having a highly experienced team that is reliable and efficient is essential when it comes to the environment.    How to maintain your Drupal website   Proper website maintenance can be challenging. Here are some aspects to pay attention to. Status report This is a feature provided by Drupal that monitors your site's health. It checks folder permissions, disruptive modules, or libraries. The Status Report feature also helps with debugging technical support issues, providing excellent support for your maintenance practices.  Cron  This is an automated task that your Drupal website runs on periodically. It performs scheduled duties like cache clearing, sending emails, or reminders, and it doesn't involve any manual intervention. This tool also performs routine maintenance for the System Module and checks for available updates.  Caching In Drupal web development, there are two modules for caching: The Internal Dynamic Page Cache Module that aims to accelerate site speed. The Internal Page Cache Module which caches pages for anonymous users in the database.  Deployment Drupal deployment allows users to move content from one Drupal site to another. More precisely, when editing your Drupal site, it is helpful to use different environments to modify or test your content without harming the live site's performance. The changes are then deployed through an automated process.    When it comes to Drupal website maintenance, it often saves a lot of resources to hire a Drupal agency to do it for you.  Optasy can help you navigate the sea of challenges that come with your Drupal project. Be it your digital strategy, web design project, or maintenance services, count on us and leave your worries behind! Photo credit: Sam Dan Truong on Unsplash.  ... Read more
Raluca Olariu / Mar 23'2021