Skip to content

Repeater header and repeater item header use different text colours #2363

Description

@Misplon

Symptom

In the Block Editor, a widget form's repeater header (for example "Slider frames" in the Layout Slider) renders in a lighter grey than the repeater item header directly below it ("Frame"). The section label ("Background") matches the item header, so the repeater header is the odd one out.

Cause

base/css/admin.less:559 sets the repeater h3 to #42484b. The comment above that block says it is for "sub level forms", but every repeater wrapper carries .siteorigin-widget-field-repeater (base/inc/fields/repeater.class.php:70), so the rule applies to every repeater in every context.

The repeater item h4 has no colour of its own, so it inherits from the host.

Colour per context

Context Repeater h3 Item h4 Section label
Block Editor #42484b #1e1e1e (compat/block-editor/widget-block.less:11) #1e1e1e
Page Builder dialog #42484b #3c434a (form colour) #3c434a
Classic widgets #42484b #3c434a (admin body) #3c434a

Outside the Block Editor the two greys are near-identical, so the mismatch only shows there. But the hard-coded colour is wrong everywhere: it ignores the host's text colour.

Proposed fix

Global, in admin.less. Set both the repeater h3 and item h4 to color: inherit and drop the #42484b. Both headings then take the form's colour in every context: #1e1e1e in the Block Editor, #3c434a in Page Builder and classic widgets, matching the section label in each.

Simply removing the #42484b is not enough. WP core sets h3 { color: #1d2327 } but not h4, so in Page Builder and classic widgets the repeater header would become darker than the item header, inverting the mismatch.

Leave the #42484b on .siteorigin-widget-field-repeater-add (admin.less:584); that is a button, not a heading.

Screenshot

Image

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions