WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 4 months ago

Last modified 4 months ago

#52473 closed defect (bug) (fixed)

Twenty Twenty-One: Dark Mode toggle is causing JavaScript error in block editor

Reported by: ocean90 Owned by: desrosj
Milestone: 5.7 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch commit
Focuses: javascript, administration Cc:

Description (last modified by SergeyBiryukov)

For some reasons the dark-mode-toggler.js from Twenty Twenty-One is also enqueued in the block editor if Dark Mode support is enabled. This is causing JavaScript errors if the window (not the editor itself) is scrolled.

Uncaught TypeError: Cannot read property 'classList' of null
    at checkScroll (dark-mode-toggler.js?ver=1.0.0:56)

To reproduce enable Dark Mode support in the Customizer and open the block editor. Now reduce the height of the window so that you're able to scroll the admin menu. Once you scroll you should see the JavaScript error from above in the console.

The script should either check that the toggle exists or better not enqueued in the block editor at all.

Attachments (4)

52473.diff (1.4 KB) - added by mukesh27 4 months ago.
Screen Shot 2021-02-12 at 11.01.47.png (563.7 KB) - added by tikifez 4 months ago.
Confirming the error is gone. (Firefox)
Screen Shot 2021-02-12 at 11.04.05.png (403.7 KB) - added by tikifez 4 months ago.
Confirming the error is gone. (Chrome)
Screen Shot 2021-02-12 at 11.05.24.png (399.9 KB) - added by tikifez 4 months ago.
Confirming the error is gone. (Safari)

Download all attachments as: .zip

Change History (11)

@mukesh27
4 months ago

#1 @mukesh27
4 months ago

  • Keywords has-patch added; needs-patch removed

52473.diff patch fix the issue.

#2 @SergeyBiryukov
4 months ago

  • Description modified (diff)
  • Milestone changed from Future Release to 5.7

#3 @justinahinon
4 months ago

  • Keywords commit added

I can reproduce the issue on Safari.

After applying the patch the error is gone.

Adding the commit keyword to the ticket.

#4 @desrosj
4 months ago

  • Owner set to desrosj
  • Status changed from new to assigned

#5 @desrosj
4 months ago

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

In 50269:

Twenty Twenty-One: Prevent Dark Mode related JavaScript error.

This prevents an Uncaught TypeError in the block editor when scrolling caused by the absence of a #dark-mode-toggler element.

Props ocean90, mukesh27, justinahinon.
Fixes #52473.

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


4 months ago

#7 @sannevndrmeulen
4 months ago

I was able to reproduce this issue without the patch.
After applying the patch I've checked Google Chrome, Firefox, and Safari.
The JavaScript error is gone.

@tikifez
4 months ago

Confirming the error is gone. (Firefox)

@tikifez
4 months ago

Confirming the error is gone. (Chrome)

@tikifez
4 months ago

Confirming the error is gone. (Safari)

Note: See TracTickets for help on using tickets.