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 StudiesDrupal has been the most advanced and preferred online marketing and content management system for years now. Prestigious websites such as NASA, Tesla, Oxford University, Virgin, and General Motors have unleashed the power of Drupal to excel in their respective domains.
Simple content authoring tools, built-in accessibility tools, multilingual functionality, seamless integration with third-party tools and services, cutting-edge security features, and open-source licensing are some Drupal features that have helped it supersede all its competitors. Besides, its top-notch SEO-friendly modules have made multitudinous websites earn first-page rankings on search engines. This has brought significant increments in their customer reach, acquisition, and retention. Their revenue has also escalated manifolds. Isn’t it fascinating?
mandclu
Tue, 05/02/2023 - 06:10
The planning for a 4.0 release of Smart Date began towards the end of 2021, but there were still lots of opportunities to fix bugs and add features without going to a major release. In the end, the need for a major release was triggered by Drupal 10, though in actuality by its updated PHP dependency, to use a minimum version of 8.1.Smart Date had made some methods available to be used statically, that is, for the method to be used without instantiating a full object. This was a useful way to make capabilities available broadly, and drew inspiration from Drupal core static methods like Entity::create() or Url::fromRoute(). Newer versions of PHP, and in particular 8.1, are much more stringent about mixing static and non-static code. Calling non-static methods within a static one can generateMoreDid you know that out of the 117 domains of the UN and World Bank organizations, 78 rely on Drupal? Seems fascinating, doesn’t it? With its ingenious features, Drupal validated its worth and earned the trust of a majority of the prestigious organizations in the world. It established itself as the leading content management system long ago and continues to maintain its stature even today. If you are getting inclined towards Drupal Web Services too, you might wish to analyze the websites it already supports to make an informed decision.
Today we are talking about Semantic Versioning with Mike Miles.
For show notes visit: www.talkingDrupal.com/397
TopicsMike Miles - mike-miles.com @mikemiles86
HostsNic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Jordan Graham - @jordanlgraham
MOTW CorrespondentMartin Anderson-Clutz - @mandclu Same Page Preview Shows your content authors what their content will look like, while they’re creating it.