fidzu : Drupal

Hey you're back! 🙂 In the previous post we talked about how to build a custom Drupal theme using Storybook as the design system. We also built a simple component to demonstrate how Storybook, using custom extensions, can understand Twig. In this post, the focus will be on making Drupal aware of those components by connecting Drupal to Storybook.
If you are following along, we will continue where we left off to take advantage of all the prep work we did in the previous post. Topics we will cover in this post include:

1. What is Drupal integration
2. Installing and preparing Drupal for integration
3. Building components in Storybook
4. Building a basic front-end workflow
5. Integrating Drupal with Storybook components

What is Drupal integration?

In the context of Drupal development using the component-driven methodology, Drupal integration means connecting Drupal presenter templates such as node.html.twig, block.html.twig, paragraph.html.twig, etc. to Storybook by mapping Drupal fields to component fields in Storybook. This in turn allows for your Drupal content to be rendered wrapped in the Storybook components.

The advantage of using a design system like Storybook is that you are in full control of the markup when building components, as a result your website is more semantic, accessible, and easier to maintain.

Building more components in Storybook

The title component we built in the previous post may not be enough to demonstrate some of the advanced techniques when integrating components. We will build a larger component to put these techniques in practice. The component we will build is called Card and it looks like this:

When building components, I like to take inventory of the different parts that make up the components I'm building. The card image above shows three parts: An image, a title, and teaser text. Each of these parts translates into fields when I am defining the data structure for the component or building the entity in Drupal.

Building the Card component

• Open the Drupal site in your code editor and within your code editor navigate to the storybook theme (web/themes/custom/storybook)
• Create two new directories inside components called 01-atoms and 02-molecules
• Inside 02-molecules create a new directory called card
• Inside the card directory add the following four files:
  • card.css: component's styles
  • card.twig: component's markup and logic
  • card.stories.jsx: Storybook's story
  • card.yml: component's demo data
• Add the following code snippet to card.yml:

---
modifier: ''
image: <img src="https://source.unsplash.com/cHRDevKFDBw/640x360" alt="Palm trees near city buildings" />
title:
  level: 2
  modifier: ''
  text: 'Tours & Experiences'
  url: 'https://mariohernandez.io'
teaser: 'Step inside for a tour. We offer a variety of tours and experiences to explore the building's architecture, take you backstage, and uncover the best food and drink. Tours are offered in different languages and for different levels of mobility.'

• Add the following to card.twig to provide the markup and logic for the card:

{{ attach_library('storybook/card') }}

<article class="card{{ modifier ? ' ' ~ modifier }}{{- attributes ? ' ' ~ attributes.class -}}" {{- attributes ? attributes|without(class) -}}>
  {% if image %}
    <div class="card__image">
      <figure>
        {{ image }}
      </figure>
    </div>
  {% endif %}

  <div class="card__content">
    {% if title %}
      {% include "@atoms/title/title.twig" with {
        'level': title.level,
        'modifier': title.modifier,
        'text': title.text,
        'url': title.url,
      } only %}
    {% endif %}

    {% if teaser %}
      <p class="card__teaser">{{ teaser }}</p>
    {% endif %}
  </div>
</article>

• Copy and paste these styles into card.css.

• Finally, let's create the Storybook card story by adding the following to card.stories.jsx:

import parse from 'html-react-parser';

import card from './card.twig';
import data from './card.yml';
import './card.css';

const component = {
  title: 'Molecules/Card',
};

export const Card = {
  render: (args) => parse(card(args)),
  args: { ...data },
};

export default component;

Let's go over a few things regarding the code above:

• The data structure in card.yml reflects the data structure and type we will use in Drupal.
  • The image field uses the entire <img> element rather than just using the image src and alt attributes. The reason for this is so when we get to Drupal, we can use Drupal's full image entity. This is a good practice for caching purposes.
• card.twig reuses the title component we created in the previous post. Rather than build a title from scratch for the Card and repeat the code we already wrote, reusing the existing components keeps us DRY.
• card.stories.jsx in the Storybook story for the Card, notice how the code in this file is very similar to the code in the title.stories.jsx. Even with complex components, when we port them into Storybook as stories, most times the code will be similar as what you see above because Storybook is simply parsing whatever is in .twig and .yml files. There are exceptions when the React code may have extra parameters or logic which typically happens when we're building stories variations. Maybe a topic for a different blog post. 😉

Before we preview the Card, some updates are needed

You may have noticed in card.twig we used the namespace @atoms when nesting the title component. This namespace does not exist, and we need to create it now. In addition, we need to move the title component into the 01-atoms directory:

• In your code editor or command line (whichever is easier), move the title directory into the 01-atoms directory
• In your editor, open title.stories.jsx and change the line
  title: 'Components/Title' to title: 'Atoms/Title'. This will display the title component within the Atoms category in Storybook's sidebar.
• Rather than have you make individual changes to vite.config.js, let's replace/overwrite all its content with the following:

/* eslint-disable */
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({
  root: 'src',
  publicDir: 'public',
  build: {
    emptyOutDir: true,
    outDir: '../dist',
    rollupOptions: {
      input: {
        'reset': './src/css/reset.css',
        'styles': './src/css/styles.css',
        'card': './src/components/02-molecules/card/card.css',
      },
      output: {
        assetFileNames: 'css/[name].css',
      },
    },
    sourcemap: true,
  },
  plugins: [
    twig({
      namespaces: {
        atoms: join(__dirname, './src/components/01-atoms'),
        molecules: join(__dirname, './src/components/02-molecules'),
      },
    }),
    // Allows Storybook to read data from YAML files.
    yml(),
  ],
})

Let's go over some of the most noticeable updates inside vite.config.js:

• We have defined a few things to improve the functionality of our Vite project, starting with using src as our app root directory and public for publicDir. This helps the app understand the project structure in a relative manner.

• Next, we defined a Build task which provides the app with defaults for things like where should it compiled code to (i.e. /dist), and rollupOptions for instructing the app which stylesheets to compile and what to call them.

• As part of the rollupOptions we also defined two stylesheets for global styles (reset.css and styles.css). We'll create these next.

  Important

  This is as basic as it gets for a build workflow and in no way would I recommend this be your front-end build workflow. When working on bigger projects with more components, it is best to define a more robust and dynamic workflow that provides automation for all the repetitive tasks performed on a typical front-end project.

• Under the Plugins section, we have defined two new namespaces, @atoms and @molecules, each of which points to specific path within our components directory. These are the namespaces Storybook understands when nesting components. You can have as many namespaces as needed.

Adding global styles

• Inside storybook/src, create a new directory called css
• Inside the css directory, add two new files, reset.css and styles.css
• Here are the styles for reset.css and styles.css. Please copy them and paste them into each of the stylesheets.
• Now for Storybook to use reset.css and styles.css, we need to update /.storybook/preview.js by adding these two imports directly after the current imports, around line 4.

import '../dist/css/reset.css';
import '../dist/css/styles.css';

Previewing the Card in Storybook

Remember, you need NodeJS v20 or higher as well as NVM installed on your machine.

• In your command line, navigate to the storybook directory and run:

nvm install
npm install
npm run build
npm run storybook

A quick note about the commands above:

• nvm install and npm install are typically only done once in your app. These commands will first install and use the node version specified in .nvmrc, and will install all the required node packages found in package.json. If you happen to be workign on another project that may use a different version of node, when you comeback to the Storybook project you will need to run nvm use in order to resume using the right node version.
• npm run build is usually only ran when you have made configuration changes to the project or are introducing new files.
• npm run storybook is the command you will use all the time when you want to run Storybook.

After Storybook launches, you should see two story categories in Storybook's sidebar, Atoms and Molecules. The title component should be under Atoms and the Card under Molecules. See below:

Installing Drupal and setting up the Storybook theme

We have completed all the prep work in Storybook and our attention now will be all in Drupal. In the previous post all the work we did was in a standalone project which did not require Drupal to run. In this post, we need a Drupal site to be able to do the integration with Storybook. If you are following along and already have a Drupal 10 site ready, you can skip the first step below.

1. Build a basic Drupal 10 website (I recommend using DDEV).
2. Add the storybook theme to your website. If you completed the excercise in the previous post, you can copy the theme you built into your site's /themes/custom/ directory, Otherwise, you can clone the previous post repo into the same location so it becomes your theme. After this your theme's path should be themes/custom/storybook.
3. No need to enable the theme just yet, we'll come back to the theme shortly.
4. Finally, create a new Article post that includes a title, body content and an image. We'll use this article later in the process.

Creating Drupal namespaces and adding Libraries

Earlier we created namespaces for Storybook, now we will do the same but this time for Drupal. It is best if the namesapces' names between Storybook and Drupal match for consistency. In addition, we will create Drupal libraries to allow Drupal to use the CSS we've written.

• Install and enable the Components module
• Add the following namespaces at the end of storybook.info.yml (mind your indentation):

components:
  namespaces:
    atoms: src/components/01-atoms
    molecules: src/components/02-molecules

• Replace all content in storybook.libraries.yml with the following:

global:
  version: VERSION
  css:
    base:
      dist/css/reset.css: {}
      dist/css/styles.css: {}

card:
  css:
    component:
      dist/css/card.css: {}

• Let's go over the changes to both, storybook.info.yml and storybook.libraries.yml files:

  • Using the Components module we created two namespaces: @atoms and @molecules. Each namespace is associated with a specific path to the corresponding components. This is important because Drupal by default only looks for Twig templates inside the /templates directory and without the Components module and the namespaces it would not know to look for our component's Twig templates inside the components directory.
  • Then we created two Drupal libraries: global and card. The Global library includes two CSS stylesheets (reset.css and styles.css), which handle base styles in our theme. the Card library includes the styles we wrote for the Card component. If you noticed, when we created the Card component, the first line inside card.twig is a Twig attach library statement. Basically card.twig is expecting a Drupal library called card.

Turn Twig debugging on

All the pieces are in place to Integrate the Card component so Drupal can use it to render article nodes when viewed in teaser view mode.

• The first thing we need to do to begin the integration process is to determine which Twig template Drupal uses to render article nodes in teaser view mode. One easy way to do this is by turning Twig debugging on. This used to be a complex configuration but starting with Drupal 10.1 you can now do it directly in Drupal's UI:

  • While logged in with admin access, navigate to /admin/config/development/settings on your browser. This will bring up the Development settings page.
  • Check all the boxes on this page and click Save settings. This will enable Twig debugging and disable caching.
  • Now navigate to /admin/config/development/performance so we can turn CSS and JS aggregation off.
  • Under Bandwidth optimization cleared the two boxes for CSS and Javascript aggregation then click on Save configuration.
  • Lastly, click the Clear all caches button. This will ensure any CSS or JS we write will be available without having to clear caches.

• With Twig debugging on, go to the homepage where the Article we created should be displayed in teaser mode. If you right-click on any part of the article and select inspect from the context menu, you will see in detail all the templates Drupal is using to render the content on the current page. See example below.

  Note

  I am using a new basic Drupal site with Olivero as the default theme. If your homepage does not display Article nodes in teaser view mode, you could create a simple Drupal view to list Article nodes in teaser view mode to follow along.

In the example above, we see a list of templates that start with node...*. These are called template suggestions and are the names Drupal is suggesting we can assign our custom templates. The higher the template appears on the list, the more specific it is to the piece of content being rendered. For example, changes made to node.html.twig would affect ALL nodes throughout the site, whereas changes made to node--1--teaser.html.twig will only affect the first node created on the site but only when it's viewed in teaser view mode.

Notice I marked the template name Drupal is using to render the Article node. We know this is the template because it has an X before the template name.

In addition, I also marked the template path. As you can see the current template is located in core/themes/olivero/templates/content/node--teaser.html.twig.

And finally, I marked examples of attributes Drupal is injecting in the markup. These attributes may not always be useful but it is a good practice to ensure they are available even when we are writing custom markup for our components.

Create a template suggestion

By looking at the path of the template in the code inspector, we can see that the original template being used is located inside the Olivero core theme. The debugging screenshot above shows a pretty extensive list of templates suggestions, and based on our requirements, copying the file node--teaser.html.twig makes sense since we are going to be working with a node in teaser view mode.

• Copy /core/themes/olivero/templates/content/node--teaser.html.twig into your theme's /storybook/templates/content/. Create the directory if it does not exist.
• Now rename the newly copied template to node--article--teaser.html.twig.
• Clear Drupal's cache since we are introducing a new Twig template.

As you can see, by renaming the template node--article--teaser (one of the names listed as a suggestion), we are indicating that any changes we make to this template will only affect nodes of type Article which are displayed in Teaser view mode. So whenever an Article node is displayed, if it is in teaser view mode, it will use the Card component to render it.

The template has a lot of information that may or may not be needed when integrating it with Storybook. If you recall, the Card component we built was made up of three parts: an image, a title, and teaser text. Each of those are Drupal fields and these are the only fields we care about when integrating. Whenever when I copy a template from Drupal core or a module into my theme, I like to keep the comments on the template untouched. This is helpful in case I need to reference any variables or elements of the template.

The actual integration ...Finally

1. Delete everything from the newly copied template except the comments and the classes array variable
2. At the bottom of what is left in the template add the following code snippet:

{% set render_content = content|render %}

{% set article_title = {
    'level': 2,
    'modifier': 'card__title',
    'text': label,
    'url': url,
  }
%}

{% include '@molecules/card/card.twig' with {
  'attributes': attributes.addClass(classes),
  'image': content.field_image,
  'title': article_title,
  'teaser': content.body,
} only %}

• We set a variable with content|render as its value. The only purpose for this variable is to make Drupal aware of the entire content array for caching purposes. More info here.
• Next, we setup a variable called article_title which we structured the same way as data inside card.yml. Having similar data structures between Drupal and our components provides many advantages during the integration process.
  • Notice how for the text and url properties we are using Drupal specific variables (label and url), accordingly. If you look in the comments in node--article--teaser.html.twig you will see these two variables.
• We are using a Twig include statement with the @molecules namespace to nest the Card component into the node template. The same way we nested the Title component into the Card.
• We mapped Drupal's attributes into the component's attributes placeholder so Drupal can inject any attributes such as CSS classes, IDs, Data attributes, etc. into the component.
• Finally, we mapped the image, title and teaser fields from Drupal to the component's equivalent fields.
• Save the changes to the template and clear Drupal's cache.

Enable the Storybook theme

Before we forget, let's enable the Storybook theme an also make it your default theme, otherwise all the work we are doing will not be visible since we are currently using Olivero as the default theme. Clear caches after this is done.

Previewing the Article node as a Card

Integration is done and we switched our default theme to Storybook. After clearing caches if you reload the homepage you should be able to see the Article node you wrote but this time displayed as a card. See below:

• If you right-click on the article and select Inspect, you will notice the following:
  • Drupal is now using node--article--teaser.html.twig. This is the template we created.
  • The template path is now themes/custom/storybook/src/templates/content/.
  • You will also notice that the article is using the custom markup we wrote for the Card component which is more semantic, accessible, but in addition to this, the <article> tag is also inheriting several other attributes that were provided by Drupal through its Attributes variable. See below:

If your card's image size or aspect ratio does not look as the one in Storybook, this is probably due to the image style being used in the Article Teaser view mode. You can address this by:

• Going to the Manage display tab of the Article's Teaser view mode (/admin/structure/types/manage/article/display/teaser).
• Changing the image style for the Image field for one that may work better for your image.
• Preview the article again on the homepage to see if this looks better.

In closing

This is only a small example of how to build a simple component in Storybook using Twig and then integrate it with Drupal, so content is rendered in a more semantic and accessible manner. There are many more advantages of implementing a system like this. I hope this was helpful and see the potential of a component-driven environment using Storybook. Thanks for visiting.

Download the code

For a full copy of the code base which includes the work in this and the previous post, clone or download the repo and switch to the card branch. The main branch only includes the previous post code.

Download the code

02 May 2024 12:00am GMT

01 May 2024 9:26pm GMT

Polishing Drupal's Admin UI mherchel Wed, 05/01/2024 - 16:42

01 May 2024 8:42pm GMT

01 May 2024 8:06pm GMT

The Drupal Administration UI initiative, introduced in June 2023, continues to improve the user experience of Drupal core. The initiative was launched with the commitment and goal of improving the Drupal experience for all users using Drupal and reversing the existing negative impression of the Drupal user interface (UI).

01 May 2024 2:58pm GMT

Welcome back to "Skills Upgrade" a Talking Drupal mini-series following the journey of a D7 developer learning D10. This is the final episode, 9.

Topics

• Review status of Chad's Smart Date test
• Panel discussion
  • Chad, What was your biggest takeaway?
  • Mike, How do you approach this type of one on one mentorship differently than your courses?
  • AmyJune, do you think there are other types of focused mentorship like this that would be valuable to the community?
  • Chad, what was the most surprising thing you learned in Modern Drupal vs Drupal 7?
  • Michael, what did you learn through this process?
  • How do you think people will use this journey to help their learning process?
  • Chad, what are your plans for your next contribution?

Resources

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

Nic Laflin - www.nlightened.net AmyJune Hineline - @volkswagenchick

Guests

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

01 May 2024 10:53am GMT

mauricio Wed, 05/01/2024 - 06:00

01 May 2024 6:04am GMT

janez Wed, 05/01/2024 - 09:03

01 May 2024 6:04am GMT

This is part 2 of a series of articles that defines our approach to frontend performance optimization. In this part we get into image optimization.

01 May 2024 4:00am GMT

Authored by: Nadiia Nykolaichuk.

30 Apr 2024 4:29pm GMT

Join us for an interactive day devoted to Drupal in healthcare- a relaxed and friendly close to DrupalCon with learning, networking, and discussing. Whether you are in a pharmaceutical company, a state department of health, a non-profit hospital, a public health organization, or anyplace else in the broad healthcare space, there are unique needs in ensuring security, accessibility, compliance, and availability of important information and tools.

Healthcare is a crucial, dynamic space for web development today. Online communication and emerging technologies promise improved access and capabilities for patients and professionals. Crafting inspiring and useful digital experiences, however, must be built on a solid foundation of accessibility, security, and compliance. Come listen to industry leaders share their experience solving these challenges in healthcare.

Get tickets to go to DrupalCon and the Healthcare Summit!

What You Will Get by Attending

• Andy Waldrop will talk about scalable healthcare content in Drupal- with lessons from building WebMD!
• Georgiana Masgras and Jesse Meece will talk about using Drupal to makes it easy to maintain our sites.
• Jon Stewart will talk about how to leverage Drupal for web application development- the Open Web in healthcare!
• Two table talk sessions will give everybody a chance to dive deeply into key topics, including the application of large language models in healthcare and biggest takeways from DrupalCon and the summit. Bring your needs and we will embark on facilitated peer-to-peer problem solving with others who are affected and tech and healthcare industry experts.
• Our sponsors, Evolving Web and Acquia (by way of their partner Phase2), will have special presentations
• We will be closing the day with lightning talks. Invited topics include: Future of Drupal at your company (and how to improve it), multisite platforms, knowledge bases, provider directories, and the healthcare take on layout builder becoming experience builder versus paragraphs.

We will be all wrapped up by 4pm.

Attend DrupalCon and the Healthcare Summit!

Who Should Attend

Everybody interested in hearing and discussing how companies and the community are creating rich digital experiences in the healthcare space. All levels of colleagues in the pharma, medical, clinical, hospital, payers, caregivers, advocates, and healthcare professional space should go to DrupalCon and the Healthcare Summit!

COVID-19 Safer Space

The Oregon Convention Center controls all rooms per ASHREA 62.1 standards, using sensors to monitor occupancy based on CO₂ levels and bring outside air into the space accordingly. They report at the most levels at 800-1000 ppm during normal occupancy, and use MERV-13 filters for any filtration, which is appropriate for COVID-19.

Agaric will have high-quality N95 masks available to anyone who wants them and will have our own CO₂ monitors.

More about the Healthcare Industry Summit

The Healthcare Summit at the 2024 Portland, Oregon DrupalCon is organized by Jeanne Cost, George Matthes, and Pooja Jeeva. I am glad to be playing a part in coordinating this summit as well, especially given Agaric's involvement in and commitment to health and science communities.

Healthcare is a complex, regulation-filled industry that poses great challenges to building vibrant and compliant digital experiences for patients. Whether you are a pharma working towards the next product, a hospital treating someone with cancer, or an insurance company making sure a patient has access to information and proper care, there is much for you to gain from this summit.

Hear from experts on areas of accessibility, compliant patient experiences, new regulations and standards that can affect your teams and customers, success stories, and much more.

Sponsored by: Acquia and Evolving Web

Sign up to go to the Healthcare Industry Summit at DrupalCon Portland, OR 2024 this coming May 6th through May 9th for the summit

Read more and discuss at agaric.coop.

30 Apr 2024 4:20pm GMT

Join host George DeMet and Palantir team members who will be presenting sessions at DrupalCon Portland:

• Britany Acre and Cori Neslund on psychological safety and its importance for individuals and teams.
• Tiffany Farriss and Ken Rickard on EditTogether, a new collaborative editing tool that promises to revolutionize the way content is managed within Drupal.
• Tanya Nascimento and Alex Jones on EditTogether's backstory, underlying technology, and the problems it was designed to solve.

We want to make your project a success.

Let's Chat.

Podcast Links

EditTogether Open Source Collaborative Editing Tool for Drupal

Transcript

George DeMet:
Hello and welcome to a special episode of Plus Plus, the podcast from Palantir.net where we talk about what's new and interesting in the world of open source technologies and agile methodologies. I'm your host, George DeMet.

Today, I'll be talking with the Palantir team members who will be presenting sessions at DrupalCon Portland, which takes place May 6-9 at the Oregon Convention Center.

First, you'll hear from Britany Acre and Cori Neslund about psychological safety and its importance for individuals and teams.

Then, Tiffany Farriss and Ken Rickard will talk about EditTogether, a new collaborative editing tool that promises to revolutionize the way content is managed within Drupal.

And finally, Tanya Nascimento and Alex Jones will share the backstory on EditTogether, its underlying technology, and the problems it was designed to solve.

Enjoy!

[Music plays]

George DeMet:
I'm here with Britany Acre and Cori Neslund to talk about their session that they'll be presenting at DrupalCon, Key to Collaboration: How to Build Psychological Safety with Individuals and Teams. Hi Britany. Hi Cori.

Britany Acre:
Hi.

Cori Neslund:
Hi there.

George DeMet:
So could you both tell us a little bit about your session and why you chose to talk about psychological safety and what your experience is with it in our work environment.

Britany Acre:
The title of our session as you said, is Key to Collaboration, and I think that kind of zeros in on our why me and Cori are very energized and passionate about better ways of collaborating on our teams and in our workplaces, and that was what kind of led us to work together on this topic building psychological safety.
It's just so foundational to the work that we do here, especially in agile teams, especially in a working environment like ours here at Palantir that's self-organizing lack of psychological safety can be such a blocker, not only to efficiency and productivity in our workspaces, but also just to the human side.

We want to work on teams where people want to work on teams and want to work with each other and psychological safety is so fundamental to the success of that.

Cori Neslund:
Yeah, I strongly agree with Britany. For me as a program manager who often holds the role of team leads, I've seen over several projects, how high psychological safety can really facilitate the delivery of solid projects for example, in the Continuous Delivery Portfolio, where I spend most of my time, we're very experiment heavy.

So when we notice there is something going on, we have this fundamental basis, psychological safety that allows us to pitch new options, new ideas that leads to experiments that leads to process improvements that overall makes the experience of being in that team very positive and pleasant, right? So, psychological safety is great on this emotional side, but what I think is really interesting is how it drives success.

It drives success for projects, it drives success for companies, and I think we often think of this as like separate. When it's really not, it's a very interconnected topic.

George DeMet:
For folks who might not be as familiar with the concept of psychological safety, I understand it as this idea that when you're working on a team or working within an organization being psychologically safe means that you feel comfortable speaking up, and saying something if you, see something wrong or if you have an idea for an improvement that can be made and to feel safe doing so knowing that there won't be any repercussions for speaking up in that kind of workplace setting.

Even if you're speaking with someone who might have been at the company longer, have a higher perceived status or something like that. Is that pretty much how you are looking at it in this session? Or are there other dimensions to consider?

Cori Neslund:
One piece I would also add is that having this psychological safety does allow for healthy conflict, right? It's very natural to struggle with conflict within teams, personally and professionally, but when you have this base on top of being able to have these conversations on top of being able to share your perspective and provide ideas for new ways of working. You also get to the point where when you disagree with someone on your team, everything is fine. It's a very healthy conversation where both sides are sharing and it doesn't end up in this situation of like high tension, which I think a lot of people will be familiar with. So we want to definitely lean into that and say this is also a really solid reason to build this because disagreement is natural and common.

Britany Acre:
Yeah, that's great. I'd also add risk taking. So psychological safety is when teams feel safe taking risks. And when we do the kind of work that we do, that's so necessary. Sometimes you're really finding kind of out of the box solutions for things. And a lot of that work takes trying things that may seem crazy and risky, but the ability to do that in a way that feels safe.

We're talking about taking risk. We're so highly skilled and experienced people taking these risks, but the ability to take a risk knowing that the company supports you in that risk taking and sees the value of that is also part of psychological safety. There's so many layers and nuances to psychological safety that is even more than the things that the three of us have just mentioned, but I think that those end up being kind of the focus of what we talk about.

George DeMet:
My next question then is what are some of the hurdles or challenges that teams face when they're trying to build psychological safety and what are some kinds of tools and techniques you can use to overcome them?

Cori Neslund:
So the main one, the one that I think that comes up the most frequently, or at least initially is getting buy in right to build psychological safety. You have to have the entire team say, "You know what? I'm going to try and be vulnerable here, or I'm going to try and be a little bit more of a risk taker, a little bit more of a speaker".

And it's really only successful when the full team or the majority of the team, at least initially decides that they want to participate. You gotta get the ball rolling somehow. And we definitely have some stories about that that we can share in our session. But that's very common. There's always this sort of shadow of past experiences, right?

So people come into their workplaces with all the experiences that they had before. Some of them are going to be great, and some of them are going to be terrible. It's very common to say, "Hey, the problems I had at a previous place, I'm going to have them here. So let me be protective of it". And how do we move past that and say, "No, this team can create a new culture, this team can decide what values they want to embody and how they want to respond to each other."?

Britany Acre:
And I think at the end of what Cori just said, she also touched on kind of some of the techniques, right. Sometimes the idea of implementing a culture change can be incredibly daunting. And that's not what we're suggesting. We're saying here's the value of this thing, and then here are some manageable steps to take to achieve it. And you can start with yourself, then with your team. And that kind of energy and motivation, it gets the ball rolling and starts inspiring others. And so, we'll talk about different experiments that you as a team can do to start building that space for yourselves and modeling that for others.

Cori Neslund:
All of this contributes to organizational change or things outside of your team, and so it can feel a bit daunting to say, "Oh, I want to add psychological safety, but it's such a big task". But if we were talking about it from the perspective of individuals, so with two people or more on a team, and then with the team as a unit, that's a lot easier to manage. Not easy, right? But it's a lot easier to get the ball rolling in that more limited scenario than it is to say, "Oh, we want this overarching organizational change".

George DeMet:
Yeah, I really like that idea, that psychological safety starts with the individual and, really understanding and, taking ownership of, and committing to being part of a more psychologically safe organization, right? It's not something that like, you know, management can come in and, you know, sort of mandate from above to say, "Hey, we're all going to be more psychologically safe now", though, of course, there are always opportunities within an organization to create the space for that.

Cori, you touched a little bit earlier on those lived experiences that people might have had at past workplaces, or maybe just even in their lives not feeling particularly psychologically safe. I'm curious to hear a little bit more about how that dynamic plays in and, how it can be addressed.

Britany Acre:
Something that Cori and I have thought about a lot is that psychological safety can look different for everyone. So very different from someone who let's say, like a white man versus a woman versus a person of color. Not only are we bringing our lived experience from previous jobs, but just also just the world that we live in, in the way that we navigate it differently.

And so there's a self awareness involved in psychological safety. And then there's like the awareness of others and their experience as well. And that's not easy, that self work is not easy. Understanding yourself better, understanding the way the world works better is…it's not fun to face some of those realities. But what can we do from our personal positions to make psychological space and safe space for others?And that's certainly part of the conversation.

Cori Neslund:
Absolutely. A lot of this is also about removing the burden for upkeep from individuals, right? Because historically, people with certain attributes have held more of a responsibility for organizing culture, being sort of the social backbone. And I think it's important as we move into the future to say that that is a shared responsibility that exists throughout the team.
And it's part of dismantling those systems that Britany is talking about. And also, you know, we're in a space where it's a very open-to-anyone sort of industry, right? Like the Drupal community is made up of a lot of people with a lot of varied identities. How do you have a successful team when none of you share similar experiences, right? That's not a blocker in and of itself, but the self-awareness is required for that team to operate, right? And the awareness of others.

George DeMet:
Right, when er were talking earlier about the kind of self-work that someone has to do with psychological safety, it's not just about saying, "Oh, hey, I'm going to try and speak up more", but also being aware of intersectionality and what, one person may hear may sound differently to someone based on their experience than another person. So I think that's really important. Is there anything else you'd like to share about your session?

Cori Neslund:
Well, I'm really hoping people want to come out. I think a lot of the things that Britany and I will be talking about this year will be totally available and accessible for entry level folks, but if you went to either of our sessions from last year, it builds off of a lot of those concepts. And then it's going to be exciting. We have audience participation. You'll get to share your own perspectives, ask questions at the end. So, if you have real scenarios, we invite you to bring them and let's see what we can help you troubleshoot.

Britany Acre:
Yeah, and the topics that me and Cori choose to speak on, it's because we care deeply about them. And so yes, our session is designed to be approachable and so that you can take something away that you can actually take action on that isn't too overwhelming, but we're also there to have further conversations.

At its root, creating psychological safety on teams is about promoting the idea that diverse ways of thinking and diverse ways of being are valuable both to us and to our clients. And so we would love to talk more whether before or after our talk or at the Palantir.net booth.

George DeMet:
Thank you so much to both of you, Britany, Cori. So once again if you are going to be attending DrupalCon this is actually going to be a Monday morning session at 9am in the very first session slot. So definitely don't miss it. Grab your coffee and head over to room B117-119. Thank you both so much.

Britany Acre:
Thanks, George.

Cori Neslund:
Thank you.

[Music plays]

​​George DeMet:
So I'm here with Ken Rickard and Tiffany Farriss to talk about the session they'll be presenting at DrupalCon, Collaborative Editing in Drupal Core.

Tiffany Farriss:
Hi there.

Ken Rickard:
Good afternoon.

George DeMet:
So tell us a little bit about your session. I'm really curious to learn more about EditTogether and Some of the challenges you think it could solve within Drupal.

Ken Rickard:
Sure I'll give you the quick version and then we can dive into some deeper questions. EditTogether provides a framework for multiple users to collaborate on editing a single piece of content at the same time. So it is a open source collaborative editing framework that can be used with any Drupal field., most dynamically or most dramatically with a WYSIWYG editor so that you can have the kind of experience you have with any of the online cloud based editing tools such as Google Docs, where multiple people are editing at the same time, and you can see their cursor, you can see them type in real time. It also adds in elements that allow for commenting, and those comments are tagged directly to the part of the editorial copy that they refer to. So these are again common features in sort of advanced cloud editors. Office 365 offers this, Google Docs offers it, and potentially Drupal offers it.

Tiffany Farriss:
I think this is really exciting for those who keep Drupal as the center of all of their content management. So, what it does is it reduces the number of handoffs. I think all of us have been, you know, involved in situations where this, Word document or Google Doc. Passes through 5,6,7, 10 hands before it is signed off on to be put up on a website.

And wouldn't it be more efficient if that entire process could transpire in its final location, right? There's just so much. Administrative time and administrative burden that comes when you have to switch systems or switch tools. Heaven forbid someone not be allowed access to Google Drive or somebody doesn't have access to 365.

This eliminates all of that. It says, okay, this content is destined to live in Drupal. So let's go ahead and author it in Drupal and we can handle all the various steps of approvals and review and suggestions, commenting, editing that normally happen in other spaces. We can do that right within Drupal.

Ken Rickard:
When we talk about this as a sort of revolutionary change, I've been doing this for 15 years at Palantir. I've been doing it for 18 years overall. And one of my first editorial questions when we're Designing the CMS experience is always, where does first write through happen? Now, this is an old newspaper term that just means, where did you write the first draft?

Very commonly, the answer is, oh, it's in a Google Doc or a Word doc, and then I email it to this other person. And then it gets email chained around and then gets translated into the content management system. So this idea that we can be in, The end to end source of collaboration really does change the dynamic.

George DeMet:
Yeah, and I really like the idea that it's all in one place. So one of the things I do at Palantir is I work with folks who are writing blog posts and other material for our website. And that content usually gets authored in Google Docs. And so we can have some collaborative back and forth there.

But then when I go and need to take that content and put it. Onto our website and use the WYSIWYG interface we have there. It still requires a fair amount of work to remove some of Google Docs, formatting tags and things like that. So being able to do all of that collaborating with, my colleagues within the Drupal interface, where it's going to be published would be really cool.

Tiffany Farriss:
When you create and manage content in its final destination, its final form, you don't have to have the multiple passes around. This is the editorial review, and then this is the design review. So you're able to see it, how it's going to actually look, you'll be able to preview it, you'll be able to capture those approval steps. And Drupal does a nice job of audit logging if you need it to and if you have it configured to but it can't capture anything that happened before it hit Drupal. So for a lot of our clients with more complex editorial and auditing kind of needs, this really does start to streamline the number of systems involved, the number of potential forked versions involved, or missed approvals involved. It really streamlines that whole process.

George DeMet:
So switching gears a little bit, I'm curious to hear a little bit more about some of the key technologies that go into Edit Together and how they play with Drupal.

Ken Rickard:
Yeah, I mean, the key technologies are all open source and open standard. I think that's really important. At its base, Edit Together is leveraging WebRTC, which is a peer to peer protocol for browsers notifying each other of behavior, basically. So you can make a peer to peer connection and changes that happen in browser A can be reported to browser B through a secure transaction that doesn't expose that data to everyone else on the web, which is kind of fascinating. So that's again, sort of core underlying technology. And then there are pieces, there are open source pieces built on that. The primary one is a service or a system called Yjs. Simply the letter Y and JS for JavaScript. Yjs is a peer to peer JavaScript framework for transmitting the changes between objects from point A to point B.

That's essentially what it does, but it also provides things like revision tracking. It provides the concept of annotating that data, which is how you can do commenting and you can do suggested changes within the document. So it's a very full featured, open source project. It is very mature. It's in use in a lot of other places. That's the core piece without which EditTogether doesn't really work.

George DeMet:
And just thinking about it from a software open source licensing standpoint, all of these technologies are compatible with Drupal's GPL V2+ licensing, right? So you're not paying any extra fees or anything to kind of get this functionality. It is already there and already available and compatible with the rest of Drupal's licensing.

Tiffany Farriss:
There are parts of collaborative editing that exist today through premium services. You know, Drupal it's had a long partnership with CK Editor, which is a rich text editor. They do offer some premium and paid features that can include rich text. field collaboration. It's a little bit different because that does involve their servers and their services.

The other kind of key differences Ken mentioned is that this applies to any Drupal field. So because EditTogether was written specifically for Drupal, any field, not just rich text fields can have Commenting, suggestions, track changes, user presence, all of those things exist. So it allows you a structured data experience. It's quite collaborative. And I think that ability to manage structured content has always been one of Drupal's kind of killer features, if you will, and the way that it manages that it's one of the reasons that I think it's always been successful in a best of breed stack is because Drupal handles structured data whether it's the source of origin or it's just transforming it really, really well.

What we've not had to date is the ability to collaborate on that structured data. Currently the experiences, you know, you experience the lock. If someone else is working with a node, like you can't go in and edit that piece of content. And that's just not the way our modern workflows work. Imagine being able to work in parallel with everyone else. Our job functions tend to be, you know, we have our fingers in a lot of different pies, if you will. And so, you know, if I'm the person responsible for making sure that the titles and the ledes are solid on a batch of content, it may fall to someone else who's reviewing, the body copy or making sure that the bios are right and we don't have to worry about, "Oh, is this piece of content locked? Oh, I'm gonna have to make a note. I'll come back to that piece later". And this is a much more modern cloud based solution. If you have a cloud based content management system, shouldn't you all be able to complete whatever it is you need to do, regardless of what everybody else is doing at that time?

George DeMet:
What is the current state of EditTogetherr? What are the next steps? I know your session is talking about a pathway to get this functionality into Drupal core. What does that look like?

Ken Rickard:
Well, I think first we have to ask and answer the question of do we want it in Drupal core? I'll be honest, there is a significant technical burden to adding a feature like this into the core system. While Yjs, for example, is an external library, the integrations that are required with it do require a lot of testing and commitment. So that's not a trivial matter.

And that's something we want to I think put out front and center in the presentation, which is, "Hey, this is really a great opportunity. What does it actually mean if we try to pursue it?" That said, you know, where are we now? The big question has to do with what are the principal use cases for things? How do we wire it into a rich text editor? Again, Yjs has native support for that. We have a solution for that that is a feasible route to go. But again, we have to make clear what our long standing commitments are.

Tiffany Farriss:
Right now EditTogether has been implemented and deployed for the client that built it. There is still some work to be done around, as Ken said, incorporating other testing scenarios and other use case scenarios.

I think that would be really important to do before we release this as a public beta. So right now we're entering into a private beta period where we can continue to build out All the plugins that are necessary for the additional field types. So there's a way that it's architected. There's a plugin framework.

So any type of field in Drupal can have its own plugin for how it's treated. Individual models can do that. So I think there's a lot of documentation, both in terms of user documentation and developer documentation that needs to exist before it goes out in public beta. So that's really what we're focused on now and through the third quarter.

Ken Rickard:
The other big technical challenge is that WebRTC by itself works fine if you're on a local network, right? And everyone is on the same IP address in the same room. That's fine. For this really to work collaboratively across distance, you have to have what's known as a signaling server. And when we talk about products like Google Docs or Office 365, those are done by cloud hosting providers who provide their own signaling server.

If everyone, again, on the technical side, remember PubSubHubbub and that whole idea of being able to push notifications from place to place, that's what we're talking about, and it turns out there are no longer any public free signaling servers out there. They're all privately branded, they're all privately labeled, or you have to spin up your own.

So, solving that, because it is a barrier to entry right now. If you want this thing, we have to spin up our own. A server that handles it, and that's just to make those socket connections from browser A to browser B, so that you don't have to send your data across the wire, and that's again, both a technical challenge and a killer feature.

Let me repeat. You don't have to send your data across the wire. You're sending browser position, like, literally, my cursor is at this point, space in the browser relative to the document you're looking at, but it doesn't actually send the data of the document. It's really fascinating stuff. It's really smart from an architecture standpoint and becomes a killer feature because it retains compliance to data sovereignty regulations and requirements.

That's where it gets really fascinating. But again, you do have to stand up this sort of extra service. And so that is a big challenge. I think as we go forward with private beta, that's going to be the next big thing we have to tackle is, "Okay, how can we make this a simple and replicable opportunity?" Because you wouldn't want to drop this into Drupal core without having an out of the box solution to this problem.

Tiffany Farriss:
I mean, it's very easy to kick the tires on. There are still organizations that really have complex workflows that may want to stand up their own services. It's actually quite easy for those kinds of enterprises to do on the technical side, right? They still have to go through security review and, you know brokerage review, things like that, which any enterprise would already have processed for, but what's really novel about at it together is it is a very privacy first and security forward kind of collaborative solution for Drupal that I think can be, you know, game changing.

George DeMet:
So if I'm an organization that's really interested in using EditTogether, or if I'm a developer who wants to help out with it, how can I contribute? What kind of feedback are you looking for? How can someone get involved?

Tiffany Farriss:
Well, at this point, as I said, we're moving into a private beta. So if you're an organization that is looking to install this yourself you can, reach out to us. We have spun up EditTogether. com. That's where you can get in touch to let us know that you're interested, and we can talk about whether you're a good candidate to be part of that private beta.

Otherwise, when it goes into public beta we'll obviously be looking for those who are willing to add to documentation, create more of those field level plugins or plugins for individual modules, things like that. And if you're really interested in the core work, that may have to happen we do encourage you to come to this session and just reach out and let's start that conversation.

Because I think it has to be more than just Palantir that's interested in this solution for it to become a new killer feature for Drupal, as opposed to just something you can do with Drupal.

George DeMet:
So for anyone looking to learn more or to get involved once again, that session is Collaborative Editing in Drupal Core.That will be at 3 p. m. on Monday, May 6th, the first day of DrupalCon, and it will be in room A106. Ken, Tiffany, thank you so much for sharing your knowledge and really looking forward to it.

Tiffany Farriss:
Looking forward to seeing folks there.

Ken Rickard:
Yeah. Thank you.

[Music plays]

George DeMet:
I'm here with Alex Jones and Tanya Nascimento and here to talk about their session, EditTogether: Collaborative Editing for Everyone. Welcome, Tanya. Welcome, Alex.

Tanya Nascimento:
All right, thanks for having us.

Alex Jones:
Thank you

George DeMet:
This is the second of the sessions we'll be doing at DrupalCon on EditTogether. We talked earlier with Ken and Tiffany about how it works within the Drupal ecosystem, how it could potentially be added to the core software.

What I was interested in talking with both of you about is really some of the back story. What were the initial client requirements that led to the creation of EditTogether? This is a state government agency within the United States and part of their health department there. What was it that they were looking for that their existing solution was no longer adequate for?

Tanya Nascimento:
So something that we really dug into in discovery was the administrative burden that this agency is under when they're trying to create content, review that content, and publish that content. Their current workflow is incredibly demanding. They have at least a dozen publications, but within those publications, they have at minimum Three systems that they need to utilize to create that content in, for example, Microsoft Word, then manually handed off to RoboHelp, manually handed off to somebody for review. This is an email, sometimes it's FTP, using SharePoint all along the way and then bringing it back through the system, going through these cycles several times. So they have at least six handoffs for several cycles at least three times per year and when you start to look at that you realize that it's adding up to a lot of potential error in the process as well as just a taxing and exhausting process. So within that we really wanted to deliver something that was ,ore simplified in a replacement workflow where everything could happen in Drupal, or almost everything, and limiting those handoffs.

George DeMet:
So they're creating these documents. Are these internally facing documents, externally facing documents? What's the use case there?

Tanya Nascimento:
A lot of what we're seeing are handbooks, things to help folks enroll in programs like Medicare, where these handbooks include a lot of references to information that's really important for individuals to have when dealing with insurance or when dealing with that enrollment.

And these handbooks require a lot of updates. So let's say you have somebody who's working for this agency who needs to go in and make an update to a policy. They might need to go in and create one small miniscule change with, let's say, the numbering of an item in a very extensive long handbook. In order to do that, they would need to go back to the beginning of this process, go into Word, make that change, hand that off to another person, have that go through this entire system of multiple applications in order to just make one edit.

And it's all based on potential human error. So when we're looking at the version history and the archives of all of these things, it's content that's very important for folks out there in the world to have but it takes a long time in order to just make these seemingly simple updates.

George DeMet:
It sounds like this is really important information to get right, especially if you're talking about someone needing to fill out a series of forms in order to get health benefits . This is really important stuff that impacts people's lives.

Tanya Nascimento:
Definitely. They utilize reviewers from several different adjacent government agencies to ensure that those who are reviewing or creating content are the true subject matter experts for any given publication. Given that, there is a lot of manual handoffs that have to happen in order for folks to ensure that they are directly handing off information to the correct individual. So it isn't something that is super sophisticated right now, but it is something that they can manage especially when they have users who are trusted or on VPN. It's super simple right now, but it's burdensome. There's the administrative burden, but there's also the ongoing cost of utilizing RoboHelp. And because of that, they need something that is streamlined and simple. Right now, what we want to change for them is to create a system where they can create, manage, and publish all in one place. And this allows the agency to have something that's self-sustaining for a long period of time.

George DeMet:
So as we started to take a look at this challenge looking at all of these different systems then figuring out how to bring them together and streamline them into Drupal what was the process for doing that technical research and analysis?

Alex Jones:
We essentially wanted to look at their entire content workflow which we did, and we found that most of the pieces of their workflow can be brought into Drupal. Drupal's obviously an incredibly powerful tool for content workflows but the piece that was missing that is present in their current workflow is this collaborative editing piece.

So, currently they create content in a collaborative environment in Microsoft SharePoint. And they expect to be able to do that in Drupal. It's key to their process that they can actually collaborate on content, suggest edits to that content. before that content moves on to the later stages of their workflow cycle.

So, we investigated a couple solutions for that in Drupal. One of those was CKEditor 5, which does have an implementation of collaborative editing. And the reason we couldn't use C Editor 5 was primarily two things: They have a subscription fee that's ongoing and also CKEditor 5 uses a client-server model for collaboration, which means that the state of your content that you're editing is stored in the cloud in a third party service and for our client and a lot of other government clients they have restrictions on where their content can be visible and managed even for a brief period. We also investigated some other tools for building a text editor in Drupal. And what we eventually settled on was building a text editor for Drupal using open source frameworks that are available right now.

So the solution we ended up with was building a text editor using ProseMirror, which is a. JavaScript framework for building rich text editors. And we coupled that with Yjs, which is a JavaScript based shared editing framework that allows you to manage a document state between multiple different client machines. By building it using ProseMirror and Yjs we're trying to expose that last piece of the content workflow for Drupal to the open source space. So ProseMirror is open source. Yjs is open source. They have a lot of plugin functionality and options for extensibility, and we're hoping that by providing a text editor using these open source technologies we're enabling a more rapid development of new features for our clients and also for the community, to further expand and add custom functionality or contribute functionality back to the main module for use by everyone.

George DeMet:
Which is always the ideal thing you want to see with open source, right? Not just that we're using this code that someone else has made, or groups of folks have made, but also contributing back and improving it. Taking a look at a tool like ProseMirror, it is very modular, we're using it in this case for EditTogether. But it's a tool that could be used. In a lot of other different ways as well.

Alex Jones:
Absolutely. We've continued forward with ProseMirror because as we've expanded the text editor that EditTogether provides we've realized that ProseMirror can really be used to create a framework for field level collaboration in Drupal. You can build ProseMirror instances that work on rich text, body fields in Drupal but you can also build them for plain text fields and you can build them for any type of field in Drupal that you'd want to see collaboration upon. And that means that ProseMirror coupled with Yjs can provide field level collaboration for all of your fields on your Drupal site.

George DeMet:
I'm curious to hear a little bit more about some of the challenges that we faced during the development and how we've addressed those.

Alex Jones:
Yeah, we've encountered technical hurdles on this project in all shapes and sizes. One of the major ones that we've encountered is, finding the documentation on how to do the thing that we're doing. So there's a long history of CKEditor 5 and its integration with Drupal. And it integrates with Drupal using something called the Editor API. Because of that long history in part it is somewhat difficult to find information on how to use that API and how to integrate successfully with Drupal. And so as a byproduct of building this integration with Drupal, we've actually been able to more thoroughly explore the Editor API and a lot of the potentially lesser understood or, lesser documented portions of that integration. And we certainly feel that we have a better hold on how to more quickly and effectively manipulate that API and these integrations for Drupal.

George DeMet:
I want to go back a little bit to something you touched on earlier, Alex, which was this idea of data sovereignty, right? That particularly in some contexts having control over where, or at least knowing where your data is at every point in the process is so key and so vital.

Alex Jones:
Data sovereignty is something that's really important to our clients. It's really important to a lot of clients in government agencies, higher ed organizations, hospitals, things like that. Existing collaborative editing implementations are overwhelmingly client-server based models, where clients collaborate, and then their information is sent off to a third party server, and that third party server stores the true state of the content.

That works for these clients only when the system that they're using for that collaboration is approved, like Microsoft SharePoint, if they've approved Microsoft SharePoint or something like that. But it means one that that system has to be approved and then paid for. And two, they can't have that system in Drupal. They have to edit all their content outside of Drupal and then they bring it in.

Instead of using a client server model with WebSockets, we would implement a peer to peer model using WebRTC or Web Real Time Communication. And what that means is that these clients, when they're collaborating over a piece of content, the state of the content is shared only between the collaborating clients and not shared with the server. WebRTC is very secure and it also democratizes collaboration in a way that those client server models don't. And it costs orders of magnitude less to operate than a client server model does.

George DeMet:
Alex, Tanya, thank you so much.

Tanya Nascimento:
Thank you.

Alex Jones:
Thank you for having us.

George DeMet:
Once again, the session is called EditTogether: Collaborative Editing for Everyone. It'll be on Tuesday, May 7th at 3 p.m. in room C120-122. I will also be part of the conversation so if you are at DrupalCon come and see us and thanks again!

Content Strategy Development Drupal Events Open Source Corporate Government Healthcare Higher Education

30 Apr 2024 12:00pm GMT

Open Social, a tool within the Drupal community, is actually quite valuable for creating social platforms. It's user-friendly, flexible, and well-supported, making it perfect for setting up social networks, whether they're for internal company use or for the public.

With features like user profiles, activity feeds, group discussions, events, and messaging, Open Social offers a comprehensive solution for building engaging online communities.

It's important to spread the word about Open Social so that more people can benefit from its features and capabilities, ultimately enhancing collaboration and communication in various settings.

What is Open Social?

Open Social is a software platform that's open to everyone and is built on top of Drupal, which is a popular system for managing website content. It's designed specifically for creating online communities and social networks.

30 Apr 2024 9:46am GMT

I'm assuming you are reading this because you are already convinced that migrating your Drupal 7 site to Drupal 10 is not just a proactive measure but a strategic move for your organization. But to anyone else on your team it looks like an unnecessary big project to rebuild the website when it'll look and feel the same (we always recommend redesigns or additional features during a D7 to D10 Migration). We get it. For folks not in the know, this seems like a waste of funds. However, with Drupal 7 coming to an end in about 9 months (January 5th, 2025), the urgency to transition becomes increasingly stressful. We know you know, but you still have your team members (or your boss!) left to convince. Let's make it easier for you with this article. Understanding the impact of Drupal 7 End of Life Before you talk to your team about why you need to migrate to Drupal 10, let's examine some of the implications of persisting with Drupal 7. No more security updates or advisories for core, contributed modules and themes. The Drupal Security Team may publicly post moderate to less critical issues affecting Drupal 7 in the public issue queue for resolution, provided they are not widely exploitable. Unsupported Drupal 7 contributed modules or themes won't be eligible for new maintainership or reclassification as supported. If you're currently using them, it is a good idea to take ownership or be a maintainer of those projects. PHP version 5.5 and below will now be supported. This lack of support could lead to compatibility issues, security vulnerabilities, and potential performance drawbacks. If your Drupal 7 website is running on Windows, you will no longer receive security fixes for Windows-related issues. It is recommended to move to a different operating system. You will no longer receive assistance for tasks associated with Drupal 7, such as documentation navigation, automated testing, packaging, and other related activities. Making the case for Drupal 7 to 10 migration to your team Let's give you some powerful pointers to discuss with your team to get buy-in on the Drupal 7 to 10 migration. Remarkably Enhanced User Experience for Content Editors and Site Builders in D10 There are 3 things that matter a lot to content editors and site builders : User-friendly admin interface - It should allow for efficient content creation, editing, and site management without requiring extensive technical knowledge. Customization - This includes options for customizing layouts, adding new features, and integrating third-party tools and services. Media management - To upload, organize, and embed images, videos, and other multimedia content within articles. Claro admin theme Drupal 10's new Claro admin theme (a part of core) offers a clean, modern and user-friendly interface to help organize and find what you need easily. Olivero is the new default front-end theme now and it comes with a modern look and feel. The theme integrates seamlessly with all of Drupal's features and is the most accessible theme (WCAG level AA compliant) till now. The flexible Layout builder module is now in core and it is now easier to create pages and customize layouts the way you want. The modern and functional media management system makes it simpler to upload, reuse, and manage media assets on your Drupal site. Optimized Website Performance and SEO Improvements With every new release, Drupal is getting better at delivering performance. With Drupal 10's new and improved caching mechanisms, BigPipe technology, optimized codebase, and effective content delivery mechanisms, your website can now load faster and offer a great user experience. It incorporates various enhancements to boost performance in content rendering and HTTP responses. With Drupal 10, you can implement lazy loading for embedded content and responsive images, significantly enhancing load times. Additionally, the introduction of the new JS minification feature dynamically reduces code and markup, thereby further improving performance. The new Single Directory Component (SDC) approach of theming your website is a revolutionary step towards frontend development which also greatly improves website performance by groupong together files necessary to render components (Twig, CSS, JS). And don't forget, better website performance also means a better SEO ranking on search engines. Managing Content is Easier Now that you've settled into using Drupal 7 for a while, you might feel like managing content is pretty straightforward. But hold on - let me tell you about Drupal 10, where things get even smoother and more user-friendly. With Drupal 10, organizing your content consistently becomes much simpler. You can reuse existing fields easily and create new ones more smoothly, all in one place. Editing content is smoother too, with text fields that ensure your text looks just right. Plus, managing older versions of your content, whether it's in blocks or pages, is a breeze with the new unified editing experience. The new CKEditor 5 version offers an enhanced content editing experience. Its features like drag-and-drop image insertion, real-time collaboration, and seamless integration with Drupal's content management system make creating and editing content very simple. Its customizable toolbar allows you to tailor the editing experience to suit your specific needs. You also easily copy and paste content from Word/Google Docs to the editor without worrying about formatting as it automatically removes any markup. Improved Security And no, we're not just talking about the lack of security support for Drupal 7 after Jan 2025. Because of the way it has been built and due to its many modern dependencies, Drupal 10 is now more secure than it has ever been. As you may already be aware, Drupal has been aligning its release cycles with its dependencies, including PHP and Symfony, since version 8. This means that as PHP versions continue to evolve, older versions like Drupal 7 may become incompatible with the latest PHP releases. This lack of compatibility can leave your Drupal 7 site vulnerable to security risks and other issues. Drupal 10 relies on the latest versions of Symfony (6) and PHP (8.1), making it more secure and better performing. Twig, Drupal 10's default template engine, not only simplifies the development process but also enhances security by preventing direct database interactions within the code. This prevents vulnerabilities such as cross-site scripting and code injections. By default, Drupal 10 strengthens website security by suggesting users choose stronger passwords, minimizing unauthorized access risks through parameters like minimum length and complexity. The Time is Now! The urgency for you to address the Drupal 7 migration depends on the complexity of your website. The more extensive your site's content and features, the longer the migration process will likely take. It's going to take even longer if you have many custom modules and features. But you don't want to rush the process. We have seen (and fixed) a lot of bad migrations (like a lot!), most of them done in haste or without proper planning. With a 9-month window to Drupal 7 end-of-life starting now, we believe this is the optimal time to initiate your migration process. A Drupal 7 to 10 migration is going to be a complete rebuild (which is why it takes time) but once you're on Drupal 10, future upgrades are going to be very, very easy. Don't forget to check out this article that features our Drupal experts discussing what's new in Drupal 10 in detail. You can even catch up with the video of this panel discussion. Final Thoughts If you're thinking this migration (Drupal 7 to Drupal 10) is going to be your last big transition, you are absolutely right. Because even though Drupal continues to innovate, progress and release further versions, your website will now only need effortless and straightforward upgrades. Yes, upgrades will remain easy forever. So what next? Start looking for a Drupal certified migration partner (like Specbee) and get a site audit (we'll do it for you for free!) so you know how much time you have to start the migration process.

30 Apr 2024 5:02am GMT

We're often asked which platform is the best for creating landing pages. Our answer is always "it depends on your needs!" Each platform has its strengths and weaknesses. It takes a strong understanding of both your options and your needs to pick the right one.

We illustrated this point with a 'Landing Page Builder Battle' at EvolveDrupal Atlanta 2024. Developers were challenged to create a web page in just five minutes using either Drupal Layout Builder, Drupal Paragraphs, WordPress Block Editor (Gutenberg), WordPress Elementor, or Webflow. On top of being a whole lot of fun, this competition highlighted the unique capabilities and limitations of each platform. It also underscored the practical implications of choosing the right tool for different projects.

Curious what we learned? We've packed it all into this guide, which examines the pros and cons of each of the five page builders that battled it out at EvolveDrupal. Read on to find out who won and discover the best tool for you.

Drupal Layout Builder

Drupal Layout Builder is a core module in Drupal that lets admins customize content layouts without needing to dive into code. Its visual layout editor allows admins to design pages using a drag-and-drop interface.

Pros

• Effortless integration. Because it's part of Drupal core, Layout Builder works seamlessly with other Drupal functionalities.
• Highly customizable. It offers extensive capabilities to customize layouts for individual pieces of content or entire content types.
• Accessibility. Drupal prioritizes accessibility and Layout Builder is no exception, allowing admins to create better content for all users including those with disabilities.
• Regular updates. Along with other Drupal core and contributed modules, Layout Builder is continuously improved upon by the Drupal community.

Cons

• Complexity. There can be a steep learning curve for users who are unfamiliar with Drupal.
• No live preview. Unlike WordPress Gutenberg or Elementor, Layout Builder doesn't offer a WYSIWYG (What You See Is What You Get) interface.
• Performance. Heavy use of Layout Builder on complex sites can impact performance without proper optimization.

Drupal Paragraphs

Paragraphs is a Drupal module that replaces the basic body field with a set of customizable paragraph types, offering a cleaner way to manage content chunks.

Pros

• Flexibility. Users can add different types of content (images, text, videos) and arrange them with ease.
• Reusable components. Paragraphs lets you define types of components that are reusable across different pages, or even across different websites within a multi-site configuration. This reusability not only speeds up the content creation process but also helps maintain consistency across your digital presence.
• Content control. Paragraphs break content into discrete components that can be individually edited and arranged. This modular approach simplifies content management and enhances the editorial workflow.
• Regular updates. As with LayoutBuilder, the Drupal community makes ongoing contributions to improve Paragraphs.

Cons

• No live preview. Paragraphs doesn't have a WYSIWYG interface, while Wordpress Block Editor and Elementor do.
• Potential overhead. Managing an extensive library of paragraph types can become a cumbersome task.
• Less design control. Paragraphs gives you less control over the layout compared to Layout Builder. But there is a Layout Paragraphs module that lets you benefit from the layout control capabilities of Layout Builder in Paragraphs. It does this by using the underlying API of Layout Builder.

WordPress Block Editor (Gutenberg)

The default block editor for WordPress, colloquially referred to as the Gutenberg editor, introduced to make adding rich content to websites more accessible and enjoyable.

Pros

• Modern block editor. The block editor offers a more intuitive and media-rich editing experience.
• Extensibility. Developers can create custom blocks, enhancing flexibility.
• Core integration. Being a part of WordPress core, the block editor is well-maintained and receives regular updates.
• User-friendly interface. A clean and straightforward interface simplifies the content creation process.
• Flexibility. It easily integrates with a wide range of themes and plugins designed.
• Regular updates. The block editor is continuously improved upon by the WordPress community.
• Live preview available. The block editor offers a WYSIWYG interface, allowing you to see changes in real-time as you edit.

Cons

• Mixed reception. Some users find the transition to block-based editing confusing.
• Limited layout options. The block editor is more restrictive in layout design compared to page builders like Elementor.
• Plugin dependencies. It often requires additional plugins to extend functionality to match other builders.

WordPress Elementor

Elementor is a powerful WordPress page builder plugin that offers a high degree of design flexibility with a drag-and-drop interface.

Pros

• Intuitive design interface. WordPress Elementor makes designing websites straightforward, even for those without coding skills.
• Template and widget variety. Comes with numerous widgets and templates that can be customized extensively.
• Responsive design controls. Users can tweak settings for different devices directly from the editor.
• Third-party add-ons. Supported by a wide array of third-party add-ons for additional functionality.
• Live preview available. WordPress Elementor offers a WYSIWYG interface, allowing real-time viewing of changes as you edit.
• Regular updates. It's continuously improved upon by plugin developers.

Cons

• Plugin dependency. Elementor relies on being compatible with the active WordPress theme and other plugins, which can sometimes lead to conflicts.
• Performance issues. It can become heavy and potentially slow down site performance due to extensive feature sets.
• Cost. While there is a free version, premium features require a paid subscription.

Webflow

Webflow is a standalone tool that combines website design and development in one platform. It allows users to design, build, and launch responsive websites visually. It also handles hosting and can export clean code.

Pros

• All-in-one solution. It combines design, development, and hosting in one platform.
  Visual CSS styling. Webflow allows designers to style elements visually, which is then automatically converted into clean code.
• Advanced animations. It supports sophisticated animations and interactions.
  Complete design freedom. Webflow offers extensive design control without needing to write code.
• Responsive by default. Designs are automatically responsive, which is excellent for mobile optimization.

Cons

• Learning curve. New users may find the interface and abundance of options overwhelming.
• Cost. Webflow can be more expensive than other solutions, especially for hosting.

Choosing Your Page Builder Champion

The choice between Drupal, WordPress, and Webflow tools boils down to specific project requirements, your technical comfort, and the scale of your digital ambitions. Below is a summary of what we think are the best use cases for each tool.

• Drupal Layout Builder - Best for complex, content-heavy websites needing deep customization.
• Drupal Paragraphs - Suitable for sites where structured, multi-use content is needed without layout concerns.
• WordPress Block Editor (Gutenberg) - Great for content creators and bloggers who need an intuitive system integrated into WordPress.
• WordPress Elementor - Perfect for WordPress users who need detailed design control without deep coding.
• Webflow - Best for designers who want total design freedom and the ability to launch a site within one platform.

So who won the battle? Webflow emerged victorious for the ease of quickly assembling a functional website in 5 minutes. Although Drupal might still pose a learning curve for newcomers, its continuous evolution promises even more accessible and enhanced user experiences.

Wishing you'd caught the Page Builder Battle in real life? Join us at the next EvolveDrupal! Our next stop is Montreal on June 14, 2024. Come along for more live demonstrations and dozens of insightful sessions. It's a great opportunity to see digital tools in action and network with other professionals in the field.

Register for EvolveDrupal Montreal 2024 or sign up for future updates.

+ more awesome articles by Evolving Web

29 Apr 2024 7:07pm GMT

Today we are talking about Drupal 11 Readiness, What you need to think about, and PHPStan with guest Matt Glaman. We'll also cover MRN as our module of the week.

For show notes visit: [www.talkingDrupal.com/448https://www.talkingDrupal.com/448)

Topics

• What do we mean by Drupal 11 Readiness
• How will this be different than 9 and 10
• Top 5 tips
• D11 Meeting and slack channel
• Will this be easier
• Major issues
• What is PHPStan
• How does it play a role
• How is PHPStan Drupal different than PHPStan
• Does using PHPStan with drupal reduce the need for tests
• How do you see it evolving over the next few years
• Drupal 12 wishlist

Resources

• PHPStan Drupal
• PHPStan
• Herodevs DrupalCon Party
• Smart date BC calls
• Contrib semantic versioning thoughts
• Change records
  • Drop is always moving
• Project analysis
• Gabor article Drupal rector
• Project update working group
• LTS even odd
• PHP version
• PHP stan rule levels
• Title issue

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Matt Glaman - mglaman.dev mglaman

MOTW Correspondent

Martin Anderson-Clutz - mandclu

• Brief description:
  • Have you ever wanted an easy way to generate detailed release notes for your contrib projects? There's a web app for that
• Module name/project name:
  • MRN which is short for Maintainer / Module Release Notes
• Brief history
  • How old: created in Aug 2022 by today's guest Matt Glaman
• Maintainership
  • Actively maintained, latest updates were earlier this year
  • Code project at https://github.com/mglaman/drupal-mrn has 13 open issues
• Usage stats:
  • Currently no usage reporting, but a tool I've been using a ton lately as I get modules ready for Drupal 11
• Module features and usage
  • It's very simple to use, you just enter the machine name of your project, and then the numbers of the releases you want it to compare
  • It will generate the structure for your release note, include a spot for you to write a summary at the top, a list of contributors that links to their profiles, and a list of issues
  • Previously part of Matt's drupalorg CLI project, MRN is now a lambda function on AWS, so there's nothing to download or install
  • I like that you can choose which tags you want to compare, so if the release is part of a branch that doesn't yet have a stable release, I'll put a comparison to the previous release in the branch at the top, and then a comparison to the current stable release below it, so people can see the full list of everything new they'll get by moving from the stable release
  • It's worth noting that because this works from the git history, you need to make sure you credit everyone properly before clicking to merge an MR in the Drupal.org UI. You can give credit to other people after the fact using the checkbox and they'll get contribution credits, but won't be included in the release notes generated by MRN

29 Apr 2024 6:00pm GMT