APF & Site Origin Page Builder issues with the editor

[vladkucherov]

Hello Guys,

I am using the plugin Page Builder by SiteOrigin https://wordpress.org/plugins/siteorigin-panels/

I created a widget using APF and try to display it's settings via the page builder

But as you can see in the image, the WYSIWYG editor is not loading properly.

I know this may not bother you to much, but a help would be very appreciated.

Thanks.

[michaeluno]

Sounds like a jQuery conflict. Do you see any error in the console?

[vladkucherov]

@michaeluno Nope, I thought maybe the script is not loaded at all, maybe there is a problem with some of the events.

The Page Builder loads widgets via AJAX, so not all the events are fired, maybe that's the problem?

[michaeluno]

It seems when the WordPress built-in function wp_editor() is called in a widget form, it causes a conflict with their plugin. I could not detect which lines. You may ask them as they might know something.

[vladkucherov]

I got a response from them via email.

Hi Vlad Page Builder works in a slightly different way to the standard WordPress widgets interface. This means that sometimes widgets that work in standard WordPress (where most are designed to be used), don't work in Page Builder. We have written a guide on how to make a widget Page Builder compatible. https://siteorigin.com/docs/page-builder/widget-compatibility/ TinyMCE seems to be a particularly tricky thing to get working in a widget that's compatible with both Page Builder and standard WordPress. Black Studio have done a great job of this with their TinyMCE widget.

Check out the URL. https://siteorigin.com/docs/page-builder/widget-compatibility/

Do you think you can provide a way to control the actions you register and allow the user to change it? or maybe there should be a way to set it manually?

Like this maybe:

add_action('siteorigin_panel_enqueue_admin_scripts', 'MyWidget_ThatExtends_APF::enqueueScripts');

Ideas? Thanks!

[michaeluno]

Do you think you can provide a way to control the actions you register and allow the user to change it? or maybe there should be a way to set it manually?

You can override the factory class methods in your extended class. Or use the start() method or setUp() method to insert your own code.

However, in this particular issue, the code that inserts JavaScript scripts for tinyMCE is in the definition of the wp_editor() function which is part of the WordPress core. See https://github.com/WordPress/WordPress/blob/4.1/wp-includes/class-wp-editor.php#L261-L267 There might be other part that deals with editor script and style resources. I haven't looked into it deeply. So you may read the entire _WP_Editors class to find which hook you can use.

Another option is to extend the textarea field type class and override the method not to call wp_editor() if you know a way to enable the WordPress rich editor without using wp_editor().

[michaeluno]

@vladkucherov I've written a custom textarea field type compatible with the Page Builder plugin. Give it a try. https://gist.github.com/michaeluno/19a08bb87bc439f25b9a The field type slug is custom_textarea.

[michaeluno]

@vladkucherov So did you have a chance to try that? I'm closing this issue. If you still have a problem, let me know.

[vladkucherov]

@michaeluno No everything is fine. I forked the class and changed it a bit. You can find a reference in the comments of the file.

[michaeluno]

I missed your comment there. I posted a reply .