Twenty Fourteen: Button block background color is mismatch

[viralsampat]

Hello Team,

I have reviewed the "Button" block and found that it's background is not same on editor side & front-end site into the twenty-fourteen theme.

I think that it should be same on both the sides(Editor & Front-end).

For better understanding, I have attached it's screenshots:

Thanks,

[viralsampat]

Back-end:

[viralsampat]

Front-end:

[viralsampat]

I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.

[viralsampat]

After resolved issue Back-end:

[viralsampat]

After resolved issue front-end:

[sabernhardt]

61881.patch would correct the default background color for both the Fill and Outline styles of the Button block in the iframe editor. If someone selects a different background color, that likewise would be correct in the iframe with the patch. It could be worth committing that to support WordPress 6.6 and/or earlier.

However, the fundamental issue is that the editor prints the classic-themes-css fallback styles inside the body element, after the editor-blocks stylesheet in the head. I think both need to be enqueued in the enqueue_block_assets hook (#61591 would address the theme's part, #61892 would move the Core styles).

[karmatosed]

It looks like this patch needs changes so marking for that.

[hellofromTonya]

I'm doing triage today for bugs reported on 6.6.1 or 6.6.2 (i.e. via Version) and then updating ticket information. Resetting the Version as 6.6.1 did not ship changes for this theme or classic-themes-css fallback styles.

[imranhasanraaz]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/61881/61881.patch

Environment

• WordPress: 6.7-alpha-58576-src
• PHP: 8.2.23
• Server: nginx/1.27.1
• Database: mysqli (Server: 8.0.39 / Client: mysqlnd 8.2.23)
• Browser: Chrome 129.0.0.0
• OS: Windows 10/11
• Theme: Twenty Fourteen 4.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

After Applying patch

Editor :
Frontend :

[tejwanihemant]

Test Report

Description

I have tried the patch but that's not working because of the change in the CSS.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/61881/61881.patch

Environment

• WordPress: 6.7.1
• PHP: 8.1.29
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Fourteen
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ❌ patch is not working

[nirupagajera]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/61881/61881.patch

Environment

• WordPress: 6.7.1
• PHP: 8.0.30-dev
• Server: PHP.wasm
• Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 131.0.0.0
• OS: Windows 10/11
• Theme: Twenty Fourteen 4.1
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• Any additional details worth mentioning.

Supplemental Artifacts

Add as Attachment

Backend Image: ​https://prnt.sc/dkbdX-i3Unjm
Frontend Image: ​https://prnt.sc/_eWDr-678ZDe