ImageX: Drupal Starshot: A New CMS Version is Underway with a Stellar Out-of-the-Box Experience
Authored by: Nadiia Nykolaichuk.
“Let’s reach for the stars and bring the Open Web to all.”
— Dries Buytaert, creator and project lead of Drupal
Authored by: Nadiia Nykolaichuk.
“Let’s reach for the stars and bring the Open Web to all.”
— Dries Buytaert, creator and project lead of Drupal
Welcome to Day 2 at DrupalCon!! Today is another exhilarating day packed with cutting-edge sessions, collaborative workshops, and unparalleled networking opportunities. There are few better ways to enhance your skills and connect you with the vibrant Drupal community. Let's dive deeper into the world of Drupal and check out a few highlights from Day 2:
Keynote: Open Source AI Now: Why Open Must Win the AI War
Last month we took EvolveDrupal—a unique summit that fosters digital transformation and open source collaboration—to Atlanta for its first appearance in the United States.
Couldn’t attend? Well, no need to feel left out! You can get the inside scoop right here. I’ve shared stories about 12 summit stars that’ll have you smiling, chuckling, or taking notes.
Attendees will find this a worthwhile read, too. Because unless you harnessed an AI bot to put you in three rooms at once, we’re betting there’s plenty you missed!
Ready to meet our stars? First, a quick refresher for those who need it.
Ok, let’s rewind. About a year ago our digital agency started EvolveDrupal in our hometown of Montreal. After years of remote meet-ups, it was a way to finally reunite the tech and design communities in person.
People were overjoyed to socialize in the same room as their peers again! Because let’s face it: sharing a beer on Zoom just isn’t the same. There’s none of those silly stories and spontaneous oversharing that really bring people together.
After that first summit, we built on EvolveDrupal’s success with events in Toronto and Ottawa, before heading across the border to Atlanta. (Psst... a little birdy told me we're coming back to the U.S. in September for EvolveDrupal NYC.)
Now that you’re up to speed, here are all the juicy details you’re waiting for. Meet the standout stars who made EvolveDrupal Atlanta absolutely stellar.
Maya wears multiple hats at Evolving Web. On top of taking care of us as our Employee Experience & Operations Manager, she’s the de facto Chief Event Organizer for EvolveDrupal. Maya learned on-the-job to orchestrate big corporate gatherings and she tirelessly ensures their success. You can find her at EvolveDrupal looking like she’s in her element.
Unforeseen challenges and setbacks are an inevitable part of events—like the time a well-known office supplies company printed all of our participants’ name tags upside down! But Maya has learned to roll with the punches and adapt quickly.
Maya’s can-do attitude means she sometimes tries to do everything herself, but she’s learned to delegate more over the past year. Her charming smile means that few people can say “no” to her requests.
Just 15 months old, Sofia has been to more Drupal conferences than most seasoned developers. She has accompanied her parents (our co-founders Alex and Suzanne) to DrupalCon Pittsburgh, DrupalConLille, GovCon, High Ed Web, and all four of our previous EvolveDrupal summits.
With this trajectory, in 20 years she’ll have the elusive combination that so many employers seek: a freshly minted college degree and two decades of Drupal experience.
Expect to see Sofia in Forbes 5 Under 5 very soon.
I’d like to thank ChatGPT for writing this blog post. Joking! I’m a real person, I swear. Yet everywhere we look it seems that AI is popping up as a way to generate content, code, images, and so much more. So it was really helpful to get some perspective from the experts.
Nikhil Deshpande, Chief Digital & AI Officer at the Georgia Technology Authority, sat down for a Q&A session with our co-founder, Suzanne Dergacheva. Their discussion hit on a crucial dilemma: how to accelerate innovation through open source while retaining integrity and managing risk.
Some key takeaways from their talk include:
We also heard from Misha Sulpovar, Head of AI at Cherre & Wired Cognition. In This Is not a Drill: Seeing the Real Opportunities Among the AI Hype, Misha debunked some common myths about AI. No, robots are not going to take over. No, the robots didn’t tell us to say that. In the face of concerns that machines will take our jobs, Misha argues that AI is actually enhancing—instead of replacing—human capabilities. It’s time to embrace the robots. They’re your new work besties.
Championing open source goes hand-in-hand with advocating for accessibility. At Evolving Web we’re committed to making the web a better place for all. So we were thrilled to host not one, but two accessibility sessions at EvolveDrupal Atlanta!
Mary Blabaum, Senior UX Manager at Acquia, gave a great overview of accessibility in her session 5 Ways to Grow Your Inclusive Design Approach:
Penny Kronz, VP of Client Services at DubBot, gave us the rundown on the new success criteria in WCAG guidelines 2.2 with her session WCAG 2.2: What Changed? What Do I Need to Know? so that we can meet the latest accessibility requirements. Some notable changes include new criteria for increased touch target size, consistent focus appearance, and easy dismissal of pop-ups. While WCAG 2.2 retains the same structure as previous versions, it offers more specific guidance for building inclusive digital experiences.
So much more than a pleasing acronym, object-oriented UX (OOUX) is a proven method for making user experiences more human-centric. Sophia Prater taught us how to shift our UX process to turn complex processes into intuitive user flows in How to Fix UX Fails with Object-Oriented UX. The room was packed, with every seat taken and more participants standing at the back to catch the talk!
One great takeaway from the talk was "ORCA". No relation to the whale. ORCA is an acronym that highlights great questions to ask when designing a single screen:
Morgan decided to take a steamer to our backdrops. There wasn’t a single wrinkle to be seen when he was done with them. Not that he’s a Monica or anything (from the TV show Friends for those who—gasp!—don't get the reference.)
Morgan also delivered From Chaos to Clarity: The Benefits and Challenges of Design Systems with Bryenne. They dived into the complexities and challenges our team has encountered over the years, offering up some invaluable best practices for creating a sustainable design system.
Finally, Morgan captivated a creative audience at our EvolveUX Unconference, an interactive session with real-time feedback from the audience. Morgan showcased the Planned Parenthood Direct app and took participants behind the scenes of the project.
You read that right—the official mascot of Drupal GovCon swooped in to steal the show at EvolveDrupal Atlanta. I guess it’s easy when you have wings. Naturally, we set aside a free ticket and cleared his visit with the civil aviation authorities.
Steve Persch is a seasoned Drupalist and the Director of Developer Experience at Pantheon. He’s also a theater grad! Which explains why he brings a dramatic flair to even the most technical of presentations.
In his talk The Fourth Decade of Web Deployments, Steve literally bent over backwards to illustrate how complex web pages have become. It certainly woke people up to see Steve pretzeling on a Twister board first thing in the morning. We’ve never seen a more visually stimulating illustration of a technical concept. Proof that majoring in theatre is useful, no matter what the haters say.
The boxing gloves came out when five speakers went head-to-head, each of them representing a different page building tool. And if you thought Drupal would have a leg up at an event with Drupal in the name, think again! It was no match for the ease with which our designer Yue Lu could build a site in Webflow.
Nevertheless, the key takeaway from our Page Builder Battle was that no single tool is perfect for everyone or every project. Choosing the right tool depends heavily on your unique needs.
We also learned that while Drupal’s content creation experience has room for improvement, the Drupal community is aware of this fact and actively working on it.
Our Atlanta-based team member, Josh, seems to have a mysterious ability to control the weather. Who knows how he did it, but Josh ordered some darn good weather for the event.
Booking the rooftop patio three months in advance was always going to be a gamble. So we were biting our fingernails as rain poured down the day before… but the summit rolled around with nothing but the bluest of skies! Honourable mention to Josh because we're sure he had something to do with it. Definitely a wizard.
As we left the elevator for the rooftop after-party, what did we see but a big quote from Drake on the wall! Way to make a canuck feel at home. And way to make us feel special, because it was in our brand green.
This is becoming a weird trend for us. It all started with the Airbnb we stayed in for DrupalCamp Florida. Our team walked in to find a huge taxidermy deer on the wall. After initially feeling creeped out, they named him Luke and accepted him as part of the gang.
Would you believe it, when we turned up at our Airbnb for DrupalCamp New Jersey—oh dear, another deer! This one was named Frosty because he seemed a little aloof.
And then in Atlanta, what did we find but yet another deer! Perhaps we should just listen to the signs from the universe and get one for our office.
Tickets are now on sale for EvolveDrupal Montreal on June 14. We're also heading back to the United States for EvolveDrupal NYC on September 20.
Want to stay in the loop? Sign up for EvolveDrupal updates. You'll be among the first to hear about ticket sales, early bird discounts, and competitions for free stuff!
Here's what to read next: 9 Ways to Make the Most of EvolveDrupal.
+ more awesome articles by Evolving WebIn this post, we explore building a cards section with Layout Builder.
by lee.rowlands / 9 May 2024
The component will look something like the 'Services' section on our homepage*. If you've built websites over the last decade, you've probably built a component like this many times.
The key aspects of the component are
If you've previously used paragraphs for modelling landing pages, you may immediately be thinking that your content model will be made up of paragraph type 'cards' with three fields as follows:
Or rather, because this is Layout Builder, you might be thinking of a block-content type called cards with those fields on it — leaning on paragraphs for the multi-value cards field.
Whilst that approach works well for paragraphs, it isn't the best approach for Layout Builder:
Let's instead pivot to a layout plugin for the cards component and think of it in terms of regions.
We have:
We probably already have a block-content type that consists of a WYSIWYG field — e.g., something like the Basic block content type in core. We can use that for the intro text.
So we need a card block content-type. But we probably want two. A lot of our cards will just point to other pages on the site — and it makes sense for the card to be built from fields on that page. If we put a teaser image and teaser text field on all our node-types, we can make use of them when creating a card for that page. We can also use these for meta-tags like the OpenGraph image. And all our node-types already have a title and URL. The second block-type is if we need to link to pages outside the site. So, the content models for those two block types are as follows:
Next, we need to define our layout plugin. We start with a layouts.yml file in our theme or module.
cards:
label: Card grid
category: Layouts
template: layouts/cards
icon_map:
- [intro, intro, intro]
- [c1, c2, c3]
- [c4, c5, c6]
- [c7, c8, c9]
- [c10, c11, c12]
regions:
content:
label: Cards
intro:
label: Introduction
library: 'your_theme/card'
Note: the icon_map isn't needed here, but it gives us a nice icon in the 'Add section' form.
With those pieces in place, we can use Layout builder restrictions to ensure only the right block-types can be placed in each region. The introduction region can be limited to the basic WYSIWYG block-type. The cards region can be limited to the internal and external card block-type.
This layout will use the default layout plugin, but we want a custom layout plugin with a title field in the configuration form. You can read more about creating a custom layout plugin from our previous post about creating a dynamic layout with flexible regions. This one will be much simpler. We just need a title field in the configuration form and a preprocess hook to expose that to our template.
The first step of this is to add a 'class' entry to our layout definition.
cards:
// ...
class: \Drupal\your_theme\Layouts\Cards
// ...
Then, we need to create that class.
<?php
namespace Drupal\your_theme\Layouts;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Layout\LayoutDefault;
/**
* Defines a class for a layout that has a title option.
*/
class LayoutWithTitle extends LayoutDefault {
/**
* {@inheritdoc}
*/
public function defaultConfiguration() {
return parent::defaultConfiguration() + ['title' => ''];
}
/**
* {@inheritdoc}
*/
public function buildConfigurationForm(array $form, FormStateInterface $form_state): array {
$build = parent::buildConfigurationForm($form, $form_state);
$build['title'] = [
'#weight' => -10,
'#type' => 'textfield',
'#default_value' => $this->configuration['title'],
'#title' => $this->t('Title'),
'#description' => $this->t('Provide an optional title for this section'),
];
return $build;
}
/**
* {@inheritdoc}
*/
public function submitConfigurationForm(array &$form, FormStateInterface $form_state): void {
parent::submitConfigurationForm($form, $form_state);
$this->configuration['title'] = $form_state->getValue('title');
}
}
Then, in your theme you can preprocess to make this variable available to the template.
/**
* Implements hook_preprocess_HOOK().
*/
function your_theme_preprocess_layout(array &$variables): void {
// Add the title from LayoutWithTitle.
$variables['title'] = $variables['content']['#settings']['title'] ?? NULL;
}
For optimum UX, we'd probably want to make Layout Builder Browser blocks, too. You can read more in our previous post about our approach to Layout Builder UX.
All that remains then is to theme the block-content types to match the design. For more on that, see our previous post on theming block-content types with Layout Builder.
As an extra enhancement, you could add integration with Layout Section Classes module to give content editors additional options like the number of cards shown across the page in the card grid.
Note: this component on our website is automated and built with Views, but there is often a need to build out curated equivalents.
As pointed out in the first article, the Migrate API scope is to move over content and configuration. Porting modules and themes are out of scope. With that in mind, let’s take a closer look at some of the assumptions and limitations. In addition to what will be presented in today’s article, I highly recommend reviewing the official documentation for upgrading from Drupal 7. Drupal is ever-evolving and the Migrate API documentation gets updated regularly. Of particular importance, review the page on known issues when upgrading from Drupal 7, as things get added and removed from that list as issues are discovered and fixed.
mauricio Wed, 05/08/2024 - 17:13Dries announced the Starshot initiative, a default CMS config for easy Drupal project creation, prioritizing no-code and low-code features. 1xINTERNET supports the strategy to promote Drupal through pre-configured application and will contribute to Starshot's success.