Twenty Sixteen: Fix button styles outside of entry-content

[mikachan]

The buttons in the sidebar on the Twenty Sixteen theme do not correctly apply custom colors. It looks like this is because the custom color CSS selectors are specific to .entry-content.

This was originally part of an issue in the themes repo: ​https://github.com/Automattic/themes/issues/4580

Trac ticket: https://core.trac.wordpress.org/ticket/55167

This applies the default button styles to all button blocks in Twenty Sixteen, instead of only targeting those in entry-content. This means that any buttons added outside of .entry-content, such as in a widget area, will be styled the same as any other button blocks. This change also makes the theme custom colors work outside of .entry-content.

To test, add a button to a widget area. Make sure this button is styled the same as a button in a page or post, and that custom styles can still be applied correctly.

This fix was originally part of an issue in the themes repo: ​https://github.com/Automattic/themes/issues/4580

[costdev]

Test Report

Env

• Web Server: Apache
• WordPress: 6.0-alpha-52448-src
• Browser: Chrome
• OS: Linux
• Theme: Twenty Sixteen
• Plugins: None activated

Steps to test

1. Navigate to Appearance > Themes.
2. Activate Twenty Sixteen.
3. Navigate to Appearance > Widgets.
4. Add a Buttons block to Sidebar.
5. Enter a label for the button, set the Color to Yellow and the Background Color to Bright Red.
6. Click Update.
7. Navigate to the frontend. The button will appear with white text and a grey background.
8. Apply ​PR 2317.
9. Do a hard refresh the frontend. The button should appear with yellow text and a bright red background.

Results

1. Before ​PR 2317, the button does not use the selected colours. ✅
2. After ​PR 2317 the button uses the selected colours. ✅

Notes

• Introduced in 44306.

[audrasjb]

Self assigning for review.

[audrasjb]

Reproducing the issue by the steps described above by @costdev

[audrasjb]

Before applying the patch: the button styles are not applied :(

[audrasjb]

After applying the patch: WORKS FINE \o/

[audrasjb]

The patch looks good to me. Let's ship this change 🚀

[audrasjb]

In 52926:

Twenty Sixteen: Remove .entry-content selector from button styles.

This change applies the default button styles to all button blocks in Twenty Sixteen, instead of only targeting those in entry-content. This means that any buttons added outside of .entry-content, such as in a widget area, will be styled the same as any other button blocks. This change also makes the theme custom colors work outside of .entry-content.

Follow-up to [44306].

Props mikachan, costdev, audrasjb.
Fixes #55167.

Committed in https://core.trac.wordpress.org/changeset/52926