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: |
|
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)
Change History (10)
#1
@
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:
↓ 3
@
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?
#3
in reply to:
↑ 2
@
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
@
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.
#5
follow-up:
↓ 6
@
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
@
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.)
CSS broken on activated control via JS on some event