This week started with undoing the horrors that y’all were subjected to last week: TwoTerribleTextAreasWidget featured prominently. The follow-up that I mentioned landed (Ben “bnjmnm” Mullins and I collaborated on it), which with a +110,-245 diff resulted in something that still is nowhere near a final UX, but is starting to look reasonable.

The evolved component instance props form: much simpler (it looked Frankensteinish a week ago!), by using the appropriate field widgets directly. Issue #3461422.

(Next up on that front: #3462310: Component props form: make form elements match design.)

That right sidebar is overlaid on top of the canvas, which also saw a big leap forward this week — thanks to Jesse “jessebaker” Baker, Harumi “hooroomoo” Jang, Ben “bnjmnm” Mullins and Lauri — a true team effort:

Component states in action: hover and active/focus. Issue #3460783, image by Jesse.

The images you saw last week showed actual component previews … but we cheated by using inline styles :P.
This week, Ben rectified that: CSS/JS assets are now loaded inside the preview <iframe>s.

But I saved the best for last: the last MR to land this week was Ben’s Redux integration issue … which brought with it: live updates of the component’s preview:

Live updating of component previews while the props are edited in the right sidebar! Issue #3462441, image by Ben.

This currently always requires a round trip to the server, but in many cases we’d actually be able to update the preview without a round trip (better for UX obviously!). See #3453690: [META] Real-time preview: supporting back-end infrastructure, where Lee “larowlan” Rowlands intends to work on parsing a Single-Directory Component’s Twig template into an Abstract syntax tree, which would allow eliminating that round trip in typical cases.1

I omitted less interesting MRs, but there’s one more issue that landed that deserves a mention: Ted “tedbow” Bowman and Ben landed CI: use a snapshot of core’s phpcs rules as changes in Drupal core will break MRs with limited benefit to module development, which was a very welcome addition: recently, Drupal 11 development has picked up steam … and hence several coding standards were added to Drupal core. Result: XBs phpcs CI job started failing overnight, with zero changes on our end. Doing the right thing can be painful! So, Ted and Ben changed that so we’d be notified instead: far less disruptive.

In progress/where to contribute

• Experience Builder has some needs that Single-Directory Components has not had to fulfill. Lauri asked me to start developing a comprehensive plan for integrating XB with SDC: what are all the mismatches, the feature gaps, et cetera?
• Ted discovered that XB currently does not support propless SDCs — oops! This is a great first issue to contribute to XB!
• Lauri created #3463300: Implement the concept of sections within the client
• Lauri also created #3463307: Implement simplified zoom interface, which Gauravvvv quickly picked up!
• Ben created #3463610: VH units fix only works for inline styles, which seems another great first issue to contribute to XB, but this time on the front end.
• Finally, I created #3463957: “Publish” and “Share” buttons should convey they do not yet work, which was quickly picked up by fazilitehreem :)

P.S.: issues that were picked up by somebody do not exclude you from contributing too — as you can see above, almost every issue is a multi-person effort!

Missed a prior week? See all posts tagged Experience Builder.

Goal: make it possible to follow high-level progress by reading ~5 minutes/week. I hope this empowers more people to contribute when their unique skills can best be put to use!

For more detail, join the #experience-builder Slack channel. Check out the pinned items at the top!

Week 11 was July 22–28, 2024.

1. If the SDC prop value is rendered as-is, with no transformations applied, then no round trip is necessary. Otherwise, that might be needed. ↩︎

• Drupal
• Acquia
• Experience Builder

• Component states in action: hover and active/focus.
• The evolved component instance props form: much simpler, by using the appropriate field widgets directly.
• Live updating of component previews while the props are edited in the right sidebar!

Authored by Nadiia Nykolaichuk.

Much like my last update things are going well. I am able to spend 2 full days every week on contribution and my commit activity has increased quite a lot. Many thanks to my sponsors: Palantir.net, OPTASY, and new ones who joined in the past few weeks: Vardot, OpenSense Labs, and Liip.ch.

Now some numbers, since the last update I committed 82 issues (worth 820 weighted issue credits), that’s about 33 issues per month (or 330 issue credits). That’s a few more issues per week than before. There is still room to increase the commit activity with more sponsors so don’t hesitate to check out how to sponsor my contribution in core.

1. Navigation LayoutBuilder UI has dead click zone
2. Update the Drupal logo in Drupal core with the 2024 brand evolution I like the new brand very much, it’s good to update the default icon
3. Update documentation for table.html.twig around table cells
4. Regression: The drawer in Safari is missing the drop shadow
5. Update the Drupal logo on the project page
6. Meeting notes: May 20th 2024 - Isomorphic rendering Meetings take time, I can now spend it more easily to keep updated and make sure everyone is aligned
7. Remove JavaScript from Views configuration form now that it is only CSS Removing JS code because CSS is so good now is always nice
8. Navigation overlay z-index is not defined
9. Update stylelint rule unit-allowed-list to include container query units
10. Navigation: Avoid layout builder form submit
11. Tab highlights for current/hover/click are too high up when other tabs have 2 lines of text
12. Mobile version of Navigation menu doesn’t properly reset Drupal.displace() on closing
13. core.libraries.yml mis-implements moved_files syntax
14. When configuring a field on a content type’s “manage display” tab the spinner shifts the label and format column
15. #states not working correctly when built from a logical combination of multliple fields
16. Responsive image width/height values are not used from fallback image style
17. Custom Navigation logo is disconnected from new Layout template
18. CKEditor 5 Styles dropdown broken when in off-canvas sidebar
19. [drupalMedia] Ability to mark image media as “decorative”
20. Refactor (if feasible) use of jquery parseHTML function to use vanillaJS removing jQuery one method at a time
21. drupalInstallModule nightwatch function does not work with Experimental modules
22. Prefer to use Array.prototype.includes() for some of Array.prototype.indexOf()
23. Claro: Autocomplete dropdown bleeds through sticky table header
24. Refactor Claro’s table–file-multiple-widget stylesheet
25. “Single-Directory Components” needs to be hyphenated because of English grammar and content style rules
26. Trigger a JavaScript deprecation error for dialogClass in forked dialog.js
27. Update to jquery UI 1.14.0 beta 2 Bleeding edge of web development :)
28. Implement Nightwatch tests for Navigation module
29. Visually-hidden refresh button in Field UI fails WCAG Focus Visible.
30. Olivero: Incorrect positioning of close button on mobile device when navigation module is enabled.
31. The core/drupal.message library requires a status_messages render element
32. The [0] hatch in misc/vertical-tabs.js causes issues if there are multiple forms with vertical tabs. One thing jQuery does well is handle uncertainty much better than vanilla JS, and removing jQuery exposes us to that kind of things
33. Drupal core committers team meeting - Dev Days Burgas 2024
34. Reorder checkboxes on “Development settings” page
35. Secondary tabs design is distorted on block view page
36. Drupal core committers meeting 2024-06-11
37. Remove decoupled menus and media initiatives from MAINTAINERS
38. Update Drupal’s default throbber icons Using svg instead of gifs, overdue
39. Update loading icon and use SVG
40. Layout shift on displays in views page
41. Remove documentation for readmore, logged_in and is_admin from node.html.twig
42. Remove legacy ‘metadata’ variable from node.html.twig
43. Prevent simultaneous open/close on simultaneous click/hover Navigation still needs polish, this one helped quite a bit with regular use
44. Long string breaks the layout of Claro (reapply fix)
45. Spacing issue in Home > Search page on Advanced search section
46. Autocomplete input text can visibly overflow under magnifier icon
47. Refactor Claro’s tabledrag stylesheet
48. Have a dedicated category for blocks provided by the Navigation module
49. ToolbarStoredStateTest needs wait after resizing window
50. The link on the Image tag is redirecting to an undefined page from the node preview screen
51. clarify db settings for run-tests.sh example command
52. Parameters doc for views “row” should be at the top level of the array
53. Consolidate Umami performance tests
54. Optimize TelephoneFieldTest
55. hook_local_tasks_alter() and hook_menu_local_tasks_alter() need mutual @see links
56. Update to ckeditor 42.0.2
57. Consolidate methods on FormElementsLabelsTest
58. Merge the build and lint stages in core MR pipelines Tests go faster
59. Fix Field UI tests that rely on UID1’s super user behavior
60. Single directory component CSS asset library not picked up in admin theme immediately after module install without cache clear
61. Replace t() calls inside of Controllers that do not use StringTranslationTrait
62. Render API overview should include a link to the list of elements
63. Resync .gitlab-ci.yml and .gitignore following Yarn 4 in 11.x
64. Merge test methods in FieldUIRouteTest for better performance
65. Fix File tests that rely on UID1’s super user behavior
66. Stop using a data provider in UserPasswordResetTest
67. More efficient route lookup caching
68. Update deprecation notices in ajax.js
69. Consolidate ckeditor5’s FunctionalJavascript tests More test speed
70. Drupal Displace outputs invalid value for --drupal-displace-offset-right when opening top dialog
71. Subpixel rounding issue causes dialog to resize unnecessarily That one had a funky side effect when resizing the browser window. It’s gone now :)
72. Document that Uuid::isValid() only considers lowercase UUIDs as valid
73. Menu system docs section gives wrong alter hook
74. standardize docs on how to use the 4 types of test base
75. Update to jQuery UI 1.14.0
76. Add example and sections to Block API documentation
77. FileSystemInterface::copy documentation is inaccurate
78. Use artifacts to share the eslint and styleint caches from core to MRs
79. New throbber SVG images lack xmlns attribute
80. Drupal core committers meeting 2024-08-05
81. Drupal core committers meeting 2024-07-01
82. Document the recommended ways to obtain the database connection object

There were too many to comment each one individually. Many issues on stabilizing the new navigation module, making core tests faster, and documentation.

If you’re interested in supporting my work on Drupal core and keep the frontend fixes coming, consider sponsoring me.

Here's what I've been working on for my Drupal contributions this week. Thanks to Code Enigma for sponsoring the time to work on these.

Are you ready for 11?

Even though you may have just upgraded your current site to Drupal 10, there’s a new version that’s already here! Do you need to upgrade? If so, when?

Let's take a quick look at what 11.0 has to offer.

Do It This Week! 

Twin Cities Drupal Camp 2024 kicks off on September 12th-13th, on the University of Minnesota Twin Cities campus. The deadline for Session Submission is only a week away on August 15th. You still have time to send in your session proposals to help create this event. 

We have received many great new sessions for Twin Cities Drupal Camp 2024. Read our the Blog post “Send Us Your Session” to find a sampler of accepted sessions and ideas from last year's camp.

Submitting Your Session is Easy 

Simply fill out the submission form with your session title, description, and any additional details you’d like to provide. 

Our session review team will go through all submissions in order to select a diverse and engaging lineup of sessions for Twin Cities Drupal Camp 2024. Sessions will be accepted on a rolling basis. This means you are more likely to get your session accepted if you send it in today! 

Submit a Session

A few weeks ago, we introduced the concept of "tracks" as the next step in progressing the Drupal Starshot project. Tracks are smaller, focused parts of the project that allow for targeted development and contributions.

At the same time, we put out a call for Starshot track leads, and were overwhelmed by the response. We received nearly 65 submissions, showcasing a wide range of expertise and ambitious vision that made for a difficult review process.

Announcing new track leads

We are proud to announce the newest track leads, who bring to the Starshot team an impressive depth of experience both in Drupal and in their respective track space:

• Laurens Van Damme from Dropsolid will be leading the Blog recipe track
• Jürgen Haas from LakeDrops will lead the Privacy track
• Christian López Espínola and Matthew Tift from Lullabot will lead the Dashboard track
• Jim Birch from Kanopi and John Doyle from Digital Polygon will lead the Sitewide SEO recipe track
• Jamie Abrahams from FreelyGive will lead the AI track
• Tony Barker from Annertech will lead the Media management track
• Baddy Sonja and the team at 1xinternet will lead the Advanced search track
• Gareth Alexander from Zoocha will lead the Accessibility tools track
• Dharizza Espinach and the team at Evolving Web will lead the Analytics track
• Pavlos Daniel from Acquia will lead the Multilingual content track

Although we announced the concurrent editing track, this is an aspirational feature that we would love to see but have postponed because it will depend heavily on Experience Builder.

Further opportunities with tracks

If you've read the Starshot strategy that Dries shared, you may have noticed that there are capabilities listed that do not yet have a track. We will be creating more tracks ongoing, to align with this strategy as the need arises (and as our capacity allows!).

There are also three existing tracks that we have not yet assigned a lead:

• Starshot documentation
• Contact form
• Content publishing workflows

If you are interested in leading one of these, make sure to review the issues for information about what we are aiming for, as well as the track lead role description. Your vision for the track, which need only be a short summary of how you plan to approach it, should take these into account when you submit an application. 

Next steps for tracks

For most tracks, the initial work will be to put together a proposal, which may require research to define the key requirements for our target persona and determine what feature parity with market leaders looks like. The proposals will be shared with the community for consultation.

We also expect track leads to provide regular progress updates, with the format and frequency still to be determined.

If you want to contribute to one of the tracks, or just follow along, keep an eye on the meta issues in the Starshot queue or post a comment to put your hand up.