When styling blocks using div.block:nth-of-type() blocks will look correct in the frontend, but when viewed in layout builder there is an off by 1 error. Meaning block 1 has the styling of block 2, and so on.
This occurs because :nth-of-type() only considers that the block is a div, not that is has a class of block. On the layout builder an additional region label div is injected above the blocks. Generally this label is not seen, but appears when in "move mode".
div.block:nth-of-type() cssSuggest that the region label can use a alternative tag than div.
e.g.
LayoutBuilder.php
<snip>
// The region label is made visible when the move block dialog is open.
$build[$region]['region_label'] = [
- '#type' => 'container',
+ '#type' => 'html_tag',
+ '#tag' => 'p',
'#attributes' => [
'class' => ['layout__region-info', 'layout-builder__region-label'],
// A more detailed version of this information is already read by
// screen readers, so this label can be hidden from them.
'aria-hidden' => TRUE,
],
- '#markup' => $this->t('Region: @region', ['@region' => $info['label']]),
+ '#value' => $this->t('Region: @region', ['@region' => $info['label']]),
// Ensures the region label is displayed first.
'#weight' => min($weights) - 1,
];
}
<snip>
:nth-of-type()TBD
Needs work
10.1 ✨
Last updated
Used to track the progress of issues reviewed by the Drupal Needs Review Queue Initiative.
The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.
It is used to alert the maintainer(s) of a particular core subsystem that an issue significantly impacts their subsystem, and their signoff is needed (see the governance policy draft for more information). Also, if you use this tag, make sure the issue component is set to the correct subsystem. If an issue significantly impacts more than one subsystem, use needs framework manager review instead.
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.
This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request → as a guide.
Thank you for openeing
This will need a test case to show the issue and that it's solved
Also tagging for subsystem maintainer if this is something they want to do.