![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 2 months ago
Last modified 8 weeks ago
#65321 new defect (bug)
Global --wp--style--border--color Variable Applies Unwanted border-style: solid to Cover Block Background Span
| Reported by: | vijaysinh9094 | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | Awaiting Review |
| Component: | General | Version: | 7.0 |
| Severity: | major | Keywords: | needs-patch reporter-feedback add-to-field-guide |
| Cc: | Focuses: | ui, css |
Description (last modified by )
The global styles output is applying a default border-style: solid rule to the Cover block background element even when no border is defined.
As shown in the screenshot, the following element receives the style:
<span aria-hidden="true" class="wp-block-cover__background has-accent-2-background-color has-background-dim-100 has-background-dim"> </span>
Because border-style: solid is applied globally, browsers render an unwanted border even when only the border color variable exists.
Steps to Reproduce:
- Create a page with a Cover block.
- Apply a background color or dim overlay.
- Do not set any border manually.
- Inspect the
.wp-block-cover__backgroundelement. - Notice inherited/global
border-style: solidcausing visible border rendering.
Attachments (3)
Change History (9)
#2
@
8 weeks ago
Hi @kunalpareek @vijaysinh9094, I am not able to reproduce the issue with WordPress 7.0. Can you please share the information on what theme you have used and are there any plugins activated on the site? It would help debug the issue better.
Thanks,
#3
@
8 weeks ago
- Keywords reporter-feedback added
I am also unable to replicate this while using the twenty-twenty five theme.
#5
@
8 weeks ago
@vijaysinh9094 I agree with your observation. When we use the inline CSS variable --border-color: red;, the default theme CSS in Twenty Twenty-Five automatically applies border-style: solid;. Because of this, the border gets rendered even though we are only passing the border color variable.
As shown in the screenshots, the border becomes visible because the theme adds the following default CSS rule:
css
html :where([style*=border-color]) {
border-style: solid;
}
Due to this rule, the border is rendered using the provided --border-color variable value, even when no explicit border width or border style is added by the user.
@kunalpareek @hbhalodia @jorbin Please follow the steps below to reproduce the issue in the Twenty Twenty-Five theme:
- Activate the Twenty Twenty-Five theme.
- Add a Cover block.
- Apply the following inline style:
html
style="--border-color: #f44336;"
- Inspect the element using DevTools.
- Notice that the theme automatically applies:
css
border-style: solid;
- Because of this default style, the border is rendered even though only the
--border-colorvariable is passed.
#6
@
8 weeks ago
- Keywords add-to-field-guide added
Hi @hbhalodia and @jorbin,
As @deeppatel8950 has already reproduced the issue with screenshots, the root cause is that the global styles pipeline emits a --border-color CSS variable on the .wp-block-cover__background element even when no border is explicitly configured by the user, which unintentionally triggers border-style: solid on that element.
Hoping this clarifies the reporter-feedback and the reporter-feedback keyword can now be removed.
Thanks!
I am investigating this bug and setting up a local WordPress 7.0 environment to reproduce and trace the exact source of the border-style: solid declaration on the Cover block background span.
My current understanding: when a global border color is defined in theme.json or global styles, the CSS output pipeline may be emitting border-style as a companion declaration even without an explicit border style being set by the user. I am tracing this through class-wp-theme-json.php, block-supports/border.php, and the style engine to identify the exact insertion point.
Will follow up with a patch shortly.