Matt Glaman: Registering services to the Drupal service container without a module
Drupal's service container for dependency injection allows modules to register services and parameters to the service container or alter and modify the service container. Usually, this is done with a services.yml file provided by a module or a service provider for dynamic registration and alteration. But! Did you know you can integrate with Drupal's service container without a module?
Drupal blog: State of Drupal presentation (June 2023)
This blog has been re-posted and edited with permission from Dries Buytaert's blog.
DrupalCon North America 2023 DriesNote presentation
Last week, approximately 1,500 Drupal enthusiasts came together in Pittsburgh for DrupalCon North America. In good tradition, I delivered my State of Drupal keynote. You can watch the video of my keynote or download my slides (240.6 MB).
The theme of this keynote was innovation. As we like to say in Drupal, the drop is always moving. If we don't keep progressing and innovating, we risk falling behind. That is simply not an option because our mission and purpose are just too important.
License to innovateIn my keynote, I talked about the Drupal Association's goal to support and prioritize product innovation. To shed light on this important topic, I moderated a Q&A session with Tim Doyle, the new CEO of the Drupal Association, and Baddý Breidert, the current chair of the Drupal Association Board of Directors.
We discussed the strategic goals of the Drupal Association, the three-year plan we have been working on, and the actions we're taking to help accelerate product innovation. Given that it was a brief 15-minute Q&A, we only scratched the surface. Stay tuned for more details in the upcoming weeks!
Jumping S-curves by letting a 1,000 flowers bloomI also discussed the importance of Drupal "jumping S-curves". The pattern of innovation and growth over time follows an S-curve, with periods of slow progress, rapid innovation, and stagnation, followed by a leap to the next curve.
Lessons from S-curve jumps include the importance of having a vision and purpose, grassroots innovation, a supportive environment, and allowing time for ideas to flourish. I applied this theory to Drupal and emphasized how we are well-positioned for innovation, and have been able to jump S-curves over the years because of this.
Drupal has a clear vision and purpose, receives contributions from many individuals, provides a supportive environment, and allows ideas to grow and flourish over time. Additionally, we have initiatives like Project Browser and Recipes that help showcase innovative ideas.
Pitch-burgh innovation contestFinally, we determined the winners of the Pitch-burgh innovation contest, where individuals from all over the world pitched their own innovative Drupal ideas via video submissions. The response to our contest was overwhelmingly positive, with many attendees expressing their desire to see it return and expand in future DrupalCons.
We received 35 proposals for DrupalCon Pitchburgh, which exceeded expectations. Moreover, thanks to the incredible support from our sponsors, we raised $75,000 in sponsorship funds. I would like to extend my heartfelt appreciation to each and every one of our sponsors: Drupal Association, Acquia, 1xINTERNET, Skilld, Palantir.net, Digital Polygon, Zoocha, ImageX.
I also want to express my gratitude to Lee Walker from Code Journeymen and Jonathan Daggerhart from Daggerhart Lab for their real-time support. When the audience vote fell short by $3,000 to fully fund the fifth winner, they stepped in, and shouted from the audience that they will provide the extra funds.
All 35 submissions can be viewed on Drupal.org. I would like to extend a special congratulations to the five exceptional projects that were granted funding as a result of the live audience vote. I'm excited to see your projects come to life over the months to come.
- Decoupled Layout Builders (PreviousNext, $20,000)
- Using Drupal Gutenberg towards the most easy to use enterprise CMS (Frontkom, $22,000)
- JSON data and schemas FTW (Brad Jones, $20,000)
- Drupal API Client (Brian Perry, $10,000)
- Contributing and Mentoring the mentor (AmyJune Hineline, $6,000)
I'm really excited about these particular projects being funded because many Drupal site builders have requested enhancements for Drupal's page/layout builder (proposal 1 and 2), and more and more Drupal developers are embracing an API-first approach to website development (proposal 3 and 4). The funded projects offer an interesting blend of both. While we can't guarantee that these projects will be added to Drupal core itself, they surely deserve to be taken into consideration. We'll decide that in time through our regular process.
Bonus announcement and unexpected fundingSince Automattic is the main developer behind Gutenberg, I shared the Gutenberg proposal with Matt Mullenweg, co-founder of WordPress and CEO of Automattic. Matt was really excited about the idea of more Drupal sites using Gutenberg, and he kindly offered to provide the full €20,000 in funding through Automattic. Furthermore, he will be sending some Gutenberg experts to join the sprint without any cost to the Drupal community. Thank you, Matt!
Matt shared this great news after my keynote, which means we received some unexpected last-minute funding. It brings the total funding for Pitch-burgh close to $100,000!
As a result, we are able to fully fund the next project chosen by the audience at DrupalCon: Policy based access in core (Factorial, €13,000). The remaining funds will be carried over to the next innovation contest or used for other strategic initiatives of the Drupal Association.
ConclusionI always love the energy that fills the air when so many from the Drupal community gather together in one place. Every time I attend DrupalCon, I go home full with ideas, enthusiasm, and energy. The creativity and passion of the Drupal community constantly inspires me. I firmly believe in our ability to drive innovation at an even faster pace in the years to come.
Specbee: Component-based theming with Drupal’s Single Directory Component
Drupal theming has been an area long untouched by a radical update. Sure there are tons of contributed modules available for making the workflow a little easier but the out-of-the-box approach for creating a custom theme has remained more or less the same. There has been chatter about having some sort of component-based theming mechanism inside Drupal core itself for a long time. Enter Single Directory Components (SDC), which has been in discussion for quite some time through a contributed module handled by prominent Drupal contributors - Mateu Aguiló Bosch, Mike Herchel, Lauri Eskola, and Dave Reid. But now it has entered the core of Drupal (currently as an experimental feature) in version 10.1.
This component-based approach of theming a Drupal application isn’t new but it finally has made it to the core. It gives a whole new frontier for front-end devs to organize their code in a way that is more maintainable with a minimal learning curve. Within SDC, all files necessary to render the component (Twig, CSS, JS, etc.) are grouped together in a single directory. SDC has the potential to revolutionize front-end development in Drupal by empowering developers to leverage the latest front-end techniques, solidifying Drupal’s position as a robust and forward-looking CMS.
Drupal's current theming approachThe simplest way to work on a Drupal theme has been to add the markup to the html.twig files inside the template folders. For styling and behavior, we create CSS and JS files according to an entity's need and place them inside the CSS and JS folders respectively. This includes theming header menu, footer menu, blocks, regions, individual content types and their different view modes, different views, etc. These files are then declared in the libraries.yml file where dependencies (if any) can also be mentioned. This way they can be loaded on demand or be made globally available. Apart from this, any preprocessing logic goes into the .theme files, we have the breakpoints.yml to help with responsive designs and of course, .info.yml file without which all the effort is a waste.
While this seems to be a lot of work to be done before we actually do some useful frontend work, there have been some boilerplate code generators like drush theme generate, which intend to generate the folder structure of a theme in an interactive way and create a standard drupal folder structure.
Even though the above structure works well enough for starting a project and can pose no issue for a small project, it can become a bottleneck for enterprise websites where a more sophisticated design system needs to be integrated.
- Things start getting cluttered very rapidly. We see a lot of CSS and JS files just filled up to the brim in their folders.
- Developers struggle to find the code they can reuse or extend.
- Issues like code duplication, code spread across the files, specificity hell, and CSS conflicts crop up.
- This often leads to more efforts spent on later development where it is expected that initial development would have helped later.
At Specbee, we have standardized how we create our themes using an NPM tool called Drupal Theme Init developed by us from scratch which is open-sourced. Being a Yeoman generator, it can easily be installed with NPM/Yarn which then interactively helps in the generation of a custom theme. The idea of the Drupal Theme init is to have a consistent approach to how theme files are scaffolded following Drupal practices and to help out developers to start working on the theme without the hassle of setting the files every time they start a new project. The basic idea of the structure is to compartmentalize SASS into components using the BEM convention. Each CSS files associated with an entity like block, view, content type, etc have its own CSS generated and is attached to that entity either through the twig template or preprocessing. The same goes for the JS files. The extensive use of libraries.yml helps us to limit the amount of CSS and JS we render on the page.
The advantage of setting up the theme this way is we have a system in place for component-based theming without depending on any external libraries or plugins. It helps us to segregate the CSS/JS libraries based on the components to be loaded on the page, which helps with the performance. However, there are still limitations to this approach especially when the project grows in size. The segregation of components into atomic levels becomes a bit of a burden as it requires us to maintain the libraries.yml file with required dependencies. Also, there is no easy way we can do a proper integration of a design system with the current structure easily as we will have to define each component path and its dependency by ourselves in the design system too, to load the components in it.
What is Component-based themingWhile the vanilla approach seems fairly basic, there have been huge amounts of advancements done in recent times through contributed modules to have better approaches. One of the popular approaches is imagining the UI as a collection of reusable and consistent units called components. In most cases, this follows Atomic Design where each component is segregated into smaller building blocks. Modules like UI Patterns, Components! or component libraries like PatternLab, Fractal, and Storybook have brought innovative ways which have made the development of themes more streamlined and robust. Component-based theming has a certain edge over traditional theming:
- One of the biggest bottlenecks is the backend dependency, where frontend work can't start without the Backend work. This creates a lag. Using a component-based approach, the front-end can work independently and without much deep knowledge of Drupal things.
- Components can be created just from the available design with the required placeholders. The values for these placeholders can be filled later when the backend work is completed
- It creates a workflow where we just don’t change the markup in the templates folder and style it as per the requirement. Rather we have smaller structures styled separately and then create a collection of these smaller units into bigger components that can be used by the Drupal templates.
- This helps in maintaining the code related to each component in isolation and creates lesser chances of side effects.
- It confirms UX consistency across the application.
- Helps in the reduction of efforts spent on setting up the feature as changes made in one place reflect across the areas where it is used.
One of the prominent ways of following component-based development is using PatternLab which was introduced quite a while back. It initially came in with a Drupal edition which is archived now and replaced by a node-based package. The setting up of the PatternLab requires a Components module to be installed which will help in getting the markup from Twig files outside the templates folder for Drupal. This is followed by installing the patternlab package via npm which gives options to generate twig or mustache-based templates (obviously twig for us). Once this is done we have a ready reckoner style guide, some boilerplate code that helps in the creation of the style guide, and a patterns folder where in we create the components according to the requirements. These components are then included in the html.twig files present inside the templates folder.
While all these steps are fine to perform, there are instances where this is a bit difficult to set up and has a bit of a learning curve to it. The biggest drawback that comes with Patternlab is that all the CSS is aggregated into a single file which then gets dumped into all the pages (which is sometimes also the case with the JS included with it). While this doesn’t matter initially as the basic idea is the reusability of the component, once the project grows this starts affecting the page performance.
How to do component-based theming with SDCWith the initial version of SDC going into the core as an experimental module, there has been a lot of excitement around it. SDC has been touted as the biggest change to Drupal theming since the introduction of Twig. SDC again is not a complete solution for the Frontend Development team but a component-driven approach to theming with an out-of-the-box basic structure. This can still be extended with a number of modules for a certain kind of workflow. The basic idea is everything related to a component stays inside a single directory. This includes the Component Twig file, JS, CSS, other assets, and a single schema YAML file declaring the properties of the component.
Some immediate benefits of using SDC:
- All the code related to a component is in a single directory (as the name suggests!).
- The libraries for the component are auto-generated which leads to lesser trauma of not declaring the it in libraries.yml file. Although we still might need to add the dependencies to the component.yml file, this is being done in a single place rather than jumping to the libraries.yml file.
- There is a far smaller learning curve to implement SDC. If you know the basic of Drupal theming, all you need to do is enable this module and start writing the components.
- The power of twig (include/extend/embed) is still available which helps in the reusability of code.
- As the components are YML plugins, which can be easily discovered by Drupal and can be easily swapped by a component having the same API structure.
- The components can also be rendered through render arrays!
- Provides a good mechanism to integrate external libraries to facilitate a Design system.
- As the components are organized, the result of that is a consistent look and feel of the end product.
- The code becomes more testable as we have units (read components) that can be tested independently
- Because we define the schema within a component’s YAML definition, modules can automatically create forms to populate data.
Though it is currently included as an experimental feature in the core, setting up SDC is quite easy. Assuming there is a Drupal 10.1.x installation:
1. Enable the experimental SDC core module.
2. Create or use a custom theme to add SDC. For our purpose we created a custom theme called Ice Cream with Olivero as base theme.
3. For our purpose, let's use the basic page which comes out of the box. I have repurposed it by adding a custom Title field and making some adjustments to the display which then looks like this:
4. The template twig file consists of basic code:
5. Create a folder called components inside your custom theme. This is similar to how we have a templates folder for Drupal templates.
6. For now, the basic idea is to style the title and description, which will be reusable in nature. Let's create a component called simple-article. There will be simple-article.component.yml file and simple-article.twig which we will require. Apart from that, we will also add simple-article.css for styling.
7. Let's create the simple-article.twig file. We will have a basic markup for that.
8. Add the simple-article.component.yml file with the schema mentioned in https://www.drupal.org/node/3352951. The idea is to define what will be the inputs to the twig file. It will look something like this for us:
9. Let’s add some basic styling to the component in simple-article.css.
10. Clear the cache.
11. Abracadabra! The component is now ready to use. But it still needs to be used. Without that, the component sits idle in the components folder.
12. Include this component in the required template file (this is the html.twig file under the templates folder in the custom theme) with format [theme_name:component-name]. Notice the include statement where we are adding the twig variables to be used in the component.
13. The component now gets rendered with our new markup and better styling.
14. Notice the markup. If twig debug is enabled, we get some special icons too with our SDC component rendered.
And that’s it!
References
- https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/about-single-directory-components
- https://www.drupal.org/project/sdc
- https://herchel.com/articles/creating-your-first-single-directory-component-within-drupal
With the way SDC has been built, there is going to be high-intensity development around it. One of the popular tracks is that modules will automatically detect components and insert their respective forms into Layout Builder, CKEditor, Paragraphs, Blocks, Fields, etc! In addition, SDC right now plays nice with Storybook through a contributed module called CL Server (which has been maintained by SDC project maintainers). Already there are other modules like CL Devel, CL Generator, and even UI Patterns that are getting built around SDC.
This will also help us to upgrade our own theme generator (Drupal Theme Init) which we discussed earlier to give an option of using SDC along with a Design System in place, preferably Storybook. This will help anyone to kickstart SDC implementation instantly paving the way for better theme development.
If you would like to read more such interesting content on Drupal, subscribe to our weekly newsletter today!
Author: Sagar Chauhan
Meet Sagar Chauhan, Lead Engineer, Acquia-certified Frontend Developer, soccer player, and a huge Arsenal fan. Sagar loves long train journeys and checking out latest gadget reviews. If you want to invite him for a meal (and you don’t know how to cook), Maggi would be perfect! :)
Email Address Subscribe Leave this field blank Drupal Drupal Module Drupal Development Drupal PlanetLeave us a Comment
Recent Blogs Image Component-based theming with Drupal’s Single Directory Component Image Finding Growth and Fulfillment - Ankitha Shetty’s Career Story Image The Admin Toolbar - A Must-Have Drupal Module Want to extract the maximum out of Drupal? TALK TO US Featured Case StudiesUpgrading the web presence of IEEE Information Theory Society, the most trusted voice for advanced technology
ExploreA Drupal powered multi-site, multi-lingual platform to enable a unified user experience at SEMI
ExploreGreat Southern Homes, one of the fastest growing home builders in the US, sees greater results with Drupal
Explore View all Case StudiesLN Webworks: Discovering Drupal 10 Compatibility with Emerging Technologies
Right from its inception, Drupal has been captivating the hearts of users worldwide. The fondness for this top-notch content management system continues to increase more and more with every upgrade that is equipped with cutting-edge features. Currently, Drupal 10 is creating a sensation globally with its incredible speed, phenomenal security, modern semantic layout, seamless support for embedded videos, and flawless compatibility with emerging technologies.
As marching along with technological advancements is indispensable for businesses to accomplish enduring success in the modern world, Drupal 10 can be a boon for your company. In this blog, we’ll explore Drupal 10’s compatibility with cutting-edge technologies such as Artificial Intelligence and Machine Learning, Headless CMS, and Cloud services.
LN Webworks: Drupal as an Exceptional No-Code / Low-Code Website Builder
Are you a non-developer who dreams of managing your site on your own? If the answer is yes, Drupal CMS is the magic bullet you need. You’ll be astounded to know that Drupal is a no-code / low-code software that enables you to develop a phenomenal site without writing a single line of code. Its no-code tools empower you to add various functionalities to your site by simply pointing and clicking. Whereas, the low-code tools let you drag and drop builders to develop your desired website in a hassle-free manner. Seems interesting, doesn’t it?
No doubt, you’ll require a team of developers to do the initial setup of your site, but once that’s done, you can effortlessly create your content and make custom configurations independently. To be precise, you can become the master of your site and fulfill your dream.
Are you feeling intrigued to dive deeper into Drupal’s no-code / low-code features? If yes, let’s begin the exploration without any further ado.
Peoples Blog: Security Checklist for Drupal Application
Chapter Three: Fixing the Drupal Document Problem With Document OCR
Ben's SEO Blog: How to Use Drupal to Clean Up Your Content
Talking Drupal: Talking Drupal #403 - Live @ Drupalcon
Today we are Live from DrupalCon Pittsburgh with Jim Birch and Cathy Theys.
For show notes visit: www.talkingDrupal.com/403
Topics- What is new
- Driesnote
- Pitchburg
- What was great on the first day
- EoL announcement
- Looking forward to
- Next Drupalcon
- Pittsburgh
- Matt Glaman blog about Retrofit
- Talking Drupal 390 - Employee Owned Companies
- Drupal Security Team Announcement
- New CEO of Drupal association
- Drupalcon Locations
Jim Birch - @jimbirch Cathy Theys- @YesCT
HostsNic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Martin Anderson-Clutz - @mandclu
MOTW CorrespondentMartin Anderson-Clutz - @mandclu Retrofit Provides compatibility layers for Drupal 7 code to allow run on Drupal 10.
robertroose.com: Minder vervuilende website? 5 dingen die je NU kan doen
Chromatic: Drupal 7 End-of-Life Ep 09: New End-of-Life Date Announcement!
The Drop Times: The Final Topics of Discussion
My father and I left for a two-day trip to another state. It wasn’t a vacation, so we hadn’t planned anything. We still had a few hours to spend before we set to head back home.
My dad then realised he knew a friend from college who lived there, so he dropped in a message. It wasn’t till the last moment that we decided to meet.
Meeting a friend from college almost 30 years later, the first thing you can think of is to connect over ‘the major you studied together in college’ and how almost none of you work in that field anymore. That final topic of discussion was probably what they discussed last on graduation day too.
As rightly said by TV character Cornell Graduate and runaway manager Andy Bernard from the hit show ‘The Office’, ‘I wish there was a way to know you’re in “the good old days” before you’ve left them,’ we sometimes do wish, don’t we?
Now not to get all teary-eyed, but can we all take a moment to think about the friendships made over the years? It is a tale as old as time, the nature of passing moments and the yearning to make them stop for a few seconds.
DrupalCon has been a place to reconnect. Meeting up with your mentors, people that started their careers with you, an internet friend. DrupalCon has proven a space for much more than simply ‘work’. It shows community.
Over the past few days, TheDropTimes (TDT) has thoroughly covered DrupalCon. With our Team TDT physically present at the event, we received the action taking place at DrupalCon Pittsburgh 23 with photos, voice and video clips provided by Aiden Dean Dunn, Varun Baker and Anoop John; coordinating with sub-editors miles away, we published a few writeups so far; some exclusive content was on our official LinkedIn page. Also, find the stories on the website: Day 1 ‘DrupalCon Ignites With a Spectacular Start’ and A Glimpse into Day 3 at DrupalCon 23.
At DrupalCon Pittsburgh: Dries’s Inspiring Keynote Address was the First Day’s Major Takeaway, and Randy Fay was awarded the 2023 Aaron Winborn Award for Outstanding Contributions to the Drupal Community. 5 Winners were also awarded the Pitch-burgh funding Totaling $78,000 at DrupalCon.
Aidan Dean Dunn interviewed Dries Buytaert, founder and creator of Drupal: ‘Good Sleep, Superpowers, Open Source: An Interview with Dries Buytaert’. Aiden also spoke to Fei Lauren, scrum master at Renesas Electronics, on Neuroinclusivity and People-First Leadership. He also covered a session by Kevin Quillen, 'Could OpenAI and Drupal 10 Play the Master and the Muse?' and wrote a detailed feature on Lullabot’s Road to Becoming 100% Employee-Owned.
Meanwhile, I had the privilege to write about The Cycling Drupalers: a 330-mile cycling trip, by Aaron Winborn award winner Randy Fay and his spouse to attend DrupalCon NA. Kazima Abbas, sub-editor at TDT, recently interviewed Suchi Garg, technical manager at Salsa Digital and organising committee member at DrupalCon Pittsburgh 2023.
TDT also interviewed Bert Boerland, co-initiator of the DrupalJam movement, a handbook writer and a Drupal evangelist, to ask all about his Drupal Journey and the recently conducted DrupalJam; A Drupal Multipotentialite Bert Boerland. In the past week, Dries also announced that Lauri Eskola is to Become Drupal Core Product Manager
We posted a video from a session in DrupalSouth, Drupal in New Zealand Gov Ecosystem and DUG Berlin had a Summer Festival on July 6.
That’s some of it, Folks, You can always turn to The Drop Times to read more.
Alethia Rose Braganza
Sub Editor, TheDropTimes
LN Webworks: Why Choose LN Webworks as Your Web Development Partner?
Hiring a web development company is perhaps the best decision when it comes to building or resigning a business website. An eminent agency can bestow your site with a professional design and captivating ambiance. It can also equip your website with cutting-edge features such as an intuitive user interface, voice search, and so on. Not only this, but an adept web development partner can help you rank high on search engines with invincible Search Engine Optimization (SEO) practices.
If such enormous benefits of hiring a splendid web development company have driven you to seek one, LN Webworks may be your search’s point of culmination. Here, we’ll take you on an enchanting journey to unravel why you should consider choosing LN Webworks for website development.
The Drop Times: Lullabot’s Road to Becoming 100% Employee-Owned
LN Webworks: How Open Source Contribution Can Drive Growth For Your Business?
The hurdles of maintaining a solid market position, meeting customer demands, and attracting top talents can leave many businesses overwhelmed. Traditional approaches may not be sufficient in this fast-moving marketplace.
Embracing a culture of open-source contribution is a unique approach to overcoming these hurdles. It’s not just a noble endeavor but also a strategic move that can drive your business toward long-term success. By exploring this article, you will learn about the abundant reasons why open-source contributions can bring substantial value to your business.
What is an Open-Source Contribution?Open-source contribution involves actively engaging in and making contributions to open-source projects and communities. The act may involve engaging with the development process, such as contributing code, submitting bug fixes, improving documentation, and lending a hand to other users through discussions or forums.
#! code: Drupal 10: Creating A Homepage With The Config Pages Module
There are a number of different ways to create a homepage in Drupal. One common technique is to create a content type to store the fields you need, with the addition of blocks to add extra information to the homepage layout.
Adding a content type to handle the homepage has a number of problems. It can be tricky to set up the permissions correctly for users to edit the page, also, it's easy to for editors to accidentally delete it and break the entire site. You often have to protect the content in some way to prevent unwanted editing or deletion.
I was recently tasked with setting up a homepage of Drupal site and I decided to use a module called Config Pages to allow a configurable homepage to be created. This approach turned out to be quite easy and was quickly adapted by the rest of the team to introduce extra configuration.
I thought I would detail the approach in an article taken since it requires a little bit of code but allows for quite a bit of flexibility.
Config pages is a module that allows the creation of single use fieldable entities. These can then be used to perform a number of tasks, including exposing configuration and creating singleton pages.
Setting up Config PagesOnce you have installed the module you need to create a config page type by going to the path at /admin/structure/config_pages/types and creating a new type. The settings page for creating these entities contains a few options, but we only really need the label. It is safe to ignore the fields about token, menu and context settings for the purposes of creating a homepage.
After you've created the type you can then configure it just like you would any other fieldable entity type. Just add the fields you need to the entity to handle all of the data you need to display.