Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Dec 17 2020
Dec 17

argument-open-source

Recently, Drupal has been on an update rampage. The introduction of the oh-so-beautiful Drupal 9 core has spurred a chain reaction of upgrades across the Drupal platform. Just this week, we’re getting a new default theme (which is hyper-minimalist and easy-on-the-eyes), a 20% reduction in install times, and automated lazy load for images. But let’s talk about the juiciest UI/UX update that came with Drupal 9 — the standardization of Drupal’s Layout Builder.

If you’ve built a pre-Drupal-9 website over the past few years, you probably dabbled with Panels/Panelizer, WYSIWYG templates, or even custom coding to set up your UX/UI. And that works. We did it for years. But you can throw that worn-out Panelizer module in the trash. The times, they are a-changing. Drupal’s new Layout Builder module combines the core functionality of Panelizer with an out-of-the-box WYSIWYG engine.

First hinted at in 2017, Drupal Layout Builder officially left the onerous Drupal testing pipeline last year as part of Drupal’s 8.7 updates. Despite circulating for a year now, the chaos of 2020 has overshadowed this potent and flexible tool. So, let’s talk about it. Here’s what you need to know about Drupal’s Layout Builder.

What is Layout Builder?

Layout Builder is a WYSIWYG page editing engine that lets you manipulate back-end features via an easy-to-use drag-and-drop interface. It’s difficult to overstate just how valuable Layout Builder is when it comes to time-savings. You can create templates in minutes, immediately preview and create content changes, and tweak page-by-page UI/UX features to create more cohesive and on-the-fly websites and landing pages.

At its core, Layout Builder is a block-based layout builder. You can create layouts for either a single page or all content of a specific type. In addition, you can jump in and create rapid-fire landing pages based on your existing design theme. There are three “layers” that Layout Builder operates on to help you build out holistic websites.

  1. Layout templates: You can create a layout template for all content of a specific type. For example, you can make a layout template for your blog posts or a layout template for every product page. This template will be shared across all pages, so you don’t have to go in and rebuild for each content type.
  2. Customized layout templates: You can also go in and make granular changes to a specific layout template. So, if you want a certain product page to be different than the layout template, you can make granular changes to just that page.
  3. Landing pages: Finally, you can create one-off pages that aren’t tied to structured content — like landing pages.

Important: Founder of Drupal — Dries Buytaert — dropped a blog post with some use cases for each of these layers.

To be clear, Layout Builder isn’t a WYSIWYG template. It uses your existing template. Instead, it allows non-developers (and lazy-feeling developers) to quickly make per-page changes to the website without diving into code. But these aren’t just simple changes. You can create a layout template for every page type (e.g., creating a specific layout for all the shoes you sell), and you can also dive into each of these layout pages to make custom changes. So, it really lets you get granular with your editing without forcing you to completely retool and redesign pages for each type of content. This gives Layout Builder a massive advantage over WordPress’s Gutenberg — which requires you to go in and re-lay elements for every page individually.

Here’s the kicker: you get a live-preview of all changes without bouncing between the layout and the front-end. Every block and field you place and every change you make to taxonomies or content is visible the second you make the change. The entire process takes place on the front-end, and changes are instantly visible. Remember, Layout Builder is part of Drupal’s Core, so you don’t need to implement new entity types of dig into third-party elements. It’s an out-of-the-box experience.

Advantages of Layout Builder

Last year, we got a gorgeous, picture-perfect demo of how Layout Builder would work. It’s beautiful, fast, and packs a punch that other leading layout builders are indeed missing. So, to help unpack the value of Layout Builder, let’s look at some of the advantages of Layout Builder:

Customization

Beyond Layout Builder’s incredibly powerful and customizable block-based design engine, it offers customization in usage. Let’s say you want to create an amazing landing page. You can start with a blank page that’s untied to structured content, drop in some hero images, a few pieces of text, some content, and a video. Suddenly, you have a custom landing page (complete with modules, blocks, and taxonomy) that exists in a separate ecosystem from your website.

Simultaneously, you can create a template for every blog post, then dive into a specific blog post and make on-time changes to just that page while still being tied to your structured content. Remember, you can make these changes nearly instantly, without touching code. And you’ll see a live preview of every change immediately without switching between interfaces.

Accessibility

Drupal is committed to accessibility. The second principle of Drupal’s Values & Principles page reads, “build software everyone can use,” and this rings true. Layout Builder meets Drupal’s accessibility gate standards (i.e., conforms to WCAG 2.0 and ATAG 2.0, text color has sufficient contrast, JavaScript is keyboard-usable, etc.)

Ease-of-use

Like many WYSIWYG editors, Drupal Layout Builder is all about “blocks.” But these aren’t your run-of-the-mill blocks. There are inline blocks, field blocks, global blocks, and system blocks. Each of these has its own use case, and you can combine these block types to create stellar pages in minutes. For example, global blocks are used to create templates, and inline blocks are used to create page-specific changes that don’t impact the layout. The combination of these block types makes Layout Builder a hassle-free experience.

Additionally, there are plenty of ease-of-use features built into the core. Layout Builder works with the keyboard, has plenty of usability features that tie to Drupal’s value statements, and allows nit-picky setups for customized workflows.

Creating a Drupal Website is Easier Than Ever

With Layout Builder, users can generate valuable content and pages without needing to patch together various WYSIWYG tools or Panel/Panelizer. At Mobomo, we’re incredibly excited for our clients to dive into Drupal Layout Builder and make actionable and memorable changes to their templates based on their in-the-moment needs and experiences.

But Layout Builder isn’t a replacement for a well-designed and well-developed website. We can help you build your next world-class website. Once we’re done, Layout Builder gives you the freedom to make substantial changes without the headaches, back-and-forth, or unnecessary touchpoints. Are you ready to create a customer-centric, experience-driven digital space? Contact us.

Oct 24 2016
Oct 24

code

You know the old saying: “This is how the world ends: not with a bang, but with a misplaced DROP TABLE.” Working directly with Drupal 7’s database is an arduous task at best.  It’s a sprawling relational system and it uses many space and memory saving tricks to be as speedy as possible.  Thankfully, there is a robust system of functions built into Drupal to help you change almost any setting from code–perfect if you want to automate changes upstream and features doesn’t do it for you.  Let’s go over a situation in which you may have been utilizing some of these functions.

Let’s say you finished your product (congratulations!), launched, and are onto fixing bugs and planning exciting new features for the future.  You’re knocking out bugs left and right like some high-flying Drupal ninja and you discover that using a field collection with conditional fields causes the field collection data to not save and all of your metadata is getting erased when certain conditions are fired.  With Cthulhu’s hot breath on your neck, you talk to the client and realize a ray of hope: you don’t actually need a field collection there, a normal set of Drupal fields will do.  How do we go about creating the new fields, copying existing data, and deleting the old fields?

The first thing we do is create the new fields and attach them.  For this, we’ll need two functions: ‘field_create_field()’ and ‘field_create_instance()’.  Both of these take an array of settings: field_name and type are we need for creating the field (also cardinality if you want to have multiple values for the field), field_name, entity_type, and bundle are required for creating the instances, though you will likely also want label, or it will otherwise default to the machine name.  So, we should have something that looks like this:

$name = [ ‘field_name’ => 'photographer_name', ‘type’ => ‘text’, ]; field_create_field($name); $instance = array( 'field_name' => $name['field_name'], 'entity_type' => node, 'bundle' => article, 'label' => 'Name', ); field_create_instance($instance);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

$name = [

  field_name’ => 'photographer_name',

  type => text,

];

field_create_field($name);

$instance = array(

  'field_name' => $name['field_name'],

  'entity_type' => node,

  'bundle' => article,

  'label' => 'Name',

);

field_create_instance($instance);

If you go check out node/add/article, you should see your new text field there.  Congrats!  Next, we need to get the data from the old fields and copy it into our new field.  For this, we’ll rely on the nifty function ‘entity_load()’.  This takes two arguments, bundle name and an array of ids.  Since we are getting field collection items, we know the bundle name is ‘field_collection_item’.  We’ll need the IDs, but we’ll also need the field collection value that references the fields in each collection for later, so we’ll get them both at once.  It might be tempting to use ‘entity_load()’ to get them, but in this case you are quite safe using straight SQL, which also happens to be significantly faster.  That looks like this:

$entity_ids = array(); $field_collection_ids = array(); // Select the field collection id and the attached entity id from the db. $query = db_query('SELECT field_producer_value, entity_id FROM field_data_field_producer'); $results = $query->fetchAll(); // Separate the ids</span> foreach ($results as $result) { $field_collection_ids[] = $result->field_scald_producer_value; // We need to reference the entity ID by the field collection value for simplicity later $entity_ids[$result-&gt;field_scald_producer_value] = $result-&gt;entity_id; } // It’s possible that you might get duplicate Field Collection IDs, so we make sure they are all unique $field_collection_ids = array_unique($field_collection_ids); // Load all of the field collection entities. $field_collection_results = entity_load('field_collection_item', $field_collection_ids);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$entity_ids = array();

$field_collection_ids = array();

// Select the field collection id and the attached entity id from the db.

$query = db_query('SELECT field_producer_value, entity_id FROM field_data_field_producer');

$results = $query->fetchAll();

// Separate the ids

foreach ($results as $result) {

  $field_collection_ids[] = $result->field_scald_producer_value;

  // We need to reference the entity ID by the field collection value for simplicity later

  $entity_ids[$result-&gt;field_scald_producer_value] = $result-&gt;entity_id;

}

// It’s possible that you might get duplicate Field Collection IDs, so we make sure they are all unique

$field_collection_ids = array_unique($field_collection_ids);

// Load all of the field collection entities.

$field_collection_results = entity_load('field_collection_item', $field_collection_ids);

Now that we have all of the entity ids and field collection ids, we can get to the fun part: copying data! (You know you have been doing this too long when that is exciting.) What we want to do is loop through the field collection ids, load the the entity (that has the new field on it) by the id associated with the collection, copy the data from the collection to the new field, and save.  It seems like a lot, but it’s fairly simple:

foreach ($field_collection_ids as $field_collection_id) { // Load the entity the field collection is attached to $entity = entity_load('node', array($entity_ids[$field_collection_id])); // Copy the data from the collection field to the new field $entity[$entity_ids[$field_collection_id]]->photographer_name['und'][0]['value'] = $field_collection_results[$field_collection_id]->field_producer_name['und'][0]['value']; // Save! entity_save('node', $entity[$entity_ids[$field_collection_id]]); }

foreach ($field_collection_ids as $field_collection_id) {

  // Load the entity the field collection is attached to

  $entity = entity_load('node', array($entity_ids[$field_collection_id]));

  // Copy the data from the collection field to the new field

  $entity[$entity_ids[$field_collection_id]]->photographer_name['und'][0]['value'] =

  $field_collection_results[$field_collection_id]->field_producer_name['und'][0]['value'];

  // Save!

  entity_save('node', $entity[$entity_ids[$field_collection_id]]);

}

A word of warning: depending on how many entities you are processing, this could take a long time.  As of Drupal 7.34, there is a memory leak in entity_save()–this means that each save will take slightly longer than the last. This is not a problem if you have only a few hundred fields, but when you get up into five and six digits, this script will take many hours. At that point, unless you have the time (and/or can run the script as a process in the background), you might want to consider investigating other options.

Okay, so the data is copied, the nodes are saved, and the elder gods have hit the snooze button.  Last thing you have to do is delete the old field.  We’re not going to do that, at least not yet. Instead, we’re going to delete the instances of the fields.  This will preserve the old field collection data, but remove the fields from the edit forms. This way, if something goes wrong, you don’t lose the data in the old fields and can try again if needed. You can go back at a later time, if you wish, after you have confirmed that everything is correct and delete the fields. Luckily, this is the easy part:

$instance = array( 'field_name' =&gt; 'field_scald_producer', 'entity_type' =&gt; node, 'bundle' =&gt; article ); field_delete_instance($instance);

$instance = array(

  'field_name' =&gt; 'field_scald_producer',

  'entity_type' =&gt; node,

  'bundle' =&gt; article

);

field_delete_instance($instance);

And that’s it, crisis averted!  You no longer lose data and no longer have to worry about supernatural madness and death!  All you need to do now is run your script upstream with ‘drush php-script’ and watch the magic.

This sort of scripting can be daunting at first glance, but Drupal’s rich entity API can keep you from pulling out your hair or inadvertently causing an otherworldly alien intelligence from rising from the deep.  There are many more functions to take advantage of, and just about anything you can set with a click in the interface you can set in code, perfect for automation or locked down production environments.

Happy Drupaling !

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web