0

Block HTML on the front end are getting the "is-style-option1" class added but for some reason the backend block HTML isn't getting the "is-style option1" class being added.

Here are the block style on index.js -

 styles: [
        {
            name: "default",
            label: __("default"),
            isDefault: true,
        },
        {
            name: "option2",
            label: __("Layout 2")
        },
        {
            name: "option3",
            label: __("Layout 3")
        },
],

Here is the assets loading -

function noir_blocks_cgb_block_assets() { // phpcs:ignore
    // Register block styles for both frontend + backend.
    wp_register_style(
        'noir_blocks-cgb-style-css', // Handle.
        plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ), // Block style CSS.
        is_admin() ? array( 'wp-editor' ) : null, // Dependency to include the CSS after it.
        null // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: File modification time.
    );

    // Register block editor script for backend.
    wp_register_script(
        'noir_blocks-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.
        null, // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time.
        true // Enqueue the script in the footer.
    );



    // Register block editor styles for backend.
    wp_register_style(
        'noir_blocks-cgb-block-editor-css', // Handle.
        plugins_url( 'dist/blocks.editor.build.css', dirname( __FILE__ ) ), // Block editor CSS.
        array( '' ), // Dependency to include the CSS after it.
        filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: File modification time.
    );




    // WP Localized globals. Use dynamic PHP stuff in JavaScript via `cgbGlobal` object.
    wp_localize_script(
        'noir_blocks-cgb-block-js',
        'cgbGlobal', // Array containing dynamic data for a JS Global.
        [
            'pluginDirPath' => plugin_dir_path( __DIR__ ),
            'pluginDirUrl'  => plugin_dir_url( __DIR__ ),
            // Add more data here that you want to access from `cgbGlobal` object.
        ]
    );

    /**
     * Register Gutenberg block on server-side.
     *
     * Register the block on server-side to ensure that the block
     * scripts and styles for both frontend and backend are
     * enqueued when the editor loads.
     *
     * @link https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type#enqueuing-block-scripts
     * @since 1.16.0
     */
    register_block_type(
        'cgb/block-noir-blocks', array(
            // Enqueue blocks.style.build.css on both frontend & backend.
            'style'         => 'noir_blocks-cgb-style-css',
            // Enqueue blocks.build.js in the editor only.
            'editor_script' => 'noir_blocks-cgb-block-js',
            // Enqueue blocks.editor.build.css in the editor only.
            'editor_style'  => 'noir_blocks-cgb-block-editor-css',
        )
    );
}

// Hook: Block assets.
add_action( 'init', 'noir_blocks_cgb_block_assets' );

the editor style works fine for other custom block settings but does not work on "block styles"

2
  • 1
    "but for some reason the backend block HTML is getting the "is-style option1" class" Do you mean isn't? Commented Apr 12, 2020 at 7:47
  • lol, yes. Silly me. Figured out the problem. Thank you :) Commented Apr 12, 2020 at 9:53

1 Answer 1

2

Turns out, you need to manually add the wrapper class in the edit function. Here's the source - https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#classname

I changed this line -

 <section className={`text-section-one`} style={{ backgroundColor: `${bgColor}`}} >

to

  <section className= { `${props.className} text-section-one`}  style={{ backgroundColor: `${bgColor}`}} >

and it solved problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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