WordPressのGutenbergブロック開発で「このブロックには、想定されていないか無効なコンテンツが含まれています」と出てしまう

Question

WordPressで、プラグインとして独自のブロックを作っておりますが、

作ったカスタムブロックへリッチテキストを保存したあとに画面を更新すると、「このブロックには想定されていないか無効なコンテンツが含まれています」と表示されてしまいます。

ブロックはNode.jsでビルドしており、ビルド前のsrcは下記です。

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { InspectorControls, RichText } from '@wordpress/block-editor';
import { PanelBody, RadioControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

registerBlockType( 'my-block/sample', {
    title: 'テスト',
    icon: 'block-default',
    supports: {
        className: false,
    },
    attributes: {
        h2Text: {
			type: 'array',
			source: 'children',
			selector: 'div',
		},
		h2Style: {
            type: 'string',
            default: 'wp-block-subhead-style-01',
        }
    },
    example: {
        attributes: {
			h2Text: ''
		},
    },
    edit: ( props ) => {
        const {
            className,
            attributes: {
                h2Text, h2Style
            },
            setAttributes,
        } = props;
        
        const onChangeText = ( value ) => {
			setAttributes( { h2Text: value } );
		};
		
		const onChangeStyle = ( value ) => {
			setAttributes( { h2Style: value } );
		};
		
        return ( [
            <div className={'wp-block-subhead-wrap ' + h2Style}>
                <RichText
                    tagName="div"
                    className={ 'wp-block-subhead-inner' }
                    value={ h2Text }
                />
            </div>
            ,
            <InspectorControls key="setting">
                <PanelBody title="見出し設定">
                    <RadioControl
						label="見出しスタイル"
						help=""
						selected={ h2Style }
						options={ [
							{ label: 'スタイル 01', value: 'wp-block-subhead-style-01' },
	                        { label: 'スタイル 02', value: 'wp-block-subhead-style-02' },
	                        { label: 'スタイル 03', value: 'wp-block-subhead-style-03' }
						] }
						onChange={ onChangeStyle }
					/>
                </PanelBody>
            </InspectorControls>
        ] );
    },
    save: ( props ) => {
        const {
            className,
            attributes: { h2Text,h2Style },
        } = props;
        return (
            <div className={'wp-block-subhead-wrap ' + h2Style}>
                <RichText.Content
                    tagName="div"
                    className={ 'wp-block-subhead-inner' }
                    value={ h2Text }
                />
            </div>
        );
    },
} );

「解決」を押して前後のコードを見比べても変化がなく、
divの中にdivを入れているだけの簡単なコードにも関わらず
このようなエラーが出てしまいます。

ちなみに「リカバリーを試行」を押すと、消えてしまいます。

なぜこのようなエラーが出てしまうかまったくわからず、
どこに原因があるのかご存知の方がいらっしゃいましたら、
ご教授いただけますと幸いです。

バージョン等

WordPress：5.8
テーマ：Twenty Twenty-Oneバージョン: 1.4
利用中の他のプラグイン：なし

Answer 1

selector: 'div'だと親のdivの方を拾ってしまうのではないですかね
selector: '.wp-block-subhead-inner'とした方が良いかと思います

Comments

[glaxel]

KazuhiroHatanoさん、早速のご回答ありがとうございます！

おっしゃる通りの変更をしたところ、
先のエラーは出なくなりました！

ちなみに上記コードでは更新しても値が保存されていませんでしたが、
それは onChange={ onChangeText } の追加で修正できました。

大変助かりました。
本当にありがとうございました。