Twenty Twenty-One: submit button colors inside a block with background color

[upadalavipul]

When we use Post Comments Form Block and change the block setting like background color & font color in the specific Twenty Twenty-One theme. then front side post comments button design breaks.

For better understanding, I have provided below video link.

URL: ​https://share.cleanshot.com/8SDCpoyOds4BwHDvtAFR

[desrosj]

Hi @upadalavipul,

I wanted to confirm that closing this ticket was intentional. If so, could you please give a brief summary as to why you've closed the report.

If it was not intentional, we should reopen so your problem can be confirmed and your patch can be tested.

[upadalavipul]

Hi @desrosj,

It was closed by mistake and now I have reopened it.

[sabernhardt]

Using the Post Comments Form block with Twenty Twenty-One or any other 'classic' theme can create duplicate copies of the form, so I do not recommend that (GB45257).

However, there might be another situation where a submit button inside a block with a background color should not have the current styling.

[SirLouen]

Patch Refresh for 56638.patch

[SirLouen]

Test Report

Description

🟠 This report validates that the indicated patch works as expected, with some caveats (check Additional Notes)

Patch tested: https://core.trac.wordpress.org/attachment/ticket/56638/56638.1.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 136.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-One 2.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Reproduction Steps

1. Create a new post
2. Add the "Comments Form" Block
3. Change the Text Color and Background Color.

Actual Results

1. 🟠 Issue resolved with a patch, but some code improvements could take place.

Additional Notes

1. I have refreshed the patch because it was not applying (wrong patch format)

2. Replying to sabernhardt:

   However, there might be another situation where a submit button inside a block with a background color should not have the current styling.
   

There is something that has been concerning me for a while. The use of global colour CSS variables in 2021 (this was never used before, from 2020 and before). Global Color CSS variables was released a year after 2021 was released and meant for Block Themes, as you say 2021 was the last classic editor, introducing this "feature" (that is a useless feature for a non-block theme since global colours are not editable in the interface, and they have brought a lot of havoc to 2021, most of the reports I've tested so far with this theme are related to the use of this)

3. Conclusion: @upadalavipul, despite this patch works, I would suggest modifying to avoid using global colour CSS variables.

Supplemental Artifacts

🐞 Front End Pre-Patch

✅ Front End Post-Patch