Enqueueing scripts to the X-Pro Builder

[alex5252]

I need to style the x-pro backend editor for a client but regular enqueueing on the admin_enqueue_scripts action hook doesn’t seem to do anything. I can tell that you enqueue scripts, but I can’t figure out how you went about it.

[christopher]

Hi there,

It is nearly impossible to add CSS code to the Pro Editor as it is not following the standard Hooks of the WordPress and it goes outside of the Admin section and has its separate route.

You can check that in the browser address bar, whenever you enable the Pro Editor for editing the page it goes to YOURWEBSITE/x/ and is not in YOURWEBSITE/wp-admin anymore.

But I am not sure if there is a specific custom hook that can be used for that matter. I will ask our development team and make sure that I give the correct answer.

Will get back in no time.

[christopher]

Hi there again,

I find a way to add a CSS file which is direct and not using the WordPress standard mode. You need to install a Child Theme and add the code below to functions.php file:

add_action('cornerstone_before_boot_app', 'add_css_to_builder');

function add_css_to_builder() {
	?>
		<link rel="stylesheet" href="URL OF THE CSS FILE">
	<?php
}

Change URL OF THE CSS FILE with the URL of the CSS file you want to add.

Thank you.

[alexander]

@alex5252 The difficulty adding styles is actually intentional. Our application loads on the WordPress front end (not the dashboard environment) and strips out any other hooks being attached. By doing this there is very little risk of a plugin conflict. Custom scripts don’t get an opportunity to run in our backend, and custom styles are never output. Because we use a dedicated URL, there’s also little risk our setup will affect other plugins.

Also, we don’t support any modifications to our backend. We want to preserve a consistent experience, and to date have not allowed plugin developers to modify anything. It’s possible to register custom content builder elements, and do any styling you need for them on the front end, but our application interface isn’t something we allow to be changed.

If you really need to, you could use workaround like @christopher.amirian mentioned. The cornerstone_before_boot_app hook runs after it is detected that the app should load and after all styling hooks are reset.

Would you mind let us knowing what you’re looking to accomplish with the custom styles? Perhaps there’s another way to achieve the same end result, and we’re always open to feedback if it was something you were hoping to see improved.

[alex5252]

In answer to your question, we want to hand the site of to a client but the backend editor is far too complex. honestly the previous editor was too complex for some of our clients to manage. I wanted to pare it down to try to make it managable for them.

I think you missed the part where I said this was the editor for the “Pro” version of X-theme. inserting completely empty files breaks the ui for all the new cornerstone elements but classic elements are unaffected.

How should I enqueue files in the “Pro” version of X.

[rad]

Hi there,

For the builder, please follow the recommendation as given above. But for the front and live page, you can always follow the Wordpress’ standard way of enqueueing files.

Thanks!

[alex5252]

Perhaps I did not make my response clear.

I followed your recommendation. I used the hook above to add a css file. When any file, css or js, without or without any text or even line returns, the mere inclusion of an additonal file breaks the ui for all the new elements, columns, rows and sections.

The UI for classic Elements, Columns, Rows and Sections remained unaffected.

[alexander]

I understand. Regretfully this is as far as we’re able to go assisting on the issue. The hook described above provides an entry point. It will allow you to load your own files and bypass how the application strips everything out. Any modifications to the interface itself are unsupported.