CODEWITHSUNDEEP
javascriptphpreactjswordpresswordpress-gutenberg
Frizzant
Frizzant

Reputation: 768

Gutenberg Preview missing styles (only in preview, not in editor)

I have a custom Gutenberg Block created with Javascript & PHP which is missing its preview styles. The preview should look alike to the one you see in the editor behind it.

enter image description here

I have webpack that compiles all the styles for ALL the blocks into one single CSS file. The block.json file is included via PHP:

register_block_type(
        $directory . '/cover/block.json',
        [ 'render_callback' => 'render_block_cover' ]
    );

The styles file is included like follows:

    ...
    add_action( 'wp_enqueue_scripts', [ $this, 'c_wp_enqueue_scripts' ], 100 );
    add_action( 'enqueue_block_editor_assets', [ $this, 'c_wp_enqueue_scripts' ], 100 );
    ...


function c_wp_enqueue_scripts() {
    ...
    $file_with_path_css = apply_filters( 'get_file_from_dist', 'index.css', true );
    wp_enqueue_style( 'my-styles', $file_with_path_css, '', $theme->Version, 'all' );
}

I wonder if the styles have to be included via the reference in block.json. However with Wordpress 5.9 in earlier projects with a similar structure, the preview did actually work. However those blocks were not registered in PHP, just in Javascript.

Q: What might the cause be, that the preview does not show any styles?

What I can exclude is, that it is a CSS hierarchical mistake. No styles seem to work, even if they are directly on the block without a parent.

Upvotes: 3

Views: 1433

Answers (1)

S.Walsh
S.Walsh

Reputation: 3699

As your block has a PHP render callback, I would first check your function, render_block_cover() uses get_block_wrapper_attributes() to apply the dynamic blocks classnames. The block preview is rendered inside an <iframe> with the blocks CSS classnames applied. If the styles are "missing" and present in your CSS, its likely to be an issue with the classnames not being applied to the block when rendered.

In your render function, the classnames should be applied by using get_block_wrapper_attributes(), eg:

php

function render_block_cover( $attributes, $content, $block ){
    $wrapper_attributes = get_block_wrapper_attributes();
    $content = '<h2>Heading</h2>'; // This would be the dynamic content

    // The returned block content has the block wrapper applied, a <div> in this example
    return sprintf( '<div %1$s>%2$s<div>', $wrapper_attributes, $content );
}

If the render callback is correct, next check the name, style and editorStyle in block.json are correct/match your CSS:

block.json

{
    "name": "myblock/cover",
    ...
    "editorStyle": "file:./index.css",
    "style": "file:./index.css"
}

The generated classname would be .wp-block-myblock-cover for this example block. If your block has variations or block styles, the generated class could be different and can also be overridden with:

get_block_wrapper_attributes(array( 'class' => 'my-special-classname'))`

Note: If your block.json has editorStyle and style defined, add_action( 'wp_enqueue_scripts', ...) and add_action( 'enqueue_block_editor_assets', ...) are not required in PHP. The CSS is loaded from the blocks.json when the block is registered in PHP:

register_block_type(
    $directory . '/cover/block.json',
    [ 'render_callback' => 'render_block_cover' ]
);

Finally, double-check you've cleared your browser cache when testing; its sometimes as simple as this when all else fails.

Upvotes: 2

Related Questions