According to research, around 2 billion websites run on Drupal globally. Such a massive appeal has made Drupal the leading content management system (CMS) worldwide. It has captivated the hearts of eminent enterprises with its 42,650 modules and 2,900 themes. As a Drupal Web development company, you can leverage Drupal's top-notch security features to provide your clients with unparalleled cybersecurity. Over the years, the crucible of cutting-edge advancements has forged Drupal’s features to make it unmatchable. It doesn’t matter whether it is a basic website or a content-heavy website, Drupal is packed with capabilities to handle them all.
Artificial intelligence is a highly potent technology that has revolutionized the world. As AI continues to gain traction, it's only natural that content management systems (CMS) like Drupal will integrate with this technology. CMS like Drupal can leverage AI-powered tools to provide more personalized content. AI is serving as an empowering center for smart data-driven decision-making, automation, enhancing customer experience, minimizing human errors, and analyzing upcoming trends. If we look into the current state of affairs, artificial intelligence is slithering into the world of content management as well. Experts believe that the future of AI is that it will get so deeply embedded into content management that everything will be driven by it.
As a Drupal site administrator, you may notice in the website logs that there might be a large number of repeated log messages along the lines of "An illegal choice has been detected. Please contact the site administrator." We recently had this problem on a Drupal site that was upgraded from Drupal 7 to Drupal 9 which featured a product search that was built using Views.
Due to slight differences in the way in which the view and facets were built in the Drupal 9 site, this resulted in slightly different URLs being used when the user would filter the search results. For a standard site user who would be interacting with the form elements to filter the view, this was not a problem. However, search engines that had indexed these older URLs from the Drupal 7 site were still trying to crawl the search page regularly, with (what are now) invalid query string parameters.
At the times when the search engines were crawling these pages, this would result in hundreds if not thousands of log messages being logged. Although not anything that would directly impact the users of the site, it’s not ideal to have so many log messages polluting the site logs. Having so many log messages makes it harder to track down and find actual more pressing issues that may need to be addressed.
It makes sense to try and eliminate the cause of this issue and stop so many error messages from being logged. This can be easily accomplished by the following snippet of code which uses hook_views_pre_build().
use Drupal\views\ViewExecutable;
/**
* Implements hook_views_pre_build().
*/
function my_module_views_pre_build(ViewExecutable $view) {
if ($view->id() === 'my_view_name') {
/** @var \Symfony\Component\HttpFoundation\Request $request */
$request = $view->getRequest();
/** @var \Drupal\Core\Http\InputBag $query */
$query = $request->query;
if ($sort_by = $query->get('sort_by')) {
// Compare to the list of allowed values to see if it's valid.
// If it's not, then remove the sort_by from the query completely.
$view_sorts = $view->sort;
if (!isset($view_sorts[$sort_by])) {
$query->remove('sort_by');
}
}
}
}
Let's quickly break down the code example above. For a custom module named my_module, we are implementing the hook_views_pre_build hook inside of the my_module.module file. We then check the view ID of our view to see if it’s the one we are trying to target and then get the HTTP request object from the view, checking the query string values of the request.
The query string value we are interested in (which was causing the error messages) is named sort_by. We get the list of allowed sort values from the view and then compare this to the value in the query string. If the value trying to be used isn’t a valid value for our view, we then unset this from the query.
Of course, if you were looking to target a particular display of the view and not all of them then you’d need to add some additional logic to check the current_display of the view. For example, change the line:
if ($view->id() === 'my_view_name') {
to if ($view->id() === 'my_view_name' && $view->current_display === 'page_1') {
which will restrict the code block to only run for the page_1 display.
Did you know that eminent news and media networks such as Al Jazeera, The Economist, the Walt Disney Company, CBS, Time Inc., and Viacom rely on Drupal 9 to support their magnificent websites? The right Drupal 9 theme can help you create an engaging and functional media and publishing websites that stands out in a competitive landscape. If you also run a media and publishing company, this revelation might leave you startled. You may begin to ponder why the top players in the media industry are so invested in Drupal.
Drupal is an open-source content management system that powers millions of websites around the world. It is known for its flexibility, scalability, and security. Drupal is used by organizations of all sizes, from small businesses to large enterprises and government agencies.
A large amount of our time during the Drupal 10 readiness effort was around semantic version discussions. Folks were creating new major versions to add Drupal 10 support while dropping Drupal 9 simultaneously. Technically that follows the semantic versioning guidelines but is a horrible user experience. Users must update the module when they upgrade Drupal core to Drupal 10. Ideally, users could update their modules first and then upgrade Drupal core.
This blog post is taken from part of my talk "Lessons learned from helping port the top contrib projects to Drupal 10." It is also inspired by my coworker Jakob Perry's blog post, "Don’t go making major version changes."
Introduction
CKEditor 5 was introduced in Drupal 9.3 and is now the default WYSIWYG editor in Drupal 10. It’s no mere update on its predecessor – in fact, CKEditor 5 was written completely from scratch.
The good news is that Drupal 10 users get a completely overhauled content editing experience. CKEditor 5’s features include a vastly improved user interface and premium collaboration tools.
But there’s some groundwork to be done first. Due to their considerable differences, you can’t simply reuse CKEditor 4 code with CKEditor 5.
Some third-party plugins have already been ported to CKEditor 5. But their implementation is different and you’ll need to rewrite any custom code you developed for CKEditor 4.
Our developers at Evolving Web created this guide to make the implementation process easier for you. We’ve used the plugin ckeditor5-anchor as an example. Below, you’ll find step-by-step instructions with code for integrating the anchor plugin with Drupal.
Code ExamplesThe ckeditor5_dev module is shipped with a handy starting template. This is based on the Block Widget plugin from the CKEditor 5 documentation: Implementing a block widget.
Also check out this list of contrib modules that provide CKEditor 5 plugins, such as ckeditor_accordion.
Step 1: Create a Custom ModuleLet’s name the module ckeditor5_anchor. The module should not contain any PHP code. Aside from the info.yml file, the module will include the following.
ckeditor5_anchor_anchor:
ckeditor5:
plugins:
- anchor.Anchor
drupal:
label: CKEditor5 Anchor
library: ckeditor5_anchor/anchor
admin_library: ckeditor5_anchor/anchor.admin
toolbar_items:
Anchor:
label: Anchor
elements:
- Note that library is the plugin code itself. In our case, admin_library is CSS to be applied on the text format configuration page. CKEditor provides more details about the file structure.
anchor:
remote: https://github.com/bvedad/ckeditor5-anchor
version: "1.0.0"
license:
name: GNU-GPL-2.0-or-later
url: https://github.com/ckeditor/ckeditor5/blob/master/LICENSE.md
gpl-compatible: true
js:
js/build/anchor.js: { preprocess: false, minified: true }
css:
theme:
css/anchoractions.css: { }
css/anchor.css: { }
css/anchorform.css: { }
css/anchorimage.css: { }
dependencies:
- core/ckeditor5
anchor.admin:
css:
theme:
css/anchor.admin.css: { }The anchor library contains:
Copy it from the CKEditor 5 plugin starter template.
{
"name": "drupal-ckeditor5-anchor",
"version": "1.0.0",
"description": "Drupal CKEditor5 Anchor plugin",
"author": "",
"license": "GPL-2.0-or-later",
"scripts": {
"watch": "webpack --mode development --watch",
"build": "webpack"
},
"devDependencies": {
"@ckeditor/ckeditor5-dev-utils": "^30.0.0",
"ckeditor5": "~34.1.0",
"raw-loader": "^4.0.2",
"terser-webpack-plugin": "^5.2.0",
"webpack": "^5.51.1",
"webpack-cli": "^4.4.0"
},
"dependencies": {
"@ckeditor/ckeditor5-core": "^36.0.1",
"@ckeditor/ckeditor5-image": "^36.0.1"
}
}In our case, we also needed @ckeditor/ckeditor5-core and @ckeditor/ckeditor5-image. Pay attention to the webpack hints when compiling js/build/anchor.js.
Copy it from the CKEditor 5 plugin starter template. Both of CKEditor’s documentation examples use webpack, although you may decide to use another tool to pack your javascript code.
Create the following folders:
Clone the plugin source code somewhere outside of your site.
gh repo clonebvedad/ckeditor5-anchorCopy ./src and ./lang folders into ckeditor5_anchor/js/ckeditor5_plugins/anchor.
Copy CSS and icon files into ckeditor5_anchor/css and ckeditor5_anchor/icons respectively. They’re located in the ./theme folder for the anchor plugin.
Step 3: Install the Dependenciesnpm installGenerate js/build/anchor.js.
./node_modules/.bin/webpack --mode development --watchAt this stage, you will likely encounter missing dependencies warnings.
Step 4: Modify the source codeAdd ckeditor5_anchor/js/ckeditor5_plugins/anchor/src/index.js.
/**
* @file The build process always expects an index.js file. Anything exported
* here will be recognized by CKEditor 5 as an available plugin. Multiple
* plugins can be exported in this one file.
*
* I.e. this file's purpose is to make plugin(s) discoverable.
*/
import Anchor from './anchor';
export default {
Anchor,
};We need to modify the import section to import all CKEditor libraries from one of the files under ckeditor5/src/ (ckeditor5_achor/node_modules/ckeditor5/src/). For example:
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import MouseObserver from '@ckeditor/ckeditor5-engine/src/view/observer/mouseobserver';
-import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
-import Command from '@ckeditor/ckeditor5-core/src/command';
-import findAttributeRange from '@ckeditor/ckeditor5-typing/src/utils/findattributerange';
-import toMap from '@ckeditor/ckeditor5-utils/src/tomap';
-import Collection from '@ckeditor/ckeditor5-utils/src/collection';
-import first from '@ckeditor/ckeditor5-utils/src/first';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import { Plugin } from 'ckeditor5/src/core';
+import { MouseObserver } from 'ckeditor5/src/engine';
+import { Clipboard } from 'ckeditor5/src/clipboard';
+import { Command } from 'ckeditor5/src/core';
+import { findAttributeRange } from 'ckeditor5/src/typing';
+import { toMap, Collection, first } from "ckeditor5/src/utils";
+import { ButtonView } from 'ckeditor5/src/ui';Import icons shipped with the source plugin from the right Drupal module path.
-import anchorIcon from '../theme/icons/anchor.svg';
+import anchorIcon from '../../../../icons/anchor.svg';Replace importing all icons loaded from the CKEditor core @ckeditor/ckeditor5-core with import { icons } from ckeditor5/src/core.
-import pencilIcon from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
+import { icons } from 'ckeditor5/src/core';Use the icons variable in the code where an icon is used.
-this.editButtonView = this._createButton( t( 'Edit anchor' ), pencilIcon, 'edit' );
+this.editButtonView = this._createButton( t( 'Edit anchor' ), icons.pencil, 'edit' );Almost there! One more change is needed specifically for ckeditor5-anchor.
function isTyping( editor ) {
- const input = editor.plugins.get( 'Input' );
-
- return input.isInput( editor.model.change( writer => writer.batch ) );
+ const batch = editor.model.change( writer => writer.batch );
+ return batch.isTyping;
}Note that the source plugin uses an outdated method. Input.isInput was replaced with batch flags. It’s important to expect these issues and always QA your CKEditor5 plugins after porting them.
Additional Notes/* Icons */
.ckeditor5-toolbar-button-Anchor {
background-image: url(../icons/anchor.svg);
}This icon is to be displayed on the text format configuration page.
We’d recommend reading all of the tutorials available in CKEditor 5 Framework documentation. You can safely skip the editor init part as Drupal already inits the editor for you.
In particular, read up on Drupal’s slightly different way of importing JS dependencies as well as icons:
Useful pages from drupal.org include:
Did you know Pantheon is one of the largest hosting providers for Drupal websites the world over? As of 2021, they host over 300,000 Drupal sites*! Launched in 2010, Pantheon offered Drupal-specific hosting environment that was optimized for Drupal websites. As a website management platform, they offer an integrated set of services and tools allowing teams to build, launch, and manage websites.
Drupal and Pantheon are a great match. Find out more about this as you read on AND also learn how to install Drupal on Pantheon from scratch. There’s more! You will also find out about setting up Pantheon locally, interesting commands for transfers, command line interactions and more. Dive in!
Drupal developers prefer Pantheon because it is easy to use and set up, but more importantly because it offers an environment optimized for Drupal sites. Even the security features are specifically tailored to the needs of Drupal websites. A few more reasons why Pantheon is a great choice for developers:
It really is a very straightforward process. Follow the steps below to setup Drupal 9 on Pantheon
1. Visit https://pantheon.io/ to register to Pantheon using your email address
2. Click on Get Started
3. Once logged in, you will be land on the workspace page
4. Click on Create New Site as shown below.
5. Choose what kind of site you want to create. Let’s go with Drupal 9. Read this article to find out why.
6. Provide your Pantheon site details like the Name of the Site and continue.
7. This process will take a few moments. Once it's done, click on “Visit Pantheon Site Dashboard.”
8. Visit your website, by clicking “Visit Development Site”.
Now that you have set up Drupal on Pantheon, let’s install and customize your Drupal site. Upon visiting your website for the first time, you will be directed to the Drupal installation page.
And your Drupal 9 site is ready!
Using the following commands to set up Pantheon on your local system:
Create a new directory “pantheon” and enter it
mkdir pantheon && cd pantheon
Go through interactive prompts to get your site from Pantheon and create a .lando.yml file
lando init
Start up the application
lando start
Import your database and files
lando pull
The Get and Put commands help create a file transfer request in SFTP.
Use the GET command to transfer files from a remote server to your local system
get
get -r
Use the PUT command to transfer files from your local system to the remote server
put
put -r
Terminus is a command-line interface (CLI) provided by Pantheon, which allows you to manage Drupal sites using a set of powerful tools. It is built on top of the Drush command-line tool, and provides additional functionality that is specific to Pantheon.
Developers can manage their Drupal sites from the command line, without the need to use the Pantheon dashboard.
To install Terminus, go here: https://docs.pantheon.io/terminus/install
Format of the terminus command: terminus command:subcommand .
The terminus command structure includes . in order to determine the target site and environment to execute the command.
For example, running the clear cache command for the Dev environment of a site labeled "techxspecbee"
To run the configuration import drush cim command for the Live environment of a site labeled "techxspecbee"
We can get a list of all available commands using
* References: https://www.drupal.org/pantheon
Drupal provides a robust content management system that is flexible and highly customizable, while Pantheon provides a secure and scalable hosting platform that is optimized for Drupal sites. The combination of Drupal and Pantheon allows developers to build websites quickly and easily, while also ensuring that they are secure and performant. With features like automatic backups, continuous integration, and easy site management, Pantheon is a great platform for Drupal developers looking to build websites that can scale with their projects. Are you looking for Drupal experts to build and manage your Pantheon-hosted site? We’d love to help! Contact us today and let’s get started.
Email Address Subscribe Leave this field blank Drupal Drupal 9 Drupal Development Drupal Planet Drupal TutorialLeave us a Comment
Upgrading the web presence of IEEE Information Theory Society, the most trusted voice for advanced technology
ExploreA Drupal powered multi-site, multi-lingual platform to enable a unified user experience at SEMI
ExploreGreat Southern Homes, one of the fastest growing home builders in the US, sees greater results with Drupal
Explore View all Case Studies