WordPress.org

Make WordPress Core

Opened 6 months ago

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

Download all attachments as: .zip

Change History (10)

@vukvukovich
6 months ago

CSS broken on activated control via JS on some event

@vukvukovich
6 months ago

loaded normally without active_callback arg.

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

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

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

@dlh
6 months ago

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