Cover block: filtering in text color support sets color inline style instead of color CSS class in editor

[jhned]

Description

I'm filtering in support for Text Color on the Cover block. I can see the Text Color control, and the Text Color CSS class is applied on save. In the Editor, instead of a Text Color CSS class, I'm seeing an inline style applied.

I would have expected that the Editor would use the Text Color CSS class as well. As it is, I can't easily override the text color for the .wp-block-cover__inner-container div. I'm reaching out to the team mostly because I can't make sense of why the block behaves in this way instead of applying a Text Color CSS class.

Step-by-step reproduction instructions

1. Create a new page
2. Place a cover block on the page, select a background color
3. Use the code snippet below to filter in support for text color
4. Select a text color
5. Inspect the block in the editor, seeing that it has an inline style for color, and not a Text Color CSS class.

Screenshots, screen recording, code snippet

function addCoverBlockTextColorSupport(settings, name) {
  if ( typeof settings.supports === 'undefined') {
    return settings;
  }

  if (name !== 'core/cover') {
    return settings;
  }

  // The "textColor" attribute is added so that the selected color persists on save.
  settings.attributes.textColor = {type: 'string'};

  settings.supports.className = true;
  settings.supports.color = {
    background: false,
    gradients: false,
    link: false,
    __experimentalDefaultControls: {
      text: true
    }
  };

  return settings;
}

wp.hooks.addFilter(
  'blocks.registerBlockType',
  'mycolordemo/block-filters',
  addCoverBlockTextColorSupport
);

Environment info

• WordPress 6.1, core version of Gutenberg
• Theme: Twenty-Twenty-Two, version 1.3
• All plugins deactivated
• Mozilla Firefox, 106.0.5
• Desktop with Windows 10

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

Hi @jhned,

I don't know of any background why inline styles are used in editors, but would it be possible to apply a text color to the inner container with a selector like the following?

.wp-block-cover[style*="color: "] .wp-block-cover__inner-container {
    color: inherit;
}

There also appears to be a draft #41572 up for adding text color support to the cover block.

[talldan]

I'll close this now that the cover block supports text.