如何将带有 RichText 多行元素的自定义块转换为使用 Gutenberg 中的 innerBlocks？

Question

在 Gutenberg 中编辑帖子时，我已经开始在 web 开发人员控制台中看到以下通知：

wp.blockEditor.RichText multiline 属性自 6.1 版起已弃用，并将在 6.3 版中删除。 请改用嵌套块（InnerBlocks）。

我不确定我将如何 go 将我的自定义 static Gutenberg 块转换为一个<div>与 < <RichText> <InnerBlocks />仍然尊重我构建的原始功能。 这是块的edit() function 当前的简化示例：

edit: ( props ) => {
    const blockProps = useBlockProps( { className: 'custom-cta p-0 mb-0' } );
    const { attributes: { blurb }, setAttributes, className, isSelected } = props;

    return (
      <div { ...blockProps }>
          <RichText
              tagName="div"
              multiline="p"
              className="custom-cta__blurb w-100"
              translate-name="blurb"
              onChange={ value => setAttributes( { blurb: value } ) }
              placeholder={ __( 'Subtext goes here (optional)', 'hello-tools' ) }
              value={ blurb }
              allowedFormats={ [ 'core/bold', 'core/italic' ] }
              focusOnInsert={ false }
              />
        </div>
    );
}

Answer 1

这可能与您要查找的内容相当接近。 尝试一下 - 您可能需要添加更多属性/设置，可能还需要添加 CSS 才能获得您正在寻找的确切结果。 这将无法替换您当前的块 - 所以我的意思是，它不向后兼容，因为它是一个全新的块。

/**
 * @see ./edit.js
 */
    edit: () => {
        // define which blocks to show when the block gets inserted
        const TEMPLATE = [['core/paragraph']];
        // define what blocks are allowed to be used
        let allowedBlocks = ['core/paragraph'];

        const blockProps = useBlockProps({className: 'my-custom-class'});

        return (
            <div {...blockProps}>
                   <div className={'custom-cta__blurb w-100'}>
                        <InnerBlocks
                            allowedBlocks={allowedBlocks}
                            template={TEMPLATE}
                            // false will let the user add and move the blocks
                            templateLock={false}
                        />
                   </div>
            </div>
        )
    }
    ```

Answer 2

我无法参与上述解决方案的讨论，但我相信 Frizzant 是错误的。 Wordpress 在其 GitHub 的列表项块中包含了一个解决方案，但我不明白如何实现它。