Preview styles can be overridden unexpectedly sometimes [#3493841]

Overview

Sometimes styles under preview can override the required Experience Builder foundational CSS. When a theme declares a component with a dependency, the dependency is loaded after the Experience Builder CSS.

For a concrete example, when display: flex is used to wrap a slot via an upstream dependency on a component, the result is that the drop-zone has a width of 0. This appears to happen because the default flex property for HTML elements is initial, which allows flex items to shrink, but not grow. The result seems to be that the nested .xb--sortable-slot-empty-placeholder element indeed shrinks to 0px wide.

No drop areas are accessible to slots when the parent element has a flexbox display

Copy/Paste Example

example_flexbox_break.info.yml

name: "Example theme to showcase out of order CSS loading"
type: theme
core_version_requirement: ^11
base theme: false
regions:
  content: "Content"

example_flexbox_break.libraries.yml

upstream-dependency:
  css:
    component:
      css/upstream-dependency.css: {}

css/upstream-dependency.css

.example-flexbox-break {
  display: flex;
}

components/example-flexbox-break.component.yml

'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
name: Example Flexbox Break
status: stable
group: Molecule/Example Flexbox Break
description: Example Flexbox Break
props:
  type: object
  properties:
    dummy:
      type: string
      title: Dummy prop

slots:
  content:
    type: string
    title: Content region

libraryOverrides:
  dependencies:
    - example_flexbox_break/upstream-dependency

example-flexbox-break.twig

<div class="example-flexbox-break">
  {{ content }}
</div>

Proposed resolution

TBD - this is weird!

User interface changes

More working drop-zones 🥳

Comment	File	Size	Author
#20	its-fixed.png	555.12 KB	luke.leber
#3	flex-auto-applied.png	1013.98 KB	bhogue
	flexbox-break-after.png	155.42 KB	luke.leber
	flexbox-break-before.png	157.77 KB	luke.leber

Issue fork experience_builder-3493841

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3493841-drop-zones-inaccessible-when changes, plain diff MR !540
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

13 December 2024 at 15:10

luke.leber created an issue. See original summary.

Comment #2

bhogue commented 19 December 2024 at 20:09

I'm going to take a stab at this.

Comment #3

bhogue commented 19 December 2024 at 21:45

Status	File	Size
new	flex-auto-applied.png	1013.98 KB

This seems to work for me, but I'm not entirely sure what you're after and this is my first exposure at Experience Builder.

Screenshot of flex auto being applied to the slot element

This is what I added to the CSS

.example-flexbox-break > [data-xb-component-id="slot"] {
  flex: auto;
}

Assigned:	balintbrews	» luke.leber
Status:	Needs review	» Needs work

Preview styles can be overridden unexpectedly sometimes