Create non-js placeholder element for content-preview-disabled placeholder labels.

Created on 25 March 2019, over 5 years ago
Updated 30 January 2023, almost 2 years ago

Problem/Motivation

From #2959493: Allow Layout Builder live previews to be toggled to allow easier drag-and-drop β†’ item 5
When live preview mode is disable in the Layout Builder UI, the placeholder labels are added via Javascript. When live preview mode is re-enabled, the labels are removed from the DOM by javascript. It would be simpler for maintainers and other developers if these labels were always present and conditionally visible based on a parent class.

Proposed resolution

Figure out a way to add the labels to Layout Builder blocks inside the UI that have a structure consistent enough to facilitate visibility based on only CSS rules. Currently, the content of .layout-builder-block .content is not consistent enough to safely target with CSS, and sometimes includes child elements that are not wrapped in tags.

This will be made much easier if the placeholder labels are siblings of .layout-builder-block .content instead of children.

The current placeholder logic is in JS and BlockComponentRenderArray::onBuildRender.

Remaining tasks

Determine the best approach to add a consistently structured content-preview-disabled placeholder label in Layout Builder blocks. Make these conditionally visible based on the the presence of .layout-builder--content-preview-disabled wrapping the Layout Builder UI Implement, then remove the JS and other code responsible for adding/removing the labels previously.

User interface changes

UI will remain the same

API changes

N/A

Data model changes

N/A

Release notes snippet

N/A

πŸ“Œ Task
Status

Needs work

Version

10.1 ✨

Component
Layout builderΒ  β†’

Last updated about 11 hours ago

Created by

πŸ‡ΊπŸ‡ΈUnited States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
  • Blocks-Layouts

    Blocks and Layouts Initiative. See the #2811175 Add layouts to Drupal issue.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • The Needs Review Queue Bot β†’ tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

    Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

    Consult the Drupal Contributor Guide β†’ to find step-by-step guides for working with issues.

  • πŸ‡ΊπŸ‡ΈUnited States cboyden

    The placeholder labels still cause an issue when trying to style the LB interface. Is the approach in this ticket still being considered, or are there other proposed solutions?

  • πŸ‡ΊπŸ‡ΈUnited States klu

    Thanks for your work on this, @bnjmnm! The changes in your patch would be really helpful for us. I’ve taken a stab at re-rolling for 10.3.x based on patch 3 and the interdiff. It appears to work for me and is a significant improvement for doing our styling. I’m attaching the patch that I’m using, but I did not try to update the tests (my apologies; I’m newly coming back to Drupal development).

  • πŸ‡³πŸ‡ΏNew Zealand danielveza Brisbane, AU

    Hey @klu, could you please create a merge request from the patch that you've created against the 11.x branch?

    There is some documentation here β†’ about how to create merge requests for Drupal issues.

    Thanks!

  • πŸ‡ΊπŸ‡ΈUnited States cboyden

    I've created an issue fork from 11.x and ported the changes from patch #20. Still needs updated tests.

Production build 0.71.5 2024