JavaScript for WordPress Forums Gutenberg Development Cannot get any editor.css to load

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #85298

    I am using this repo as a starting point:

    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?


    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


    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.


    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
            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!


    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.