Gutenberg: Simple block render in back-end

Question

I built a simple div block with guten-block.

All does what it should, but if I give the div a custom class, then its not rendered in the back-end.

How can I change this?

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

/**
 * BLOCK: bootstrap-blocks
 *
 * Registering a bootstrap container
 */

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/editor';
const { __ } = wp.i18n;

registerBlockType( 'div-block/main', {
  title: 'div',
  icon: 'index-card',
  category: 'bootstrap-blocks',
    edit( { attributes, className, setAttributes } ) {
        return (
            <div className={ 'container' }>
                <InnerBlocks />
            </div>
        );
    },
    save( { attributes } ) {
        return (
            <div className={ 'container' }>
                <InnerBlocks.Content />
            </div>
        );
    },
} );

Answer 1

The WP Admin editor area is styled using your theme's editor-style.css file - details.

The admin editor using Gutenburg uses the same file, with some small caveats. Namely, it auto converts body in the CSS to .editor-styles-wrapper because the editor area is no longer loaded in an iframe (Classic Editor is/was loaded in an iframe) - details.

So directly to the point, add add_theme_support('editor-styles'); to your functions.php file and then add your block's styles in your theme's editor-style.css file.