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

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

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

前提

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

現状

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

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

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

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

function.php

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

blocks.js

javascript
1function () {
2    var el = wp.element.createElement,
3        blocks = wp.blocks,
4        RichText = wp.editor.RichText;
5
6    //ブロック名：（プラグインまたはテーマ名／ブロック名）で一意の名前にする
7    blocks.registerBlockType('my-plugin/sample-block02', {
8    		//ブロック構成：タイトル／アイコン／カテゴリー（ブロックが属するグループ）／概要／検索キーワードを指定
9        title:       'タイトル／見出し',
10        icon:        'admin-network',
11        category:    'layout',
12        description: 'タイトル／見出し' ,
13        keywords:  [ 'たいとる' , 'みだし' , 'h' ],
14        styles:    [{
15    			name: 'title_defoult' ,
16    			label: 'デフォルト',
17    			isDefault: true 
18        }, {
19    			name: 'title_typeA' ,
20    			label: 'タイプA'
21        }, {
22    			name: 'title_typeB' ,
23    			label: 'タイプB'
24        }],
25        attributes: {
26            content: {
27                type: 'array',
28                source: 'children',
29                selector: 'h1',
30            },
31        },
32        edit: function (props) {
33            var nowContent = props.attributes.content;
34            return el(
35                RichText,
36                {
37                    tagName: 'div',
38                    className: "sample2",
39                    style: {
40                        background: '#f7f7f7'
41                    },
42                    value: nowContent,
43                    onChange: function (changedContent) {
44                        props.setAttributes({ content: changedContent });
45                    },
46                }
47            );
48        },
49        save: function (props) {
50            return el(
51            	RichText.Content, {
52                tagName: 'div',
53                className: "sample2",
54                style: {
55                    background: '#f7f7f7'
56                },
57                value: props.attributes.content,
58            });
59        },
60    });
61})();
62add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );