Problem/Motivation

Breakpoints is a design system artifact with YAML plugin discovery.

There are some in Core modules:

  • toolbar.narrow
  • toolbar.standard
  • toolbar.wide
  • responsive_image.viewport_sizing

But they are mostly found in themes:

  • 7 breakpoints in Umami
  • 8 breakpoints in Olivero
  • 10 breakpoints in UI Suite Bootstrap
  • 10 breakpoints in UI Suite USWDS
  • 2 breakpoints in GCDS
  • 6 breakpoints in Bootstrap
  • ...

So, they need to be leverage by display builder, like we already do with Icons, SDC, Styles...

Proposed resolution

We can add a Viewport switcher, in Builder & Preview panels, using those breakpoints, like Chrome is doing:

chrome

Notes:

  • Default value = no values = no breakpoint = fluid
  • Zoom in/out is out of the scope of this issue (and not planned yet as a feature)
  • Available breakpoints are configurable in the display builder profile (not in islands because they will be used in at least 2 islands): by default, all breakpoints from theme are enabled, all breakpoints from modules are disabled
  • When switching viewport, the change is impacting all islands leveraging this mechanism
  • We may need to use iframe HTML element in those islands, in order to let the browser recalculate the viewport dimension. Careful about performance issue and implementation complexity, especially related to HTMX.
  • Do we also add a handler for free resizing?
  • If no breakpoints plugins are found, do we hide the viewport switcher or do we provide a 2 default value switch?
  • If no breakpoints are enabled, we hide the viewport switcher.

Let's keep the implementation as simple as possible. It it goes out of control, we can postpone it.

CommentFileSizeAuthor
Capture d’écran du 2025-07-28 18-11-07.png52.36 KBpdureau

Issue fork display_builder-3538435

Command icon Show commands

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

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

About issue forks

Comments

pdureau created an issue. See original summary.

pdureau’s picture

pdureau commented
Assigned: Unassigned » pdureau
pdureau’s picture

pdureau commented
Status: Active » Needs work

The MR is open with a first commit.

After one day of experiment, the plan have changed :)

We introduce a new ViewportSwitcher button island with the select. This select will dynamically resize (with a nice animation) all the main wrapper, without caring about what panels are inside.

So, breakpoints providers are configurable in the display builder profile, yes, but from the ViewportSwitcher form: by default, all themes are enabled, all modules are disabled.

If a breakpoint don't have a max-width (careful, there are many way of expressing it) it is skipped, if a provider hes no breakpoints after those skipped, it is hidden.

We don't add a handler for free resizing.

We keep those rules:

  • Default value = no values = no breakpoint = fluid
  • Zoom in/out is out of the scope of this issue (and not planned yet as a feature)
  • If no breakpoints are loaded, we hide the viewport switcher.

So, this issue is only focused on the breakpoints management part with the new island.

Let's move the second part, about viewports recalculation, to a follow-up issue: We may need to use iframe HTML element in those islands, in order to let the browser recalculate the viewport dimension:

  • So, with an HTTP HTML endpoint to open only a display builder instance, with a specific profile and only one island, whatever thus island is
  • The island rendering on the main window will "only" be a iframe to this HTTP HTML endpoint
  • Careful about performance issue and implementation complexity
  • Do the islands in the iframe react well to HTMX events from the main page? And the other way around? We may need #3534137: Add real-time collaboration to land and maybe move OOB swap to SSE
  • Can we drop a draggable to an an iframe island with SortableJS?
  • The related #3535999: Render UI with both front and admin theme issue will also be postponed

A commit was already pushed in a dedicated branch: https://git.drupalcode.org/issue/display_builder-3538435/-/tree/iframes

pdureau opened merge request !75

pdureau’s picture

pdureau commented
Assigned: pdureau » mogtofu33
Status: Needs work » Needs review

Ready for review.

What about the dependency to breakpoint Core module? Do we make it explicit? Implcit? how?

Some warnings:

  • Aside the additions, the biggest change is the move of some logic from ComponentLibraryPanel to PluginProvidersTrait to avoid duplication.
  • the new "select" shoelace component raise a warning with sdc_devel but any attempt to have a better JSON schema is missing with SDC loader (I guesss...) and remove the key from some mappings
  • There is no Drupal behaviour for the added JS, but I saw not all JS have behaviours so I don't know if it is mandatory

As said in a previous comment, this is only the first smallest part, a follow-up issue will deal with iframes. I have already did good progress on this.

But we are lucky it is a cleanly self-defined, fully implemented feature, so it makes sense to merge it before.

pdureau’s picture

pdureau commented

missing all the phpdoc, for next functions as well.

Added: https://git.drupalcode.org/project/display_builder/-/merge_requests/75/d...

pdureau’s picture

pdureau commented

Follow-up issue has been created #3542003: Responsive viewports with iframes

pdureau’s picture

pdureau commented
Assigned: mogtofu33 » pdureau
Status: Needs review » Needs work

I do some of the threads

pdureau’s picture

pdureau commented
Assigned: pdureau » mogtofu33
Status: Needs work » Needs review

I resvoled all of them

mogtofu33 made their first commit to this issue’s fork.

mogtofu33’s picture

mogtofu33 commented
Assigned: mogtofu33 » Unassigned
Status: Needs review » Fixed

Fixed the js to not be called multiple times, fixed a but of jsdoc.
Fixed missing schema.
Add a compact mode, update the select twig.
Add e2e test.

  • pdureau committed 9cc99337 on 1.0.x 
    Issue #3538435 by pdureau: Manage breakpoints & add viewports switcher

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.