WordPress.org

Make WordPress Core

Opened 12 months ago

Last modified 12 months ago

#48902 new defect (bug)

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

Reported by: 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 12 months 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 12 months ago.
loaded normally without active_callback arg.
bug.zip (1.2 KB) - added by vukvukovich 12 months ago.
Plugin with all of the code needed for reproducing the bug.
48902.diff (822 bytes) - added by dlh 12 months ago.

Download all attachments as: .zip

Change History (10)

@vukvukovich
12 months ago

CSS broken on activated control via JS on some event

@vukvukovich
12 months ago

loaded normally without active_callback arg.

#1 @vukvukovich
12 months 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
12 months 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
12 months ago

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

#3 in reply to: ↑ 2 @vukvukovich
12 months 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
12 months 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 12 months ago by vukvukovich (previous) (diff)

@dlh
12 months ago

#5 follow-up: @dlh
12 months 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
12 months 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.