Drupal 10.0 CMS in 2023

We review the latest update of the full grown-up CMS platform - Drupal 10

Is it the right choice in 2023?

Six months after the premiere of 10.0 we take a deep look into the new features and how are they useful for a corporate-level digital product. 

It has been nearly half a year since the highly anticipated release of Drupal 10, and it has undoubtedly exceeded the expectations of the community. On December 14th, 2022, Drupal 10 was launched, presenting a wide array of new features and enhancements. In this blog post, we will delve into these features and give a quick overview of what they have to offer.

The questions to answer when we talk about the latest instance of Drupal - at least from the perspective of the corporate CMS needs are:

• Is Drupal 10 a good choice for a new corporate-level digital platform in 2023?
• Can Drupal be used in large-scale systems with the new philosophy of a Headless approach to building a digital platform?
• How good is Drupal CMS as an API-first backend data management system that you connect with the headless front? 
• Are the new  Drupal 10 features a breakhru or are they just the evolution of the old system we all know very well?
• What is next? What is the roadmap for the next updates?

A short introduction to those who are not familiar with a Drupal ecosystem. Drupal has been the preferred CMS for both small organizations and large-scale corporations. Renowned brands such as Google, Disney, Nike, and FedEx have chosen Drupal as their content management system. It comes as no surprise that large corporations and governmental entities trust this platform. Even after more than two decades since its initial release, Drupal continues to maintain its position as one of the leading CMS options and is considered to be a mature and stable product that is known for its security, flexibility, and user-friendly content editing capabilities. If you are curious to find out why Drupal is known as the most secure CMS available in the market, we invite you to read our blog post about it which precisely addresses this topic. 

Pure facts, Drupal stats.

When we examine the usage statistics of Drupal, it becomes evident that it stands as one of the most widely adopted solutions in the market. Currently, over 800 000 sites have been reported to be using a given version of Drupal. And as the platform continues to evolve, we expect a continual increase in these figures.

Image

source: Drupal

Taking a closer look at those stats we can see that despite the release of Drupal 10 being relatively recent it has garnered an impressive number of downloads. The 10.0.x version has been downloaded a remarkable 28,903 times, while the 10.1.x version has seen 4,311 downloads. This is a staggering amount for such a short period of time. It piques our curiosity as to how these numbers will further escalate as time progresses.

Image

If those statistics aren't enough to persuade you to use this platform we have another blog post listing many other reasons why Drupal is the right solution for your business. Without any further ado, let's now go over the key features that came with the release of Drupal 10!

Drupal 10 - What are the new features?

In one sentence - it’s a mixture of long-awaited updates and smaller ones that have already been available in beta mode for quite some time.  An example of a very visible change is the Olivero theme - useful for a rapid start of projects that need to go live fast. On the other hand, we have up-to-date PHP 8.1 and Symfony updates which might not flash at first glance but they are important in terms of security and performance. 

List of changes and more about each below. 

• Enhanced content editing experience with CKEditor5
• Claro Administration Theme for a better editorial experience
• Olivero - a sleek and accessible new default theme
• The transition from Symfony 4 to Symfony 6.2
• Modern JS Components instead of jQuery U
• Starterkit theme

Enhanced content editing experience with CKEditor5

We shall start with one of the most significant changes which is the upgrade from CKEditor4 to CkEdtior5. CKEditor4 will be deprecated by the end of this year so the integration of CKEditor5 was a very important update. This latest version of CKEditor has been completely rebuilt leading to some substantial changes. Let's take a closer look at what exciting new features it brings to the table.

New UI Design

One noteworthy aspect worth highlighting is the refreshed interface design which is more modern and minimalistic. The interface colours, theme, icons, and toolbar items mechanics have been improved and lead to a better user experience when using this module in Drupal.

Image

source: CKEditor website

A dedicated toolbar for media widgets

An additional feature that also improves the user experience is the introduction of dedicated balloon toolbars for media widgets. These toolbars provide convenient and quick access to editing options for various embedded media files. 

Image

source: CKEditor website

A dedicated dropdown for tables

For a quick and hassle-free way of making adjustments to tables, the new version of CKEditor introduced a dedicated dropdown. It gives you access to all of the necessary toolbar options for inserting and styling your tables.

Image

source: CKEditor website

A balloon panel for links

Similar to the media widgets, links now have an attached balloon panel, offering editors a convenient way to quickly view and manage the link URLs.

Image

source: CKEditor website

An improved styles dropdown

The styles dropdown has been revamped and allows you to preview the appearance of available styles. 

Image

source: CKEditor website

Document lists

The document lists were improved to provide the best possible UX while still considering the many different interaction scenarios when handling nested list items and list items with multiple blocks.

Claro Administration Theme for a better editorial experience

Image

source: Drupal

The transition to CKEditor5 brings a delightful experience for content editors, marking the end of a successful 10-year run for CKEditor4, which can now retire happily. However, the improvements in content handling don't end there! Moderators and content managers can enjoy enhanced usability on the backend thanks to the replacement of the outdated Seven theme with a new one - Claro. Just like the changes in CKEditor, the new administration theme boasts a more modern look and feel to it. While maintaining the core of the Drupal CMS, the refreshed interface offers enhanced user-friendliness and achieved a higher level of accessibility, complying with level AA in the WCAG guidelines.

Olivero - a sleek and accessible new default theme

We can say goodbye to Bartik as Olivero takes the stage as the new default front-end theme. Named after Rachel Olivero (a Drupal contributor and accessibility expert) this theme was designed to be more sleek and minimalistic and, just like the Claro theme, is WCAG AA compliant. Unlike its predecessor, Olivero is optimized to seamlessly integrate with features like the Layout Builder and offers extensive customization options.  Some of the design features worth pointing out are:

• High-contrast color palette - Olivero introduces a fresh high-contrast color palette, with bright blue and neutral greys taking the spotlight. This combination ensures visual appeal while prioritizing readability.
• Readable typography - the typography in Olivero is carefully designed and scaled to provide optimal readability across various devices.
• Elegant and simple forms and buttons
• Breadcrumbs
• Sidebar
• Accessible headers and navigation -  the header can collapse into a hamburger menu when scrolling. This means users can access the menu no matter the page length.

Image

Image

source: Olivero Theme Demonstration

Although many companies opt for building their own layouts, Olivero is highly customizable and allows site builders to change the colors, layout, and typography to align with their brand identity. Using this theme as a base allows you to quickly create professional-looking websites with stunning interfaces. Moreover, Olivero's responsive design ensures that the site automatically adjusts to different screen sizes, guaranteeing a visually appealing appearance across all devices.

Visit this website to try out the Olivero theme yourself if you're interested.

Modern JS Components instead of jQuery UI

In the past, Drupal relied on the jQuery library to implement functions that were unsupported by browsers. However, with the significant advancements made in JavaScript, modern browsers have greatly improved their capabilities. As a result, the usage of jQuery is no longer needed in some cases. This has enabled the removal of specific parts of the jQuery library, leading to faster loading times for Drupal websites.

The transition from Symfony 4 to Symfony 6.2 for enhanced performance and security

Drupal has upgraded from Symfony 4 to Symfony 6.2. With the support for Symfony 4 coming to an end in November 2023, this upgrade was essential to ensure robust security measures. Furthermore, Drupal 10 now operates on PHP 8.1, benefitting from the feature upgrades introduced in the latest PHP version. Thanks to these updates we can enjoy enhanced site performance, improved support, and a better experience for both developers and non-technical users. 

Image

Starterkit theme - a new approach to theme-building

For more than ten years, Drupal has been offering subtheming capabilities. However, the approach has changed and now it is possible to easily generate a theme with basic files and use it as a starting point for your custom theme. This makes it easier to monitor and apply changes and ensure site stability.

In Drupal 8 or 9 the way you would usually get started with creating a theme is by using a contributed or core theme (such as Classy) and inheriting all of its resources (this is the process of subtheming) and using the available markup to build your site. This worked well but it made you dependent on the base theme and limited your ability to change parts of it. 

To solve this problem, Drupal introduced the Starterkit Theme, as a replacement for Classy. The Starterkit Theme will no longer serve as a base but will be copied to the new theme. It will allow developers to generate a theme and use it as a starting point.

Image

source: Drupal

Decoupled menus

Decoupled Menus offer an excellent solution for JavaScript frontends to use configurable menus controlled within Drupal. Thanks to this, front-end developers can easily retrieve menu data and render navigation components, eliminating the need for hardcoded menus. This also means that sites using front-end frameworks such as React or Angular will be easier to edit and won’t require support from developers for small changes and managing application menus.

The future for Drupal? - Secure backend CMS and Headless frontend of any choice. 

In the current digital landscape, headless (or decoupled) websites have gained significant popularity as organizations increasingly adopt this innovative approach for their projects. And leveraging Headless Drupal paired with initiatives like Next.js can give us the possibility to create high-performing and exceptionally fast web applications. But first things first: What exactly is a headless CMS? To grasp this concept fully, we must compare it to the traditional CMS.

A traditional CMS manages both the back-end (content) and the front-end (content presentation). On the other hand, a headless CMS operates without a "head" and focuses solely on content management. Content is stored in a dedicated repository and published through an API (Application Programming Interface). What makes this approach advantageous? Well, a headless CMS doesn't dictate how your content should be presented, providing you with unparalleled flexibility. You can display your content across multiple channels, such as different websites or apps, using diverse technologies. Moreover, if you make any changes to the content in the repository it will update on all of those channels. For further exploration of Headless Drupal feel free to read our dedicated blog post about it.

When to choose headless CMS? Why it’s important and why everything is more complex than it used to be 🙂  

Drupal is an open-source CMS and its traditional version is a full-stack (frontend+backend) solution providing the possibility to create, store, and display content. Undoubtedly, this approach proves to be a valuable solution and has been a standard for the last two decades. But this approach over the years has also become a burden. Drupal twig system which is responsible for a frontend in Drupal sites is not the first choice for developers these days and has quite a steep learning curve. Java Script has become the most popular web language and this had quite big implications for monolith platforms such as Drupal, WordPress, Joomla, Typo3, and others. The open question for any large-scale project today is not only what platform it will be built on but also what will be the approach to frontend development. It's not an easy question to answer - much depends on the resources available, performance requirements, and the need for out-of-the-box plugins which in headless might not work as planned. All in all - the race for the best API-first headless CMS has started and Drupal is in it.  

  What are the benefits of Headless Drupal? 
 

• Central management of content - with a single version of content that caters to all channels, managing a multi-site brand platform becomes remarkably effortless and streamlined. 
• Freedom of creating a more customized front-end and using technology best suited to the requirements of a specific project.
• Enhanced user experience - this advantage ties into the previously mentioned points. With the freedom to create custom front-ends, developers can tailor mobile apps or websites to the specific requirements of different users, all while leveraging the same content stored in Drupal. This level of flexibility ensures that each user enjoys a personalized and optimized experience.
• Efficiency and scalability - compared to a traditional CMS, a headless CMS demands less computing power as the front-end and back-end layers are separate. Consequently, hosting the website becomes more efficient, and the overall project gains enhanced flexibility and scalability. This makes headless CMS an ideal solution for enterprise websites, where efficiency and scalability are paramount.

Headless Drupal + Next.js - a match made in heaven

The abundance of available technologies, including React, Next.js, Gatsby, or Angular, can make it challenging to determine the ideal option.  All of them have their own set of advantages and disadvantages, and your decision should heavily rely on the desired outcome and the specific requirements that must be fulfilled.  

At Dikrektpoint, our preferred choice is Next.js. This widely used React framework offers a range of features that make it an excellent option for headless Drupal projects. Some notable features of the Next module (Developed and maintained by Chapterthree) include:

• Multi-site preview
• Iframe preview
• Support for Incremental Static Regeneration
• Support for revision previews, draft content, and content moderation
• Compatibility with JSON:API Menu Items and JSON:API Views
• Extensibility through plugins

By integrating the robust capabilities of Drupal with the advanced functionality of Next.js, you can achieve a powerful front-end experience. This combination not only elevates your website but also streamlines the workflow for developers and content editors.

You don't have to sacrifice your editing features with Next-Drupal. It fully supports essential functionalities like menu items, views, revision previews, translations, search, draft content, and content moderation. This is excellent news for content editors as it ensures a seamless editing experience. Additionally, it offers the advantage of instant previewing of your Next.js site during the editing process. This means that content editors can immediately see their work as soon as it's published without having to wait for 5 or 10 minutes.

If you happen to be a developer, Next-Drupal brings positive changes that you'll also appreciate. You can say goodbye to the bulky twig template engines and the overwhelming number of modules. However, you can still enjoy the familiar aspects you're accustomed to, as it allows you to construct custom content architecture schemas using Drupal fields.

Moreover, the Next module seamlessly integrates with the login system, as well as Roles and Permissions. This gives you the ability to offer gated content on your front-end using the Drupal login system.

And one more feature worth mentioning is the ability to host multiple websites within a single Drupal installation. There are no limitations on the number of Next.js front-ends you can create - and this includes digital displays beyond the traditional browser.

As you can see - this combination offers the best of both worlds. It retains Drupal's content management features while incorporating valuable Next.js functionalities that improve your front-end.

Curious to explore our projects built using this powerful combination? Well, one of them is actually the website you're currently on! We have used the Next Module for two projects so far: direktpoint.com and Pediatric Mental Health Institute sensosenso.pl, with more exciting endeavors to come in the future! If you're interested in building a similar project or are considering it but have uncertainties, please don't hesitate to contact us. We'll do our best to provide you with the answers to your questions.

Conclusion

Undoubtedly, the latest version of Drupal has brought significant enhancements to platform design, content management, accessibility, and performance. As a site owner, you don't want to miss out on these improvements! So be sure to upgrade to this version of Drupal as soon as you can. If you require any assistance with the migration or upgrade process, feel free to reach out to us. We are experienced in ensuring a smooth and seamless transition.

It's time to answer the questions from the begging of the article

Is Drupal 10 a good choice for a new corporate-level digital platform in 2023?

Yes. When you are about the build a corporate-level website, with multidomain features, language versions, API integrations, and a large group of editors/roles - this is where D10 will really shine - like never again. It’s mature, it finally looks good out of the box, it's secure and up to date on the code base level

But when you want to build a quick, plugin-based platform with no need to have full control of the code and flow of particular functionalities  - then WordPress will be the better solution. 

Can Drupal be used in large-scale systems with the new philosophy of a Headless approach to building a digital platform?

Yes, although it's in the shadow of the rising stars of the headless scene - Drupal has a very solid API first offer and good integration with .js frameworks.

Are the new  Drupal 10 features a breakhru or are they just the evolution of the old system we all know very well?

We find them as an evolution. Good, needed, but most of the features were known for quite a time now - so there were no surprises.

Just for kicks - we thought of one change that could really make a real difference in the Drupal community. We believe it’s the commercialization of the modules. This would create a completely different level of interest among developers who could monetize their skills. New modules, a new young generation of developers (Drupal community is rather old…), up-to-date modules, in one word -> revolution. 

What is next?

The impending release of Drupal 10.1 should serve as even greater motivation for upgrading. Exciting initiatives such as the Project Browser and Automatic Updates are on the horizon, which will significantly improve the implementation, maintenance, and security of the platform.

These enhancements will further solidify Drupal's reputation as a secure, user-friendly, reliable, and flexible platform, reinforcing its position as one of the leading open-source content management systems. And since we’re already on this subject - just a quick heads up - in an upcoming blog post, we will be discussing some of the anticipated features that we can look forward to in Drupal 10.1. 

If this talk of Drupal technology has caught your attention you may want to check out our Drupal 10 starterkit which includes all of the necessary modules and tools to get you started with your project!