Wrong text color inheritance in group blocks with color settings

[spencer-j]

Description:

Wrong text color inheritance for wp-blocks-group wenn setting custom gutenberg color for background and text of Group element

How to reproduce:

1. Make your own Gutenberg color palette, with add_theme_support( 'editor-color-palette', array(...))
2. Edit a site and add a group block with some paragraphs inside
3. add color for Text and Background in Group Block settings

Expected behaviour:

Text Color of Paragraph is the one from the Group settings Block

Current behaviour:

Text Color is: .editor-styles-wrapper .wp-block
color: var(--nv-text-color);
}
this is also on .editor-styles-wrapper h1-h6, .editor-styles-wrapper h1.wp-block-h6.wp-block
please leave this unset or color: inherit;

Technical info

• WordPress version: 5.6.1
• Theme version: 2.10.1
• Neve Pro Version 1.4.1
  Greets Spencer

[selul]

Thanks for reporting this @spencer-j !
We will look into this.

[cristian-ungureanu]

Hi @spencer-j, I had a look here and I don't think you should create your own color palette with add_theme_support( 'editor-color-palette,' array(...)). We already create the palette based on the colors you use in the customizer. That customizer control in Colors & Background -> Palette Control is already in sync with the editor. If you want to have other colors than you have in the customizer, you'll need to not only declare your palette but also rewrite some CSS files.

[cristian-ungureanu]

I had a further look at this issue and I think I manage to replicate the issue. It's not about having your own color palette with custom code:

The scenario is like this:

1. Have a group block
2. Insert in it two paragraphs

You can either add text color to each paragraph or add text color on the global block.

How it should behave:

1. If the group block has a text color set, and the paragraphs don't, the paragraphs should inherit the text color from the group block.
2. If the group block has a text color set, and the paragraphs have their own color set, the color of the paragraph should overwrite the group block color.

Right now this happens only in the editor, it works well on the frontend.

I also found that the padding of the group block is not working well. There is no control for it but in the editor, it has "padding: 1.25em 2.375em", a value that is added from the core but on the front-end we don't add it. Editor vs. Front-end. I could add the padding in the frontend too but it seems a bit big.

@selul @JohnPixle What do you think about this?

[JohnPixle]

@cristian-ungureanu Thanks for the heads-up here. Sadly, layout spacing is still a big headache in Gutenberg, and the lack of a consensus about how themes should interact with spacing only makes things worse.

Ideally, these spacing values should be managed by a global place in the customizer, where the user can edit the padding of Group Blocks, and several other block attributes that are crucial to the layout style.

It's sad that the GB team has not taken a more global approach for this from the beginning.

But for now let's not complicate things on this issue, and I will perhaps create another issue to develop and better express my idea. The padding is huge. And without padding it's harsh.

The problem here though is not the padding value, but the inconsistency between the front-end and the editor. If we show padding, we should do so in both. Same if we decide to remove it, the user should see the same thing on the editor and the front.

I vote for removing the padding from the editor too, in order to avoid confusion from the user, and safeguard their site from breaking things. I am also all in for developing a more efficient solution on this.

[pirate-bot]

🎉 This issue has been resolved in version 2.11.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀