Make WordPress Core

Opened 3 years ago

Last modified 3 years ago

#48902 new defect (bug)

Customizer code editor CSS breaks on activate() (Or breaks when loaded later)

Reported by: vukvukovich's profile vukvukovich Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9
Component: Customize Keywords: has-patch needs-testing
Focuses: Cc:

Description

I've added css editor via WP_Customize_Code_Editor_Control() which is hidden by default with provided active_callback.

When activating control via JS in Customizer ex: wp.customize.control('my_custom_css').activate(); it shows, but CodeMirror CSS is broken.

Attachments (4)

Screen Shot 2019-12-06 at 2.32.49 PM.png (25.6 KB) - added by vukvukovich 3 years ago.
CSS broken on activated control via JS on some event
Screen Shot 2019-12-06 at 2.33.02 PM.png (19.0 KB) - added by vukvukovich 3 years ago.
loaded normally without active_callback arg.
bug.zip (1.2 KB) - added by vukvukovich 3 years ago.
Plugin with all of the code needed for reproducing the bug.
48902.diff (822 bytes) - added by dlh 3 years ago.

Download all attachments as: .zip

Change History (10)

@vukvukovich
3 years ago

CSS broken on activated control via JS on some event

@vukvukovich
3 years ago

loaded normally without active_callback arg.

#1 @vukvukovich
3 years ago

  • Summary changed from Customizer code editor CSS on activate() to Customizer code editor CSS breaks on activate() (Or breaks when loaded later)

#2 follow-up: @dlh
3 years ago

  • Focuses ui removed
  • Keywords reporter-feedback added
  • Version changed from 5.3 to 4.9

Hi @vukvukovich, and welcome to WordPress Trac! Thanks for the ticket.

Are you able to provide a code sample that can be used to replicate this bug?

@vukvukovich
3 years ago

Plugin with all of the code needed for reproducing the bug.

#3 in reply to: ↑ 2 @vukvukovich
3 years ago

Replying to dlh:

Hi @vukvukovich, and welcome to WordPress Trac! Thanks for the ticket.

Are you able to provide a code sample that can be used to replicate this bug?

Sure. I've uploaded simple plugin with complete code needed for reproducing the bug.

#4 @vukvukovich
3 years ago

@dlh Little update. I've loaded CodeMirror manually to plain textarea control with wp.codeEditor.initialize() and it works properly if textarea is activated before and then CodeMirror instantiated. Vice versa bug occurs. I guess it is just a loading priority issue.

Last edited 3 years ago by vukvukovich (previous) (diff)

@dlh
3 years ago

#5 follow-up: @dlh
3 years ago

  • Keywords has-patch needs-testing added; reporter-feedback removed

Thanks so much for that sample plugin, @vukvukovich!

This situation looks similar to me to a bug report in the CodeMirror repo: https://github.com/codemirror/CodeMirror/issues/61. The issue there was closed with a pointer to CodeMirror's .refresh() method.

I've taken that and attempted to apply it to the CodeEditorControl in 48902.diff: If the control is not yet active even when its parent section is active, codemirror.refresh() is called the first time the control becomes active.

@vukvukovich, would you be able to test the patch?

#6 in reply to: ↑ 5 @dlh
3 years ago

I meant to also say why the refresh() method seemed promising from the CodeMirror docs, as currently written:

If your code does something to change the size of the editor element (window resizes are already listened for), or unhides it, you should probably follow up by calling this method to ensure CodeMirror is still looking as intended.

(My emphasis.)

Note: See TracTickets for help on using tickets.