plugin development - Gutenberg blocks not getting styled on back end

I am creating a plugin with custom gutenberg blocks.

Each block has a styles.scss file. If I add code to this file, the block is styled in both the back end and front end, as expected per the docs.

For example, in a block "section" I want to style the background color only on the back end:

.wp-block-pbdsblocks-section {
  background-color: #e0e0e0;
  padding: 10px;
}

But this affects both front and back end. The articles I've been reading say to apply the style by creating an "editor.scss" file in the block directory.

I import the editor.scss file into the block's index.js.

I can see my code in this file being compiled and added to /assets/css/blocks.style.css

I have the plugins' php file set to enqueue it:

/**
 * Enqueue block editor only JavaScript and CSS
 */
function pbdsblocks_editor_scripts()
{

    // Make paths variables so we don't write em twice ;)
    $blockPath = '/assets/js/editor.blocks.js';
    $editorStylePath = '/assets/css/blocks.editor.css';

    // Enqueue the bundled block JS file
    wp_enqueue_script(
        'pbdsblocks-blocks-js',
        plugins_url( $blockPath, __FILE__ ),
        [ 'wp-i18n', 'wp-element', 'wp-blocks', 'wp-components', 'wp-api', 'wp-editor' ],
        filemtime( plugin_dir_path(__FILE__) . $blockPath )
    );

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

}

// Hook scripts function into block editor hook
add_action( 'enqueue_block_editor_assets', 'pbdsblocks_editor_scripts' );

But the styles only take affect if they're in the style.scss file. Which affects front end and back end.

I am creating a plugin with custom gutenberg blocks.

Each block has a styles.scss file. If I add code to this file, the block is styled in both the back end and front end, as expected per the docs.

For example, in a block "section" I want to style the background color only on the back end:

.wp-block-pbdsblocks-section {
  background-color: #e0e0e0;
  padding: 10px;
}

But this affects both front and back end. The articles I've been reading say to apply the style by creating an "editor.scss" file in the block directory.

I import the editor.scss file into the block's index.js.

I can see my code in this file being compiled and added to /assets/css/blocks.style.css

I have the plugins' php file set to enqueue it:

/**
 * Enqueue block editor only JavaScript and CSS
 */
function pbdsblocks_editor_scripts()
{

    // Make paths variables so we don't write em twice ;)
    $blockPath = '/assets/js/editor.blocks.js';
    $editorStylePath = '/assets/css/blocks.editor.css';

    // Enqueue the bundled block JS file
    wp_enqueue_script(
        'pbdsblocks-blocks-js',
        plugins_url( $blockPath, __FILE__ ),
        [ 'wp-i18n', 'wp-element', 'wp-blocks', 'wp-components', 'wp-api', 'wp-editor' ],
        filemtime( plugin_dir_path(__FILE__) . $blockPath )
    );

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

}

// Hook scripts function into block editor hook
add_action( 'enqueue_block_editor_assets', 'pbdsblocks_editor_scripts' );

But the styles only take affect if they're in the style.scss file. Which affects front end and back end.

• plugin-development
• wp-enqueue-style
• block-editor

Share Improve this question asked Jan 23, 2019 at 16:42 SteveSteve 31399 silver badges2121 bronze badges 1

• You'll need 2 separate compiled CSS files, and two separate add_action() calls. One CSS file for back end only with add_action hooked to enqueue_block_editor_assets and the other CSS file for both front and back end with add_action hooked to enqueue_block_assets. – WebElaine Commented Jan 23, 2019 at 17:09

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

FWIW, there was an error in the wp_enqueue_style function I received. This one works fine:

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

Note the third argument has changed to [ ] from ['wp-blocks']

You need two different stylesheet for a block. One for front end and one for back end. Here's what I suggest you to follow. I've taken this code from create-guten-block

   /**
 * Enqueue Gutenberg block assets for both frontend + backend.
 *
 * @uses {wp-editor} for WP editor styles.
 * @since 1.0.0
 */
function single_block_cgb_block_assets() {
    // Styles.
    wp_enqueue_style(
        'single_block-cgb-style-css', // Handle.
        plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ), // Block style CSS.
        array( 'wp-editor' ) // Dependency to include the CSS after it.
        // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: File modification time.
    );
}
// Hook: Frontend assets.
add_action( 'enqueue_block_assets', 'single_block_cgb_block_assets' );
/**
 * Enqueue Gutenberg block assets for backend editor.
 *
 * @uses {wp-blocks} for block type registration & related functions.
 * @uses {wp-element} for WP Element abstraction — structure of blocks.
 * @uses {wp-i18n} to internationalize the block's text.
 * @uses {wp-editor} for WP editor styles.
 * @since 1.0.0
 */
function single_block_cgb_editor_assets() {
    // Scripts.
    wp_enqueue_script(
        'single_block-cgb-block-js', // Handle.
        plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack.
        array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ) // Dependencies, defined above.
        // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ) // Version: File modification time.
    );
    // Styles.
    wp_enqueue_style(
        'single_block-cgb-block-editor-css', // Handle.
        plugins_url( 'dist/blocks.editor.build.css', dirname( __FILE__ ) ), // Block editor CSS.
        array( 'wp-edit-blocks' ) // Dependency to include the CSS after it.
        // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: File modification time.
    );
}
// Hook: Editor assets.
add_action( 'enqueue_block_editor_assets', 'single_block_cgb_editor_assets' );