WIP Latest comments: Add color block support

[carolinan]

What?

Adds text, background, gradient, and link color support to the Latest comments block. Background, text and link are set to show by default.

Why?

The block is missing these options. Adding them improves the consistency and enables more design options.

How?

The PR updates the block supports in block.json, and the documentation.

Testing Instructions

Create a new post and add an archives block. Adjust the color settings and compare the result in the editor and front. Next test the global styles options from the Styles sidebar in the Site Editor.

Screenshots or screencast

[carolinan]

Edit: This issue was solved in a separate PR.

Block themes

Editor

The block inherits the padding from the OL:

:root :where(ul.has-background,ol.has-background) {
    padding: 1.25em 2.375em;
}

The left padding is then removed, using this CSS in the block stylesheet.

.wp-block-latest-comments .wp-block-latest-comments {
    padding-left: 0;
}

Single post, front view

The block does not inherit the padding from the OL element, and the left padding is not removed, so it uses the padding from the default browser styles for OL.

Home/frontpage, front view

The block inherits the padding from

:root :where(ul.has-background,ol.has-background) {
    padding: 1.25em 2.375em;
}

But the left padding is not removed.

Classic themes

Editor

The block inherits the padding from the OL:

:root :where(ul.has-background,ol.has-background) {
    padding: 1.25em 2.375em;
}

The left padding is then removed, using this CSS in the block stylesheet.

.wp-block-latest-comments .wp-block-latest-comments {
    padding-left: 0;
}

Front

Inherits this padding, but the left padding is not removed.

:root :where(ul.has-background,ol.has-background) {
    padding: 1.25em 2.375em;
}

[github-actions[bot]]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: carolinan <[email protected]>
Co-authored-by: ndiego <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.