DEV Community: WebWash

Drupal Live Site Build (Part 2) – Create Layout Builder Section, Bootstrap Carousel

Ivan Zugec — Wed, 02 Jun 2021 06:53:27 +0000

Get notified when new tutorials are published. Subscribe to our newsletter.

Don't forget to subscribe to our YouTube channel to stay up-to-date.

Video sections:

01:39 Discuss bugs from last live stream
09:37 Create custom module for layouts
19:33 Review layout code
22:04 Start creating custom layout
25:37 Create layout plugin class
28:00 Create twig template for layout
31:46 Install custom module
33:46 Delete inline block template (no longer needed)
37:36 Discuss what needs to be implemented in new layout
39:05 Implement custom code in new layout
42:49 Debug build method in layout class
47:53 Override the build method in layout class to add custom classes
54:08 Review Bootstrap 4 grid system and necessary classes
57:37 Create custom method to determine grid width
1:03:04 Fix "Add block" button
1:11:15 Discuss implementing carousel
1:14:55 Discuss bug with Paragraphs module and block types
1:17:43 Create Carousel block type
1:22:12 Download Inline Entity Form
1:23:14 Create Carousel item block type
1:25:21 Create Carousel items field
1:27:20 Configure the Inline Entity Form widget
1:33:25 Start implementing Bootstrap carousel markup
1:34:27 Create new carousel layout
1:42:16 Customize Carousel item entity
1:52:14 Implement preprocess function
2:05:31 Implement markup changes in Twig
2:16:49 Change image style size
2:19:52 Create carousel Sass file
2:23:30 Discuss next live streams

In the show notes below, I outline what we implement in part 2 of the Drupal live site build. We start off by fixing a few bugs, which I introduced and didn't notice until I started playing around with the site after the first video. For example, we couldn't drag-and-drop any of the card components because I overrode the inline-block template.

Part 2 (this video) is a little more advanced because we create a custom module, implement two layouts and implement a hook_preprocess_HOOK.

So we start off by creating a Row layout which fixes the bug from part 1 and we implement the Bootstrap Carousel component (clients love carousels) using block types.

💻 Get a copy of the built site from GitHub.

📖 Read the full tutorial, Drupal Live Site Build (Part 2) – Create Layout Builder Section, Bootstrap Carousel

Drupal Live Site Build (Part 1) – Project Set Up, Build Bootstrap Card Component using Layout Builder

Ivan Zugec — Wed, 16 Dec 2020 10:32:39 +0000

Get notified when new tutorials are published. Subscribe to our newsletter.

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

Below are the show notes for the first video in a series on building a Drupal site using layout builder and Bootstrap. To help with the build process we’re going to follow a template and in each live stream session, we’ll build a component from the template.

And the plan is to have a semi-complete website after a few live streams.

In this first video, we’re focusing on the three-card components below the homepage carousel.

We built the three-card components using a custom block type and layout builder. We’re not using paragraphs in this video.

So here are the show notes for the video.

💻 Get a copy of the built site from GitHub.

Project Set-Up

Download Drupal

First go download Drupal using Composer.

composer create-project drupal/recommended-project FOLDER_NAME --no-interaction

Set Up Lando

In this video, we used Lando for our local environment.

lando init --source cwd --recipe drupal8 --name bs-build --webroot web --full

Download Modules and Themes

Go download the following:

composer require drupal/ds drupal/field_group drupal/bootstrap4 drush/drush

Install Modules

Install the following modules:

Layout Builder (core)
Media Library (core)
Field Group
Display Suite

drush en ds field_group media_library layout_builder

Sub-theme

Generate Sub-theme

The Bootstrap 4 theme allows you to create a sub-theme in two ways; using a script or via the settings form. We’re going to look at using it via the settings form.

1. Install the Bootstrap4 theme

2. Click on Settings, and scroll to the bottom and expand the “Subtheme” section.

3. Enter in details into the form, then click on the Create link.

NOTE: In the video, this step didn’t work because I got a fatal error because I didn’t have the Symfony\Component\Filesystem\Filesystem library. The only way I was able to get this library was by installing Drush using Composer, composer require drush/drush.

Configure Sub-theme

Once the sub-theme has been generated go and install and set as default.

Go to the theme settings page.

Configure the settings like the image below then click on “Save configuration”.

Configure Block Placement

You’ll need to add the correct blocks into the right regions or the site will look broken.

Arrange the blocks like the image below:

Compile Sass in Sub-theme

We’ll use Laravel Mix to compile Sass which I find the easiest to set up.

Before you begin, make sure you download and install Node.js and you can run the npm command.

1. Go into your sub-theme and run the following command:

npm init -y

Just follow the prompts and you should end up with a package.json file.

2. Then install Laravel Mix with the following command:

npm install laravel-mix cross-env --save-dev

3. In the sub-theme create another file called webpack.mix.js and add the following to it:

let mix = require('laravel-mix');

mix.sass('scss/style.scss', 'css/');
mix.options({
  processCssUrls: false
});

4. Open up package.json and replace the scripts section with the one below:

  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

This adds NPM scripts which you’ll need to use to compile the Sass. You’ll need to run these commands from within the sub-theme.

The two important scripts are:

npm run watch

Use this script to automatically compile when a file is changed. This should be used locally while developing a site.

npm run production

You should run this script when you’re ready to deploy to production. It’ll minify the CSS and JavaScript file to reduce the size.

NOTE: If you’re having problems setting it up then please refer to the official documentation.

Twig Debugging

When you’re modifying templates it’s best to turn on Twig debugging so you can see where the templates are stored.

Following the steps in this link to turn on Twig debugging.

Drupal Site Building

Display Suite Settings

Before we start the site building process, go to Display Suite and configure the following:

1. Go to Structure, "Display Suite", click on Settings and check "Enable Field Templates".

2. Click on the Classes tab and add the following into "CSS classes for regions":

card|Card
card-deck|Card Deck

Configure Image Media Type

We'll be using the Media field to handle the image on the Card component which we'll set up next.

But we need to make a few changes to the Image media type.

Create Bare View Mode

Go to Structure, "Display Modes", "View modes" and create a Bare view mode for the Media entity.

To do so, just click on "Add new Media view mode".

Configure Bare View Mode on Image Media Type

Then go ahead and configure the Bare view mode on the image media type.

1. Go to Structure, "Media types" and click on "Manage display" on the Image row.

2. Click on "Custom display settings" and enable Bare.

3. Once enabled click on the Bare tab.

4. Select "Reset layout" as the Display Suite layout at the bottom.

5. Scroll up and make sure the Image field is the only field in the content region. Also, click on the cog-wheel and change the "Choose a Field Template" to "Full reset".

6. Scroll down and click on Save.

The reason why we created a new view mode is that we need to remove all the markup that gets generated on fields. We only want the image element and that's it. We do not want the DIVs which wrap the fields.

Create Card Block Type

To handle the individual card component we'll create a custom block type called Card.

1. Go to Structure, "Block layout", "Custom block library" and click on "Block types".

2. Click on "Add custom block type" and create the Card block type with the following fields:

Description (field_description), Text (formatted, long)
Image (field_image), Media (can't see the Media field? Install the Media module.)

Title (field_title), Text (plain)

Configure Card Formatters

While on the Card block type click on "Manage display".

1. Scroll to the bottom of the page and select "One column layout" from the "Layout for card in default".

2. In the field section, move Image to top, then click on the cog-wheel and select Bare as the "View mode" and "Full reset" as the field template.

3. We need to create a DIV which will wrap the Title and Description, this will be called the "Card body". We'll create a field group for this.

Click "Add field group" at the top and select "HTML element", give the label "Card body":

Element: div
Extra CSS classes: card-body (this is very important, make sure you enter in the right class)

Place the "Card body" field group below the Image field.

4. Place the Title and Description field as child element inside of "Card body".

5. Click on the Title field cog-wheel and select Expert as the field template. Check "Field item" and enter h5 into Element and card-title into Classes.

6. Click on the Description cog-wheel and select "Full reset" from the field template.

Once everything is complete make sure the formatters are configured like below:

7. Last but not least, scroll down to "Custom classes" and make sure you select the Card option in "Class for layout". (NOTE: Make sure you've added the "Card" class in the Display Suite settings.)

Layout Builder

Enable Layout Builder "Basic page" Content Type

Make sure you've enabled the Layout Builder module because we'll use it to display the cards on a page.

1. Go to Structure, "Content types" and click on "Manage display" on the "Basic page" row.

2. Scroll to the bottom and click on "Custom display settings" and enable "Full content".

3. Click on the "Full content" tab and check:

"Use Layout Builder"
"Allow each content item to have its layout customized."

Create Page Content

Now go to Content, "Add content", "Basic page".

Create a test page then click on "Layout".

Create Card Row Section in Layout Builder

1. Click on "Add section" and select "One column layout" as the layout.

2. From the "Configure section" click on "Custom classes" and select "Card Deck" from the "Class for layout". (NOTE: Make sure you've added the "Card Deck" class in the Display Suite settings.)

Add Cards to Section

Once the section has been added, go ahead and add the cards.

1. Click on "Add block" in the section.

2. Click on "Create custom block" on the right.

3. Then click on Card.

4. Fill out the form and click on "Add block".

Override Block Template

For the cards to float next to each other correctly.

We need to override a single block template.

Copy the block template from /core/themes/classy/templates/block/block.html.twig and paste it into /themes/custom/ww_bootstrap4/templates/block/block--inline-block--card.html.twig.

Make sure you change the file name from block.html.twig to block--inline-block--card.html.twig.

Change it from this:

<div{{ attributes.addClass(classes) }}>
  {{ title_prefix }}
  {% if label %}
    <h2{{ title_attributes }}>{{ label }}</h2>
  {% endif %}
  {{ title_suffix }}
  {% block content %}
    {{ content }}
  {% endblock %}
</div>

To this:

{{ title_prefix }}
{% if label %}
  <h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
  {{ content }}
{% endblock %}

All we're doing is removing the wrapping DIVs in the template so the card deck is aligned correctly.

Summary

In this first video, we have focused on the project set up and built a Card component using custom blocks.

Create Pages using Gutenberg (WordPress Editor) in Drupal 8

Ivan Zugec — Fri, 09 Aug 2019 06:29:51 +0000

Get notified when new tutorials are published. Subscribe to our newsletter.

📽 Video sections:

Download and Install Gutenberg (01:15)
Configure Gutenberg on Page content type (02:01)
How to use Gutenberg editor (03:21)
Upload images into Gutenberg (06:55)
Create reuseable blocks (11:02)
Use Gutenberg Cloud (15:42)
Learn how the Gutenberg data is stored in Drupal (20:31)

Want to Learn Drupal? Check out our FREE courses.

Gutenberg is the new editor for WordPress 5.0. It's a new style of editor/page builder. Instead of writing text in a single text area, you build a page using blocks. A block could be something simple such as a paragraph or an image. Or more complex blocks like a "Media & Text" or adding in columns.

The editor itself is written in Javascript, more specifically React. This is what makes it possible to be used in Drupal. But I'm sure extra works was required to get it working in Drupal.

In this tutorial, you'll learn to install and configure the Gutenberg module, and you'll learn how to use it on the Page content type.

If you're keen to have a play with the editor without configuring a Drupal site go to https://drupalgutenberg.org/demo.

Getting Started

Before we begin, go download and install the Gutenberg module. Run the following Composer command:

composer require drupal/gutenberg

Once you've downloaded the module go to Extend and install it.

Configure Gutenberg on Page Content Type

Now that we've installed the module let's configure it on the Page content type.

1. Go to Structure, "Content types" and click on Edit from the Operations menu.

2. Click on "Gutenberg experience" from the vertical tabs and check "Enable Gutenberg experience".

3. Click on "Allowed blocks" to expand a list of available blocks. You can control which blocks will be available for editors to use.

4. Once you've configured everything, click on "Save content type".

That's all the setup work required to get it working on any content type, pretty easy.

How to use Gutenberg

Now go to Content, "Add content" and click on "Basic page". You should now see a very different node edit form.

How to Add Content

The Gutenberg editor is very different than the text editor which comes with Drupal 8. Instead of just writing into a large text field, you create and manage blocks (Gutenberg blocks).

NOTE: I'm not referring to Drupal blocks which are added to regions.

To see all the available blocks, hover over "Start writing or type.." or click on the plus (+) icon.

Let's say, for example, you want to add a heading and a paragraph. You would create a Heading block, then a Paragraph block.

Instead of clicking the (+) icon, you can add blocks even quicker by typing "/" and search using its name. Any block can be added this way.

Also, if you paste in a bunch of text then the Paragraph block will be automatically used.

Block Configuration

Each block has its own configuration. If we take the Paragraph block, for example, you can change the font-size, background color, text color and more. You can access the settings by clicking on the Block tab on the right.

Integration with Drupal's Managed File System

Apart from just offering the editor, the Gutenberg module integrates nicely with Drupal's managed file system.

Take for example the "Media & Text" block. You can upload files (by drag-and-drop as well, which is great) and add text to the right.

And if you click on "Media Library" you can reuse any images which have already been uploaded.

Add Drupal Blocks into the Editor

You can add Drupal blocks into the editor (now I'm talking about Drupal blocks which are added to regions).

Just search for any block using its name or look in the "Drupal Blocks" section.

Here's an example of how to add the "Recent content" block view.

There are a lot of different blocks in Gutenberg, and I recommend you spend time playing around and learning how to use them.

Create Reusable Blocks

Gutenberg allows you to create reusable blocks. These blocks can be added to any page and if you modify the block, it'll change across all pages.

For example, let's create a List block which will be reused on multiple pages.

1. Create the block in Gutenberg.

2. Click on the 3 vertical dots which will open the "More options" drop-down.

3. Then click on "Add to Reusable Blocks".

Add Reusable Block to Page

To reuse a block, click on the (+) and you should see a Reusable section with the block.

To edit a reusable block, add it to a page and click on the Edit button.

NOTE: This will change the block across all pages which are using it.

Managing Custom Fields

You may have noticed that the editor takes over the whole node edit page. What happens if you use Gutenberg on a content type with custom fields?

The fields get added at the bottom of the page in a field-set called "More settings":

Gutenberg Cloud

The team who built the Gutenberg module also created a website called Gutenberg Cloud. It allows you to share Gutenberg blocks with others.

Using blocks in your own site is easy. You just need to enable the "Gutenberg Cloud" sub-module which ships with the module.

1. Go to Extend and enable "Gutenberg Cloud".

2. Then, go to Configuration, "Gutenberg Cloud block manager".

From this page, you can enable blocks from "Gutenberg Cloud" to be used on your own site.

When you enable a block nothing is downloaded into the site. Gutenberg blocks are written in React so it's just JavaScript. The code for the block is served via a CDN.

3. To use enabled blocks, just select them from the "Cloud Blocks" section. Or search for them by name.

How is the Gutenberg Data Stored?

So you may be thinking right now; how is the data stored in Drupal? When you add a block, where is it stored?

Short answer, it's stored in the body field.

If you look in the node__body table and look in the body_value column you'll see that all the blocks are stored as markup.

Summary

Setting up the Gutenberg editor was easy. By simply checking the "Enable Gutenberg experience" checkbox on a content type, you have the editor up and running. To be honest, I was surprised it was this easy to configure.

Originally published at WebWash on April 4, 2019.