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

Comments

daddison created an issue. See original summary.

danielveza’s picture

Category: Bug report » Support request
Status: Active » Postponed (maintainer needs more info)

I'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?

danielveza’s picture

Issue tags: +Bug Smash Initiative
mark_fullmer’s picture

Status: Postponed (maintainer needs more info) » Closed (works as designed)

Our 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."

mark_fullmer’s picture

Title: Plus sign displays twice on inline block create button » [Stable9] Plus sign displays twice on inline block create button
Issue summary: View changes
Status: Closed (works as designed) » Active

Additional 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."

daddison’s picture

Version: 10.0.x-dev » 10.1.x-dev
Component: layout_builder.module » Stable 9 theme
Status: Active » Needs review
StatusFileSize
new713 bytes

Patch removes extraneous styling for inline block create button in stable9 theme.

smustgrave’s picture

Status: Needs review » Needs work
Issue tags: +Needs Review Queue Initiative, +Needs screenshots

Think some before/after screenshots would be useful for an issue like this.

daddison’s picture

StatusFileSize
new733 bytes
new15.62 KB
new28.48 KB

I re-rolled the patch against drupal/drupal, rather than drupal/core. Before and after screenshots attached.

mark_fullmer’s picture

Status: Needs work » Reviewed & tested by the community

I 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 stable9
3. Enable layout_builder
4. Set the page node 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 Builder module 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."

pameeela’s picture

Category: Support request » Bug report
Issue tags: -Needs screenshots

Switching back to bug report since there is a patch that needs committing.

quietone’s picture

Title: [Stable9] Plus sign displays twice on inline block create button » Display plus sign once on inline block create button with Stable9 theme

Just a title change.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

  • larowlan committed a1492698 on 10.1.x
    Issue #3356408 by daddison, mark_fullmer, smustgrave: Display plus sign...

  • larowlan committed 7e5b0739 on 11.x
    Issue #3356408 by daddison, mark_fullmer, smustgrave: Display plus sign...
larowlan’s picture

Version: 11.x-dev » 10.1.x-dev
Status: Reviewed & tested by the community » Fixed

Committed 7e5b073 and pushed to 11.x. Thanks!

Back-ported to 10.1.x

Status: Fixed » Closed (fixed)

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