Planet Drupal

One of Drupal's strengths is its ability to create communities of users who contribute towards the content of the site. Whether you have an open forum, where users can create their own accounts, or a closed magazine site with just a few editors, you need to take the security of your users seriously.

Out of the box, Drupal has a number of account protection features that assist in making sure that users are authenticated correctly.

For example, the user login page is protected by a brute force system and will lock accounts after a number of incorrect password attempts in a short amount of time.

There are a few other things you can do to protect your site users that can be applied to any Drupal site. In this article we'll look through a number of different modules and techniques you can use to protect the user accounts on your site. We'll look at some of the pros and cons of each approach.

Flood Control

Drupal's login forms have built in brute force projection that will block any user account that fails to enter the correct password more than 5 times per IP address within an hour. This prevents automated bots from just guessing the password of a user account thousands of times until it hits the right combination.

The Flood Control module allows these settings to be tweaked to make them more (or less) restrictive.

Read more

Building a custom Drupal theme nowadays is a more complex process than it used to be. Most themes require some kind of build tool such as Gulp, Grunt, Webpack or others to automate many of the repeatitive tasks we perform when working on the front-end. Tasks like compiling and minifying code, compressing images, linting code, and many more. As Atomic Web Design became a thing, things got more complicated because now if you are building components you need a styleguide or Design System to showcase and maintain those components. One of those design systems for me has been Patternlab. I started using Patternlab in all my Drupal projects almost ten years ago with great success. In addition, Patternlab has been the design system of choice at my place of work but one of my immediate tasks was to work on migrating to a different design system. We have a small team but were very excited about the challenge of finding and using a more modern and robust design system for our large multi-site Drupal environment.

Disclaimer: Due to technical restrictions and project requirements, we were not able to use Single Directory Components or SDC, nor the Storybook module. Our front-end environment was custom built from the ground up.

Enter Storybook

After looking a various options for a design system, Storybook seemed to be the right choice for us for a couple of reasons: one, it has been around for about 10 years and during this time it has matured significantly, and two, it has become a very popular option in the Drupal ecosystem. In some ways, Storybook follows the same model as Drupal, it has a pretty active community and a very healthy ecosystem of plugins to extend its core functionality.

Storybook looks very promising as a design system for Drupal projects and with the recent release of Single Directory Components or SDC, and the new Storybook module, we think things can only get better for Drupal front-end development. Unfortunately for us, technical limitations in combination with our specific requirements, prevented us from using SDC or the Storybook module. Instead, we built our environment from scratch with a stand-alone integration of Storybook 8.

Our process and requirements

In choosing Storybook, we went through a rigorous research and testing process to ensure it will not only solve our immediate problems with our current environment, but it will be around as a long term solution. As part of this process, we also tested several available options like Emulsify and Gesso which would be great options for anyone looking for a ready-to-go system out of the box. Some of our requirements included:

1. No components refactoring

The first and non-negotiable requirement was to be able to migrate components from Patternlab to a new design system with the least amount of refactoring as possible. We have a decent amount of components which have been built within the last year and the last thing we wanted was to have to rebuild them again because we are switching design system.

2. A new Front-end build workflow

I personally have been faithful to Gulp as a front-end build tool for as long as I can remember because it did everything I needed done in a very efficient manner. The Drupal project we maintain also used Gulp, but as part of this migration, we wanted to see what other options were out there that could improve our workflow. The obvious choice seemed to be Webpack, but as we looked closer into this we learned about ViteJS, "The Next Genration Frontend Tooling". Vite delivers on its promise of being "blazing fast", and its ecosystem is great and growing, so we went with it.

3. No more Sass in favor of PostCSS

CSS has drastically improved in recent years. It is now possible with plain CSS, to do many of the things you used to be able to only do with Sass or similar CSS Preprocessor. Eliminating Sass from our workflow meant we would also be able to get rid of many other node dependencies related to Sass. The goal for this project was to use plain CSS in combination with PostCSS and one bonus of using Vite is that Vite offers PostCSS processing out of the box without additional plugins or dependencies. Ofcourse if you want to do more advance PostCSS processing you will probably need some external dependencies.

Building a new Drupal theme with Storybook

Let's go over the steps to building the base of your new Drupal theme with ViteJS and Storybook. This will be at a high-level to callout only the most important and Drupal-related parts. This process will create a brand new theme. If you already have a theme you would like to use, make the appropriate changes to the instructions.

1. Setup Storybook with ViteJS ViteJS

• In your Drupal project, navigate to the theme's directory (i.e. /web/themes/custom/)
• Run the following command:

npm create vite@latest my_theme # replace my_theme with a name of your choice.

• When prompted, select the framework of your choice, for us the framework is React.
• When prompted, select the variant for your project, for us this is JavaScript

After the setup finishes you will have a basic Vite project running.

Storybook

• Be sure your system is running NodeJS version 18 or higher
• Inside the newly created theme, run this command:

npx storybook@latest init --type react

• After installation completes, you will have a new Storybook instance running
• If Storybook didn't start on its own, start it by running:

npm run storybook TwigJS

Twig templates are server-side templates which are normally rendered with TwigPHP to HTML by Drupal, but Storybook is a JS tool. TwigJS is the JS-equivalent of TwigPHP so that Storybook understands Twig. Let's install all dependencies needed for Storybook to work with Twig.

• If Storybook is still running, press Ctrl + C to stop it
• Then run the following command:

npm i -D vite-plugin-twig-drupal html-react-parser twig-drupal-filters @modyfi/vite-plugin-yaml

• vite-plugin-twig-drupal: If you are using Vite like we are, this is a Vite plugin that handles transforming twig files into a Javascript function that can be used with Storybook. This plugin includes the following:
  • Twig or TwigJS: This is the JavaScript implementation of the Twig PHP templating language. This allows Storybook to understand Twig.
    Note: TwigJS may not always be in sync with the version of Twig PHP in Drupal and you may run into issues when using certain Twig functions or filters, however, we are adding other extensions that may help with the incompatability issues.
  • drupal attribute: Adds the ability to work with Drupal attributes.
• twig-drupal-filters: TwigJS implementation of Twig functions and filters.
• html-react-parser: This extension is key for Storybook to parse HTML code into react elements.
• @modifi/vite-plugin-yaml: Transforms a YAML file into a JS object. This is useful for passing the component's data to React as args.

ViteJS configuration

Update your vite.config.js so it makes use of the new extensions we just installed as well as configuring the namesapces for our components.

import { defineConfig } from "vite" import yml from '@modyfi/vite-plugin-yaml'; import twig from 'vite-plugin-twig-drupal'; import { join } from "node:path" export default defineConfig({ plugins: [ twig({ namespaces: { components: join(__dirname, "./src/components"), // Other namespaces maybe be added. }, }), // Allows Storybook to read data from YAML files. yml(), ], }) Storybook configuration

Out of the box, Storybook comes with main.js and preview.js inside the .storybook directory. These two files is where a lot of Storybook's configuration is done. We are going to define the location of our components, same location as we did in vite.config.js above (we'll create this directory shortly). We are also going to do a quick config inside preview.js for handling drupal filters.

• Inside .storybook/main.js file, update the stories array as follows:

stories: [ "../src/components/**/*.mdx", "../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)", ],

• Inside .storybook/preview.js, update it as follows:

/** @type { import('@storybook/react').Preview } */ import Twig from 'twig'; import drupalFilters from 'twig-drupal-filters'; function setupFilters(twig) { twig.cache(); drupalFilters(twig); return twig; } setupFilters(Twig); const preview = { parameters: { controls: { matchers: { color: /(background|color)$/i, date: /Date$/i, }, }, }, }; export default preview; Creating the components directory

• If Storybook is still running, press Ctrl + C to stop it
• Inside the src directory, create the components directory. Alternatively, you could rename the existing stories directory to components.

Creating your first component

With the current system in place we can start building components. We'll start with a very simple component to try things out first.

• Inside src/components, create a new directory called title
• Inside the title directory, create the following files: title.yml and title.twig

Writing the code

• Inside title.yml, add the following:

--- level: 2 modifier: 'title' text: 'Welcome to your new Drupal theme with Storybook!' url: 'https://mariohernandez.io'

• Inside title.twig, add the following:

<h{{ level|default(2) }}{% if modifier %} class="{{ modifier }}"{% endif %}> {% if url %} <a href="{{ url }}">{{ text }}</a> {% else %} <span>{{ text }}</span> {% endif %} </h{{ level|default(2) }}>

We have a simple title component that will print a title of anything you want. The level key allows us to change the heading level of the title (i.e. h1, h2, h3, etc.), and the modifier key allows us to pass a modifier class to the component, and the url will be helpful when our title needs to be a link to another page or component.

Currently the title component is not available in storybook. Storybook uses a special file to display each component as a story, the file name is component-name.stories.jsx.

• Inside title create a file called title.stories.jsx
• Inside the stories file, add the following:

/** * First we import the `html-react-parser` extension to be able to * parse HTML into react. */ import parse from 'html-react-parser'; /** * Next we import the component's markup and logic (twig), data schema (yml), * as well as any styles or JS the component may use. */ import title from './title.twig'; import data from './title.yml'; /** * Next we define a default configuration for the component to use. * These settings will be inherited by all stories of the component, * shall the component have multiple variations. * `component` is an arbitrary name assigned to the default configuration. * `title` determines the location and name of the story in Storybook's sidebar. * `render` uses the parser extension to render the component's html to react. * `args` uses the variables defined in title.yml as react arguments. */ const component = { title: 'Components/Title', render: (args) => parse(title(args)), args: { ...data }, }; /** * Export the Title and render it in Storybook as a Story. * The `name` key allows you to assign a name to each story of the component. * For example: `Title`, `Title dark`, `Title light`, etc. */ export const TitleElement = { name: 'Title', }; /** * Finally export the default object, `component`. Storybook/React requires this step. */ export default component;

• If Storybook is running you should see the title story. See example below:
• Otherwise start Storybook by running:

npm run storybook

With Storybook running, the title component should look like the image below:

The controls highlighted at the bottom of the title allow you to change the values of each of the fields for the title.

I wanted to start with the simplest of components, the title, to show how Storybook, with help from the extensions we installed, understands Twig. The good news is that the same approach we took with the title component works on even more complex components. Even the React code we wrote does not change much on large components.

In the next blog post, we will build more components that nest smaller components, and we will also add Drupal related parts and configuration to our theme so we can begin using the theme in a Drupal site. Finally, we will integrate the components we built in Storybook with Drupal so our content can be rendered using the component we're building. Stay tuned. For now, if you want to grab a copy of all the code in this post, you can do so below.

Download the code

Resources

• Storybook docs
• How to write stories
• Single Directory Components
• Storybook Drupal module

In closing

Getting to this point was a team effort and I'd like to thank Chaz Chumley, a Senior Software Engineer, who did a lot of the configuration discussed in this post. In addition, I am thankful to the Emulsify and Gesso teams for letting us pick their brains during our research. Their help was critical in this process.

I hope this was helpful and if there is anything I can help you with in your journey of a Storybook-friendly Drupal theme, feel free to reach out.

December 14 is the release of Drupal 10. By switching to Drupal Core Release Cycle, the impact of the upgrade is not huge. Be prepared anyhow!

Drupal has been able to adapt and stay the top choice for open enterprise CMS, especially as the key component in the modern digital experience platform (DXP).

Are your customers asking for a DXP instead of a CMS? Are your developers struggling to build personalized digital experiences wit

1xINTERNET made a great post about calculating how much yo

Building commerce websites always means building integrations.

In this day and age, it’s very hard to imagine a world without online payments.

Supporting Drupal transitions at DrupalCon Portland 2024

DrupalCon Portland 2024 is coming up next month! The event provides good opportunities to get help with three major transitions of Drupal in 2024. Drupal 7's end of life is near, while Drupal 11 is released this year. Finally, DrupalCI testing is superceeded by much improved GitLab CI pipelines shortly after DrupalCon. Here are some highlights of related events to not miss at DrupalCon!

Gábor Hojtsy Fri, 04/12/2024 - 13:07

In Drupal development, understanding the differences between hooks and event subscribers is essential for building robust and flexible modules. Hooks are a fundamental part of Drupal's architecture, allowing modules to interact with and modify various aspects of the system's behavior. Moreover, event subscribers are a more recent addition to Drupal, introduced in Drupal 8 as part of its transition to a more modern, object-oriented architecture.

Hooks in Drupal

Hooks are specially named functions that a module defines and calls at specific times to alter, add, or modify the data.

In a compelling interview, Irina Zaks, co-founder and CTO of Fibonacci Web Studio, shares insights on bridging quantum physics with web development, simplifying Drupal migrations, and advocating for open source in academia. Ahead of her Stanford WebCamp 2024 session, Irina discusses the impact of her work on the academic sector and her vision for the future of web technology.

Witness the vibrant resurgence of the Greek Drupal Community at the Greece Spring Sprint 2024, where collaboration, camaraderie, and innovation reign supreme.

Drupal is moving ahead with PHP attributes. Introduced in PHP 8.1, this feature is changing how developers define plugins and manage their metadata. But there’s a lot more that comes with it. 

First and foremost, PHP attributes are a native feature of PHP 8.1. It eliminates the need for external libraries like "doctrine/annotations." This simplifies the development process by keeping code clean and concise. 

Furthermore, modern IDEs offer better support for attributes. They provide features like code completion and validation, making your workflow significantly more efficient. And because attributes are a core part of the PHP language, you can rest assured that they'll receive ongoing development and support in future PHP versions. All of this ensures that your code remains compatible and up-to-date as Drupal evolves.

However, one question that comes up very often is why PHP attributes in the first place. Well, let’s understand this by knowing the limitations of annotations. 

The 2024 Drupal Developer Survey is now open, inviting developers worldwide to contribute their experiences and shape the future of Drupal. With a focus on new questions and broadened language accessibility, the survey aims to capture diverse perspectives from the global Drupal community. Results will be revealed at DrupalCon Portland 2024 and are set to influence the ecosystem's direction, benefiting contributors, tool makers, and users alike.

I recently was presented with a relatively simple problem, and decided to explore ECA as a possible solution. The initial problem was a pretty simple use case, and could have been accomplished with a bit of custom code. With the move of this blog to Drupal, we built a simple editorial workflow to give our marketing team some guardrails and control over the publishing process. Since the launch, we've decided to expand this workflow from Draft -> Review -> Published, to include a new state - "Technical Review".

Small innovations can have a big impact. The paperclip was just a bent piece of wire that somebody repurposed in the late 19th century and we all now have in our desks. The Post-It note was just a low-grade adhesive applied to a piece of paper before it became a key office supply.

Pantheon and Lytics announce a groundbreaking partnership at Google Cloud Next '24, offering businesses free access to Lytics' Personalization Engine, revolutionizing website personalization with cutting-edge Generative AI technology.

Gain exclusive insights from renowned industry experts John Cloys, Penny Kronz, and Steve Persch as they unravel the intricacies of website evolution and digital innovation at EvolveDrupal Atlanta—Part 2. Discover what's shaping the future of web development in this must-read exploration.

Embarking on exploring the forefront of web development, EvolveDrupal Atlanta's industry experts offer insights into sessions covering inclusive design, Drupal 7's end-of-life, scalable software products, Drupal theming, and seamless migrations. Readers are invited to join for an exclusive peek into the future of web development.

Welcome back to “Skills Upgrade” a Talking Drupal mini-series following the journey of a D7 developer learning D10. This is episode 6.

Topics

• Review Chad's goals for the previous week

• Review Chad's questions

  • Array structures
  • accordion.html.twig
  • D7 to D10 migrations

• Tasks for the upcoming week

  • [testing_example](https://git.drupalcode.org/project/examples/-/tree/4.0.x/modules/testing_example?
  • Be sure to install drupal/core-dev dependencies using composer require –dev drupal/core-devref_type=heads) from Examples module.
  • Set up phpunit.xml file in project root - using this file to start
  • Run existing tests using command line from the project root. Something like: phpunit web/modules/contrib/examples/modules/testing_example/tests
  • Review test code in module.
  • Start with FrontPageLinkTest.php, then FrontPageLinkDependenciesTest.php, then TestingExampleMenuTest.php

Resources

Understand Drupal - Migrations Chad's Drupal 10 Learning Curriclum & Journal Chad's Drupal 10 Learning Notes

The Linux Foundation is offering a discount of 30% off e-learning courses, certifications and bundles with the code, all uppercase DRUPAL24 and that is good until June 5th https://training.linuxfoundation.org/certification-catalog/

Hosts

AmyJune Hineline - @volkswagenchick

Guests

Chad Hester - chadkhester.com @chadkhest Mike Anello - DrupalEasy.com @ultimike