Specbee: Understanding Drupal Configuration Synchronisation

Imagine you’re adding a new feature to your Drupal site, like a Mailchimp module that integrates with your contact form. Now that you have set it up, you want to move it to staging and then production. How do you maintain consistency across environments and ensure it is configured the same way all the way across? Don’t worry! Drupal comes to developers’ rescue with its robust Configuration Synchronization system. This fantastic feature lets you effortlessly export the setup and import the settings between different instances of a Drupal website. In this blog post, we'll delve into the nuances of Drupal Configuration Sync, exploring the process, best practices, and strategies to master this essential aspect of Drupal development. What is Drupal Configuration Synchronization Drupal Configuration Synchronization is a feature in the Drupal content management system that allows you to manage and deploy configuration changes across different environments in a structured and efficient manner.  The Configuration Manager core module helps manage everything related to configuration. Configuration in Drupal includes settings, content types, views, fields, and other elements that define the behavior and appearance of your website. Understanding Drupal Configuration Before diving into Configuration Synchronization, it's crucial to understand what constitutes "configuration" in Drupal. The configuration of a Drupal site includes site settings, content types, views, fields, and other components that define its structure and behavior. This separation between configuration and content allows for more efficient management of site elements. Configuration Management System in Drupal Drupal's Configuration Management System serves as the backbone for handling configuration changes. It facilitates the export, import, and deployment of configurations between different instances of a Drupal site. This systematic approach ensures a seamless transition of settings and structures across various environments (e.g., from a development environment to a staging or production environment). The Config file locations are mapped in the settings.php file, It is recommended to have the configuration files out of the root directory. $settings['config_sync_directory'] = '../config/sync';Configuration Workflow The configuration workflow typically involves making changes on a development site, exporting those changes, and then importing them into other environments. The goal is to keep the configuration consistent across all environments to ensure a smooth and predictable user experience. Configuration Export You can export configuration changes using the Drupal admin interface or Drush (Drupal Shell). The exported configuration is stored in YAML files, which are human-readable and version-controlled. In your root directory, enter the below command drush cexThe above command gives you the list of configuration files you have worked on, which will be exported as yml files. Once you say ‘yes’ to this command, all the configurations will be generated as yml files. You will then need to add those configurations and push them to the staging environment via Git or any version control tools. Configuration Import Configuration can be imported into another Drupal instance, such as a staging or production site. This process ensures that the configuration is synchronized across different environments. Importing configuration can be done through the admin interface or Drush. Drush cim:The above command will help us import all our configurations to the staging or production environment from the development environment.   Once we say ‘yes’ to this command, all those configurations will be exported to the respective environment. Review and Deployment Leverage the Configuration Management Interface to review and selectively deploy configuration changes. This step is crucial for maintaining control over what gets applied to each environment. Drupal provides tools to track and manage configuration changes. The Configuration Management Interface allows you to review and deploy configuration changes selectively. This image shows how the configuration differs between the respective environments. We can find it at this location -> /admin/config/development/configuration Configuration Synchronization Strategies Depending on your project's needs, you may choose different strategies for configuration synchronization. For example, you might have a single master environment where configuration changes are made and then synchronized to other environments, or you might have a more distributed approach where each environment can make and synchronize its own changes. Centralized Master Environment Implement a single master environment where all configuration changes are made. Changes can then be synchronized to other environments, ensuring consistency across the board. Distributed Development Allow each environment to make and synchronize its own configuration changes. This approach provides more autonomy to individual teams working on specific aspects of the project. Best Practices for Configuration Synchronization It is crucial to follow best practices for configuration synchronization, such as: Version Control: Use version control systems like Git to track and manage configuration changes. This facilitates collaboration among developers and provides a history of alterations. Documentation: Document configuration changes thoroughly. This documentation aids in understanding the purpose of each change, making it easier for developers to collaborate and troubleshoot. Regular Testing: Testing regularly ensures that changes won't disrupt the live site and helps identify potential issues early in the process. Selective Synchronization: When deploying configurations, opt for selective synchronization to avoid unintended consequences. This allows for a more controlled and targeted application of changes. Final Thoughts Drupal Configuration Synchronization is extremely useful for developers to speed up their projects. By following best practices, understanding the workflow, and implementing effective strategies, you can ensure a seamless Drupal development process. Got a Drupal project in mind? Our team of Drupal experts can help you make it happen. Contact us today for a free consultation.   

DrupalEasy: DrupalEasy Podcast S16E3 - Andy Giles - GitHub Copilot

We talk with Andy Giles about GitHub Copilot and his experience with it in Drupal development.

URLs mentioned

DrupalEasy News

Professional module development - 15 weeks, 90 hours, live, online course.  
Drupal Career Online - 12 weeks, 77 hours, live online, beginner-focused course.

Audio transcript  

We're using the machine-driven Amazon Transcribe service to provide an audio transcript of this episode.

Subscribe

Subscribe to our podcast on iTunes, Google Play, iHeart, Amazon, YouTube, or Spotify.

If you'd like to leave us a voicemail, call 321-396-2340. Please keep in mind that we might play your voicemail during one of our future podcasts. Feel free to call in with suggestions, rants, questions, or corrections. If you'd rather just send us an email, please use our contact page.

Credits

Podcast edited by Amelia Anello.
 

Talking Drupal: Talking Drupal #435 - UI Suite initiative

Today we are talking about web design and development, from a group of people with one thing in common… We love Drupal. This is episode #435 UI Suite initiative.

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

Topics
  • Elevator Pitch
  • What do you mean by implementing design systems
  • Is this to thel themers or site builders
  • What is the expected outcome
  • The project page says initiative, but this is not on the community initiatives page, is this an intitiative
  • How does this implement public design systems
  • Does this work with Single Directory Components
  • Youtube Channel
  • Getting involved
  • Roadmap
  • Use cases
  • Do you see this going into core
Resources Guests

Pierre Dureau - LinkedIn pdureau

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi

MOTW Correspondent

Chris Wells - chrisfromredfin

  • Brief description:
    • Have you ever wanted simple but accessible dropdown navigation on your Drupal website? There’s a module for that.
  • Module name/project name:
  • Brief history
    • How old: created in Nov 2022 by Jay Huskins of Redfin Solutions
    • Versions available: 2.1.5 which works with Drupal 9 and 10
  • Maintainership
    • Actively maintained, most recent commit is less than a month ago
    • No Test coverage at this point
    • Documentation - via README.md
    • Number of open issues: 2, neither of which are bugs
  • Usage stats:
    • 29 sites
  • Maintainer(s):
    • Jay Huskins, with support from Redfin
  • Module features and usage
    • Provides a new menu block that includes markup for disclosure buttons, that make it easier for users on assistive devices to navigate drop-down menus
    • Activating the button will toggle the visibility of nested menu items
    • Also includes ARIA labels to provide clarity around what the buttons do
    • Worth mentioning that Drupal’s Olivero theme also includes disclosure buttons in its mWe’ll also cover Disclosure Menu as our module of the week.
    • Guest Introenus, but there isn’t a straightforward way to pull the menus implemented there into your custom theme
    • Also had a write-up in the Drupal advent calendar we talked about last month, so listeners can also check that out if they want more information

Kyle Einecker|True Summit: Introducing the Search Web Components Module: A Better Way to Build Search Experiences

<p>Since Drupal 8 was released in 2015, I've launched my fair share of sites, and one common feature of those sites was a search page. Working mainly with healthcare and e-commerce businesses during that time, the sites I launched often required not just a site search but a catalog search, a find a location search, or a find a doctor search. With those additional searches came designs and requirements that I needed to convince Views, Search API, and Facets to do. Search API is great, Views is great, Facets is great, but combined, they've never worked as expected for me. Every time I build one of those experiences, it's a fight to meet the expectations of site owners. And I'm not alone. When you go to the Facets issue queue, you'll find many issues and comments reporting issues with facets.</p><p>Today, I am bundling up all my hard won search experience to introduce an easier, better way to build search experiences with Drupal. Search Web Components will take a whole class of search challenges and make it something Drupal just does instead of being a complex and time consuming part of a project.</p>

mandclu: Prompt Engineering: Get the Most From Your Drupal Site's AI Integration

Mon, 01/29/2024 - 09:39 Image removed.

Prompt Engineering: Get the Most From Your Drupal Site's AI Integration

A recent analysis by the IMF estimates that 40% of jobs globally, or 60% of jobs in advanced economies, will be impacted by the growing adoption of AI. How will it impact your role? In my opinion the surest way to secure your place in these transformed economies will be by including AI in the toolset you use to stay competitive.

Tags

The Drop Times: Wrapping Up the First Month of 2024

Dear Reader,

As we bid farewell to the inaugural month of the new year, we find ourselves standing at the intersection of introspection and eagerness. With its promise of renewal and a clean slate, January has set the stage for the unfolding chapters of the coming months. It's a time marked by resolutions, goal-setting, and embracing the boundless possibilities.

In reflecting on this initial chapter, let's take a moment to assess our achievements, acknowledge progress, and eagerly anticipate the challenges and triumphs on the horizon. The journey of the year has only just begun, and the unwritten pages of our story beckon with anticipation.

As January gracefully transitions into February, the closure of the Global Contribution Weekend in the Drupal community symbolizes a significant close to an impactful month. Here is a compilation of Drupal Contribution Weekend celebrations that occurred across the globe. Nico Grienauer has an explainer of what this event is

As we bid farewell to January, the Drupal Community sets its sights on a month steeped in celebration. Often hailed as the month of love, February encourages us to bask in the warmth of connections and expressions of affection. With numerous global events, Drupal is poised to embrace the heartwarming spirit of togetherness.

Now, let's shift focus and explore some of the latest news stories and articles we covered last week.
Kazima recently engaged in a compelling interview with Fran Garcia-Linares, Senior Drupal Developer at the Drupal Association. During the interview, Fran discussed the Association's strategic initiatives, including migrating from Drupal 7 to Drupal 10 and spearheading the GitLab Acceleration initiative. Additionally, Kazima delivered comprehensive coverage of the latest developments and insights from Drupal Mountain Camp 2024.

Acquia has exciting webinars lined up. On February 7, 2024, they will host "Mastering Your DAM Strategy and Governance Plan for 2024 and Beyond," aiding businesses in navigating asset demands through digital asset management (DAM) solutions. Additionally, on January 29, 2024, at 12:15 pm EST, Acquia will delve into "Navigating the AI Labyrinth: Security & Compliance in Modern DXPs and CMSs."

Jesse Loseberg leads an A11yTalk session on February 08, 2024, at 01:30 PM (ET), titled "The Accessibility Mindset: Moving Beyond Remediating, Fixing, and Reacting." and at the Florida DrupalCamp on February 24, 2024, from 1:00 pm to 1:45 pm, Steve Wirt of CivicActions explores "Unraveling the Clues to Effective Drupal Site Documentation," tailored for developers, project managers, content designers, system architects, and UX designers.

Droptica's webinar, "The Future After Drupal 7: Exploring Alternatives and New Opportunities," is on February 22 at 3:00 pm CEST. Save the date for Drupalcamp Rennes on March 28-30, 2024, promising three days of Drupal Camp goodness. Stay updated with this week's Drupal events by checking the published list here.

NERD Summit 2024 has extended its session proposal deadline until all 40 session slots are filled. Additionally, the event offers sponsorship opportunities for keynote talks. For more details, check the provided link. DrupalSouth Sydney 2024, happening at the Sydney Masonic Centre from March 20 to 22, is a significant gathering for the Australian and New Zealand Drupal community. GitHub has opened its certification program to the public, offering individuals worldwide a chance to enhance their skills and credentials. Learn more at this link.

Splash Awards Australia and New Zealand are calling for submissions in 2024. Find more details here. Explore the details of the upcoming DrupalCon Portland, which features a dedicated marketing track. Find more information here.

Varbase 9.1.1 is now available, offering a patch (bugfix) release for Varbase 9 suitable for production sites. Created by Rajab Natshah, this release addresses issues and ensures smoother functionality. Also the PHP development team has released PHP 8.2.15 and PHP 8.3.2, introducing important updates and improvements to the widely used scripting language.

There are more stories available out there. But the compulsion to limit the selection of stories is forcing us to put a hard break on further exploration—happy Drupaling folks.

To get timely updates, follow us on LinkedIn, Twitter and Facebook.

Thank you,

Sincerely
Elma John
Sub-editor, TheDropTimes.

The Drop Times: Drupal's Future Excites and Warrants Consideration: Boyan Borisov

Dive into an illuminating conversation with Boyan Borisov, VP of Digital Solutions Europe at FFW, as he shares his journey as a Drupal enthusiast and his experiences with digital transformation. Discover his insights on Drupal's roadmap, transitioning to a unified multi-brand ecosystem, and the remarkable evolution of the Layout Builder.

LN Webworks: Top 9 Essential Drupal Caching Tips For Faster Website Performance

Image removed.

Ever found yourself wondering, 'Why is my Drupal site crawling at a snail's pace?' or contemplating ways to turbocharge your Drupal website performance? Essentially, what are the most efficient, budget-friendly, and quickest solutions to tackle those performance bottlenecks that are hindering your website's speed?

Fortunately, if your website is powered by Drupal 8 (and we assume it is), you're in for a treat with one of the most sophisticated caching systems available. The key lies in embracing Drupal caching best practices and leveraging its full potential.

Top 9 Essential Drupal Caching Tips

Let’s explore the top 9 Drupal caching best practices that promise to be the game-changer for your page load time. 

Four Kitchens: Tips for upgrading to CKEditor5

Image removed.

The Web Chefs

January 1, 1970

At Four Kitchens we keep several lists of “Hot Topics” to share our learnings across the dozens of sites that we care for. Are you upgrading a Drupal site to CKEditor5? We’ve tidied up one of these internal wiki documents into this set of general upgrade guidelines that might pertain to your website.

Rough steps to upgrade

The level of effort needed for this upgrade will be different for each site. It may take some time to figure out. CKEditor 5 is available in Drupal 9.5 and beyond. You can try switching/upgrading on a local site or multidev and assess the situation.

First, create a list of CKEditor enhancement modules on the site and check if they are Drupal 10 ready (the reports from Upgrade Status and this Drupal.org page may help). Common modules to look for include Linkit, Anchor Link, Advanced Link, IMCE, Entity Embed, Video Embed Field, Footnotes, and anything with the word “editor” in the title.

As a best practice, you should test both the creation of new content, and editing existing content in several places. This will help make sure that some lesser used HTML isn’t treated differently in the new CKEditor. Run visual regression tests (if available).

You may need to point out key interface changes to your clients or stakeholders (e.g., contextual windows for links/media/tables instead of modals, etc.). While it is a bit of a change, it’s overall an improved user experience, especially for new people who are coming in cold.

Anchor links

Anchor link gives editors the ability to create links to different sections within a page.

For “better integration with Drupal 10, CKEditor 5, and LinkIt” there is a 3.0.0@alpha version. If your project isn’t using wikimedia/composer-merge-plugin, you must require northernco/ckeditor5-anchor-drupal package and add the following to the repositories section of composer.json:

{ "type": "package", "package": { "name": "northernco/ckeditor5-anchor-drupal", "version": "0.3.0", "type": "drupal-library", "dist": { "url": "https://registry.npmjs.org/@northernco/ckeditor5-anchor-drupal/-/ckeditor5-anchor-drupal-0.3.0.tgz", "type": "tar" } } }

Issue

Branch

Embedded media

Depending on the age of your site, it might be using one of several techniques to embed media into the WYSIWYG:

If your site is using the video_embed_field module (most sites are probably using Drupal core’s media module), there is a patch that adds support for CKE5. Insert Image works slightly different (though this is probably not the case if your site uses core’s media module). It’s worth considering if there is a way to enhance this for user experience, if necessary.

If your site uses custom Entity Embed for media, consider switching to the core media library. It may provide a better administrative user experience in some cases.

The insert image button in CKEditor functions a little differently than it used to. Rather than bringing up a modal with fields to upload an image like the image below:

Image removed.

It now immediately pulls up your computer’s file system for you to search for images like so:

Image removed.

After adding your image, the alt tag box prompts you underneath the image:

Image removed.

After submitting your alt tag, you can adjust alignment and sizing:

Image removed.

Moving general styles to link styles

It was common in CKEditor4 to use its “Styles” feature to provide a way to add variations of links (to make them look like buttons, or to add icons).

Image removed.

There are a few UX problems with that approach. Either the styles are set to apply on <span>, which means that they can be applied to non-links, or the styles are set to apply on <a>, which means that they are mysteriously grayed out most of the time (until you select a link). Either way, it’s not intuitive how to apply a link style. In CKEditor5, we can switch to using the Link Styles module.Image removed.

Change in Styles dropdown behavior

In CKEditor4, when integrated with Drupal, the Styles dropdown only allowed applying one style to an element (e.g., “external link”). If you tried to apply a different style, such as “locked link,” the previous style would be removed.

The Drupal implementation of CKEditor5 allows for multiple styles to be applied to elements via the Styles dropdown. This change may be unexpected for some, and could result in elements that look broken, such as when a link has both the “external link” and “locked link” styles.

CKEditor5 introduced a new API for adding theme-specific styles. The new architecture might cause the CKEditor5 theme to bleed into the admin theme. To know how to deal with these issues, review new API for adding theme-specific styles in CKEditor5.

You’ll likely run into an issue with styles bleeding outside of the editor, so see the other section within this page.

Cut and paste

Paste-from-Word, paste-from-Google-Docs, etc. is now built-in to CKEditor5. (At least for 90% of use cases.) There’s a paid plugin for more esoteric needs.

There is no paste-as-plain-text plugin for CKEditor5. You can use Ctrl-Shift-V (or Cmd-Shift-V) to paste as plain text. If you want to get rid of all formatting (including bold, links, etc.) in existing text, you can highlight the text, use Ctrl-C to copy, then Ctrl-Shift-V to paste it back as plain text.

Behat

Many of our Behat automated test broke after the update because there were multiple structural changes, so this is how we solved it: First, here is the doc about how to get the editor instance in case you want to know more about it. This is how we rewrite our custom step to fill out the CKEditor during testing. (We found the code in an article post-post).

/** * A step to help fill in a ckeditor wysiwyg. * * @param string $locator * The css locator of the field that ckeditor has taken over. * @param string $value * The html value you wish to fill in to ckeditor. * * @Then I fill in wysiwyg on field :locator with :value */ public function iFillInWysiwygOnFieldWith($locator, $value) { // https://ckeditor.com/docs/ckeditor5/latest/support/faq.html#how-to-get-the-editor-instance-object-from-the-dom-element $ckeditor5_drupal_editable_element = "div.form-item-$locator .ck-editor__editable"; $this->getSession() ->executeScript( " var domEditableElement = document.querySelector(\"$ckeditor5_drupal_editable_element\"); if (domEditableElement.ckeditorInstance) { const editorInstance = domEditableElement.ckeditorInstance; if (editorInstance) { editorInstance.setData(\"$value\"); } else { throw new Exception('Could not get the editor instance!'); } } else { throw new Exception('Could not find the element!'); } " ); }

and the mink step for regular field:

And I fill in wysiwyg on field "field-summary-0-value" with "Some Teaser Text"

And for a field inside a paragraph:

And I fill in wysiwyg on field "field-sidebar-content-0-subform-field-simple-text-0-value" with "Behat Side Nav Body Text"

Preventing custom styles from bleeding into admin theme with CKEditor5

See the new API documentation about implementing theme styles in the new way. This may require some adjustments on your end.

One of the major changes with CKEditor5 is that it pulls WYSIWYG styles onto the whole page when there is a WYSIWYG on the page. In CKEditor4, styles were only pulled into the CKEditor iframe. This can be extremely frustrating when the admin theme looks odd or different on pages that contain a WYSIWYG.

Limit the number of stylesheets being pulled into the WYSWIYG. (First, note that this method has only been confirmed to work on newer versions of Sous using specific webpack settings. If you are having problems with it, make sure your webpack settings allow for multiple manifests to be generated. You may need to refer to a newer site to see how it is configured.)

The first step is to create a new stylesheet (a manifest) called wysiwyg.scss in the same directory as your styles.scss file, which assembles all the stylesheets used in your theme. For this stylesheet, we’ll only want to include the stylesheets that our WYSIWYG needs. For example, I have one that looks like this:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap'); @import '~normalize.css/normalize'; @import '~breakpoint-sass/stylesheets/breakpoint'; // Components @import '00-base/**/*.scss'; // Include all atoms except form items. @import '01-atoms/00-links/**/*.scss'; @import '01-atoms/01-text/**/*.scss'; @import '01-atoms/02-lists/*.scss'; @import '01-atoms/tables/*.scss'; @import '01-atoms/images/**/*.scss'; @import '05-pages/colors.scss'; @import '05-pages/base.scss';

In this example, we are pulling in a couple needed files from node_modules (normalize and breakpoint), and then any .scss files from base, and then select files from atoms (links, text, lists, tables, and images).

Compile and make sure that it has created the new files at /dist/css/wysiwyg.css. If you get any errors, you may need to include another file that has a variable you need, or something along those lines.

1.) Update your .info file In your theme’s .info file, set CKEditor5 to use your new stylesheet:

ckeditor5-stylesheets: - dist/css/wysiwyg.css

2.) Review the WYSIWYG. Visit a page with a WYSIWYG on the page, and verify that the limited styles are loading properly within the WYSIWYG. Try all the dropdowns and buttons that are included in the WYSIWYG settings. If anything appears unthemed, review your styles to see if there’s a stylesheet missing from your manifest.

3.) Review the rest of the page. Now review the page around the WYSIWYG and note how if differs from other pages that do not have a WYSIWYG. Common differences to look for are: heading styles, text styles, buttons — basically anything that you included in your manifest.

4.) Limit styles

  • Find the page’s body class for node edit pages (in our test case, .gin--edit-form). It may depend on your admin theme.
  • Find the wrapper class for the WYSIWYG. Most likely the best choice is .ck-content. Our approach will be to hide styles from .gin--edit-form, but then add them to .ck-content.

For example:

body { background-color: clr(background); color: clr(text); @include body-copy; }

becomes:

body:not(.gin--edit-form), .ck-content { background-color: clr(background); color: clr(text); @include body-copy; }

And for buttons:

.main .button { @include button-base; @include button-color-primary; @include button-medium; }

it becomes:

body:not(.gin--edit-form) .button, .main .button, .ck-content a.button { @include button-base; @include button-color-primary; @include button-medium; }

With any luck, the styles used apply mixins, which makes it easy to filter out where to apply the styles. In some cases, the overriding of styles may become hard because of the order in which the stylesheets are loaded. Try to avoid !importants and instead use things like an additional element or class to firm up your override.

One issue that may come up is your overrides here end up overriding things in your custom theme, depending on how they are defined. In this case, don’t wrap the styles in the body classes, but rather undo the custom theme’s style on the admin page items manually. Luckily, since we’re narrowly applying custom styles, only things used in the WYSIWYG will need to be addressed.

For instance:

// Apply general link styles to all links. a { @include link; } // Overrides for Admin pages containing CKEditor (you will need a body class only on admin pages). .user-logged-in { a { background-image: none; transition: none; } .horizontal-tabs-list a, .toolbar a { font-weight: normal; } } // Reapply link styles to links within the WYSIWYG .ck-editor a { @include link; }

Continue to review your page and adjust it until it no longer differs from other admin pages.

Editor explodes out of its container in deeper paragraphs

This issue seems to occur only with rich text fields within a paragraph. It might be limited to the Gin theme.

Image removed.

This issue might be because of the container’s width. If input fields inside the container have a specified size exceeding the screen width, it can lead the editor to inherit the container’s width, extending beyond the screen. You can see this as a Drupal Core/CKEditor5 bug in Drupal.org: CKEditor5 toolbar items of multivalue field (typically Paragraphs) overflowing on narrow viewports and overlapping with node form’s sidebar on wide viewports.

To resolve this quickly, set the input fields to 100% width, making sure everything works seamlessly. Be sure to include this in a stylesheet of your admin theme.

.node-form input[size] { width: 100%; }

We can also modify the ‘flex-wrap’ property of the CKEditor buttons to make sure they stay within the container’s width:

.ck-editor .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items { flex-wrap: wrap; }

Additional resources

The post Tips for upgrading to CKEditor5 appeared first on Four Kitchens.