如何在古腾堡的 save.js 函数中显示多个富文本块和按钮

Question

我正在创建我的第一个Gutenberg街区。

我有一个＆lt; h1＆gt; block和一个＆lt; p＆gt; block， 以及一个自定义按钮和背景图像。

这是edit.js文件：

import { __ } from '@wordpress/i18n';
import {
    useBlockProps,
    RichText,
    BlockControls,
    MediaReplaceFlow,
    MediaPlaceholder,
} from '@wordpress/block-editor';
import { ToolbarButton, Button } from '@wordpress/components';
import './editor.scss';

export default function Edit(props) {
    const { attributes, setAttributes, noticeOperations, noticeUI } = props;
    const { url, alt, id, title, description } = attributes;

    const onSelectImage = (image) => {
        if (!image || !image.url) {
            setAttributes({ url: undefined, id: undefined, alt: '' });
            return;
        }
        setAttributes({ url: image.url, id: image.id, alt: image.alt });
    };

    const onSelectURL = (newURL) => {
        setAttributes({
            url: newURL,
            id: undefined,
            alt: '',
        });
    };

    const onUploadError = (message) => {
        noticeOperations.removeAllNotices();
        noticeOperations.createErrorNotice(message);
    };

    const removeImage = () => {
        setAttributes({
            url: undefined,
            alt: '',
            id: undefined,
        });
    };

    const onChangeTitle = (newTitle) => {
        setAttributes({ title: newTitle });
    };

    const onChangeDescription = (newDescription) => {
        setAttributes({ description: newDescription });
    };

    return (
        <>
            {url && (
                <BlockControls group="inline">
                    <MediaReplaceFlow
                        name={__('Replace Image', 'block-test/hero-block')}
                        onSelect={onSelectImage}
                        onSelectURL={onSelectURL}
                        onError={onUploadError}
                        accept="image/*"
                        allowedTypes={['image']}
                        mediaId={id}
                        mediaURL={url}
                    />
                    <ToolbarButton onClick={removeImage}>
                        {__('Remove Image', 'block-test/hero-block')}
                    </ToolbarButton>
                </BlockControls>
            )}
            <div {...useBlockProps()}>
                {url && (
                    <div className={'wp-block-test-hero-block-img'}>
                        <img src={url} alt={alt} />
                    </div>
                )}
                <MediaPlaceholder
                    icon="admin-users"
                    onSelect={onSelectImage}
                    onSelectURL={onSelectURL}
                    onError={onUploadError}
                    accept="image/*"
                    allowedTypes={['image']}
                    disableMediaButtons={url}
                    notices={noticeUI}
                />
                <RichText
                    className="hero-block-title"
                    onChange={onChangeTitle}
                    value={title}
                    placeholder={__('Title', 'block-test/hero-block')}
                    tagName="h1"
                    allowedFormats={[]}
                />
                <RichText
                    className="hero-block-description"
                    onChange={onChangeDescription}
                    value={description}
                    placeholder={__('Description', 'block-test/hero-block')}
                    tagName="p"
                    allowedFormats={[]}
                />
                <Button className="hero-btn">Learn More</Button>
            </div>
        </>
    );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这是一个保存.js文件：

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save({ attributes }) {
    const { title } = attributes;

    return (
        <RichText.Content
            {...useBlockProps.save()}
            tagName="h1"
            value={title}
        />
    );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

没有足够的想法将其显示在编辑器中，而且还可以在前端显示。

我认为这应该非常容易，但是现在对我来说并不容易。

我使用了Google，我找不到答案。

我会为任何提示感到高兴。