Twenty Twenty-One: Dark mode is not enabled in the block editor iframe

[poena]

When activating dark mode in Twenty Twenty-One in WordPress 6.3 beta, the dark mode is not enabled in the block editor.
The following message shows in the console:

twenty-twenty-one-custom-color-overrides-inline-css was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.

To reproduce:
Download and activate the Beta tester plugin.
Update the WordPress install to the nightly version of WordPress 6.3.

Or if you are testing this issue after WordPress 6.3 is released, please make sure you have the latest version of WordPress installed.

Activate Twenty Twenty-One.
Go to Appearance > Customize, and open the panel Colors & Dark Mode.
Enable the dark mode option (the check box).
In the page preview, in the bottom right corner, enable the dark mode (the button).

Now open the block editor.
Confirm that the dark mode is not enabled.

[poena]

Replace enqueue_block_editor_assets with enqueue_block_assets

[poena]

The patch replaces add_action( 'enqueue_block_editor_assets', with
add_action( 'enqueue_block_assets', in class Twenty_Twenty_One_Dark_Mode and
class Twenty_Twenty_One_Custom_Colors.

I need help with testing for any negative side effects, because
enqueue_block_assets enqueues the CSS both in the editor and the front, while enqueue_block_editor_assets only enqueued it in the (non-iframed) editor.

It might be possible to reduce some duplication of code in class Twenty_Twenty_One_Custom_Colors:

https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php#L86

https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php#L99

I have not done this because I am unsure of how it will affect extenders like child themes.

Related reading:
​https://make.wordpress.org/core/2023/07/18/miscellaneous-editor-changes-in-wordpress-6-3/#post-editor-iframed

Testing instructions:

Download and activate the Beta tester plugin.
Update the WordPress install to the nightly version of WordPress 6.3.
Or if you are testing this issue after WordPress 6.3 is released, please make sure you have the latest version of WordPress installed.

Activate Twenty Twenty-One.
Go to Appearance > Customize, and open the panel Colors & Dark Mode.
Enable the dark mode option (the check box).
In the page preview, in the bottom right corner, enable the dark mode (the button).
Now open the block editor.
Confirm that the dark mode is enabled.

Return to the Customizer and change the body background color.
Confirm that the correct color is showing on the front, with and without dark mode enabled.
Confirm that the correct color is showing in the block editor, with and without dark mode enabled.

Test the theme update on older WordPress versions to confirm that the dark mode and custom colors still works in the editor and front.
The theme supports 5.3 and above.

[mikinc860]

Test Report

Environment

• 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz 2.42 GHz
• Chrome 114.0.5735.199
• Server: nginx/1.25.0
• PHP: 8.2.0
• WordPress:6.3-beta4-56216-src
• Theme: Twenty Twenty-One (twentytwentyone) V1.8

Steps

• Activated Twenty Twenty-One theme.
• Enabled dark mode from customizer settings.
• Created the post.
• Enabled dark mode from the preview of the post.
• Opened block editor.

Expected Results

After activating dark mode it has to work the same for the block editor.

Supplemental Artifacts

Before applying the patch: ​https://tinyurl.com/2hxp3hft
After applying the patch: ​https://tinyurl.com/2f47s8mm

Actual Results

Working fine as expected. The dark mode is working fine with the block editor after enabling it. ✅

[huzaifaalmesbah]

Test Report
Patch tested: https://core.trac.wordpress.org/attachment/ticket/58835/tt1-darkmode.diff

Environment
OS: Macos m1 2020
Web Server: nginx/1.25.0
PHP: 8.1.21
WordPress: 6.4-alpha-56267
Browser: Chrome 115.0.5790.98
Theme: Twenty Twenty-One
Active Plugins: No plugins activated.

Results
I have tested this issue without patch and with patch. it's works with patch properly. I give screenshot here:

Before Patch: ​https://ibb.co/nfNqTtz
After Patch: ​https://ibb.co/n80jzWj

[huzaifaalmesbah]

The problem has been resolved with the patch. I am in agree with this solution. The code provided by @poena works perfectly fine.

patch code: https://core.trac.wordpress.org/attachment/ticket/58835/tt1-darkmode.diff

Replace enqueue_block_editor_assets with enqueue_block_assets

Before Patch

---

After Patch

---

[hasanuzzamanshamim]

Test Report: No issue found.
Patch tested: tt1-darkmode.diff from trunk

OS: macOS m1 pro
Browser: Version 106.0.5249.103(arm64)
PHP: 7.4, 8.1
Theme: Twenty Twenty-One

Seems like everything is ok.

[Ankit K Gupta]

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/58835/tt1-darkmode.diff

Env

• WordPress - 6.4-alpha-20230723.183918
• Web Server: Nginx
• Chrome Version - 114
• OS - macOS
• Theme: Twenty Twenty-One
• PHP - 8.1.9
• Active Plugin - Gutenberg v 16.2.1

Steps to test

1. Go to WordPress Dashboard
2. Activate the Twenty Twenty-One theme.
3. Go to "Appearance" > "Customize" and open the "Colors & Dark Mode" panel.
4. Enable the dark mode option by checking the corresponding checkbox.
5. In the page preview, located in the bottom right corner, enable the dark mode by clicking the dark mode button.
6. Open the block editor in the post or page

Test result

After applying the patch file, the dark mode issue in Twenty Twenty-One theme has been effectively resolved. The dark mode feature now works as expected in the block editor, and users can toggle dark mode on/off using the "Dark Mode" button. Background color changes are applied as intended, and the block editor works fine with Gutenberg version 16.2.1 enabled and disabled. ✅

After-

Live Demo- ​https://somup.com/c0i02jzpp8

[audrasjb]

As per today's bug scrub: self assigning for commit as it was successfully tested.

[audrasjb]

In 56300:

Twenty Twenty-One: Enable Dark Mode in the block editor iframe.

This changeset replaces add_action( 'enqueue_block_editor_assets' ), with add_action( 'enqueue_block_assets' ), in class Twenty_Twenty_One_Dark_Mode and class
Twenty_Twenty_One_Custom_Colors. This fixes an issue when activating dark mode in Twenty Twenty-One, where dark mode was not enabled in the block editor.

Props poena, mikinc860, huzaifaalmesbah, hasanuzzamanshamim, Ankit-K-Gupta.
Fixes #58835.

[audrasjb]

Reopening for backport to branch 6.3.

[desrosj]

[56300] looks good for backporting to 6.3!

[audrasjb]

Thanks @desrosj!

[audrasjb]

In 56304:

Twenty Twenty-One: Enable Dark Mode in the block editor iframe.

This changeset replaces add_action( 'enqueue_block_editor_assets' ), with add_action( 'enqueue_block_assets' ), in class Twenty_Twenty_One_Dark_Mode and class
Twenty_Twenty_One_Custom_Colors. This fixes an issue when activating dark mode in Twenty Twenty-One, where dark mode was not enabled in the block editor.

Props poena, mikinc860, huzaifaalmesbah, hasanuzzamanshamim, Ankit-K-Gupta.
Reviewed by desrosj, audrasjb.
Merges [56300] to the 6.3 branch.
Fixes #58835.