How to include 3rd-party script to pgedit.php

Pinegrow WP
1

Hello,

I want to include custom stylesheets and scripts in the pgedit.php file.

Based on my exploration, the normal wp_enqueue doesn’t work there.
All styles and scripts loaded are from Pinegrow_Plugin_Public::get_editor_scripts() and Pinegrow_Plugin_Public::get_editor_styles().

Both functions don’t have any wp action hooks and filter hooks to interact from externally.

2

@suabahasa two filters will be added in the next plugin update:

$styles = apply_filters('pinegrow_editor_styles', $styles);

and

$scripts = apply_filters('pinegrow_editor_scripts', $scripts);

$styles and $scripts are arrays of relative or absolute urls.

These filters will let you load custom CSS and JS files in the Pinegrow editor. JS files can follow PG standard plugin format as described on Developers | Pinegrow Web Editor

3 Likes
3

Hi @matjaz,

I tried to use these filters from the functions.php file inside my theme, but can’t get to make it work.
It seems like the Pinegrow plugin is appending the site URL to the file paths, which is causing the incorrect URL formation in the DOM. For example:

/* Add styles to Pinegrow plugin */
function my_custom_pinegrow_files($files) {
    // Add a new stylesheet URL to the $files array
	$files[] = '/wp-content/uploads/automatic-css/automatic.css';
    // Return the modified array
    return $files;
}

// Use the 'pinegrow_editor_styles' filter to enqueue custom stylesheets
add_filter('pinegrow_editor_styles', 'my_custom_pinegrow_files');

Results in:

https://example.com/wp-content/plugins/pinegrow/pinegrow/https://example.com/wp-content/uploads/automatic-css/automatic.css?version=1.0.15

Can you tell what I am missing here, and would you mind providing a more detailed example?

4

@rikhen at the moment PG prepends its plugin folder url to all styles. A workaround is to add ../../../../ to urls.

For example:

$files[] = '../../../../wp-content/uploads/automatic-css/automatic.css';

pinegrow_editor_scripts works in the same way, but it checks for the absolute urls before prepending the prefix. Going forward, the same will be done for styles as well.

So, the way to include resources without the PG plugin prefix would be passing in absolute urls, for example:

$files[] = get_site_url(null, '/wp-content/uploads/automatic-css/automatic.css');

This works for scripts now, and for styles it will work from 1.0.16.

Also, please note that these filters add styles and scripts into the main PG UI, not in page views displayed in Pinegrow. To do that you would have to create a JS extension for PG.

1 Like
5

Hi @matjaz,

Thanks for the prompt reply. Unfortunately, your suggestion didn’t work either, so I ended up adding the absolute links to my index.html file. I will wait for the plugin update! :slight_smile: