WordPressグーテンベルクのブロックカスタマイズでのclass名の切り替え方法

Question

最終的に知りたいこと、解決したい内容

エディタ（グーテンベルク）でカスタムブロックを配置する際、
下記画像のようにパターン（タイプA／タイプB）を選択したとき
ブラウザ上に表示されているスタイルが変更されない（class名が切り替わらない）問題を解決したい

前提

まだゼロベースから開発できるほどのスキルがないため、
既存のテーマを参考にしながら開発を行っています。

現状

以下の記事を参考にしています。

https://wemo.tech/2210
https://wemo.tech/2163

上記の画像のように、カスタムブロックの追加まではできましたが
エディタ上で別パターンのブロックスタイルを選択したときに
class名の切り替えがうまく動作していないため、ブラウザ上に表示されるスタイルも変更されません。

何かアドバイスをいただけることがありましたら
ご教示いただけますと幸いです。

function.php

function my_plugin_block_categories( $categories, $post ) {
    return array_merge(
        $categories,
        array(
            array(
                'slug' => 'my-category',   //ブロックカテゴリーのスラッグ
                'title' => 'My category',  //ブロックカテゴリーの表示名
                'icon'  => 'wordpress',    //アイコンの指定（Dashicons名）
            ),
        )
    );
}
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );

blocks.js

function () {
    var el = wp.element.createElement,
        blocks = wp.blocks,
        RichText = wp.editor.RichText;

    //ブロック名：（プラグインまたはテーマ名／ブロック名）で一意の名前にする
    blocks.registerBlockType('my-plugin/sample-block02', {
    		//ブロック構成：タイトル／アイコン／カテゴリー（ブロックが属するグループ）／概要／検索キーワードを指定
        title:       'タイトル／見出し',
        icon:        'admin-network',
        category:    'layout',
        description: 'タイトル／見出し' ,
        keywords:  [ 'たいとる' , 'みだし' , 'h' ],
        styles:    [{
    			name: 'title_defoult' ,
    			label: 'デフォルト',
    			isDefault: true 
        }, {
    			name: 'title_typeA' ,
    			label: 'タイプA'
        }, {
    			name: 'title_typeB' ,
    			label: 'タイプB'
        }],
        attributes: {
            content: {
                type: 'array',
                source: 'children',
                selector: 'h1',
            },
        },
        edit: function (props) {
            var nowContent = props.attributes.content;
            return el(
                RichText,
                {
                    tagName: 'div',
                    className: "sample2",
                    style: {
                        background: '#f7f7f7'
                    },
                    value: nowContent,
                    onChange: function (changedContent) {
                        props.setAttributes({ content: changedContent });
                    },
                }
            );
        },
        save: function (props) {
            return el(
            	RichText.Content, {
                tagName: 'div',
                className: "sample2",
                style: {
                    background: '#f7f7f7'
                },
                value: props.attributes.content,
            });
        },
    });
})();
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );

Answer 1

propsにclassNameってプロパティがあるので
それをブロックのclassNameとして渡してください