One of the reasons I love going to DrupalCon is that it’s a way to absorb everything new coming out of the Drupal community, and all the good things we have to look forward to in upcoming versions of Drupal. Here’s a summary of what I’m excited about right now!

New Goodies for Content Creators

Content editing features have been a focal point for Drupal in recent years. CKEditor 4 (the WYSIWYG editor that ships with Drupal) will soon be replaced by CKEditor 5. This new version provides improved editing features for content creation and editing features. These include track changes and revision history, intelligent text predictions and the ability to export to PDF. CKEditor 5 is now stable in Drupal 9.5 and undergoing testing so it’ll be ready when Drupal 10 is released.

The Drupal community has also made massive improvements to Localize.Drupal.org. This website, which is a means of incorporating languages into Drupal Core, promises to better translate the Drupal admin UI, which will result in a better UI for people who edit Drupal in other languages.

There is also an initiative underway to overhaul the Drupal toolbar in a way that is beneficial for content editors. The existing toolbar lacks submenu navigation and takes up too much space on the page in vertical mode. The goal is to adapt the toolbar so that it’s easier to use and more accessible for both content editors and site builders by introducing an up-to-date UI navigation pattern, adapting the information architecture and opening the possibility to include multiple menus that are built for the needs of different types of users.

Changes for Site Builders

DrupalCon Prague also brought news from the distribution and recipes initiative. Another tool that promises to make site building easier, recipes represent a more granular way of adding configuration to your site, allowing for a mix and match of a sort that you can’t do with distributions.

The current goals of the Distribution and Recipes initiative are to improve distribution discovery, allow for multiple distributions to be used on the same project, be installable at any time in a project's life cycle, provide for easier updates and enable distributions to ship demo content. A patch that can install modules, create and update configuration and apply other recipes is ready to use. More information is available at https://drupal.org/project/distributions_recipes.

Another exciting new initiative for site builders is the new project browser tool under development. This will enable site builders to search for contributed modules more easily through Drupal’s admin UI. Currently site builders are presented with an overwhelming selection of 55-plus categories of modules on Drupal.org. The new browser will simplify this with a more limited set of categories (which were brainstormed at DrupalCon), featuring useful information to help builders select modules that are good fits for specific projects.

Changes for Developers

A major piece of news from DrupalCon Prague of relevance to developers was the introduction of GitLab as a standard tool for developers to use to manage code and keep track of changes. This replaces the development tools offered on Drupal.org with a more complete set of tools (such as more streamlined merge request processes) and a whole product behind it. GitLab integration has already been added to Drupal, now it is now being added to all modules.

Automatic updates for Drupal Core were a major theme at DrupalCon Portland earlier this year and were again discussed at DrupalCon Prague. The Portland event featured considerable beta testing of the new update system, which brought this important feature closer to completion and ready for inclusion in Drupal 10. This is one of Drupal's most frequently requested features and will ensure that all Drupal websites stay secure throughout their lifecycle.

The future of Content Management

At DrupalCon I had the opportunity to give a presentation on the future of content management and how Drupal has evolved beyond simply being a content management system. It still functions as this, but it is also a digital experience platform and a platform that’s optimized for implementing your content strategy, whose strengths lie in its flexibility in terms of layering functionality on top of content in a way that actually integrates with your content.

I discussed how one of Drupal’s core strengths is its flexibility in creating structured content that matches your content strategy. This means you can create a strong strategy and build your Drupal platform to support it. Drupal can also integrate with other data sources and marketing tools in an open way, giving you choice as to what technology and marketing stack you want to use.

To sum up, I made a case for Drupal as an open digital experience platform. Focusing on content strategy first typically yields better results in terms of how you structure your content and the functionality, technology and marketing stack you layer on top of it. I also made the case that you need a strong content governance plan to keep your content strategy in place and in use in order to leverage Drupal in this way.

The roadmap for Drupal 10 and Beyond

One source of information for what’s coming down the line in the Drupal project is the twice-yearly Driesnotes, presented at each DrupalCon. In his customary keynote speech at DrupalCon Prague in September, Drupal founder Dries Buytaert expressed a certain frustration that his company doesn’t promote itself as well as it could. He began by discussing his discomfort with social media platforms and other forms of proprietary software while lauding Drupal as an open web champion, citing the freedom it provides to users to own their own content and code.

In his keynote, Dries spoke at great length about the many initiatives underway as part of the Drupal project, including the introduction of GitLab, which he cited as a major step towards making it easier for people within the Drupal community to contribute to the platform. He also noted that since his previous DriesNote in Portland, Drupal has achieved stability for Olivero and CKEditor 5, made preparations for the introduction of PHP 8.2, upgraded to Symfony 6 and made Drupal Core smaller – all of which will be included in the Drupal 10 launch at the end of 2022.

Dries also touted project browser and automatic updates as major initiatives that, while not set to be ready for Drupal 10, will probably factor into Drupal 10.2 or beyond. He cited these as features that enable average users to be part of Drupal and the open web (and will facilitate upgrading to Drupal 10). These features also help promote the great work done by Drupal developers, making that work more accessible to all Drupal users.

Have a migration project in mind? Join our migration workshop to learn more about moving your content and configuration into Drupal 9. This course takes Drupal 10 readiness into account, so you’ll also be ready for Drupal 10’s release or to migrate directly to Drupal 10, depending on the timing of your migration project.

 

//-->

 

+ more awesome articles by Evolving Web

The world is changing rapidly. The developments in machine learning and artificial intelligence over the past decade have been significant with powerful models being developed and made readily available via APIs. 

I am pleased to announce that Dave Long (longwave) has accepted our invitation to become a provisional Drupal core release manager!

Dave is based in the UK and has been contributing on Drupal.org for over fourteen years. He has been especially active in the development of Drupal 9 and 10, and is credited on over a thousand core issues. He is also a provisional member of the Drupal Security Team and has contributed significantly to core security advisories over the past six months. Dave is also a regular contributor to the Bug Smash Initiative which aims to improve Drupal by fixing known bugs, and was previously a maintainer of the Ubercart shopping cart for Drupal 7.

Dave first discovered Drupal in 2006 with version 4.7 and has used it ever since for numerous web projects as a freelancer and since 2014 as a senior developer at Full Fat Things.

Dave's leadership, patience, responsiveness, communication skills, and deep technical expertise in the Drupal core issue queue make him ideally suited to the role of a provisional core release manager. Dave will collaborate with the core release management team (catch, xjm, and quietone) on Drupal core releases, and with the Drupal Security Team on keeping core secure.

Please join me in welcoming Dave to the committer team!

READ MORE

What is BEM (Block, Element, Modifier) and How can it be used with Drupal Emulsify Twig Ravikant 08 Nov, 2022 Subscribe to our Newsletter Now Subscribe Leave this field blank

When working with open-source technologies and software, it is even more important to simplify the effort needed to read and understand your code. A good naming convention helps you solve larger problems rather than focusing on syntax and style preferences during code reviews. Seasoned developers understand the significance of well-written and organized code when working with larger websites with tons of style elements.

BEM (Block, Element, Modifier) methodology is a widely used naming convention for CSS classes that is gaining popularity because of the ease of use it offers. The fundamental concept of BEM is component-based web development. BEM makes interface development easy and fast, especially when you’re handling large projects with complex UI. Let’s explore more on BEM and how it can work with the Drupal Emulsify Twig module.

What is BEM

The BEM methodology was introduced to help make CSS classes easier to access, understand and scale. It can accelerate the development process and helps build reusable components.

BEM includes three parts:

1. Block
2. Element 
3. Modifier

Block

Blocks are the outermost and functionally independent component and are reusable. Examples: header, footer, sidebar, menu, content, etc.

Features:

• Block names should always reflect the block's purpose. 
• Blocks should not use margin or position. If you need to add margin or position then you need to apply it to the inner containers.
• Don’t use CSS tags or ID selectors when using BEM.

Example:

Element

Elements are child items of a Block. Each element can have only one block and cannot be used outside of it. Examples: menu items, list items, input field, etc.

Features:

• The element name (class) should describe its purpose (title, caption) and not its state (small/red). 
• The element and block are separated with a double underscore (__). Like this: block-name__element-name.

Example:

       Icon Image    

Modifier

A class name through which you can define the appearance, state, or behavior of a block or element. Examples: red, large, disabled, fixed, etc.

Features:

• The modifier name describes its appearance. For example, if the appearance is “_large”, then the modifier class will be as icon-button__title_large.
• The modifier is separated from the block or element by a single underscore (_).

Example:

       Icon Image    

Types of modifiers

1. Boolean

You can check the condition of the boolean value and set it in a variable. This variable can pass as a modifier value.

2. Key-value

The structure of the modifier's full name with key-value will follow one of these patterns:

1. block-name_modifier-name_modifier-value
2. block-name__element-name_modifier-name_modifier-value

Naming Conventions: Rules and Schemes

There are different naming schemes. All schemes have some common rules like:

• Names are written in lowercase Latin letters.
• Words are separated by a hyphen (-).

1. Classic Naming Schemes

The classic naming scheme is the default naming scheme of BEM.

Block-name__elem-name_mod-name_mod-val

• The element name and the block name are separated by a double underscore (__).
• The modifier name and the block or element name are separated by a single underscore (_).
• The modifier value and modifier name are separated by a single underscore (_).

2. Two Dashes Naming style

block-name__elem-name--mod-name--mod-val

• The element and block name are separated by a double underscore (__).
• The block and element are separated by a double hyphen (--).
• The value of a modifier and modifier are separated by a double hyphen (--).

3. CamelCase Naming Style

blockName-elemName_modName_modVal

• Each word after the first word begins with an uppercase letter.
• Blocks, elements, and modifiers are used the same way as in the standard naming scheme.

4. React Naming Style

BlockName-ElemName_modName_modVal

• Block's name and element’s names begin with an uppercase letter. 
• The modifier’s name begins with a lowercase letter.
• An element name and the block name are separated by a single hyphen (-).
• Names and values of modifiers are separated the same way as in the standard scheme.

BEM in Drupal with Emulsify Twig module

In Drupal, we can use the BEM Twig function with the help of the Emulsify Twig module. The BEM function lets you create BEM classes on elements in the components. Below mentioned are some BEM Twig extensions and their usage.

1. Simple block name (required argument):

This creates:

2. Block with modifiers:

If you want to add multiple modifiers, you can do so using an array.

This creates:

3. Element with modifiers and blockname (optional):

This creates:

4. Element with blockname, but no modifiers (optional):

This creates:

5. Element with blockname, modifiers and extra classes:

This creates:

6. Element with extra classes only (optional):

This creates:

Add Attributes Twig Extension

The Add attributes Twig function allows you to add HTML attributes to the elements of your components. Take a look at some Add Attributes functions below:

{% set additional_attributes = {   "class": ["icon-button", "icon-button__title"] } %} {% set additional_attributes = {   "class": bem("icon", ["small", "red"], "icon-button"), } %}

Final Thoughts

BEM methodology is extremely useful to developers who want to write and maintain better quality code that can be easy to be handed over and understood. Every element has a purpose which can be easily identified by its name and which block it is coming from. When used right, you will see that using BEM can boost development speed. If you liked what you read, sign up for our weekly newsletter where we'll send you fresh, piping-hot insight right to your inbox!

Author: Ravikant

Meet Ravikant Kumawat, a front-end developer who loves to keep up with the latest technologies. When not working, he dives into his books and fancies a great vacation with his family from the hills of Kashmir to the beaches of Kanyakumari. Also, Ravi can be a great bank for exclusive secrets!

Drupal Drupal Development Drupal Planet Drupal Module

Leave us a Comment

 

Recent Blogs

What is BEM (Block, Element, Modifier) and How can it be used with Drupal Emulsify Twig

Image

The Drupal 9 Webform Module – A Brief Tutorial

Image

How to React Quickly in Drupal

Want to extract the maximum out of Drupal? TALK TO US

Featured Success Stories

Upgrading and consolidating multiple web properties to offer a coherent digital experience for Physicians Insurance

Upgrading the web presence of IEEE Information Theory Society, the most trusted voice for advanced technology

Great Southern Homes, one of the fastest growing home builders in the United States, sees greater results with Drupal 9

View all Case Studies

Today we are talking about CKEditor 5 with Wiktor Walc & Piotrek Koszuliński.

For show notes visit: www.talkingDrupal.com/372

Topics

• What is CKEditor
• What does it do for Drupal
• Differnece between CKEditor 4 and 5
• Biggest benefit
• Improvements to the editing experience
• Plugin ecosystem
• Plugin language
• Roadmap
• Paid Features
• Supporting the Drupal community
• Security
• Native Web Components

Resources

• CKEditor Premium Features Module
• CKEditor Inspector
• Firefox github extension

Guests

Wiktor Walc - ckeditor.com @w_walc Piotrek Koszuliński - ckeditor.com @reinmarpl

Hosts

Nic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Randy Oest - randyoest.com @amazingrando

MOTW Correspondent

Martin Anderson-Clutz - @mandclu Metatag

Previously discussed in episodes: 70 as MOTW (8y ago!) and mentioned in 31, 46, 137. And 185 Brief description: Allows your Drupal site to provide meta tags on content to implement SEO best practices and maximize online findability Brief history

• How old: created in 2009
• Versions available: Supported versions for Drupal 7, 9, and 10
• Current version released Sep 29, 2022 Usage stats: 381,821 Maintainer(s): Dave Reid and DamienMcKenna - renowned Drupal contributors Module features and usage Allows content editors to populate common (and uncommon) meta tags either manually for each piece of content, or to have them filled out programmatically using tokens A wide variety of submodules to address different use cases where meta tags are helpful: social sharing, verifying site ownership (e.g. for Google Search Console), and more For any site that considers SEO a priority (which is probably most public-facing sites), setting Metatag should really be one of the first things Discussion: Given how widely used this module is, does anyone have specific experience with Metatag to talk about?

A new approach to Drupal theming, just in time for Drupal 10 John Locke Sun, 11/06/2022 - 18:07

Over the past few months, I've fielded a lot of minor styling requests, and as I work through each problem, I've almost always ended up with substantially less code than was there before. When I look through our portfolio of sites, most of them use tons of CSS to style all the various parts of a site -- and in many cases, the same styling reappears a bunch of different places. This leads to inconsistent styling, slow page loads, and more effort needed to make minor changes.

• Read more about A new approach to Drupal theming, just in time for Drupal 10
• Add new comment

The Drupal Association would like to congratulate our newest At-Large board member:

Nikki Flores 

When accepting her position, Nikki shared: “I am so grateful and feel truly honored for the opportunity to serve as your At-Large Board Member, and I pledge to bring all of my skills and talents to the role. For the next two years I’ll plan to work closely with the other board members, the association staff, the community, and all of you to make as many incremental improvements as possible. Part of the reason why I submitted my nomination is to make sure that people know that even without tremendous prior Drupal experience, it is still possible to make a measurable difference. I encourage you to help me and help our community -- and the code that helps all of our projects move forward — by getting involved at www.drupal.org/community. You belong to the Drupal community.”

About Nikki

Nikki is currently a Certified ScrumMaster® (CSM) and technical project manager and co-owner at Lullabot, a strategy, design, and development agency supporting redevelopment/new rollouts for Fortune 500 brands, government agencies, higher education, publishers, and enterprise technology companies.

She loves the web and learned to code in 1999. Since 2004, she has worked on 200+ websites  implementing Drupal for clients and employers, most recently IBM, New Relic, Green America, the GIST Network for the U.S. Department of State, and Changemakers for Ashoka: Innovators for the Public. She’s been using Drupal since 2008, working with agile methods since 2014, and received the CSM certification in 2020. She likes to think that we all, as makers and creators, are able to use technology to solve problems, connect communities, and build more effective change-making teams.

She is honored to be the recipient of the 2018 and 2019 NTENny Award and the 2021 Hack for Good award. She keynoted the first annual Drupal Diversity Camp and helped organize the 2022 Non-profit Industry Summit at DrupalCon. She is currently onboarding into the Drupal Community Working Group with a current effort of reviewing and making suggestions on an updated Drupal Code of Conduct. She also currently acts as a Pantheon Hero. She recently moved with her family, including three cats, to the Midwest.

Thank you to all 2022 candidates

On behalf of all the staff and board of the Drupal Association, a heartfelt Drupal Thanks to all of you who stood for the election this year. It truly is a big commitment to contribution, the Drupal Association, and to the community and we are so grateful for all of your voices. Thank you for your willingness to serve, and we hope you’ll consider participating again in 2023!

Detailed Voting Results

788 voters cast their ballots out of a pool of 2617 eligible voters (30%). This is a 50% increase in voter participation from 2021, with an additional 145 eligible voters added to the voting pool. An additional 10% of eligible voters voted in this election from 2021. 

Under Approval Voting, each voter can give a vote to one or more candidates. The final total of votes was as follows

Nikki Flores

372

Adam Bergstein

365

Mark Dorison

241

John Doyle

171

Esaya Jokonya

153

Bhavin Joshi

140

These voting results were unanimously ratified by the Drupal Association Board.

File attachments:  nikki.jpeg

LocalGov Drupal, a Drupal distribution/publishing platform created by councils, for councils is adding more to its feature set. New alpha releases of Microsites, Sa11y, Blogs and Pages modules are out.

Web applications today help create systematic farming records. Follow how Drupal and farmOS are creating an agricultural community one farm at a time.