Layout Builder's Style in Configure block bug

Created on 21 February 2024, 3 months ago

Problem/Motivation

Think about a block which includes inline element, and center the text of the inner block using layout-builder.
The html source code is like below:

<div class="bs-text-center _none block block-block-content block-block-content1234567890">
      <div class="block__content">
            <div class="field field--name-field-link-abc field--type-link field--label-hidden field__item"><a href="/dc">link text is here</a>   </div>
    </div>
  </div>

Now You add CSS of text-align: justify; ,for example, to the div and P tags of all pages as default custom CSS, then the link is aligned left. So even you applied Style with Layout Builder, it is ignored, that cause something like unstable double standard.

Proposed resolution

Solution 1 (not enough): Add !important to the bs-text-center, for above case. But this fix forces custom CSS to use !important.
Solution 2(recommended): Put the class, bs-text-center, for example, to the div with field class, i.e. put the bs-text-center to the most inner element.

πŸ’¬ Support request
Status

Postponed: needs info

Version

10.1 ✨

Component
Layout builderΒ  β†’

Last updated about 13 hours ago

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @lionsea
  • Changed the priority from critical to minor, because you should normally add text-alignment to P tag, not div for the example I posted.
    So the example I posted is not good. But still the issue exist, because for another example, add text-color using Layout Builder is overridden by the text-color of the inner elements.

  • Status changed to Postponed: needs info 3 months ago
  • πŸ‡³πŸ‡ΏNew Zealand DanielVeza Brisbane, AU

    Hello! Thanks for raising an issue.

    This doesn't feel like a bug to me, it feels more like a support request. For your example in the issue summary, you could override the template for that particluar piece of block content to add the class you need, or you may need to rework your CSS.

    Drupal.org has a great support page β†’ where you can find forums that may be able to help you more than we can here.

Production build 0.69.0 2024