WordPress（gutenberg）のカスタムブロックにて、saveのときのclassNameが保存されない

カスタムブロックを保存する際の「save()」の関数でclassNameが保存されない原因が全くわからない状態が続いておりますので質問させていただきました。

概要

Gutenbergのカスタムブロックを作成し、任意のスタイルを選択・保存→反映されるようにしたいのですが
最後のsaveのところでうまく動作しない

//ブロックが作れるようにregisterBlockTypeを読み込む
const { registerBlockType } = wp.blocks;
//editやsave内で<Fragment>が使えるように、 wp.elementから読み込む
const { Fragment } = wp.element;
//editやsave内で<RichText>などが使えるように、 wp.editorから読み込む
//サイドバー内への配置をしている<InspectorControls>もここで設定
const {
    RichText,
    BlockControls,
    AlignmentToolbar,
    InspectorControls,
} = wp.blockEditor
//editやsave内で<CheckboxControl>などが使えるように、 wp.componentsから読み込む
const {
    PanelBody,
    CheckboxControl,
    TextControl,
    RadioControl,
} = wp.components;
const {
  withState,
} = wp.compose;

//----------------------------------------------

// 見出し

//----------------------------------------------

//カスタムブロックの追加
//'名前空間/カスタムブロック名' ※名前空間はテーマorプラグイン名
registerBlockType( 'mao/customheading', {

  //カスタムブロックのタイトル／カテゴリは必須
  title: '見出し',
  category: 'original' ,
  //アイコン
  icon: 'universal-access-alt',
  //概要
  description : '見出しを表示します',
  //検索用キーワード
  keywords : ['見出し' , 'タイトル' , 'たいとる' , 'title' , 'heading'],
  //サポート（）
  supports:{
    //独自クラス名の追加蘭を非表示
    customClassName: false
  },
  //スタイルの設定（各カスタムブロックの独自の別スタイル）
  styles:[
    {
      name : 'none' , //'is-style-'の後に追記されるクラス名
      label : 'デフォルト',//そのスタイルの表示名
      isDefault : true //デフォルトスタイル設定
    },
    {
      name : 'headingTypeA' ,
      label : 'スタイルA' 
    },
  ],
  //属性（attributes）と値
  //hoge:{}のhogeは任意のワードでおそらくOK
  //その中に必須の項目は「type:」のみ
  attributes: {
    content: {
      type: 'array',
      source: 'children',
      selector: 'h2',
    },
  },


  //投稿画面上の表示内容を設定
  //attributesは上記で設定した内容をまとめて引数にする
  //setAttributesは値が変わったときに使用されるらしい（元から用意されているもの）
  edit( { attributes, setAttributes , className } ) {
    //attributesでまとめていた各属性を分けて使えるようにする
    //こうしておけば{alignment}と書けばalignment: centerのように出力される
    const {
      content ,
    } = attributes ;
    //RichTextへの入力内容を取得して更新する
    function onChangeContent( newContent ) {
      setAttributes( { content: newContent } );
    }
    return (
      <Fragment>
        {//サイドバーの場所を指定
        }
        <RichText
          key="editable"
          tagName="h2"
          className = {className}
          onChange={ onChangeContent }
          value={ content }
          placeholder='ここに見出しを入力・・・'
        />
      </Fragment>
    );
  },

  //saveは保存時の内容を設定。基本的にはそのまま出力されるので、記事表示時の内容とほぼ同義。
  //最初に設定し、edit内で操作したattributesの値をattributesと書くことでまとめて引数にしている
  save( { attributes, className } ) {
    //attributesでまとめていた各属性を分けて使えるようにする
    const {
      content ,
    } = attributes ;
    return (
      <div className={ className }>
        <RichText.Content
          className = { className }
          value={ content }
          tagName="h2"
        />
      </div>
    );
  },
} );

添付画像のように、「デフォルト」と「スタイルA」の２種類のスタイルを用意しており
編集画面上では、右側の画面からそれぞれのスタイルをクリックするときちんと反映され、HTML上でもタグにクラス名が付与されます

しかし、これを保存してプレビュー画面で見ると、classNameが付与（保存）されておらず、スタイルが反映されません

補足

save()内の

clsssName = { className )

の部分を任意の文字列を入れた場合はきちんと反映されるので
classNameが引数としてうまく引き渡せていないのかなと思っています

お願い

大変恐縮ではございますが
何かヒントやアドバイスをいただけますと幸いです。

初心者のため説明に不足があるかもしれませんが何卒ご容赦くださいますようお願いいたします。

行動規範の内容に同意します

回答1件

editとsaveで返すHTMLの構造が違ってないですかね？
saveでclassNameが２回使われるのはよろしくなかろうかと思われます

jsx
1    return (
2      <div className={ className }>
3        <RichText.Content
4          className = { className }
5          value={ content }
6          tagName="h2"
7        />
8      </div>
9    );
10↓
11    return (
12        <RichText.Content
13          className = { className }
14          value={ content }
15          tagName="h2"
16        />
17    );