Twenty Sixteen: Custom color setting for Buttons Block in widgets doesn't work

[hacchism]

Quick summary

Buttons Block doesn't respect custom color settings(text and background) at all when the block is in widgets.

Steps to reproduce

1. Activate "Twenty Sixteen"
2. Go to https://example.wordpress.com/wp-admin/widgets.php and add a Buttons Block into Sidebar
3. Set a custom text/background color by selecting one from some recommended colors(The issue can't be replicated when hitting "Custom color" link and choosing one outside of the recommendations)

What you expected to happen

The text/background color you selected should be reflected.

What actually happened

The button shows up with white text(#fff) and black background(#32373c).

Context

The issue is similar to #4782 and #4580 actually. However, they are for Follow Blog button specifically whereas this is for Buttons Block.

Operating System

No response

Browser

No response

Simple, Atomic or both?

No response

Theme-specific issue?

No response

Other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, difficult to implement

Workaround details

We can use the following CSS to force the buttons in the widget area to have custom text/background color. But it's limited to Premium plan or higher.

.widget-area .wp-block-button__link {
    color: #fff;
    background-color: #007acc;
}

[jordesign]

Scrubbed and confirmed. It looks like the classes are being included in the HTML - but there are no styles applied to the buttons in that area.

<a class="wp-block-button__link has-white-color has-bright-red-background-color has-text-color has-background">Button 1</a>

Shifting over to the themes repo

[jordesign]

Closing in favour of #4580 where things are being tracked together