Cannot get any editor.css to load

[smlombardi]

I am using this repo as a starting point: https://github.com/zgordon/how-to-gutenberg-plugin

I duplicated the demo block and am making my own blocks from it. The blocks work fine, but I need to apply some css to the blocks in the editor (on the admin side).

I tried adding code to the individual block’s editor.scss file, but nothing happened.

So, I tried adding css to blocks.editor.css at the root assets folder, but nothing happened either.

My block’s registerBlockType is “pbdsblocks/alertbox”. Inspecting it with dev tools on the back end shows a class of “wp-block-pbdsblocks-alertbox” as expected.

So, as a test I set a css rule:

  .wp-block-pbdsblocks-alertbox {
    background-color: #f00 !important;
  }

no change. what am I missing?

[smlombardi]

To elaborate further:

* I have added a file editor.scss to my block directory.

* I import it into index.js

* I see that the css is compiled and added to /assets/css/blocks.editor.css

* The stying is NOT applied to the back end

BUT

If I apply the same code, to styles.scss in the block folder it works (of course, on both back and front end — which I don’t want)

What’s up?

[Zac Gordon]

Okay, try it again now, should work 👍

Also, will throw out that I suggest using the other course repo as a boilerplate for creating your own plugins. This one was really just meant as a light intro to the basic parts of building a block.

Let me know though if it’s still not working.

[smlombardi]

What did you change (so that I can change my project to match — I already made 3 or 4 blocks in it)

Looks like you change this function to remove the wp-blocks in the brackets, line 71.

    // Enqueue optional editor only styles
    wp_enqueue_style(
        'jsforwphowto-blocks-editor-css',
        plugins_url( $editorStylePath, __FILE__),
        [],
        filemtime( plugin_dir_path( __FILE__ ) . $editorStylePath )
    );

Works now, thanks!

[Zac Gordon]

Glad it’s up and running now!

Again, I do recommend using the other repo as a boilerplate rather than this one, but glad it’s all working for you now!

Ping me if any issues come up again!

[smlombardi]

FWIW, I used the smaller repo… for the other there would be a lot fo stuff to remove.

You might want to have a very stripped-down one as a “stub” project with just a simple static or richtext block in it.

At work, we have an Angular “Starter app” which users can download and then get a single “hello world” page.

[Author]

Posts