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

【问题标题】：How to convert a custom block with a RichText multiline element to use innerBlocks in Gutenberg instead?如何将带有 RichText 多行元素的自定义块转换为使用 Gutenberg 中的 innerBlocks？
【发布时间】：2023-02-01 09:12:05
【问题描述】：

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

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

我不确定我将如何将当前使用 <RichText> 和多行属性的自定义静态 Gutenberg 块转换为 <div> 和 <InnerBlocks /> 仍然尊重我构建的原始功能。这是 edit() 函数当前在块中的样子的简化示例：
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>
    );
}

【问题讨论】：

标签： javascript wordpress wordpress-gutenberg gutenberg-blocks

【解决方案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>
        )
    }
    ```

【讨论】：

感谢@frizzant，是否有办法通过已弃用对象内的 migrate() 函数使其向后兼容？
由于它是一个单独的块，我认为这是不可能的。
我想我真正要问的是为什么它必须是一个单独的块？为什么不改造现有的？
@Kory 这纯粹是因为您已经拥有的富文本内容无法转换为内部块。所以你会失去那个内容。所以如果你不想失去它，我会创建一个单独的块。如果没关系，您可以选择其中一个选项。
谢谢回复。好吧，这肯定是一个痛苦，因为 Wordpress 团队会迫使开发人员/用户继续使用 <RichText> 组件，而不提供合适的迁移方式而不丢失内容和向后兼容。

【解决方案2】：

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

【讨论】：