In Drupal, whenever we output markup it's best practice to use a Twig template or a theme function. But whenever you need to output DOM elements within JavaScript the best practice is to use the Drupal.theme
function. This function ensures that the output can be overridden just like the HTML output by Twig. This tutorial covers how to use the Drupal.theme
function in your JavaScript when inserting DOM elements, as well as how to replace the markup output by other JavaScript code that is using the Drupal.theme
function.
ESLint is the linting tool of choice for JavaScript in Drupal. In this tutorial we’ll show how to install the ESLint application and then use it to verify that your JavaScript files are meeting the Drupal coding standards.
Drupal (as of version 8.4) has adopted the Airbnb JavaScript coding standards. In this tutorial, we'll walk through how to install the necessary package dependencies to run eslint on JavaScript files within your Drupal site.
It's often useful to pass dynamically calculated values from the server to the client in order to make them available to your front-end JavaScript. Your JavaScript might need to know something particular about the user currently visiting the site or the value of a particular configuration variable. In this tutorial, we'll look at how Drupal can pass these values from the PHP code that executes during a page load to the front-end JavaScript in your theme.
In order to do this, we'll need to:
- Explain how drupalSettings bridges the gap between PHP and JavaScript
- Generate values for settings in PHP and make them available to JavaScript
- Make use of PHP generated settings within your JavaScript code
Sometimes your JavaScript needs to insert new strings into the user interface. In order to ensure that those user-facing strings can be translated into other languages, just like the rest of Drupal's user interface, you should make sure and use the Drupal.t
function anytime you output a string of text.
You may know that Drupal provides utility PHP functions for manipulating and sanitizing strings. Drupal also provides JavaScript functions for the same purpose. The two most useful are Drupal.checkPlain
and Drupal.formatPlural
. Drupal.checkPlain
lets you ensure a string is safe for output into the DOM; it is useful when working with user-provided input. Drupal.formatPlural
ensures that a string containing a count of items is pluralized correctly. This tutorial will show you where you can find documentation for and example use-cases of both.
Maybe you've heard of anonymous closures but you're not quite sure how they apply in Drupal, or why using them is considered a best-practice. Anonymous closures allow you to avoid accidentally clashing with anything in the global scope, as well as to alias the jQuery object to the more commonly used $
. This is necessary because Drupal runs jQuery in no-conflict mode. This tutorial will look at the syntax used for placing your custom JavaScript code inside an anonymous closure, and why it's a good idea to do so.
In this tutorial we'll:
- Explain what a closure is (briefly), and what immediately invoked function expressions are
- Show how typically Drupal JavaScript gets wrapped in a closure
- Provide a copy/paste example you can use in your own code
By the end of this tutorial you should be able to explain what an anonymous closure is, and how to use one in your custom JavaScript for Drupal.
More often than not, templates in a theme share common elements: the header, footer, sidebar, or more. In Drupal, themes created with a Twig template can be decorated by another one. This template inheritance allows you to build a base "layout" template that contains all the common elements of your layout defined as blocks. A child template can extend the base layout and override any of its defined blocks. This helps prevent code duplication, and keeps your theme more organized.
This tutorial is for theme developers who want to reduce code duplication in their themes, or anyone seeking to better understand how Twig template inheritance works. We'll cover:
- What the Twig
block
andextends
tags do - An example use-case for template inheritance
- How to extend a Twig template from another theme or module
- How to include other Twig templates
Info files, aka THEMENAME.info.yml files, provide Drupal with metadata about your theme, the features it supports, and the regions that it defines. All themes are required to have a THEMENAME.info.yml file, and creating one is generally the first step you'll take when creating a new theme.
In this tutorial we'll:
- Create a new .info.yml file and define a new theme
- Review the required key/value pairs of an .info.yml file
- Enable our new theme in the Drupal UI
By the end of this tutorial you'll be able start a new theme by creating the required *.info.yml file and better understand its contents.
Learn Views in Drupal 8
Blog postOne of the big changes in Drupal 8 is that Views, the most popular contributed module in Drupal 7, is now included as part of core. Learning Views is a key component of learning to build Drupal sites. Aside from having this tool built in core now, the beauty of this new feature is that it is almost identical to Views in Drupal 7. You can get started site-building with Views in Drupal 8 without waiting for any fancy version-specific instructions.
Google Summer of Code 2016 is on!
Blog postSummertime in the northern hemisphere means it’s time for Google’s Summer of Code (GSoC). In this great program, Google pays students to work on various open source projects for 10 weeks. Drupal was once again selected to mentor students. Our 11 students are working on some pretty cool projects with 26 community mentors.
What's New in Drupal 8.1.0
Blog postDrupal 8.1.0 was released on April 20th. There are a few things that are exciting about this release; in particular the 2 new experimental modules BigPipe and Drupal Migrate UI.
This week we're starting a whole new guide covering Drupal 8 migrations. We'll look at what migrations are, how they work, planning for a migration, the contributed module ecosystem, and performing a Drupal-to-Drupal migration.
Whether you're updating from Drupal 6 or Drupal 7, or importing data from some other source, you need to know about the migrate system in the latest version of Drupal. This tutorial provides an overview and links to additional tutorials where you can learn more about how all the individual parts work.
By the end of this tutorial you should have a better understanding of what the migration system is capable of and know where to find more information about how to use it.
The Drupal-to-Drupal migration system is still a work in progress. As such, there are a few things that simply don't work, and a few others that still have kinks to be ironed out. In this tutorial, we'll look at some of the common hang-ups that we've encountered, the status of resolving those issues, and what your options are in the meantime.
In Drupal, there are 3 modules in core related to migration that you'll want to know about. These modules can help you import data into Drupal from disparate sources, or upgrade from a previous version of Drupal.
In this tutorial we'll look at what each of these core migration modules do, and talk about when you'll need to use them.
In this tutorial we will run a site migration using Drush, and understand how to deal with any failures that occur.
The Migrate Drupal UI module allows you to execute a migration from older versions of Drupal to the latest version of Drupal. In this tutorial we'll:
- Run a full Drupal 6 to latest-Drupal (Drupal 8 or 9) Migration from the UI
- Explore the user interface as it exists
- Understand how we can deal with the output from our migration
To follow along with the rest of the migration tutorials you'll want to make sure you understand the following concepts and terms as they relate to Drupal migrations.
In this tutorial, we'll take look at the basic components of a migration and familiarize ourselves with some of the concepts and terminology needed to understand how the system works. We'll cover:
- What is a migration?
- Migration templates
- The extract, transform, load process
- Destinations and sources
- Additional Drupalisms
By the end of this tutorial you should be able to identify the various components that a migration is composed of, and explain at a basic level what each is responsible for.
There's a whole ecosystem of contributed modules that build on the Migrate API in Drupal core. They do things like provide Drush commands for working with migrations, add new sources (CSV, JSON, etc.), add new destinations, provide code examples, and fill in other gaps. Think of these as the tools of the trade you’ll use to do your work. In most cases you’ll use these to do the migration, but then once the migration is complete you can remove them from your project.
Then there are the contributed modules that add features to your site. Like Flag, Paragraphs, or Webform. These modules often contain migration-related code that is intended to help make it easier to handle data specific to these modules. There is code in the Flag module, for example, that can help with knowing how to extract flagging records from Drupal 7, and for transforming that data into the format the module expects it to be in for Drupal 10. You might end up having to tweak it a bit, but at least you’re not starting from scratch.
In this tutorial we'll:
- Look at some of the most commonly used toolset modules.
- Explain what you can expect to find in standard contributed modules related to migrations.
By the end of this tutorial you should have a better sense of the various tools available to you for authoring a migration.
Before you begin a Drupal 6 or 7 (source) to Drupal 9 or 10 (destination) migration there are a number of things you should consider. Taking the time to plan your migration will help to ensure that you're successful. In this tutorial we'll take a high-level look at:
- Evaluating your existing Drupal 6/7 site for migration feasibility
- Preparing your source Drupal 6/7 site for a migration
- Preparing the destination Drupal site you're migrating to
By the end of this tutorial you should be ready to start assessing the feasibility of performing a successful migration, and begin making a migration plan.