自定义Gutenberg卡片块嵌套列块时的选择与更新问题

开发自定义Gutenberg卡片块时遇到如下问题：当卡片块嵌套在列块这类父块中时，难以选中并执行更新操作；但未嵌套在其他块中时，更新操作完全正常。视频展示了卡片块在列块内的异常状态——点击时无法正常进行操作。

以下是该块的编辑代码：

import { __ } from '@wordpress/i18n';
import { InnerBlocks, RichText, MediaUpload, InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { Button, PanelBody } from '@wordpress/components';
import './editor.scss';

export default function Edit( { attributes, setAttributes } ) {
    const { imageTitle, imageUrl, imageAlt, imageFilename, title, body } = attributes;

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
                    <MediaUpload
                        onSelect={(media) => {
                            setAttributes({
                                imageTitle: media.title,
                                imageFilename: media.filename,
                                imageUrl: media.url,
                            });
                        }}
                        multiple={false}
                        allowedTypes={ ['image'] }
                        render={ ( { open } ) => (
                            <Button onClick={ open }>Open Media Library</Button>
                        ) }
                    />
                </PanelBody>
            </InspectorControls>
            <div
                { ...useBlockProps() }
                className="card"
                style={{ backgroundImage: `url(${imageUrl})`}}
            >
                <div className="card__overlay"></div>
                <div className="card__content">
                    <RichText
                        tagName="h3"
                        className="card__title"
                        identifier="title"
                        value={ title }
                        allowedFormats={ [ 'core/bold' ] } // 仅允许加粗格式
                        onChange={ ( value ) => setAttributes( { title: value } ) }
                        placeholder={ __( 'Title...' ) }
                    />
                    <RichText
                        tagName="p"
                        className="card__body"
                        identifier="body"
                        value={ body }
                        allowedFormats={[]} // 不允许任何格式
                        onChange={ ( value ) => setAttributes( { body: value } ) }
                        placeholder={ __( 'Body...' ) }
                    />
                    <InnerBlocks
                        allowedBlocks={['core/button']}
                    />
                </div>
            </div>
        </>
    );
}

内容的提问来源于stack exchange，提问作者Grzes Slania