How to Register Styles, Scripts & Blocks for WordPress Gutenberg Block Editor

Question

I have created some custom blocks for the editor, the blocks are working but I am having an issue with the CSS.

blocks.editor.build.css loads in the editor and the frontend, it should only load in the editor.

blocks.style.build.css should load in both spots but doesn't load anywhere.

Also, is there a better way to register the blocks so I don't have to repeat the register_block_type() code for each new block I make?

function my_register_custom_blocks() {
    // Editor JS
    wp_register_script(
        'my-custom-blocks',
        plugins_url('/blocks/dist/blocks.build.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components')
    );

    // Frontend & Editor Styles  
    wp_register_style(
        'my-custom-blocks-style',
        plugins_url( '/blocks/dist/blocks.style.build.css', __FILE__ ),
        array( 'wp-blocks' )
    );

    // Editor Only Styles
    wp_register_style(
        'my-custom-blocks-edit-style',
        plugins_url('/blocks/dist/blocks.editor.build.css', __FILE__),
        array( 'wp-edit-blocks' )
    );  

    // Divder Block
    register_block_type('custom-blocks/divider', array(
        'editor_script' => 'my-custom-blocks',
        'editor_style' => 'my-custom-blocks-edit-style',
        'style' => 'my-custom-blocks-style'
    ));

    // Spacer Block
    register_block_type('custom-blocks/block-spacer', array(
        'editor_script' => 'my-custom-blocks',
        'editor_style' => 'my-custom-blocks-edit-style',
        'style' => 'my-custom-blocks-style'
    ));

    ...More Blocks
}

add_action('init', 'my_register_custom_blocks');

Ashiquzzaman Kiron Ashiquzzaman Kiron · Accepted Answer · 2019-02-14T05:28:23

You can use the structure of create-guten-block, that way you need to use these scripts/styles once

├── .gitignore
├── plugin.php //add plugin info and add init.php file
├── package.json
├── README.md
|
├── dist
|  ├── blocks.build.js
|  ├── blocks.editor.build.css
|  └── blocks.style.build.css
|
└── src
   ├── block
   |  ├── block.js
   |  ├── editor.scss
   |  └── style.scss
   |
   ├── blocks.js // import each new block here to show up on editor
   ├── common.scss
   └── init.php // register scripts & styles here

How to Register Styles, Scripts & Blocks for WordPress Gutenberg Block Editor

1 Answers