Make WordPress Core

Opened 8 months ago

Closed 7 months ago

#58835 closed defect (bug) (fixed)

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

Reported by: poena's profile poena Owned by: audrasjb's profile audrasjb
Milestone: 6.3 Priority: normal
Severity: normal Version: 6.3
Component: Bundled Theme Keywords: has-patch has-testing-info commit fixed-major dev-reviewed
Focuses: Cc:

Description

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.

Attachments (1)

tt1-darkmode.diff (1.5 KB) - added by poena 8 months ago.
Replace enqueue_block_editor_assets with enqueue_block_assets

Download all attachments as: .zip

Change History (18)

#1 @swissspidy
8 months ago

  • Milestone changed from Awaiting Review to 6.3
  • Version set to trunk

@poena
8 months ago

Replace enqueue_block_editor_assets with enqueue_block_assets

#2 @poena
8 months ago

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.

#3 follow-up: @poena
8 months ago

  • Keywords has-patch needs-testing added

#4 @mikinc860
8 months ago

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. ✅

#5 @huzaifaalmesbah
8 months ago

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

#6 in reply to: ↑ 3 @huzaifaalmesbah
8 months ago

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


https://i.ibb.co/Bj5HmFq/Before-patch.png

After Patch


https://i.ibb.co/5x9LB7L/After-patch.png

Last edited 8 months ago by huzaifaalmesbah (previous) (diff)

This ticket was mentioned in Slack in #core by huzaifaalmesbah. View the logs.


8 months ago

#8 @hasanuzzamanshamim
7 months ago

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.

#9 @Ankit K Gupta
7 months ago

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-

https://i.imgur.com/ZieArnG.jpg

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

#10 @Ankit K Gupta
7 months ago

  • Keywords has-testing-info added; needs-testing removed

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


7 months ago

#12 @audrasjb
7 months ago

  • Keywords commit added
  • Owner set to audrasjb
  • Status changed from new to accepted

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

#13 @audrasjb
7 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

#14 @audrasjb
7 months ago

  • Keywords fixed-major dev-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport to branch 6.3.

#15 @desrosj
7 months ago

  • Keywords dev-reviewed added; dev-feedback removed

[56300] looks good for backporting to 6.3!

#16 @audrasjb
7 months ago

Thanks @desrosj!

#17 @audrasjb
7 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.