Planet Drupal

Maximize your Drupal content creation with CKEditor's advanced features! Join the upcoming webinar on October 16, 2024, at 11:00 AM EDT to learn about the CKEditor 5 Drupal Plugin Pack, advanced editing tools, and productivity enhancements. Drupal developers, content managers, and site administrators will gain practical insights on improving content workflows. Don't miss this opportunity—register today!

The DropTimes extends heartfelt gratitude to the volunteers who helped provide in-depth coverage of DrupalCon Barcelona 2024. Their coordination, content sourcing, and media contributions made it possible to keep the Drupal community informed and engaged throughout the event.

DrupalCon is the biannual conference where leaders in Drupal gather to coordinate, collaborate and present the latest developments in digital and web technologies. This week 1xINTERNET attended DrupalCon Barcelona in full force. But this conference was like none before it, this was Starshots World Premier and it exceeded all expectations.

"Teamwork makes the dream work" – and that’s especially true for marketing, sales, and operations. When these teams are aligned, you deliver consistent messaging and improve customer experience. The result? Faster conversions and greater efficiency. How do you make this happen? By integrating your CMS with your CRM! So if you have a Drupal website and you use a CRM like Salesforce, you must bring them together. With this integration you can connect your website with your favorite CRM and share customer data across teams. Marketing knows what leads are coming in, sales can act on them quickly, and operations ensure a flawless delivery. Everyone's on the same page, and things move faster! If you’re looking to sync data with your Salesforce instance automatically, this blog is the perfect starting point for you. We will be using the Salesforce Suite module to help you understand the integration in this blogpost. But first, let us give a brief overview of Salesforce integration and its benefits. What is Salesforce Salesforce is a leading cloud-based enterprise customer relationship management system. It makes it easy for businesses to track customer activity which helps effectively manage sales, analytics, customer service, marketing automation, and many more. Salesforce-Drupal integration use cases Drupal websites have the advantage of integrating seamlessly with third-party systems. In fact, Drupal offers several modules to make these integrations smooth. The main goal of a CRM system integration with Drupal is to have seamless data transfer between the systems and make some meaningful decisions using the data from both ends. Now, let us see where and what are the specific use cases in the business this integration is required: User activities tracking: The activities such as page views, interactions, downloads, etc. can be captured and analyzed by the CRM to create personalized user segments. Lead Generation: You can have lead generation forms, for example, contact forms and webforms to send the user information to the CRM that can be analyzed. Commerce Sites: The user's order history, account information, and product interaction can be displayed in a dashboard. Product Suggestions: Personalized recommendations can be created on the website based on the user activities on the CRM Sales Opportunities: Lead generation forms can be converted into sales or business opportunities. Consolidated data: You can have sync user profiles between the CRM and CMS for a more complete view. Benefits of integrating Salesforce and Drupal Integrating Drupal with Salesforce brings a lot of benefits. Here are a few: Enhanced customer engagement: With data synchronization, the customer data is regularly updated, providing timely information on user actions and preferences. We can have faster issue resolution processes, and better custom responses, and as a result, we will have improved customer service. Easier data management: With the integration, there is no need to transfer customer data between CMS and CRM, which otherwise happens by copying and pasting the data. All relevant data is readily available to businesses to make decisions. Collaboration between departments: Thanks to the CRM integration, accurate, comprehensive, and timely data is shared among various departments, minimizing the risk of data discrepancies. The communication within the departments will be better and communication of all the departments with the customers will be more consistent and aligned. Actionable insights: With the consolidated data present in the CRM and website, the business has a comprehensive understanding of customers' needs and preferences. This gives valuable insights for personalized and targeted marketing campaigns. The Salesforce Suite Drupal module This module is the most robust and reliable tool for integrating Drupal with Salesforce CRM, making it an ideal starting point for your integration. The module created a seamless integration between Drupal and Salesforce that synchronizes Salesforce objects, such as Contacts and Accounts, with Drupal entities, such as nodes, terms, and users. Prerequisites for the integration: Create a salesforce developer account. You can either start from https://developer.salesforce.com/signup or use this video to create one. Create a New Salesforce Connected App for authentication purposes. Add the API settings for JWT auth or basic auth, Download and install the Salesforce Suite module into the Drupal site. Enable the required module for integration. The Salesforce Suite module features various submodules that perform different tasks. Let’s see a few modules which are generally used: Salesforce Integration: Maintains integration between Salesforce and Drupal Salesforce OAuth: For Basic OAuth authorization Salesforce JWT Auth: Provides functionality for key-based authentication system for Salesforce Salesforce Mapping and UI: Provides mapping interface to map Drupal entities to Salesforce objects. Salesforce Push & Salesforce Pull: Provides functionalities to have data sync between Salesforce and Drupal based on the mappings created.  Salesforce Logger: Consolidated logger for logging Salesforce events. Salesforce Authorization There are two commonly used techniques within the Salesforce suite module for Drupal-Salesforce Authentication i.e Basic User Agent oAuth & JWT based oAuth. Setting up of the Salesforce-Drupal authorization can be divided to two steps as mentioned below: Step 1. Salesforce Connected App Setup a Connected App on Salesforce instance Login to Salesforce, navigate to Setup → Platform Tools → Apps → App Manager → New Connected App. This navigation path is applicable only,  if you are using lightning experience UI on the salesforce If you are using Salesforce class UI, navigate to Setup → Manage Apps → Connected Apps → New In the new connected App, there are some basic settings like names and contact details to be provided. In the API settings section: Check the “Enable oAuth Settings” checkbox. Add the callback URL for the site, site_url/salesforce/oauth_callback Select the OAuth Scopes, we need to select the four mandatory scopes: Full access (full) Manage user data via APIs (api) Manage user data via Web browsers (web) Perform request at anytime (refresh_token, offline_access) Save the connected App Gather the salesforce key and secret details as they are needed to configure in the Drupal website for successfully establishing the connection. If you want to use JWT based authentication, there are few more steps to be followed while creating the Connected App Generate the public/private key using the below command openssl req -newkey rsa:2048 -nodes -keyout privatekey.pem -x509 -days 365 -out publickey.pem The private key “privatekey.pem” must be added in Drupal as an authentication key in the key settings page. Login into Drupal as admin, navigate to “admin/config/system/keys”. In the Drupal keys configuration page, make sure to select "File" as the "Key provider" dropdown. Check the "Strip trailing line breaks" checkbox in the "Provider settings" tab, and specify the right path for “privatekey.pem” The public key “publickey.pem” must be uploaded on salesforce. On the connected App, all the basic settings as mentioned in the above section remain the same. Additionally, we must do the following in the API settings: Check the “Use digital signatures” checkbox The public key “publickey.pem” must be uploaded using the “Choose File” button.   Save the connected App. Gather the salesforce key and secret details as they are needed to configure in the Drupal website for successfully establishing the connection. Step 2. Connecting the app on Drupal Once the Authorization is completed on Salesforce and we have the consumer key, secret details, we can start configuring the connection on the Drupal site Login as admin on Drupal website Navigate to Configuration → Salesforce → Salesforce Authorization or visit “admin/config/salesforce/authorize” This page will list all the providers that exist in our Drupal website. Click on “Add Salesforce Auth Provider” button As mentioned in the above section, we have two different “Auth providers”: Salesforce OAuth User-Agent:   Add the Label, consumer key and consumer secret and save the form This will redirect the user to salesforce login and post doing auth activities on the salesforce it will return to Drupal screen with successful established connection. Salesforce JWT OAuth Add the Label, consumer key and login user. Select the private key that we have added while generating the keys. Save the form. On save, it will redirect to the auth providers page with a successful established connection. Salesforce Mappings On successful authorization, we must tell both Drupal and Salesforce how to talk to each other. Please find the steps to below: Login as admin into your Drupal site Head to Salesforce mappings page, Structure → Salesforce → Salesforce Mappings Click on “Add Mapping” to map a new one Fill in the basic information, add the Drupal entity and select the Salesforce object to sync the data. Add the action triggers on which the sync has to take place Once the basic settings are set we head on the field mapping screen where we map Drupal entity fields to Salesforce object properties. We must set the direction in which the field data sync has to take place. We have three different sync mechanisms; “Drupal to SF”, “SF to Drupal” and  “Sync” After setting up mappings to all the fields, save the mapping After the authorization and mappings are set up properly, each time the cron runs, if a new record is added, an existing record is updated, or a record is deleted, the data will be synced between Drupal and Salesforce according to the direction and trigger selected in the mappings. Final thoughts This is just the basic guide for integrating Drupal with Salesforce. There's a lot more you can do, like customizing queries for specific use cases. No matter what you need, Drupal allows for seamless implementation. By integrating Salesforce CRM with Drupal, you can enhance your customer management workflows, streamline operations, and boost overall efficiency. If you're ready to kick off your next big integration, reach out to our Drupal development company, and one of our experts will guide you every step of the way.

At DrupalCon Barcelona 2024, Dries Buytaert, the creator and project lead of Drupal, delivered his 40th DriesNote, in which he shared an exciting vision of where the platform is heading, with a strong focus on Drupal CMS (the product being developed as part of the Starshot Initiative). As part of the Starshot Initiative’s Leadership Team, I’m the Marketing Lead, working to align the positioning of the product with the needs of our target audiences: primarily marketers, content teams, and site builders, but also evaluators, designers, and developers. 

 

The Drupal Starshot Leadership team, featuring Dries Buytaert as the Product Lead, Tim Plunkett as the Technical Lead, Pamela Barone as the Product Owner, Cristina Chumillas as the UX Lead, Lenny Moskalyk as the Delivery Manager, Gabor Hojsy as the Contrib Coordinator and Suzanne Dergacheva (that's me!) as the Marketing Lead. 

 

I’m also excited to contribute along with my colleagues at Evolving Web— who are leading the Analytics track. We’re proud to contribute to Drupal CMS (formerly known as Starshot). With a focus on Drupal CMS, Experience Builder, AI innovations, and a commitment to responsible AI, Dries outlined how the platform is becoming more accessible to non-developers while pushing the innovation and flexibility that Drupal is known for. 

If you missed the DriesNote, I will share some key takeaways below. Check out the recording for the preview demo of Drupal CMS and all the exciting features ahead directly from Dries.

Drupal CMS

Drupal CMS is being designed to make the power of Drupal more accessible than ever, offering preconfigured solutions that allows marketers, web designers, and organizations to easily build and manage their own websites.

It’s important to note that Drupal CMS isn’t some reduced-functionality, beginner-friendly version—it’s built on the robust foundation of Drupal Core. This means that while it is designed to make getting started with Drupal easier for new users, it still offers all the power, flexibility, and scalability that experienced developers rely on. Drupal CMS will open  the door to greater adoption directly by marketers and non-developers, making it simpler to use without sacrificing any of the advanced capabilities that make Drupal such a powerful tool for complex websites.

Preview of Drupal CMS

In the DriesNote demo, Dries demonstrated just how easy it will be to get up and running with Drupal CMS, by showing how a fictional marketer named ‘Sarah’ could easily create a wine tour website with a calendar to highlight upcoming tasting tours.

What Are Recipes?

A standout feature of Drupal CMS is the introduction of Recipes, which are pre-configured functionality, like SEO optimization or event management, that can be easily added to your website. They package content types and other configuration into easily reusable bundles. 

The benefit is that you can add features quickly, use smart defaults that have been carefully selected by experts, and take advantage of best practices even if you’re not a technical user. 

Dries demonstrated how Sarah used an Events Recipe to set up an interactive calendar and SEO-friendly pages for her wine tour website. With just a few clicks, Sarah was able to accomplish in hours what would previously take days.

 

The Recipes dashboard shows the status of the Recipes currently underway
AI-Driven Site Building and Migration

One of the most exciting moments of the DriesNote was the unveiling of AI Agents, which automate many complex tasks in Drupal. These AI agents, embedded within Drupal CMS, allow non-technical users to rename content types, create custom fields, and enforce image quality standards—all through simple, plain-language commands.
Dries showed how Sarah leveraged AI to make critical site changes quickly. From migrating content from a non-Drupal website to setting up structured content types, AI simplifies traditionally cumbersome processes. 

Additionally, Drupal’s AI is transparent and flexible. Users can see what language models are used and even swap out the default AI providers with their own models, offering an extra layer of customization and control.

A Commitment to Responsible AI

As part of Drupal’s commitment to the open web, Dries announcedDrupal’s new Responsible AI Policy, which is built around the following principles: 

• Human in the Loop: AI decisions must be reviewable and reversible by a human.
• Transparency: Users must know where and how AI is being used on their sites.
• AI Model Flexibility: Drupal users can select different AI providers based on their needs, ensuring that privacy, ethics, and energy efficiency are prioritized.

This policy has been developed to not only drive the incorporation of AI features into Drupal CMS but to also encourage its adoption by other parts of the Drupal ecosystem including Drupal core and Drupal contrib.

Experience Builder

Another major highlight from the keynote was a preview of Experience Builder, a React-based interface for modifying the UX and UI of a website. It provides content editors and marketers with a no-code builder that gives end-users the ability to add components, select styling options, and apply branding to the website without writing custom code. What really makes it user-friendly is how fast the interface is. Thanks to the fact that it’s React-based, clicks feel instant. This encourages users to experiment and makes the overall experience much more positive. It’s built using Single Directory Components (SDCs), making it familiar to front-end developers. 

Experience Builder will be part of Drupal CMS but is also set to revolutionize the way that all Drupal websites are built. The plan is for it to eventually replace the current Drupal admin UI, providing a more intuitive way to edit all aspects of a Drupal website. During the keynote, Dries presented a demo of Experience Builder, showcasing its initial version, with drag-and-drop interface, as well as an overview of what it will look like in the future.

With 30 full-time developers working on it—making it the largest, fastest-moving initiative ever undertaken in Drupal—Experience Builder will significantly modernize how websites are built and managed in Drupal,  eventually replacing the current Drupal admin interface. 

 

A preview of what Experience builder will look like
A Roadmap for Drupal CMS 

A pre-release version of Drupal CMS is available to install so you can try it out and a hosted version is also available so you can try out the AI capabilities for yourself right from your browser. The first release of Drupal CMS will happen on January 15th, 2025—Drupal’s 24th birthday. A release candidate will be launched at DrupalCon Singapore, happening on December 9-11, 2024.  Experience Builder will be included in version 2 of Drupal CMS sometime in 2025.

The “Adopt a Document” Program

In addition to these technical advancements, Dries introduced the Adopt-a-Document program, a new initiative aimed at improving Drupal’s documentation, not only for Drupal CMS but also for Drupal Core. Organizations can sponsor sections of documentation to help ensure that Drupal remains well-supported and accessible for all users through a partnership with Drupalize.me. In addition, the Drupal Association is hiring a full-time documentation lead. 

Get Involved 

The message of Dries’ keynote was clear: Drupal CMS is not just about making web development easier; it’s about making the open web accessible to everyone. With AI-driven tools, intuitive page building, and a commitment to responsible technology, Drupal CMS is set to bring the power of Drupal to a whole new generation of users.

Whether you're a developer, a site builder, or a marketer, this is a great time to get involved and help shape the future of Drupal. Want to join us in pushing these initiatives forward? Get in touch or learn more at drupal.org/about/starshot. 
 

+ more awesome articles by Evolving Web

Approximately 1,100 of Drupal enthusiasts gathered in Barcelona, Spain, this week for DrupalCon Europe. As a matter of tradition, I delivered my State of Drupal keynote, often referred to as the "DriesNote".

If you missed it, you can watch the video or download my slides (177 MB).

In my keynote, I gave an update on Drupal Sharshot, an ambitious initiative we launched at DrupalCon Portland 2024. Originally called Drupal Starshot, inspired by President Kennedy's Moonshot challenge, the product is now officially named Drupal CMS.

The goal of Drupal CMS is to set the standard for no-code website building. It will allow non-technical users, like marketers, content creators, and site builders, to create digital experiences with ease, without compromising on the power and flexibility that Drupal is known for.

A four-month progress report A preview of Drupal.org's front page with the updated Drupal brand and content.

While Kennedy gave NASA eight years, I set a goal to deliver the first version of Drupal CMS in just eight months. It's been four months since DrupalCon Portland, which means we're halfway through.

So in my keynote, I shared our progress and gave a 35-minute demo of what we've built so far. The demo highlights how a fictional marketer, Sarah, can build a powerful website in just hours with minimal help from a developer. Along her journey, I showcased the following key innovations:

1. A new brand for a new market: A brand refresh of Drupal.org, designed to appeal to both marketers and developers. The first pages are ready and available for preview at new.drupal.org, with more pages launching in the coming months.
2. A trial experience: A trial experience that lets you try Drupal CMS with a single click, eliminating long-standing adoption barriers for new users. Built with WebAssembly, it runs entirely in the browser – no servers to install or manage.
3. An improved installer: An installer that lets users install recipes – pre-built features that combine modules, configuration, and default content for common website needs. Recipes bundle years of expertise into repeatable, shareable solutions.
4. Events recipe: A simple events website that used to take an experienced developer a day to build can now be created in just a few clicks by non-developers.
5. Project Browser support for recipes: Users can now browse the Drupal CMS recipes in the Project Browser, and install them in seconds.
6. First page of documentation: New documentation created specifically for end users. Clear, effective documentation is key to Drupal CMS's success, so we began by writing a single page as a model for the quality and style we aim to achieve.
7. AI for site building: AI agents capable of creating content types, configuring fields, building Views, forms, and more. These agents will transform how people build and manage websites with Drupal.
8. Responsible AI policy: To ensure responsible AI development, we've created a Responsible AI policy. I'll share more details in an upcoming blog, but the policy focuses on four key principles: human-in-the-loop, transparency, swappable large language models (LLMs), and clear guidance.
9. SEO Recipe: Combines and configures all the essential Drupal modules to optimize a Drupal site for search engines.
10. 14 recipes in development: In addition to the Events and SEO recipes, 12 more are in development with the help of our Drupal Certified Partners. Each Drupal CMS recipe addresses a common marketing use case outlined in our product strategy. We showcased both the process and progress during the Initiative Lead Keynote for some of the tracks. After DrupalCon, we'll begin developing even more recipes and invite additional contributors to join the effort.
11. AI-assisted content migration: AI will crawl your source website and handle complex tasks like mapping unstructured HTML to structured Drupal content types in your destination site, making migrations faster and easier. This could be a game-changer for website migrations.
12. Experience Builder: An early preview of a brand new, out-of-the-box tool for content creators and designers, offering layout design, page building, basic theming and content editing tools. This is the first time I've showcased our progress on stage at a DrupalCon.
13. Future-proof admin UI with React: Our strategy for modernizing Drupal's backend UI with React.
14. The "Adopt-a-Document" initiative: A strategy and funding model for creating comprehensive documentation for Drupal CMS. If successful, I'm hopeful we can expand this model to other areas of Drupal. For more details, please read the announcement on drupal.org.
15. Global Documentation Lead: The Drupal Association's commitment to hire a dedicated Documentation Lead, responsible for managing all aspects of Drupal's documentation, beyond just Drupal CMS.

The feedback on my presentation has been incredible, both online and in-person. The room was buzzing with energy and positivity! I highly recommend watching the recording.

Attendees were especially excited about the AI capabilities, Experience Builder, and recipes. I share their enthusiasm as these capabilities are transformative for Drupal.

Many of these features are designed with non-developers in mind. Our goal is to broaden Drupal's reach beyond its traditional user base and reach more people than ever before.

Release schedule

Our launch plan targets Drupal CMS's release on Drupal's upcoming birthday: January 15, 2025. It's also just a couple of weeks after the Drupal 7 End of Life, marking the end of one era and the beginning of another.

The next milestone is DrupalCon Singapore, taking place on December 9–11, 2024, less than 3 months away. We hope to have a release candidate ready by then.

Now that we're back from DrupalCon and have key milestone dates set, there is a lot to coordinate and plan in the coming weeks, so stay tuned for updates.

Call for contribution

Ambitious? Yes. But achievable if we work together. That's why I'm calling on all of you to get involved with Drupal CMS. Whether it's building recipes, enhancing the Experience Builder, creating AI agents, writing tests, improving documentation, or conducting usability testing – there are countless ways to contribute and make a difference. If you're ready to get involved, visit https://drupal.org/starshot to learn how to get started.

Thank you

This effort has involved so many people that I can't name them all, but I want to give a huge thank you to the Drupal CMS Leadership Team, who I've been working with closely every week: Cristina Chumillas (Lullabot), Gábor Hojtsy (Acquia), Lenny Moskalyk (Drupal Association), Pamela Barone (Technocrat), Suzanne Dergacheva (Evolving Web), and Tim Plunkett (Acquia).

A special shoutout goes to the demo team we assembled for my presentation: Adam Hoenich (Acquia), Amber Matz (Drupalize.me), Ash Sullivan (Acquia), Jamie Abrahams (FreelyGive), Jim Birch (Kanopi), Joe Shindelar (Drupalize.me), John Doyle (Digital Polygon), Lauri Timmanee (Acquia), Marcus Johansson (FreelyGive), Martin Anderson-Clutz (Acquia), Matt Glaman (Acquia), Matthew Grasmick (Acquia), Michael Donovan (Acquia), Tiffany Farriss (Palantir.net), and Tim Lehnen (Drupal Association).

I also want to thank the Drupal CMS track leads and contributors for their development work. Additionally, I'd like to recognize the Drupal Core Committers, Drupal Association staff, Drupal Association Board of Directors, and Certified Drupal partners for continued support and leadership. There are so many people and organizations whose contributions deserve recognition that I can't list everyone individually, partly to avoid the risk of overlooking anyone. Please know your efforts are deeply appreciated.

Lastly, thank you to everyone who helped make DrupalCon Barcelona a success. It was excellent!

Although my blog has been quiet, a lot has happened with the Drupal Starshot project since its announcement a month ago. We provided an update in the first Drupal Starshot virtual meeting, which is available as a recording.

Today, I am excited to introduce the newly formed Drupal Starshot leadership team.

Meet the leadership team Product Lead: Dries Buytaert

I will continue to lead the Drupal Starshot project, focusing on defining the product vision and strategy and building the leadership team. In the past few weeks, I have cleared other responsibilities to dedicate a significant amount of time to Drupal Starshot and Drupal Core.

Technical Lead: Tim Plunkett (Acquia)

Tim will oversee technical decisions and facilitate contributions from the community. His role includes building a team of Drupal Starshot Committers, coordinating with Drupal Core Committers, and ensuring that Drupal Starshot remains stable, secure, and easy to upgrade. With 7 years of engineering leadership experience, Tim will help drive technical excellence. Acquia is providing Tim the opportunity to work full-time on the Drupal Starshot project.

User Experience Lead: Cristina Chumillas (Lullabot)

Cristina will define the design and user experience vision for Drupal Starshot. She will engage with contributors to initiate research activities and share the latest UI/UX best practices, ensuring a user-centric approach. She has been leading UX-related Drupal Core initiatives for over 7 years. Lullabot, Cristina's employer, has generously offered her the opportunity to work on Drupal Starshot full-time.

Product Owner: Pamela Barone (Technocrat)

Pam will help ensure alignment and progress among contributors, including defining and prioritizing work. She brings strong communication and organizational skills, having led Drupal projects for more than 12 years.

Contribution Coordinator: Gábor Hojtsy (Acquia)

Gábor will focus on making it easier for individuals and organizations to contribute to Drupal Starshot. With extensive experience in Open Source contribution and community engagement, Gábor will help communicate progress, collaborate with the Drupal Association, and much more. Acquia will provide Gábor with the opportunity to work full-time on the Drupal Starshot project.

Starshot Council (Advisory Board)

To support the leadership team, we are establishing the Starshot Council, an advisory board that will include:

1. Three end-users (site builders)
2. Three Certified Drupal Partners
3. Two Drupal Core Committers (one framework manager and one release manager)
4. Three Drupal Association board members, one from each of the following Board Working Groups: Innovation, Marketing, and Fundraising
5. Two staff members from the Drupal Association

The council will meet monthly to ensure the leadership team remains aligned with the broader community and strategic goals. The Drupal Association is leading the effort to gather candidates, and the members of the Starshot Council will be announced in the coming weeks.

More opportunities to get involved

There are many opportunities for others to get involved as committers, designers, developers, content creators, and more.

We have specific tasks that need to be completed, such as finishing Project Browser, Recipes and Automatic Updates. To help people get involved with this work, we have set up several interactive Zoom calls. We'll update you on our progress and give you practical advice on where and how you can contribute.

Beyond the tasks we know need to be completed, there are still many details to define. Our next step is to identify these. My first priority was to establish the leadership team. With that in place, we can focus on product definition and clarifying the unknowns. We'll brief you on our initial ideas and next steps in our next Starshot session this Friday.

Conclusion

The Drupal Starshot project is off to an exciting start with this exceptional leadership team. I am grateful to these talented individuals for stepping up to drive this important project. Their combined expertise and dedication will drive excitement and improvements for the Drupal platform, ultimately benefiting our entire community. Stay tuned for updates as we continue to make strides in this ambitious initiative.

This week, approximately 1,400 Drupal enthusiasts came together for DrupalCon North America in Portland, Oregon. As a matter of tradition, I delivered my State of Drupal keynote, often referred to as "DriesNote". In case you missed it, you can watch the video or download my slides (385 MB).

This year's keynote was inspired by President John F. Kennedy's famous "Moonshot" speech. After being global leaders, the U.S. had fallen behind in the Space Race. Challenged by the Soviet cosmonaut program, President Kennedy rallied Americans around the ambitious goal of landing on the moon before the decade was out.

Drupal Starshot, a new version of Drupal

Drupal has always been known for its low-code capabilities. However, many competitors now offer similar features, and in some areas, they even surpass what Drupal provides. While Drupal is celebrated for its robustness, it can be challenging for newcomers, especially those with limited technical expertise. So in my keynote, I was excited to introduce Drupal Starshot, our "Moonshot" to make Drupal more accessible and easier to use.

Twenty-three years after Drupal's inception, we are preparing to launch a second official version of Drupal. For the time being, we're calling this second version "Drupal CMS". It will be built on top of Drupal Core and common contributed modules, and available as a separate download alongside Drupal Core. Wireframe of the Drupal.org download page featuring two options: Drupal CMS (Drupal Starshot) and Drupal Core, with Drupal CMS being promoted as the preferred starting point for most.

Drupal Starshot will be designed to have a great out-of-the-box experience. It will enable Ambitious Site Builders without Drupal experience to easily create a new Drupal site and extend it with pre-packaged recipes, all using their browser.

The vision for Drupal Starshot is the outcome of highly productive brainstorming sessions with Drupal Core Committers, the Drupal Association, colleagues at Acquia, various Drupal agencies, and others.

From an implementation standpoint, it will primarily rely on the Project Browser and Recipes initiatives, while also incorporating the Experience Builder initiative. We actually started prototyping Drupal Starshot a few weeks ago and showcased our progress at DrupalCon. Our goal is to launch a first version of Drupal Starshot within 8 months.

At DrupalCon, hundreds of people pledged to get involved, and we had two "super BoFs" with over 50 people each. If you're interested in getting involved with Drupal Starshot, you can register your interest at https://drupal.org/starshot. Additionally, join the conversation in the #Starshot channel on Drupal Slack.

Drupal's brand refresh and marketing strategy

Alongside our technical efforts, we've launched a bold marketing strategy. At DrupalCon Lille, I discussed the need for a fresh marketing approach. Since then, we've made tremendous progress.

I introduced a Drupal brand refresh, which includes updated brand guidelines to ensure a consistent and modern visual identity. This refresh aims to invigorate our brand – making it more vibrant and appealing to newcomers, while still honoring our history and representing our diverse, global community.

I couldn't cover all the details around the brand refresh in my keynote, so I'm expanding on them in this blog post. For a detailed explanation of Drupal's refreshed brand, check out this video by Shawn Perritt: Drupal 2024 brand refresh explained.

Our efforts went beyond just a brand refresh. The Marketing Committee has also guided the community in developing a comprehensive marketing toolkit, which includes messaging guides, pitch decks, and more. All these resources will be available at https://www.drupal.org/marketing.

Let's reach for the stars

As we advance with Drupal Starshot, I recall President Kennedy's famous words:

We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win.

Embracing the Drupal Starshot initiative reflects a similar ethos; we're not choosing the easy path, but the one that tests our strength, creativity, and ability to do hard things. The success of Drupal Starshot will be a testament to the incredible collective power of the Drupal community. It's a challenge we are also unwilling to postpone, and intend to win.

Drupal Starshot is more than a technological leap; it represents a shift in how we think, innovate, and collaborate. It's about reaching for the stars and making the Open Web accessible to everyone.

Thank you for being part of this journey. I can't wait to see where it takes us together. The feedback from the last two days at DrupalCon has been overwhelmingly positive. I am more committed than ever and excited to pledge a significant amount of my time to this mission, and to the future of Drupal.

Horizontal recently completed building a Drupal 10 site for a major children's hospital. Drupal has long been a favorite choice in the healthcare sector. This post will introduce a module we contributed that we hope will make Drupal an even more appealing choice when hospitals are considering how to present themselves on the Web.

Today we are talking about Drupal’s Popularity & Dev Experience, what could be better, and things that are great with guest Nathan Dentzau. We’ll also cover Spam Master as our module of the week.

For show notes visit: https://www.talkingDrupal.com/469

Topics

• Drupal's popularity
• What can Drupal to enhance popularity and enhance dev experience
• What is missing in Drupal
• What could use improvement in Drupal
• What about recent tooling improvements
• Drupal CMS (Starshot)

Resources

• New drupal
• Drupal at your fingertips
• Laravel
• Next.js
• Document using DDEV as the recommended Drupal local development environment
• Just say drupal

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Nate Dentzau - dentzau.com nathandentzau

MOTW Correspondent

Martin Anderson-Clutz - mandclu.com mandclu

• Brief description:
  • Have you ever wanted to defend your Drupal website from webform spam using a constantly updating list of known bad actors? There’s a module for that.
• Module name/project name:
  • Spam Master
• Brief history
  • How old: created in Mar 2018 by Pedro Alves (pedro-alves)
  • Versions available: 8.x-1.99 and 8.x-2.50, the latter of which support Drupal versions 8 through 11
• Maintainership
  • Actively maintained
  • Security coverage
  • Documentation on SpamMaster.org
  • Number of open issues: no open issues
• Usage stats:
  • 449 sites
• Module features and usage
  • Spam Master is a website protection technology that was originally created back in 2012, and is used across sites based on a variety of technologies, including Wordpress, Drupal, Joomla, and more
  • It uses a variety of techniques to identify and block malicious actors, including “real-time block lists”, honeypot traps, comment analysis, and more
  • By maintaining a list of known bad actors, tracked by IP address and email addresses used, you can also benefit from a “network effect” by being able to identify them based on malicious behavior on any of the thousands of sites using Spam Master
  • The module claims compatibility with a variety of forms, including registration, comments, commerce, and more
  • It includes a variety of reports you can use to understand the amount of spam your site is receiving, and the module can automatically send you an email if it believes your site has reached “Level 3” of spam targeting
  • Spam Master does use licenses on SpamMaster.org, but free licenses are available

Dear Readers,

DrupalCon Barcelona 2024 closed its doors this past week, but the conversations and ideas sparked by the event are just beginning to take root. For four days, the Drupal community gathered to share, celebrate, and look ahead to what’s next for the platform. DrupalCon Barcelona 2024 has wrapped up, and now the wait for DrupalCon Vienna 2025 begins!

Reflecting on the progress of Drupal, Dries Buytaert proudly remarked, 

“I’m so proud of how far we have come and how fast. This transformation is an incredible collective effort involving everyone from core committers, Drupal Association staff, volunteers, and agency partners; together, we focused on iterating rapidly and focused more on user experience than ever before. We had some brave out-of-the-box thinking…”

Giannis Kyriazopoulos of E-Sepia reported for The DropTimes on all three days of the conference, offering comprehensive coverage of the event.

The event started with contribution workshops and the opening ceremony, where the Women in Drupal Awards took center stage. Esmeralda Braad-Tijhoff was celebrated for her innovative leadership, earning the Define award, while Pamela Barone took home the Build award for her role in advancing key Drupal solutions. Alla Petrovska received the Scale award for her work in growing businesses using Drupal, demonstrating the platform's transformative impact.

One of the most anticipated moments was the Driesnote, where Dries Buytaert delivered his 40th State of Drupal address. He shared several key updates, as reported by The DropTimes, including the announcement that Drupal CMS 1.0 is set to launch on January 15, 2025. The Experience Builder (XB), built using React, is also set to revolutionize how users interact with Drupal, though it will be completed after the release of Drupal CMS. Dries emphasized Drupal's commitment to AI with the introduction of a Responsible AI Policy and demonstrated AI’s potential for automating tasks such as content creation and migration. He also announced the introduction of Drupal Recipes, which are bundles of reusable solutions aimed at streamlining common processes. Additionally, a partnership with Drupalize.me was unveiled to overhaul Drupal's documentation through the “Adopt a Document” initiative, inviting organizations to sponsor specific sections of the new tutorials.

The second day of the conference featured a moving story shared by Theódór Ragnar Gíslason, who recounted how an accident led him to extensive computer use and, eventually, hacking. He founded the organization "Defend Iceland" to address digital threats by introducing bounty programs accessible to both the public and private sectors. Gíslason also highlighted Drupal's security robustness, noting that after testing nearly 32,000 modules, very few vulnerabilities were found, solidifying Drupal's reputation for security.

In governance news, the Drupal Association Board election results were announced. Alejandro Moreno was elected to the At-Large seat, joining Sachiko Muto, Chairperson of OpenForum Europe, and Stella Power, CEO of Annertech, on the Board of Directors.

Esmeralda Tijhoff reported on the BoF session, ‘Getting started with la_eu: local association site,’ led by Bjorn Brala. The session brought together associations, builders, and potential users to discuss the roadmap of the Drupal La_eu project. Participants agreed on monthly check-ins via Slack, focusing on new features and automated updates for local sites. The session also highlighted the need for creating user stories and a roadmap for further development, with discussions about potentially involving an agency to accelerate progress.

Finally, the location of next year's event was revealed—DrupalCon Europe 2025 will take place in Vienna from October 14-17. The event will feature a new mascot, the White Horse, symbolizing the next chapter of Drupal's journey. Stay tuned for more details as they unfold in the coming months.

On other news, in an article for The DropTimes, Sinduri Guntupalli explores how Lupus Decoupled Drupal merges the power of Drupal's backend with modern frontend frameworks like Vue.js and Nuxt. The platform offers a flexible, API-driven architecture with custom elements, caching optimizations, and diverse deployment options, providing an efficient solution for both developers and content editors working on complex web projects.

Drupal CMS is set to receive significant enhancements to its advanced search functionality as 1xINTERNET announces a community-driven plan based on insights from nearly 100 experienced users. The comprehensive survey revealed an overwhelming preference for the Search API module as the standard search solution, with 87% of participants endorsing it over the Core Search module. Related technologies also received strong support, including Facets (88%), Search API Autocomplete (87%), and Search API Decoupled (78%).

We have also covered Provus Edu from Promet Source and Blökkli Starterkit from Liip. A story on Government Website Usability and another on the exclusion of direct module installs in Drupal 10.4 are a bonus. 

Last but not least, The DropTimes would like to extend our heartfelt gratitude to all those who helped us cover DrupalCon Barcelona 2024. 

We acknowledge that there are more stories to share. However, due to selection constraints, we must pause further exploration for now.

To get timely updates, follow us on LinkedIn, Twitter and Facebook. You can also, join us on Drupal Slack at #thedroptimes.

Thank you, 
Sincerely 
Alka Elizabeth 
Sub-editor, The DropTimes.

Discover 6 options to handle Drupal 7's end-of-life in 2025. From staying on Drupal 7 short-term to upgrading to Drupal 11 or migrating to other platforms. Find the solution that fits your business, budget, and security needs.

Migrating from Drupal 7 to the latest version, like Drupal 11, might seem like a big challenge, but it doesn’t have to be. One of the most common obstacles is figuring out how much it will cost. You want to know the price, but you don’t want to give full access to your site just to get an estimate. The good news? You can collect all the necessary information for an accurate project estimate in just 5 minutes.

Reporting from DrupalCon Barcelona, Esmeralda Tijhoff highlights the growing focus on non-code contributions. From event organizing to marketing, the sessions underscored the crucial role non-coders play in shaping Drupal's future. Find out how you can contribute to the community without writing a single line of code!

DrupalCon Barcelona Group picture by Bram Driesen (source)

Hola de nou barcelona

Barcelona for me has a long history of Drupal. For Drupal Dev Days 2012 I organized a mapping sprint, we cycled to DrupalCon Barcelona 2015 as part of the #tourdedrupal report , pictures and it was nice to visit a more local event - Drupal Summer - in 2016 (report, pictures).

Coding beyond functionality. Altering technologies through artistic research by Mónica Rikić Drupal CMS: una nova experiència immediata per a Drupal

This year, the focus was on Drupal CMS (previously known by its internal development name Starshot) which is all about bringing Drupal to the next level by creating an out-of-the-box experience including a new way to create layouts (Experience Builder), integrating AI features and many more features. If you like to dive deeper into Drupal CMS, check out the meta issue listing all work tracks as well as the landing page on Drupal.org.

Driesnote by Dries Buytaert

A similar, prepackaged version of Drupal already exists, handcrafted by many individuals and agencies. Recipes have recently been introduced to Drupal core. They allow to package configuration and content to pre-configure Drupal for common use cases like Search, SEO-optimization or an Event calendar feature.

Check out our blökkli starterkit that provides you will a fully-preconfigured setup that we use at Liip.

DrupalCon Crowd Drupal al govern

We saw Drupal's wide adoption for Government at DrupalCon Barcelona.

Implementing AI solutions for the French government - in this session it was demonstrated how public services were improved. AI technology would support the public servants by pregenerating responses that would be validated and modified by the public servant. The use of AI technology cut down response times from an average of 19 days to 3 days and a plus of 11% found the received answers helpful. 

Running a fleet of web sites with ease via LocalGov Drupal Microsites Platform showed a feature that we are also planning to roll out to one of our customers soon. You can easily manage multiple microsites in Drupal and configure on a per-site-basis the needed styling options in order to customize it to each site needs. By leveraging one CMS basis, the time-to-market and total cost of ownership for each microsite can be heavily reduced.

Jonathan Noack & Thom Nagy presenting about bs.ch

Large-scale content creation with Drupal — Delights, Pitfalls and support structures to help editors - in this session our customer Thom Nagy & our product owner Jonathan Noack presented their case study on relaunching bs.ch. I liked to see how a trustful collaboration with strong communication and stakeholder management combined with agile delivery and innovation led to an outcome all participants are proud about.

The website is our flagship showcase for blökkli, the interactive pagebuilder that has delighted many of our customers already and is available for the community under the open-source license.

Even though the canton is embedded in a typically restrictive government environment, they even launched the first AI-based assistant "Alva" that answers any questions the public might have about the canton in their own language using GPT-based technology.

Sostenibilitat

Conferences that bring together folks from all over the world have a hard time being sustainable. I appreciate the efforts to promote sustainable transport for example when amongst the attendees traveling by train, a winner was selected.

The organizing team also worked with the sponsors to make sure they were taking sustainability into account for how they set up their booths and limit the swag they would give out to participants.

DrupalCon Barcelona Mascot watching the crowd

The next DrupalCon Europe has been announced to happen in Vienna October 14-17 2025. I am particularly excited for this location as I grew up in Vienna and have been part of the Drupal Austria community as an organizing member before moving to Switzerland.

As Vienna is at the heart of Europe, I encourage you to think about sustainable ways to get to the conference.

If you travel via Hamburg, Bregenz/Feldkirch, Roma/Blorence/Bologna or Amsterdam, you should even be able to sleep on one of the new generation nightrains that offers better comfort, single-cabins and wheelchair-accessible sleepers. You typically can book your train 6 months ahead. As they introduced dynamic pricing recently, it is recommended to book your tickets early.

The beach alongside DrupalCon Barcelona

I leave you with some pictures from this year in Barcelona. 

Would you like to learn more about Drupal? Find an event near you. See you 2025 at one of my favorites Drupal Mountain Camp in Davos or at DrupalCon Vienna.

Drupal provides a robust framework for creating and managing content. However, managing form fields in complex content entities can be challenging. The Field Group, Inline Entity Form, and Conditional Fields modules offer practical tools for improving the user experience and streamlining the content creation process.

In the above live stream, we’ll use all three modules to organize and clean up fields on an “Event” content type.

Below are the show notes for the live stream.

This is the fourth article in a series of articles about the Batch API in Drupal. The Batch API is a system in Drupal that allows data to be processed in small chunks in order to prevent timeout errors or memory problems.

So far in this series we have looked at creating a batch process using a form, followed by creating a batch class so that batches can be run through Drush and then using the finished state to control batch processing. All of these articles go together to form a basis of batch processing in Drupal.

In this article we will look at bringing these concepts together to perform a task that is quite common on websites, processing Comma Separated Value or CSV files, which we will do using the Drupal Batch API.

Processing CSV data is very common on the web. Whilst it is quite common to integrate with an API it is sometimes simpler to just generate a CSV file of the data you need from one system and upload it into a form on a website. Most systems will allow you to export data as a CSV file of some kind, but it's also very easy to export a CSV from commonly used programs like Excel and Google Sheets.

Processing a CSV file in PHP is quite simple, but once you reach one hundred records you will find that PHP will start to throw errors due to timeouts or memory issues. The solution is to employ the Batch API to spread the load of that processing over a number of different requests.

Read more

Drupal Link Generation: Comparing link_generator, renderer, and Url Methods admin Sun, 09/29/2024 - 16:55

Modern web development relies heavily on automation to stay productive, validate code, and perform repetitive tasks that could slow developers down. Front-end development in particular has evolved, and it can be a daunting task to configure effective automation. In this post, I'll try to walk you through basic automation for your Drupal theme, which uses Storybook as its design system.

Recently I worked on a large Drupal project that needed to migrate its design system from Patternlab to Storybook. I knew switching design systems also meant switching front-end build tools. The obvious choice seemed to be Webpack, but as I looked deeper into build tools, I discovered ViteJS.

Vite is considered the Next Generation Frontend Tooling, and when tested, we were extremely impressed not only with how fast Vite is, but also with its plugin's ecosystem and its community support. Vite is relatively new, but it is solid and very well maintained. Learn more about Vite.

The topics covered in this post can be broken down in two categories:

1. Preparing the Front-end environment

   • Build the front-end environment with Vite & Storybook
   • Restructure the project
   • Configure TwigJS
   • Configure postCSS
   • Storybook's CSS configuration

2. Automating the environment

   • Copying static assets
   • The Watch task
   • Linting CSS and JavaScript

1. Build the front-end environment with Vite & Storybook

In a previous post, I wrote in detail how to build a front-end environment with Vite and Storybook, I am going to spare you those details here but you can reference them from the original post.

1. In your command line, navigate to the directory where you wish to build your environment. If you're building a new Drupal theme, navigate to your site's web/themes/custom/
2. Run the following commands (Storybook should launch at the end):

npm create vite@latest storybook cd storybook npx storybook@latest init --type react

Fig. 1: The first command builds the Vite project, and the last one integrates Storybook into it.

Reviewing Vite's and Storybook's out of the box build scripts

Vite and Storybook ship with a handful of useful scripts. We may find some of them already do what we want or may only need minor tweaks to make them our own.

• In your code editor, open package.json from the root of your newly built project.
• Look in the scripts section and you should see something like this:

"scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" },

Fig. 2: Example of default Vite and Storybook scripts out of the box.

To run any of those scripts, prefix them with npm run. For example: npm run build, npm run lint, etc. Let's review the scripts.

• dev: This is a Vite-specific command which runs the Vite app we just build for local development
• build: This is the "do it all" command. Running npm run build on a project runs every task defined in the build configuration we will do later. CI/CD runners run this command to build your app for production.
• lint: Will lint your JavaScript code inside .js or .jsx files.
• preview: This is also another Vite-specific command which runs your app in preview mode.
• storybook: This is the command you run to launch and keep Storybook running while you code.
• build-storybook: To build a static version of Storybook to package it or share it, or to run it as a static version of your project.

Building your app for the first time Getting a consistent environment

In front-end development, it is important everyone in your team use the same version of NodeJS while working in the same project. This ensures consistency in your project's behavior for everyone in your team. Differences in the node version your team uses can lead to inconsistencies when the project is built. One way to ensure your team is using the same node version when working in the same project, is by adding a .nvmrc file in the root of your project. This file specifies the node version your project uses. The node version is unique to each project, which means different projects can use different node versions.

• In the root of your theme, create a file called .nvmrc (mind the dot)
• Inside .nvmrc add the following: v20.14.0
• Stop Storybook by pressing Ctrl + C in your keyboard
• Build the app:

nvm install npm install npm run build

Fig. 3: Installs the node version defined in .nvmrc, then installs node packages, and finally builds the app.

NOTE: You need to have NVM installed in your system to execute nvm commands.
You only need to run nvm install once per project unless the node version changes. If you switch to a project that uses a different node version, when you return to this project, run nvm use to set your environment back to the right node version.

The output in the command line should look like this:

Fig. 4: Screenshot of files compiled by the build command.

By default, Vite names the compiled files by appending a random 8-character string to the original file name. This works fine for Vite apps, but for Drupal, the libraries we'll create expect for CSS and JS file names to stay consistent and not change. Let's change this default behavior.

• First, install the glob extension. We'll use this shortly to import multiple CSS files with a single import statement.

npm i -D glob

• Then, open vite.config.js in your code editor. This is Vite's main configuration file.
• Add these two imports around line 3 or directly after the last import in the file

import path from 'path'; import { glob } from 'glob';

• Still in vite.config.js, replace the export default... with the following snippet which adds new settings for file names:

export default defineConfig({ plugins: [ ], build: { emptyOutDir: true, outDir: 'dist', rollupOptions: { input: glob.sync(path.resolve(__dirname,'./src/**/*.{css,js}')), output: { assetFileNames: 'css/[name].css', entryFileNames: 'js/[name].js', }, }, }, })

Fig. 5: Build object to modify where files are compiled as well as their name preferences.

• First we imported path and { glob }. path is part of Vite and glob was added by the extension we installed earlier.
• Then we added a build configuration object in which we defined several settings:
  • emptyOutDir: When the build job runs, the dist directory will be emptied before the new compiled code is added.
  • outDir: Defines the App's output directory.
  • rollupOptions: This is Vite's system for bundling code and within it we can include neat configurations:
    • input: The directory where we want Vite to look for CSS and JS files. Here's where the path and glob imports we added earlier are being used. By using src/**/**/*.{css,js}, we are instructing Vite to look three levels deep into the src directory and find any file that ends with .css or .js.
    • output: The destination for where CSS and JS will be compiled into (dist/css and dist/js), respectively. And by setting assetFileNames: 'css/[name].css', and entryFileNames: 'css/[name].js', CSS and JS files will retain their original names.

Now if we run npm run build again, the output should be like this:

Fig. 6: Screenshot of compiled code using the original file names.

The random 8-character string is gone and notice that this time the build command is pulling more CSS files. Since we configured the input to go three levels deep, the src/stories directory was included as part of the input path.

2. Restructure the project

The out of the box Vite project structure is a good start for us. However, we need to make some adjustments so we can adopt the Atomic Design methodology. This is today's standards and will work well with our Component-driven Development workflow. At a high level, this is the current project structure:

> .storybook/ > dist/ > public/ > src/ |- stories/ package.json vite.config.js

Fig. 7: Basic structure of a Vite project listing only the most important parts.

• > .storybook is the main location for Storybook's configuration.
• > dist is where all compiled code is copied into and where the production app looks for all code.
• > public is where we can store images and other static assets we need to reference from our site. Equivalent to Drupal's /sites/default/files/.
• > src is the directory we work out of. We will update the structure of this directory next.
• package.json tracks all the different node packages we install for our app as well as the scripts we can run in our app.
• vite.config.js is Vite's main configuration file. This is probably where we will spend most of our time.

Adopting the Atomic Design methodology

The Atomic Design methodology was first introduced by Brad Frost a little over ten years ago. Since then it has become the standard for building web projects. Our environment needs updating to reflect the structure expected by this methodology.

• First stop Storybook from running by pressing Ctrl + C in your keyboard.
• Next, inside src, create these directories: base, components, and utilities.
• Inside components, create these directories: 01-atoms, 02-molecules, 03-organisms, 04-layouts, and 05-pages.
• While we're at it, delete the stories directory inside src, since we won't be using it.

NOTE: You don't need to use the same nomenclature as what Atomic Design suggests. I am using it here for simplicity. Update Storybook's stories with new paths

Since the project structure has changed, we need to make Storybook aware of these changes:

• Open .storybook/main.js in your code editor
• Update the stories: [] array as follows:

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

Fig. 8: Updating stories' path after project restructure.

The Stories array above is where we tell Storybook where to find our stories and stories docs, if any. In Storybook, stories are the components and their variations.

Add pre-built components

As our environment grows, we will add components inside the new directories, but for the purpose of testing our environment's automation, I have created demo components.

• Download demo components (button, title, card), from src/components/, and save them all in their content part directories in your project.
• Feel free to add any other components you may have built yourself. We'll come back to the components shortly.

3. Configure TwigJS

Before we can see the newly added components, we need to configure Storybook to understands the Twig and YML code we are about to introduce within the demo components. To do this we need to install several node packages.

• In your command line run:

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

• Next, update vite.config.js with the following configuration. Add the snippet below at around line 5:

import twig from 'vite-plugin-twig-drupal'; import yml from '@modyfi/vite-plugin-yaml'; import { join } from 'node:path';

Fig. 9: TwigJS related packages and Drupal filters function.

The configuration above is critical for Storybook to understand the code in our components:

• vite-plugin-twig-drupal, is the main TwigJS extension for our project.
• Added two new imports which are used by Storybook to understand Twig:
  • vite-plugin-twig-drupal handles transforming Twig files into JavaScript functions.
  • @modyfi/vite-plugin-yaml let's us pass data and variables through YML to our Twig components.

Creating Twig namespaces

• Still in vite.config.js, add the twig and yml() plugins to add Twig namespaces for Storybook.

plugins: [ twig({ namespaces: { atoms: join(__dirname, './src/components/01-atoms'), molecules: join(__dirname, './src/components/02-molecules'), organisms: join(__dirname, './src/components/03-organisms'), layouts: join(__dirname, './src/components/04-layouts'), pages: join(__dirname, './src/components/05-pages'), }, }), yml(), ],

Fig. 10: Twig namespaces reflecting project restructure.

Since we removed the react() function by using the snippet above, we can remove import react from '@vitejs/plugin-react' from the imports list as is no longer needed.

With all the configuration updates we just made, we need to rebuild the project for all the changes to take effect. Run the following commands:

npm run build npm run storybook

The components are available but as you can see, they are not styled even though each component contains a CSS stylesheet in its directory. The reason is Storybook has not been configured to find the component's CSS. We'll address this shortly.

4. Configure postCSS

What is PostCSS? It is a JavaScript tool or transpiler that turns a special PostCSS plugin syntax into Vanilla CSS.

As we start interacting with CSS, we need to install several node packages to enable functionality we would not have otherwise. Native CSS has come a long way to the point that I no longer use Sass as a CSS preprocessor.

• Stop Storybook by pressing Ctrl + C in your keyboard
• In your command line run this command:

npm i -D postcss postcss-import postcss-import-ext-glob postcss-nested postcss-preset-env

• At the root of your theme, create a new file called postcss.config.js, and in it, add the following:

import postcssImport from 'postcss-import'; import postcssImportExtGlob from 'postcss-import-ext-glob'; import postcssNested from 'postcss-nested'; import postcssPresetEnv from 'postcss-preset-env'; export default { plugins: [ postcssImportExtGlob(), postcssImport(), postcssNested(), postcssPresetEnv({ stage: 4, }), ], };

Fig. 11: Base configuration for postCSS.

One cool thing about Vite is that it comes with postCSS functionality built in. The only requirement is that you have a postcss.config.js file in the project's root. Notice how we are not doing much configuration for those plugins except for defining them. Let's review the code above:

• postcss-import the base for importing CSS stylesheets.
• postcss-import-ext-glob to do bulk @import of all CSS content in a directory.
• postcss-nested to unwrap nested rules to make its syntax closer to Sass.
• postcss-preset-env defines the CSS browser support level we need. Stage 4 means we want the "web standards" level of support.

5. CSS and JavaScript configuration

The goal here is to ensure that every time a new CSS stylesheet or JS file is added to the project, Storybook will automatically be aware and begin consuming their code.

NOTE: This workflow is only for Storybook. In Drupal we will use Drupal libraries in which we will include any CSS and JS required for each component.

There are two types of styles to be configured in most project, global styles which apply site-wide, and components styles which are unique to each component added to the project.

Global styles

• Inside src/base, add two stylesheets: reset.css and base.css.
• Copy and paste the styles for reset.css and base.css.
• Inside src/utilities create utilities.css and in it paste these styles.
• Inside src/, create a new stylesheet called styles.css.
• Inside styles.css, add the following imports:

@import './base/reset.css'; @import './base/base.css'; @import './utilities/utilities.css';

Fig. 12: Imports to gather all global styles.

The order in which we have imported our stylesheets is important as the cascading order in which they load makes a difference. We start from reset to base, to utilities.

• reset.css: A reset stylesheet (or CSS reset) is a collection of CSS rules used to clear the browser's default formatting of HTML elements, removing potential inconsistencies between different browsers before any of our styles are applied.
• base.css: CSS Base applies a style foundation for HTML elements that is consistent for baseline styles such as typography, branding and colors, font-sizes, etc.
• utilities.css: Are a collection of pre-defined CSS rules we can apply to any HTML element. Rules such as variables for colors, font size, font color, as well as margin, sizes, z-index, animations, etc.

Component styles

Before our components can be styled with their unique and individual styles, we need to make sure all our global styles are loaded so the components can inherit all the base/global styles.

• Inside src/components create a new stylesheet, components.css. This is where we are going to gather all components styles.
• Inside components.css add glob imports for each of the component's categories:

@import-glob './01-atoms/**/*.css'; @import-glob './02-molecules/**/*.css';

Fig. 13: Glob import for all components of all categories.

NOTE: Since we only have Atoms and Molecules to work with, we are omitting imports for 03-organisms, 04-layouts, 05-pages. Feel free to add them if you have that kind of components. Updating Storybook's Preview

There are several ways in which we can make Storybook aware of our styles and javascript. We could import each component's stylesheet and javascript into each *.stories.js file, but this could result in some components with multiple sub-components having several CSS and JS imports. In addition, this is not an automated system which means we need to manually do imports as they become available. The approach we are going to take is importing the stylesheets we created above into Storybook's preview system. This provides a couple of advantages:

• The component's *.stories.js files are clean without any css imports as all CSS will already be available to Storybook.
• As we add new components with individual stylesheets, these stylesheets will automatically be recognized by Storybook.

Remember, the order in which we import the styles makes a difference. We want all global and base styles to be imported first, before we import component styles.

• In .storybook/preview.js add these imports at the top of the page around line 2.

import Twig from 'twig'; import drupalFilters from 'twig-drupal-filters'; import '../src/styles.css'; /* Contains reset, base, and utilities styles. */ import '../src/components/components.css'; /* Contains all components CSS. */ function setupFilters(twig) { twig.cache(); drupalFilters(twig); return twig; } setupFilters(Twig);

Fig. 14: Importing all styles, global and components.

In addition to importing two new extensions: twig and twig-drupal-filters, we setup a setupFilters function for Storybook to read Drupal filters we may use in our components. We are also importing two of the stylesheets we created earlier:

• styles.css contains all the CSS code from reset.css, base.css, and utilities.css (in that order)
• components.css contains all the CSS from all components. As new components are added and they have their own stylesheets, they will automatically be included in this import.

IMPORTANT: For Storybook to immediately display changes you make in your CSS, the imports above need to be from the src directory and not dist. I learned this the hard way. JavaScript compiling

On a typical project, you will find that the majority of your components don't use JavaScript, and for this reason, we don't need such an elaborate system for JS code. Importing the JS files in the component's *.stories.js should work just fine. Since the demo components dont use JS, I have commented near the top of card.stories.js how the component's JS file would be imported if JS was needed.

If the need for a more automated JavaScript processing workflow arose, we could easily repeat the same CSS workflow but for JS.

Build the project again

Now that our system for CSS and JS is in place, let's build the project to ensure everything is working as we expect it.

npm run build npm run storybook

You may notice that now the components in Storybook look styled. This tells us our new system is working as expected. However, the Card component, if you used the demo components, is missing an image. We will address this issue in the next section.

This concludes the preparation part of this post. The remaining part will focus on creating automation tasks for compiling, minifying and linting code, copying static assets such as images, and finally, watching for code changes as we code. 6. Copying images and other assets

Copying static assets like images, icons, JS, and other files from src into dist is a common practice in front-end projects. Vite comes with built-in functionality to do this. Your assets need to be placed in the public directory and Vite will automatically copy them on build. However, sometimes we may have those assets alongside our components or other directories within our project.

In Vite, there are many ways to accomplish any task, in this case, we will be using a nice plugin called vite-plugin-static-copy. Let's set it up.

• If Storybook is running, kill it with Ctrl + C in your keyboard
• Next, install the extension by running:

npm i -D vite-plugin-static-copy

• Next, right after all the existing imports in vite.config.js, import one more extension:

import { viteStaticCopy } from 'vite-plugin-static-copy';

• Lastly, still in vite.config.js, add the viteStaticCopy function configuration inside the plugins:[] array:

viteStaticCopy({ targets: [ { src: './src/components/**/*.{png,jpg,jpeg,svg,webp,mp4}', dest: 'images', }], }),

Fig. 15: Adds tasks for copying JavaScript and Images from src to dist.

The viteStaticCopy function we added allows us to copy any type of static assets anywhere within your project. We added a target array in which we included src and dest for the images we want copied. Every time we run npm run build, any images inside any of the components, will be copied into dist/images.
If you need to copy other static assets, simply create new targets for each.

• Build the project again:

npm run build npm run storybook

The missing image for the Card component should now be visible, see below. Pretty sweet! 🍰

Fig. 16: Screenshot of the Card component in Storybook.

7. The Watch task

A watch task makes it possible for developers to see the changes they are making as they code, and without being interrupted by running commands. Depending on your configuration, a watch task watches for any changes you make to CSS, JavaScript and other file types, and upon saving those changes, code is automatically compiled, and a Hard Module Reload (HMR) is evoked, making the changes visible in Storybook.

Although there are extensions to create watch tasks, we will stick with Storybook's out of the box watch functionality because it does everything we need. In fact, I have used this very approach on a project that supports over one hundred sites.

I actually learned this the hard way, I originally was importing the key stylesheets in .storybook/preview.js using the files from dist. This works to an extend because the code is compiled upon changes, but Storybook is not aware of the changes unless we restart Storybook. I spent hours debugging this issue and tried so many other options, but at the end, the simple solution was to import CSS and JS into Storybook's preview using the source files. For example, if you look in .storybook/preview.js, you will see we are importing two CSS files which contain all of the CSS code our project needs:

import '../src/styles.css'; import '../src/components/components.css';

Fig. 17: Importing source assets into Storybook's preview.

Importing source CSS or JS files into Storybook's preview allows Storybook to become aware immediately of any code changes.

The same, or kind of the same works for JavaScript. However, the difference is that for JS, we import the JS file in the component's *.stories.js, which in turn has the same effect as what we've done above for CSS. The reason for this is that typically not every component we build needs JS.

A real watch task

Currently we are running npm run storybook as a watch task. Nothing wrong with this. However, to keep up with standards and best practices, we could rename the storybook command, watch, so we can run npm run watch. Something to consider.

You could also make a copy of the storybook command and name it watch and add additional commands you wish to run with watch, while leaving the original storybook command intact. Choices, choices.

8. Linting CSS and JavaScript

Our workflow is coming along nicely. There are many other things we can do but for now, we will end with one last task: CSS and JS linting.

• Install the required packages. There are several of them.

npm i -D eslint stylelint vite-plugin-checker stylelint-config-standard stylelint-order stylelint-selector-pseudo-class-lvhfa

• Next, after the last import in vite.config.js, add one more:

import checker from 'vite-plugin-checker';

• Then, let's add one more plugin in the plugins:[] array:

checker({ eslint: { lintCommand: 'eslint "./src/components/**/*.{js,jsx}"', }, stylelint: { lintCommand: 'stylelint "./src/components/**/*.css"', }, }),

Fig. 18: Checks for linting CSS and JavaScript.

So we can execute the above checks on demand, we can add them as commands to our app.

• In package.json, within the scripts section, add the following commands:

"eslint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "stylelint": "stylelint './src/components/**/*.css'",

Fig. 19: Two new npm commands to lint CSS and JavaScript.

• We installed a series of packages related to ESLint and Stylelint.
• vite-plugin-checker is a plugin that can run TypeScript, VLS, vue-tsc, ESLint, and Stylelint in worker thread.
• We imported vite-plugin-checker and created a new plugin with two checks, one for ESLint and the other for Stylelint.
• By default, the new checks will run when we execute npm run build, but we also added them as individual commands so we can run them on demand.

Configure rules for ESLint and Stylelint

Both ESLint and Stylelint use configuration files where we can configure the various rules we want to enforce when writing code. The files they use are eslint.config.js and .stylelintrc.yml respectively. For the purpose of this post, we are only going to add the .stylelintrc.yml in which we have defined basic CSS linting rules.

• In the root of your theme, create a new file called .stylelintrc.yml (mind the dot)
• Inside .stylelintrc.yml, add the following code:

extends: - stylelint-config-standard plugins: - stylelint-order - stylelint-selector-pseudo-class-lvhfa ignoreFiles: - './dist/**' rules: at-rule-no-unknown: null alpha-value-notation: number color-function-notation: null declaration-empty-line-before: never declaration-block-no-redundant-longhand-properties: null hue-degree-notation: number import-notation: string no-descending-specificity: null no-duplicate-selectors: true order/order: - - type: at-rule hasBlock: false - custom-properties - declarations - unspecified: ignore disableFix: true order/properties-alphabetical-order: error plugin/selector-pseudo-class-lvhfa: true property-no-vendor-prefix: null selector-class-pattern: null value-keyword-case: - lower - camelCaseSvgKeywords: true ignoreProperties: - /^--font/

Fig. 20: Basic CSS Stylelint rules.

The CSS rules above are only a starting point, but should be able to check for the most common CSS errors.

Test the rules we've defined by running either npm run build or npm run stylelint. Either command will alert you of a couple of errors our current code contains. This tells us the linting process is working as expected. You could test JS linting by creating a dummy JS file inside a component and writing bad JS in it.

9. One last thing

It goes without saying that we need to add storybook.info.yml and storybook.libraries.yml files for this to be a true Drupal theme. In addition, we need to create the templates directory somewhere within our theme.

storybook.info.yml

The same way we did for Storybook, we need to create namespaces for Drupal. This requires the Components module and storybook.info.yml configuration is like this:

components: namespaces: atoms: - src/components/01-atoms molecules: - src/components/02-molecules organisms: - src/components/03-organisms layouts: - src/components/04-layouts pages: - src/components/05-pages templates: - src/templates

Fig. 21: Drupal namespaces for nesting components.

storybook.libraries.yml

The recommended method for adding CSS and JS to components or a theme in Drupal is by using Drupal libraries. In our project we would create a library for each component in which we will include any CSS or JS the component needs. In addition, we need to create a global library which includes all the global and utilities styles. Here are examples of libraries we can add in storybook.libraries.yml.

global: version: VERSION css: base: dist/css/reset.css: {} dist/css/base.css: {} dist/css/utilities.css: {} button: css: component: dist/css/button.css: {} card: css: component: dist/css/card.css: {} title: css: component: dist/css/title.css: {}

Fig. 22: Drupal libraries for global styles and component's styles.

/templates

Drupal's templates' directory can be created anywhere within the theme. I typically like to create it inside the src directory. Go ahead and create it now.

• Inside storybook.info.yml, add a new Twig namespace for the templates directory. See example above. Update your path accordingly based on where you created your templates directory.

P.S: When the Vite project was originally created at the begining of the post, Vite created files such as App.css, App.js, main.js, and index.html. All these files are in the root of the project and can be deleted. It won't affect any of the work we've done, but Vite will no longer run on its own, which we don't need it to anyway.

In closing

I realize this is a very long post, but there is really no way around it when covering these many topics in a single post. I hope you found the content useful and can apply it to your next Drupal project. There are different ways to do what I've covered in this post, and I challenge you to find better and more efficient ways. For now, thanks for visiting.

Download the theme

A full version of the Drupal theme built with this post can be downloaded.

Download the theme

Make sure you are using the theme branch from the repo.

Every great product needs a great supporting documentation - this rule is as simple and well known as it is hard to stick to, especially if we are talking about the continuously growing Open Source system that Drupal is. A while ago we came to realise that Drupal documentation needs a revamp. Together with ever amazing community members, the DA engineering team has been looking for a solution that will bring world class documentation to Drupal and that joint effort did not go in vain as such a solution has been defined!

As each of you can imagine, the goal of overhauling documentation tooling to a modern docs-as-code system is a big challenge so it is logical that we decided to define bite-sized deliverables and today we are happy to announce the first phase of the project - delivering clear and easy to follow user guide for Drupal CMS. And we need your help!

The Drupal Association is kicking off an initiative to bring Drupal.org documentation and accompanying software to world-class level. For the first phase dedicated to the Drupal CMS we are partnering with Drupalize.me: they will create the gold-standard user guide for Drupal CMS. 

But that is just the beginning! As a next step Drupal Association will onboard the Documentation Lead who, in close collaboration with the community, will help to ensure that Drupal.org documentation is clear, comprehensive and current. 

Last but not the least, we will implement a docs-as-code system that will improve the creation and maintenance process of documentation. 

Now the question is how you can help? And the answer is simple - by “Adopting a Document”!

Inspired by the “Adopt a Highway” program that is becoming more and more popular in North America, we created a way for the partners to get involved in creating great documentation by taking care of one of the Drupal CMS milestones and sponsoring creation and further maintenance of the documentation for one or multiple Drupal CMS working tracks.

Thanks to your support, future users of Drupal CMS will be able to easily find answers to the questions that might arise as they discover Drupal CMS capabilities.

But not only that, as we find it fair for the partners who will decide to contribute to the initiative to receive some benefits:

• Your logo will be placed in the sidebar of the adopted documentation section—which Your logo will be placed on the documentation page(s) you adopt, visible to the thousands of new users we expect to try Drupal CMS

• Your logo will be highlighted on Drupal.org as a Drupal CMS sponsor, as well as at DrupalCons for the next year!

• For each $100 of contribution you will receive 1 credit that you will be able to use within 1 year.

We’ve got 30 documentation sections available for sponsorship so far. You can adopt one of those and by donating $2400 you will ensure that future users will be able to easily find answers to the questions that might arise as they discover Drupal CMS as well as will enable for the next phase of the project to get started. 

Sounds exciting, right? So if you are keen to be part of Adopt a document - do reach out to me and let’s work together to bring Drupal Documentation to the new level!