WP editor css .. how to update

Pinegrow WP WordPress
1

Hi guys,
I’m using the PGWPBootstrap4StartTheme. I need to pull my styling into WP’s custom-editor-style.css but I can’t see how to do that.

When I go to hit WordPress > Export the theme, pinegrow generously overwrites my hand coded editor them css file. how can I manage my editor styles within pinegrow? would be great to not have to double handle this.

2

Hi @BinaryPusher,
Sorry to hear about your difficulties. I’ll need a little more information about your work-flow. How are you working with the custom-editor-style.css in Pinegrow?
When you say:

Do you mean that it overwrite that same file with different CSS in the exported location, or…?
Some screen shots may help.
Thanks,
Bob

3

Hi Bob,

Thanks for responding. Actually that’s one of the first problems. I have no idea how custom-editor-style.css is supposed to be modified within pinegrow. Until now, I’ve been editing it outside of pinegrow, but whenever I select ‘export theme’ from the ‘WordPress’ menu to generate my css it overwrites the local version of custom-editor-style.css and moves it to the theme directory.

my setup:
installed the ST2 theme with bootstrap and sass all setup. followed all the setup instructions, except I was already running apache, so I didn’t install local.app. so I have PGWPBootstrap4StarterTheme-master/ from which I do all my html/sass editing, then I export to my theme directory.

This was working great until I couldn’t get some of the WP smart components to work properly, so I’ve switched over to building my content in Gutenberg, making the editor styling much more important.

4

yes, it seems to be set up to generate custom-editor-style and custom-editor-style.min. as far as I can see, every time I export, these files get overwritten in the master directory, then copied over to the theme

image
image1006×830 106 KB

5

here’s the file after the theme is exported. writing anything in here prior to the export gets wiped out

image
image2536×386 42.8 KB

6

Hi again,
Where are you editing those files? In your project folder or the exported theme folder? I can freely edit those either within Pinegrow or with VSC and they get exported intact.
Within Pinegrow

image
image1868×1648 236 KB

Within theme folder:
image
image1752×1046 92.4 KB

Cheers,
Bob

7

I’m getting those from the project folder. I can edit them in there, I can edit them in the theme folder but as soon as I export the theme, it gets wiped.

your directory structure in your project doesn’t look like mine. yours doesn’t seem to have any sass stuff and you haven’t got the plugins folder there. is this an older version before sass was added? here’s mine. vanilla from the project repo. you can see there’s a css.map like its supposed to be compiling the css from a scss source, but I can’t find one.

image
image610×658 38.4 KB

8

Hi,
Sorry I didn’t activate SASS before. Here you go.
Before:

image
image1574×1692 335 KB

After:
image
image1586×748 86.1 KB

Pinegrow doesn’t set up Sass compilation automatically for those files. You have to make up a dummy sheet and then add an .scss file that is compiled into the custom-editor-style.css file - or at least I think that is the best way to do it.

Is there anything else - custom PHP - that touches those stylings?
Bob

9

hmm. ok perhaps that’s the issue. I set the functions.php file to add support for the editor styles.
I might try setting another them up from scratch to see if I’ve botched something on the way.

// Add support for editor styles.
    add_theme_support( 'editor-styles' );
    // Enqueue editor styles.
    add_editor_style( [
        'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css',
        'css/custom-editor-style.css',
        'css/editor.css',
    ] );
10

Hmm, I just tried it out by adding your code into the custom.php file. Works just fine and looks good to me. The css loads in and the file isn’t overwritten. Not sure of what else for you to try except setting up a fresh WP project and see if it still does this.
Bob

11

I think its because I didn’t have a source file. I started a vanilla project and everything worked fine. I went back to the existing project and added the file in and its working ok now. Thanks for your help Rob. That gave me enough info to sort it out.

1 Like