CSS Class name issue

[ahmadawais]

I am building a custom editable block. I have added the style sheet and it is being included but the styles are not getting applied. I am at loss of what I should do to address this problem.

Here's the block.php file

// Hook: Editor assets.
add_action( 'enqueue_block_editor_assets', 'gb_block_03_block_editable_editor_assets' );

/**
 * Enqueue the block's assets for the editor.
 *
 * `wp-blocks`: includes block type registration and related functions.
 * `wp-element`: includes the WordPress Element abstraction for describing the structure of your blocks.
 * `wp-i18n`: To internationalize the block's. text.
 *
 * @since 1.0.0
 */
function gb_block_03_block_editable_editor_assets() {
	// Scripts.
	wp_enqueue_script(
		'gb-block-03-block-editable', // Handle.
		plugins_url( 'block.js', __FILE__ ), // Block.js: We register the block here.
		array( 'wp-blocks', 'wp-i18n', 'wp-element' ), // Dependencies, defined above.
		filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ) // filemtime — Gets file modification time.
	);

	// Styles.
	wp_enqueue_style(
		'gb-block-03-block-editable-editor', // Handle.
		plugins_url( 'editor.css', __FILE__ ), // Block editor CSS.
		array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
		filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // filemtime — Gets file modification time.
	);
} // End fucntion gb_block_03_block_editable_editor_assets().


// Hook: Frontend assets.
add_action( 'enqueue_block_assets', 'gb_block_03_block_editable_block_assets' );

/**
 * Enqueue the block's assets for the frontend.
 *
 * @since 1.0.0
 */
function gb_block_03_block_editable_block_assets() {
	// Styles.
	wp_enqueue_style(
		'gb-block-03-block-editable-frontend', // Handle.
		plugins_url( 'style.css', __FILE__ ), // Block frontend CSS.
		array( 'wp-blocks' ), // Dependency to include the CSS after it.
		filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // filemtime — Gets file modification time.
	);
} // End fucntion gb_block_03_block_editable_block_assets().

Here is the block.js file

/**
 * BLOCK: Editable
 *
 * Registering a basic editable block with Gutenberg.
 * Introduces the concept of attributes and extracting
 * them, and the default text formatting added by Editable.
 *
 * Styles:
 *        editor.css — Editor styles for the block.
 *        style.css — Frontend styles for the block.
 */
( function() {
	var __ = wp.i18n.__;
	var el = wp.element.createElement;
	var Editable = wp.blocks.Editable;
	var children = wp.blocks.query.children;
	var registerBlockType = wp.blocks.registerBlockType;

	/**
	 * Register Basic Block.
	 */
	registerBlockType( 'gb/03-block-editable', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
		title: __( 'Editable', 'GB' ), // Block title.
		icon: 'edit', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
		category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
		attributes: {
			content: children( 'p' ), // Content: Extract child nodes from a paragraph of rich text.
		},

		// The "edit" property must be a valid function.
		edit: function( props ) {
			var content = props.attributes.content; // Content in our block.
			var focus = props.focus; // Focus — should be truthy.

			/**
			 * Update content on change.
			 */
			function onChangeContent( newContent ) {
				props.setAttributes( { content: newContent } );
			}

			// The editable content.
			return el(
				Editable, // Editable React component.
				{ // Creates <div class="wp-editor-gb-03-block-editable"><p></p></div>
					tagName: 'p', // <p></p>.
					className: props.className, // The class="wp-editor-gb-03-block-editable".
					onChange: onChangeContent, // Run the onChangeContent() function onChange of content.
					value: content, // Content in our block. i.e. props.attributes.content;
					focus: focus, // Focus — should be truthy. i.e. props.focus;
					onFocus: props.setFocus
				}
			);
		},

		// The "save" property must be specified and must be a valid function.
		save: function( props ) {
			var content = props.attributes.content; // Content in our block.

			// The frontend content.
			return el( 'p',  { // <p></p>.
					className: props.className, // The class="wp-editor-gb-03-block-editable".
				},
				content,
			);
		},
	} );
} )();

Here's the preview inside editor

Here's you can see the editor.css is being added

Also the editor.css has following contents

/**
 * ----------------------------------------------------------------------------
 * #.# Editor CSS
 * ----------------------------------------------------------------------------
 */

.wp-editor-gb-03-block-editable {
	color: #000000;
	background: mistyrose;
	border: 0.2rem solid red;
	padding: 2rem;
}

I am pulling my hair for an hour on this!
Help!

[ahmadawais]

Damn it, I had the CSS class name wrong!