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

[shraddhagore]

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

Environment:
WordPress: 6.8-alpha-59274-src
Theme: Twenty Fourteen, 4.1
Browser: Google Chrome
OS: Windows 11

Screenshots:
Editor: ​https://prnt.sc/lcyh7lHoOe0s
Site: ​https://prnt.sc/vr_FsXyoUeH4

Comments:
The patch isn't working; the issue still persists with the default background.

[shwetaneelsharma]

Test Environment:
WordPress: 6.7.2
Theme: Twenty Fourteen, 4.1
Browser: Google Chrome, Firefox, and Safari.
OS: MacOS Sequoia Version 15.3

Screenshots:
Editor: ​https://tinyurl.com/2yzoedd9
Site: ​https://tinyurl.com/252cjd72

Comments:
The issue is not reproducible on the above test environment.

[viralsampat]

Hello @shraddhagore & @shwetaneelsharma

Thank you so much for your feedback.

I will recheck above mentioned issue and will provide detailed updates for the same.

Thanks,

[avinashbhosale]

Test Environment:
WordPress: 6.8.1
Theme: Twenty Fourteen, 4.2
Browser: Google Chrome
OS: Windows 10

Screenshots:
Editor:
Site:

Comments:
The issue is not reproducible on the above test environment.

[sabernhardt]

Button block in the editor, showing the stylesheet order

[sabernhardt]

Both the classic-themes-css and twentyfourteen-block-editor-style stylesheets print in the iframe head now, with the theme's styles last.

I am content with that working properly. (If you do not update WordPress core, then your experience with this block in the editor simply is not improved.)