Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Background
Layout Builder Modal added administrative theme styling (Seven theme) via #3042907: Use admin theme for forms in July 2019. Since that time, the majority of the Seven CSS has remained unchanged. The exception is the Media Library CSS, a module which was marked as stable in November 2019. Along with the minor styling changes introduced during that time, the CSS itself was relocated from the Media Library module to Seven.
Problem/motivation
The current CSS in this module manifests a small visual regression when a Media Library element is used in Layout Builder Modal. In the context of updating an already added image, the media item label exceeds its container, and the remove button is positioned at the top right of the parent container
Current behavior:
Expected behavior:
Proposed resolution
1. Update media_library.scss to reference core/modules/media_library/css/media_library.theme.css, the new location of the Media Library CSS for the Seven theme.
2. Re-run the npm script to generate the appropriate CSS, wrapped in the #layout-builder-modal ID
I've verified that re-running the script *only* introduces changes in the resulting media_library.css file, indicating no changes have occurred in any of the other files this module's SCSS is referencing.
We should add a release note upon the next tagged version of Layout Builder Modal that this release should be used with sites on Drupal 8.8, while sites still running 8.7 should not update. Additionally, we can indicate this version constraint in the .info.yml file, if desired. Suggested release language:
Drupal 8.8.0 introduced a stable Media Library module, which includes some styling changes. Sites running versions of Drupal prior to this should remain on Layout Builder Modal 1.0. Sites that have updated to Drupal 8.8 should update to this release of Layout Builder Modal
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | 3113268-update_media_library_css-2.patch | 29.8 KB | mark_fullmer |
| |||
| expected.png | 120.79 KB | mark_fullmer | |
| current.png | 123.05 KB | mark_fullmer | |
Comments
Comment #2
mark_fullmerThe attached patch follows the proposed resolution, above. Namely, it:
1. Updates media_library.scss to reference
core/modules/media_library/css/media_library.theme.css, the new location of the Media Library CSS for the Seven theme.2. Re-ran the npm script to generate the appropriate CSS, wrapped in the
#layout-builder-modalIDVerification of the effect can be performed as follows:
1. Create a block type with a Media Library form element.
2. Add an inline block of this type to a page using Layout Builder in conjunction with Layout Builder Modal
3. Save the page
4. Enter layout mode and "Configure" the block, entering 'update' mode.
5. Verify that the Media Library preview renders as the "expected" image from the original issue above, rather than the "current" image.
Comment #3
mark_fullmerComment #4
mark_fullmerComment #6
mark_fullmer