Jun 28 2019
Jun 28

We recently had the opportunity to dive into developing a site using the layout builder as the primary method of layout and block placement. Although we were apprehensive to rely on a currently experimental module to handle all the layout and content organization once we dug in, we were pleasantly surprised with how it handled what we threw at it. That being said there was a fair amount of setup needed to really get it working how we wanted it to. In this post I’m going to go over the basic setup we used and in a future post I will examine some of the more advanced tools we developed to get the most out of it.


In addition to Layout Builder and Layout Discovery, we used two other modules Layout Builder Restrictions and Block Blacklist. These enabled us to have a little more control over what the client has access to placing and helped make the list of items available to place feel a little less daunting. 


Setting up your defaults with Block Blacklist


Once you’ve enabled all the modules the first thing I’d recommend doing is a little bit of housekeeping with your blocks. We can go over to /admin/config/block_blacklist/settings and start globally removing all of the blocks that come in core that are rarely used. This is done by entering the corresponding block id’s into the global blacklist.

Block Blacklist


You can also choose to disable them for the layout builder only if it’s something you might be placing elsewhere and just want to restrict the client from accessing.


Customizing your content types with Layout Builder Restrictions


The second bit of setup to cover is enabling the layout builder for all the content types you wish to let the client modify. To do this we’ll head over to the manage display page of your content type and tick off the “Use Layout Builder” box under the “Layout Options” section and hit save.

Layout Builder Restrictions

You should now see some extra sections under “Layout Options”, “Blocks available for placement” and “Layouts available for sections” These are added by Layout Builder Restrictions. Here we can set what blocks can be placed on a particular content type and define what layouts are available for them to use in sections. This allows us to maintain control over the look and feel of sections while still giving the client the freedom to customize pages as they see fit. We can choose to allow or deny access to all blocks supplied by a specific module or pick and choose what we allow/deny.


Layout Builder Restrictions


Once you have your blocks and layouts set you can click “Manage Layout” and set the default blocks and sections you want to be placed whenever a new node of this type is created. Setting a default layout will also allow the client to play around with layout ideas and always be able to revert back to the default at any time if they are unhappy with the results.


Creating your own layout templates


The templates that come with the module are a good start to get you going but once you really dig in you’ll probably want to start creating your own custom layouts. This is really easy to do. With the Layout Discovery module you can set them up in your theme or in a custom module. We decided to place them in the utility module we include in every site we build. 


First, we’ll create the templates we’d like to use and place them in a folder called layouts within the templates folder of your theme or module. This is an example of a two column layout, with the exception of our layout classes it's pretty standard. You'll want to make sure you have the region_attributes printing out on your regions so the layout builder can include the classes it needs to function correctly. Without them, you will not get the correct styling within the edit mode, or the JS to drag and drop blocks between sections.

{#
/**
 * @file
 * A two-column layout.
 *
 * Available variables:
 * - content: The content for this layout.
 * - attributes: HTML attributes for the layout <div>.
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
    'layout',
    'layout--two-column',
  ]
%}
{% if content %}
  <div{{ attributes.addClass(classes) }}>

      <div class="l-grid--gutter l-grid l-grid-md--two l-grid-lg--two l-grid-xl--two">

        <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first', 'l-grid__item') }}>
          {{ content.first }}
        </div>

        <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second', 'l-grid__item') }}>
          {{ content.second }}
        </div>

      </div>

  </div>
{% endif %}


Once you’ve got all of the templates created you simply have to declare them in your layouts.yml file for Layout Discovery to pick them up. You can call this file my_module.layouts.yml or my_theme.layouts.yml. The snippet below illustrates the correct format for them to be picked up by Layout Discovery. Including the icon_map section will give you a nice visual representation of the layout, you can learn more about that here.

ignite_two_column:
  label: 'Two Column'
  path: templates/layouts
  template: two-column
  category: 'Ignite Layouts'
  icon_map:
    - [first, second]
  regions:
    first:
      label: First Column
    second:
      label: Second Column


In a future post I’d like to discuss some of the work we’ve done to allow custom styling to blocks and sections within the layout builder using config options and utility classes. Between controlling what blocks and layouts you’re providing clients, and creating some custom layouts, this should give you a pretty good starting point to provide a powerful tool for your clients. We’ve only scratched the surface of what can be done with the tool but we’re already pretty happy with the results.

Photo by José Alejandro Cuffia on Unsplash

May 03 2019
May 03

Have you ever installed a menu module for one of the following reasons?

  • Adding a class to specific menu items
  • Setting a menu item's target
  • Setting a relationship between linked content
  • or pretty much any other arbitrary attribute.

With the Menu Link Attributes module for Drupal 8 you can satisfy all of those needs in one easy setup. We recently worked on a project that had strict accessibility requirements that we needed to follow and dealing with the menu was a specific pain point for us. Drupal has the basic requirements covered but specific cases required us to set certain attributes on menu items. Normally this is not easily achievable without some major custom work and hard to pass on to the client to maintain themselves for any future menu additions.

Our main problem was setting attributes to not get dinged for duplicate menu links in our menu structure. Let’s take a look at how this module enabled us to quickly setup the attributes we wanted to make available to the client. The config is pretty straight forward, we use YAML to build the form that will appear on the menu item edit page.

We’ll start by declaring the wrapper.

attributes:

We'll then add all of our options, for our needs we had to create two settings.

attributes:
  aria-hidden:
  role:

We will then add our options to each and we'll have a complete form.

attributes:
  aria-hidden:
    options:
      'true': 'True'
      'false': 'False'
  role:
    options:
      presentation: Presentation

This is how our settings will appear on the form.

Menu Link Attributes

That’s all there is to it, it’s a really simple module that gives you some really powerful options that take a lot of the headache out of menu config.
 

May 03 2019
May 03

Have you ever installed a menu module for one of the following reasons?

  • Adding a class to specific menu items
  • Setting a menu item's target
  • Setting a relationship between linked content
  • or pretty much any other arbitrary attribute.

With the Menu Link Attributes module for Drupal 8 you can satisfy all of those needs in one easy setup. We recently worked on a project that had strict accessibility requirements that we needed to follow and dealing with the menu was a specific pain point for us. Drupal has the basic requirements covered but specific cases required us to set certain attributes on menu items. Normally this is not easily achievable without some major custom work and hard to pass on to the client to maintain themselves for any future menu additions.

Our main problem was setting attributes to not get dinged for duplicate menu links in our menu structure. Let’s take a look at how this module enabled us to quickly setup the attributes we wanted to make available to the client. The config is pretty straight forward, we use YAML to build the form that will appear on the menu item edit page.

We’ll start by declaring the wrapper.

attributes:

We'll then add all of our options, for our needs we had to create two settings.

attributes:
  aria-hidden:
  role:

We will then add our options to each and we'll have a complete form.

attributes:
  aria-hidden:
    options:
      'true': 'True'
      'false': 'False'
  role:
    options:
      presentation: Presentation

This is how our settings will appear on the form.

Menu Link Attributes

That’s all there is to it, it’s a really simple module that gives you some really powerful options that take a lot of the headache out of menu config.
 

Sep 19 2018
Sep 19

The aim of this is to give European citizens more control over their personal data and to update the laws to reflect the world we live in now. This includes laws around personal data and privacy and consent across Europe.

With GDPR organizations will have to ensure personal data is gathered legally and under strict conditions. Organizations will also be tasked with protecting it from misuse and exploitation, as well as to respect the rights of data owners. This will ultimately place legal obligations on a company to maintain records of personal data and how it is used, placing higher level of legal liability should they be breached.

What is considered personal data?

Whether you’re based in Europe or a global organization that is potentially collecting data from European users you should be aware of the data you’re collecting that fall under the scope of GDPR. Under existing legislation names, addresses, and photos are considered personal data but with GDPR this extends to IP addresses, genetic data, and biometric data which could be processed to uniquely identify an individual.

How can I update my site to comply?

There are plenty of checklists to follow in order to make sure your site is in compliance but we’re going to cover a change you’ve probably already noticed from many of the sites you visit daily. You’ve probably already guessed it, those wonderful cookie acceptance pop-ups!

There are a few modules that strive to make short work of the cookie acceptance process but after testing several, the module I’ve found to be the best in terms of ease of use and support from other modules that create cookies is EU Cookie Compliance  (available for Drupal 7 and 8). This module will provide you with a fully customizable banner that can be displayed at the top or bottom of the window and has full support for responsive and multilingual sites. Consent can be given actively by opt-in or out-out, or inferred automatically by clicking any link on the site. I recommend going with the opt-in option. Optionally you will be able to use this in conjunction with the GeoIP module to display the banner for EU users only.

Before we get the module downloaded and installed you’ll want to identify any other modules that currently set cookies for users on your site and make sure they are updated to the latest release. The most common of these is going to be Google Analytics. There was a bug recently where if a user had previously accepted but had returned and revoked consent the cookie would incorrectly remain, so you’ll want to make sure that one is updated.

Setup

First you’ll want to create a privacy policy for you site which you can later link in your banner.

Download and enable the module from either https://www.drupal.org/project/eu_cookie_compliance or with drush or composer.

- Drush

drush dl eu_cookie_compliance

- Composer

composer require drupal/eu_cookie_complaince

Head over to /admin/settings/eu-cookie-compliance on drupal 7 or /admin/config/system/eu-cookie-compliance on Drupal 8 to setup permissions for displaying the pop-up to certain roles and select the type of consent, for your site to be complaint you will want to use the “opt-in”.

Cookie Compliance

Customize your banner, You can setup the text you want displayed for the initial banner, thank you banner, and withdraw consent banner. You will also be able enter hex values to colour your banner or if you’re on Drupal 7 you can use the colorpicker module to style your banner.

Cookie Complaince

If you’d like to limit the banner to EU users you can download and install GeoIP, once you have GeoIP setup you can simply enable the option on the admin page.

If you  are using Google Analytic you will find a setting on their page that once enabled will only place cookies when the user has accepted.

Once you’ve filled out everything simply save and head to the front page, you will be greeted by you brand new consent banner.

Cookie Consent

For developers who have created modules that set cookies there is a javascript function that will return TRUE if the user has given his consent

Drupal.eu_cookie_compliance.hasAgreed()
Aug 03 2017
Aug 03

What’s lived on from Webform

All the basics are there to get you started. The easy to use element builder that we’re all familiar with lives on although it’s received some much needed UI upgrades. The ability to set up conditional logic, send out emails, review and export submission are all in there with some nice extras to boot.

What’s new

Handlers

With handler you can now send submission results to external URL’s which mean building custom forms for CRM submissions is easier than ever to set up.

Testing

You can now jump over to the test tab and have your form pre-populated with values for easy testing and even use devel generate to handle multiple test submissions in one go.

Lots of advanced fields and widgets

Signatures, Likert, range sliders, CodeMirror, star ratings, the list goes on and the best part is you’re not having to scour Drupal.org hoping that someone has built a module to add in this functionality.

Webform Fields

Wizard Pages

I almost snuck this into the advanced fields section but I’ve decided it needs it’s own call out. No more contrib modules, we can now natively create multi-step forms in webform. It’s incredibly intuitive and a godsend for those massive forms we have to build from time to time.

Webform Wizard

Field input masks

While I don’t find these entirely useful for things like phone numbers that vary from country to country there are probably some use cases where these will come in handy to keep your submissions clean and concise. I’d say they fall into the nice extra category as some will definitely get more mileage out of them than others.

CSS and JS on a per element basis

Got that one field you want to do something a little flashy with? Now you can load your own custom CSS/JS on a per form basis or per element basis.

In browser source editing

Prefer setting up your forms in code? You can now edit the yaml markup directly on the admin page and even copy elements over from an existing form in a flash.

Add-ons!

This is a feature I really like and should be standard on all core module heck even contrib developers should take notice. If you jump over to the Add-ons tab you are greeted with a list of all the add-on modules currently available for webforms complete with categorization and some helpful descriptions. This is something I think is really important for increasing the usability of drupal modules, it takes the guess work out of finding the features I want and it’s a great way for module developers to rubber stamp projects they feel are adding value to their work which is a win win for everyone.

Addons!

Tutorial videos

This is something that really display the extra mile jrockowitz is going to get developers familiar with the module. If you’re having trouble figuring out how to properly configure your forms emails for instance, simply click the “Watch Video” link at the top of the page and you’ll be greeted with a handy video that goes over the ins and outs of that feature.

Tutorials

Layout elements

Webform comes equipped with flexbox elements that easily help you get your module on the right track before you ever touch it in your theme. This lets you build some really attractive forms that more often than not need very little theme help which is a huge plus when handing the site over to a hands-on client. With very little effort and a bit of training you can give your client the power to manage their own form creation from start to finish.

Translatable fields

Developers of multilingual sites rejoice, no more form duplication! Fields are now translatable, need i say more?

Final Thoughts

Whether you’re a form builder or developer who want to get in and create forms with code this module is a dream to work with. It’s incredibly powerful and scalable and will have you building beautiful forms with ease in no time. Stepping back for a second I would like to declare webform the gold standard for contrib modules in Drupal 8, it’s what every one of us should strive for when developing modules for the community. Every aspect of it is well thought out and goes the extra mile, it’s the full package and it makes webforms fun again. Play around with it, have some fun and look forward to your next project that needs a form.

P.S. If you run into jrockowitz give him a high five because he’s put an incredible amount of work into this project.

Jul 08 2016
Jul 08

Over 8 months after release and my first D8 site under my belt I can now say I am excited for the future of working with Drupal'€™s freshest release. That being said at this stage in the game the decision to go with D8 should approached with caution. It does what it does well but many of those shiny contrib modules you'€™re used to using just aren'€™t there yet. Unless your team and client are willing to spend the time and money needed to develop or port the missing functionality it might not be a fit for that particular project. If on the other hand you have a project that is the right fit, now is the time to dive right in and take advantage of all it has to offer.

What you should be excited for:

Drupal 8 was a real treat to work on though I definitely went into the project with some reservations. My experience in the past with being the first person in the office to work on a fresh Drupal release has taught me to be cautiously optimistic. Modules you have become attached to and use in almost every project aren'€™t ready or they have a release but it either doesn'€™t work or it's a shell of it'€™s former self while they slowly port features over. This time around there was very few things I was missing and the things that were ended up forcing me to think out of the box or explore other alternatives which was a fun exercise. Aside from a few hiccups Drupal Core just worked which is more than I can say for previous outings. After all is said and done here are a few things I was pleased with and left me wanting to explore further:

The small things

  • Date, link and email fields are now in core, no more turning on a couple modules you use in pretty much every install.
  • Views is also part of core now! Many of the admin pages have been converted to views so feel free to modify them to your hearts content, you will no longer have to install a module to modify that one admin page that you never liked.
  • The modules admin page (Extend) is now more useable, that means you won'€™t need to install Module Filter to search for that one module you want to install.

Blocks, Blocks, Blocks

The blocks system has seen some major love in D8. I always cringe when I log into a D7 site and see that a client has created a block and placed it with the core blocks admin. I will still prefer placing blocks with context because it allows for a pretty complex set of conditions to be met before placing the block. For clients that are a little more hands on the new blocks admin with the addition of Block Visibility Groups will do almost anything you want it to, I like to think of it as context lite. This will allow you to set up groups of blocks that will apply to specific sections of the and provide a dropdown on the admin page to select the group you'd like to edit. Selecting a group will filter the blocks down to what is active in that group.

The Custom Blocks Library is where blocks in D8 really shine, in here you'€™ll find a list of all custom blocks that exist and adds the ability to create block types. Block types are exactly what they sound like, custom types for block that will allow you to add fields just as you would in a content type.This enables you to set up some types and let the client create as many blocks as they'd like within the constraints you've set.

Multilingual Features

Multilingual modules are now in core, this means there's no more messing around because that one field just won'€™t translate properly and it'€™s all done through the admin UI. Taxonomy, menus, blocks, views, fields are all easily translatable.

Theming

With the move to Twig we'€™ve got an incredibly powerful theming engine that is much more lightweight than previous Drupal versions. The simple syntax and convenient functions make getting into theming a breeze. Using twig'€™s template inheritance will give you the ability to turn one giant template into smaller more manageable templates. This is great for focusing on structure in the parent and then handling bulkier stuff in child templates. Macros will allow you to create small reusable chunks of code and then reference them wherever you please throughout your theme.

Mobile and Responsive Images

Breakpoints are built into core, this will allow you to define your breakpoints and then reference them to control how your theme and content appear on each platform. With the addition of Responsive Images you will be able to set up all your image styles and then use those breakpoints to trigger what image style is used for each.

Exporting Your Config and Features

D8 now has a built in Config Manager this will allow you to export and import all or some of your config. This is ideal for your simpler sites but it's just a start to what you can achieve with Features.

Features has been rebuilt from the ground up in this release and makes use of the groundwork laid by the Config Manager. What this means is no more messing around with additional Features modules as a workaround to grab specific bits of config that are not exportable. When you install Features it will automatically set up a feature for each bit of config you have. It centers them around your content types and will grab any config related to that content type (views, image styles, permissions, etc.) and group it together ready for export. In addition you will now be able to create bundles of features that will share a namespace so you can export reusable config for a specific bit of functionality such as a slideshow.

What your clients should be excited for:

There's a lot of changes that have been made to streamline the experience for a content manager. These changes will help speed up the day to day management of the site in some big ways and relieve some of the stress of resolving the issues that can arise post launch when you set them loose in the back end. The admin UI has seen a big update and is much more enjoyable to work with.

Quick Edit

Quick edit is a really powerful tool for editing your sites content. This will allow clients to edit their content in place and see it as it will appear within the sites theme. No more annoying shadow boxes that take as long to load as going to the edit screen. Fields that use the wysiwyg will have the toolbar pop up and follow you down the page and editing the source will appear in a lightweight popup.

WYSIWYG

CKEditor is now in core, this is a huge win as there is nothing more annoying than setting up your wysiwyg. Buttons are added or removed with a drag and drop and can be grouped however you like so it can be as simple or complex as you wish. If you like to limit the allowed tags that are used in the wysiwyg conflicting tags will now be removed from the list when you add buttons that make use of them.

Inline images are another great improvement to using the wysiwyg, this cuts out the need for IMCE. Uploads are sent directly to the files folder without exposing all the other files in there to the client. Captions can be added to the images and make use of the HTML5 figcaption element.

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