Problem/Motivation
If a site is using the Stable 9 theme in Drupal 10 as a base theme, in Layout builder, the "Create custom block" link in the off-campus panel shows the "plus" sign twice.
The "plus" sign SVG is referenced in two core css files:
Line 137 of layout-builder.css applies to anchor tag:
#drupal-off-canvas .inline-block-create-button {
display: block;
padding: 24px;
padding-left: 24px;
padding-left: 44px;
color: #eee;
border-bottom: 1px solid #333;
background: url(/core/misc/icons/bebebe/plus.svg) transparent 16px no-repeat;
background-color: transparent;
font-size: 16px;
And line 77 of off-canvas.css applies the same SVG to the :before pseudo-class of the anchor:
#drupal-off-canvas-wrapper .inline-block-create-button::before {
position: absolute;
top: 50%;
left: var(--off-canvas-padding);
width: var(--icon-size);
height: var(--icon-size);
content: "";
transform: translateY(-50%);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23bebebe' d='M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: contain;
}Steps to reproduce
Add a block in the layout builder. See duplicate "plus" sign in admin panel.
Proposed resolution
Remove the background from one of the css files.
Remaining tasks
User interface changes
API changes
Data model changes
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | after_3356408_8_patch.png | 28.48 KB | daddison |
| #8 | before_3356408_8_patch.png | 15.62 KB | daddison |
| #8 | 3356408_8.patch | 733 bytes | daddison |
| #6 | 3356408_6.patch | 713 bytes | daddison |
| Screenshot 2023-04-25 at 2.45.40 PM.png | 15.62 KB | daddison |
Comments
Comment #2
danielvezaI've tested this with just core and I haven't been able to replicate this. Do you have a custom theme or contributed themes/modules that might be interferring here?
Comment #3
danielvezaComment #4
mark_fullmerOur team was also able to determine that this does not happen on a standard Drupal installation, and have isolated code in a custom theme that seems to be triggering it. Closing this issue as "Works as designed."
Comment #5
mark_fullmerAdditional information on this. The problem is triggered when the Stable 9 theme is used. Updating the steps to reproduce in this issue, and re-opening as "Active."
Comment #6
daddison commentedPatch removes extraneous styling for inline block create button in stable9 theme.
Comment #7
smustgrave commentedThink some before/after screenshots would be useful for an issue like this.
Comment #8
daddison commentedI re-rolled the patch against drupal/drupal, rather than drupal/core. Before and after screenshots attached.
Comment #9
mark_fullmerI was able to reproduce the issue:
1. Drupal 10.1.x-dev
2. Setting Stable 9 as the active theme via
config-set system.theme default stable93. Enable
layout_builder4. Set the
pagenode type display to use Layout Builder and to allow overrides on individual nodes.5. Create a node of type "page" and use Layout Builder, clicking "Add block".
I verified that the patch in #8 removes the duplicated plus sign.
I also agree with the rationale of removing this declaration from Stable9, since the
Layout Buildermodule is providing default styling for this plus sign and there is no reason for Stable9 to override it. This clearly was just legacy CSS that wasn't cleaned up with the update to Drupal 10 and changes in the Layout Builder module.Marking as "Reviewed and Tested by the Community."
Comment #10
pameeela commentedSwitching back to bug report since there is a patch that needs committing.
Comment #11
quietone commentedJust a title change.
Comment #15
larowlanCommitted 7e5b073 and pushed to 11.x. Thanks!
Back-ported to 10.1.x