I was tasked with the job of updating a Drupal site, as one often does when they work on Drupal sites. And I noticed that the Chosen module needed to be updated. So I simply ran composer update drupal/chosen and nothing updated! Then I ran composer require drupal/chosen. Which is what I do in composer …
This tutorial is targeted towards developers who know how to create a Drupal module, use the
npm command and know basic React.
A copy of all the code can be found at https://github.com/WebWash/ww_react_examples.
Code generators in Drupal are great as a productivity tool. If you need to create a module, you could easily run a few commands and have a module generated. Then if you need to create a custom block, you could run another command which will generate all the boilerplate code and add the block into a module.
If you want to create a new event subscriber, form, service, etc… There’s always a bit of boilerplate code required to get things going. For example, making sure you extend the right class and inject the correct services. A code generator makes this process quick and easy.
Most of the popular frameworks, Laravel, Symfony, Rails just to name a few, utilize code generators which create scaffolding code.
In this tutorial, you’ll learn three ways you can generate code in Drupal 8 using Drupal Console, Drush and Module Builder.
Webform has a pretty robust system for managing lists of options. When you create a select box, you can define its options just for that element, or use a predefined list. If you go to Structure, Webforms, Configurations and click on Options, you can see all the predefined options and you can create your own.
If you want to learn how to create your own predefined options check out our tutorial; How to Use Webform Predefined Options in Drupal 8.
One thing to be aware of is that all of these options are stored as config files, which makes perfect sense, it is configuration.
But what if you want editors to manage the options?
Depending on how you deploy Drupal sites if you change an option only on the production site, your change will be overridden the next time you deploy to production because you import all new configuration changes.
To work around this, you could look at using Webform Config Ignore.
Another way of managing options is by using the Taxonomy system. An editor would simply manage all the terms from the Taxonomy page and nothing will be stored in config files.
In this tutorial, you’ll learn how to create a select element which uses a taxonomy vocabulary instead of the standard options.
The Layout Builder module allows you to customize the design of the entity such as content types, vocabularies, etc… by offering a new drag-and-drop interface. The new interface uses your front-end theme and it offers a proper preview of the actual content which will be used.
This makes it easier to build your layouts because you won’t have to save and then see what it looks like on the front-end, you can preview your changes while building it.
The module replaces the “Manage display” page with the new layout builder once enabled. Instead of seeing all the fields on the page, you’ll see a “Manage layout” button which redirects you to the layout builder page.
The best way to learn how to use any module is by using it to build something. So let’s get into it.
In this tutorial, you’ll learn how to use Layout Builder to modify a content type and how to use the module as a page builder (this is my favorite).
When you need to create survey style forms in Drupal 8 Webform is the clear winner. It’s powerful enough to create all sorts of forms and you can even give it to your editor so they can create their own, after a little training, of course.
One part of Webform which I like is the ability to define conditional logic. For example, you can show or hide a text field based off a value from another element. You can also make an element conditionally required. It’s a very useful part of Webform, and you do all of this through a UI, no custom code.
Defining simple conditional logic, check if element value has a single value, is pretty straightforward. But when you have to deal with multiple values, this is where things get tricky.
One complaint about Bootstrap is you can spot it a mile away because a lot of developers use the default look-and-feel. When you see the famous Jumbotron you know it’s a Bootstrap site. But with a little bit of effort you can make your site look unique.
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.
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.
Radix is a Bootstrap 4 powered theme which is set up out-of-the-box to compile the Bootstrap library locally. It is targeted towards advance front-end developers who want total control on how Bootstrap is loaded and comes with Browsersync and Font Awesome built-in. The theme doesn’t support loading Bootstrap via a CDN out-of-the-box. I’d recommend you look at the Barrio theme if you prefer to load everything through a CDN.
Because you’re compiling Bootstrap, you get the added benefit of being able to modify the
_variables.scss which is used to customize Bootstrap and can control what SASS components get imported. By importing only what you need you can drastically reduce the size of the compiled CSS file.
The theme comes with a Drush command (Drush 8 only),
drush radix "Theme name", which makes it easy to generate sub-themes. The sub-theme comes with a
package.json which has all the required packages.
npm install, then
npm run dev to compile Bootstrap. It uses laravel-mix to compile everything so you don’t have to spend time configuring webpack files.
In this tutorial, you’ll learn how to install Radix, create a sub-theme, how to compiling everything and learn about Radix Layouts.
Over the years I’ve written a fair bit about Drupal and its modules, but all the videos and tutorials focused on a single module or topic.
So I decided to try something different and record a video where I build a whole website in a single go. I recorded the video in a single night and only stopped recording to get a drink.
In this video, which is over 3 hours long, I’ll teach you how to build a basic directory website. We’ll start right at the beginning by setting up a local Drupal site for this we’ll use DDEV-Local. Then we create content types, create a sub-theme, create a few custom views, a search page, media management functionality and so much more.
I’ve broken out the video into sections below with timecodes and extra resources. For the content below to make any sense you should follow along by watching the video.