Gutenberg Block Style CSS Class Is Not Applying on Backend

Question

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

Here is the edit function in the index.js file -

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

             <div className={`wrapper order-${elOrder} wrapper-${sectionHeight}`}>
                <MediaUpload
                        onSelect={ onSelectImage }
                        type="image"
                        value={ imgID }
                        render={ ( { open } ) => (
                            <Button className={ imgID ? 'image-button' : 'button button-large' } onClick={ open }>
                                { ! imgID ? __( 'Upload Image', 'test' ) :  <img src={ imgURL } alt={ __( 'text-section-one-image', 'test' ) } /> }
                            </Button>
                        ) }
                />
            </div>

            <div className={`textDiv text-${alignment}`}>
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Geo Discovery', 'test' ) }
                    value={ text }
                    onChange={onChangeContent}
                    className={`title title-size-${textSize}`}
                    style={{  color: titleColor  }}
                />
                <RichText
                    tagName="p"
                    placeholder={ __( 'Aenean vel justo nulla, at gravida elit. In hac habitasse platea dictumst. Quisque gravida commodo volutpat. Vivamus blandit risus in urna venenatis accumsan', 'test' ) }
                    value={ textP }
                    className={`text text-size-${textSizeP}`}
                    onChange={onChangeContentP}
                    style={{ color: textColor  }}
                />
            </div>

        </section>

     ]

}

Here is the assets loading -

 <?php
/**
 * Blocks Initializer
 *
 * Enqueue CSS/JS of all the blocks.
 *
 * @since   1.0.0
 * @package CGB
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Enqueue Gutenberg block assets for both frontend + backend.
 *
 * Assets enqueued:
 * 1. blocks.style.build.css - Frontend + Backend.
 * 2. blocks.build.js - Backend.
 * 3. blocks.editor.build.css - Backend.
 *
 * @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 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.
          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( 'wp-edit-blocks' ), // 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.scss file -

.is-style-option3 {
    background-color: red !important;
  }

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

Answer 1

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 the problem.