Five Lessons Learned with Drupal 8

I don’t know if you’ve heard, but we’re wicked into Drupal 8.

It was the first major release of Drupal in five years, after all, so we were a bit giddy in anticipation of its arrival. It was sort of like waiting for your favorite band to drop a new record- all anticipation and breathlessness and nervous energy. Since we were so revved up, we put that energy to good, Drupal-centric use.

We participated in — and hosted — Drupal 8 core code sprints. We hosted meetups for the local Drupal user group and offer presentations and learning sessions on Drupal (and continue to do so, because we love our fellow Drupalers). Feel free to join the Seacoast Drupal User Group at our next meetup.

But we didn’t stop there.

We created a few small sites with Craft CMS so we could become familiar with the Twig templating engine which is also used in Drupal 8. Then we created a one-page site using the beta version of Drupal 8 for the Prescott Park Arts Festival in Portsmouth, NH.

It occurred to us, though, that before we began building full-scale sites for clients, we should dive more deeply into Drupal 8; we have a serious commitment to excellence and client satisfaction, and we needed to make sure we fully understood all of the ins and outs involved. As a result, we decided that it would be awesome to build our own site in Drupal 8, and launch it on November 19, 2015 – the same day as the official D8 launch. And then have a party of course, so we could celebrate with our Drupal community!

It was a great plan.

Unfortunately, because clients always always come first, our site launch was delayed. The party was not because stuff like major Drupal updates should always be celebrated.

Since then, we have not only launched our Drupal 8 site, we have multiple sites in production for clients that we have been able to build using what we learned as we put our own site together. We’re excited about those builds, and we are also super excited about what we learned from our own site; since sharing is caring, we have decided to offer you some of what we learned!

Lesson One

Twig: Learn It; Love It

Twig, Drupal 8’s new templating engine, was our go-to method for the customization of Bowst.com. For example, we needed a few changes to our forms. At first, we thought of trying to determine what D8’s version of our D7 standby

hook_form_alter()

would be. We soon realized that everything we needed to do was possible if we had a Twig template for our forms; however, we weren’t quite sure how to implement template suggestions for forms. Turns out, this is how you do it:

function yourtheme_theme_suggestions_form_alter(array &$suggestions, array $variables) {
    $suggestions[] = 'form__' . $variables['element']['#form_id'];
}

Putting the above into the yourtheme.theme file will allow you to use this template to customize your forms:

form--contact-element-machine-name-of-form.html.twig

Lesson Two

Get Your Library Card!

Themes now use asset libraries to add CSS and JS is a modular way. This is excellent because now you don’t have to load all the CSS and JS on every page. Basically, you just add a yourtheme.libraries.yml file to your theme folder. The library points to the CSS and JS files you want to add to your theme.

In addition to adding local CSS and JS, you can use libraries to add external assets as well. For example, you can add the Font Awesome to your theme via the Bootstrap CDN like this:

font-awesome:
   remote: https://fortawesome.github.io/Font-Awesome/
   version: 4.5.0
   license:
     name: MIT
     url: https://fortawesome.github.io/Font-Awesome/license/
     gpl-compatible: true
   css:
     theme:
       https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css: { type: external, minified: true }

You can also add libraries to specific pages. One use-case for this would be if you’re going to add a slider to one of content types. Instead of adding the slider’s CSS and JS to every page on the site, you can attach it to your content by following these steps:

First, add this to the yourtheme.theme file:

function THEME_NAME_theme_suggestions_page_alter(array &$suggestions, array $variables) {
   // Add content type suggestions.
   if ($node = \Drupal::request()->attributes->get('node')) {
   array_splice($suggestions, 1, 0, 'page__node__' . $node->getType());
   }
}

Second, add this to your page–your-content-type.html.twig file:

{{ attach_library('yourtheme/yourslider') }}

Doing so will make sure that the CSS and JS from the yourtheme/yourslider library only be added to that specific content type.

Lesson Three

D8 + Pantheon + Configs = Use Terminus

Regardless of the platform of your site, spend some time figuring out the workflow for your configuration settings. This presentation from Drupal Nights is a good place to start:

Because our site is hosted on Pantheon, we follow their recommended config workflow. Here are the basic steps we follow to export config from the Dev to Test Pantheon environments using Terminus:

• Switch to SFTP mode in the Pantheon dashboard

• Export the config from dev with this Terminus command:

  terminus drush cex --site=[site-name] --env=dev

• Commit the updated config and switch back to Git mode in the Pantheon dashboard

• Deploy the code from Dev to Test:

  terminus site deploy --site=[site-name] --env=test --sync-content --cc --note="Deploy configuration to test"

• Import the config into test with this Terminus command:

  terminus drush cim --site=[site-name] --env=test

• Appreciate the CMI Team for keeping you from having to copy and paste every time you deploy

Lesson Four

Keep Calm and Drupal On

We found a few things that didn’t quite work as expected in D8, especially during the first few weeks of developing. Even when things worked perfectly, we still had to learn where all the buttons were. (Hint: the Save button in the Views UI moved to the bottom left!) Not only is D8 new, but most of our dev team is using Kalabox (which is still in Alpha) as our new local development tool.

Lesson Five

Remember that Advice, Like Milk, Has an Expiration Date

We have learned, and continue to learn, a lot as we work with Drupal 8. Sometimes, however, we get stuck. You will too! Getting stuck is part of the process, and knowing where to find the information that will get you back on track is super important. Remember that because everyone was SO excited about Drupal 8, a lot of people wrote tutorials and guides before it was fully launched — and some of those guides are outdated now. In addition, Drupal 8 has been revised and will continue to evolve. When you need to research solutions, check the dates of publication to make sure the information is current!

As someone in the office said, “Drupal 8 is the future, and the future is now!” We are incredibly proud and excited to be part of that future, and to make all of the awesome happen with Drupal 8.