0

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.

  • 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 Jan 23 at 17:09
0

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']

0

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' );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.