我如何正确弃用古腾堡块

How do I properly deprecate Gutenberg block

我有一个自定义古腾堡块 (https://pastebin.com/bV2k5Ekc),我在其中显示文本、link 和图像。我想改变它,而不是将图像 URL 保存为容器的背景图像,而是使用 img 标签。不幸的是 - 我无法正确创建弃用 - 我无法在弃用中分配属性参数:

来自这里:

    const {
      attributes: {
        mediaURL,
        boxTitle,
        boxDescription,
        linkText,
        linkHref,
        linkTitle
      },
      className,
    } = props;

    let boxClass = 'cta-box';
    let contentDescription = '';

    if (boxDescription.length) {
      boxClass += ' cta-box-description';
      contentDescription = (
        <p>
          {boxDescription}
        </p>
      )
    }

    return (
      <div className={`cta-block-box ${className}`}>
        <a
          className="cta-box-link"
          href={linkHref}
          style={{ backgroundImage: "url(" + mediaURL + ")" }}
          rel="noopener noreferrer"
        >
          <div className={boxClass}>
            <h3>
              {boxTitle}
            </h3>
            {contentDescription}
            <span className="arrow">{linkText ? linkText : linkTitle}</span>
          </div>
        </a>
      </div>
    );
  },

为此(我只更改了 return 语句中的内容):

return (
      <div className={`cta-block-box ${className}`}>
        <a
          className="cta-box-link"
          rel="noopener noreferrer"
        >
          <img className="cta-box-image" src={linkHref} alt=""/>
          <div className={boxClass}>
            <h3>
              {boxTitle}
            </h3>
            {contentDescription}
            <span className="arrow">{linkText ? linkText : linkTitle}</span>
          </div>
        </a>
      </div>
    );

这当然打破了古腾堡元素。所以我在博客中添加了一个弃用,尽可能多地遵循官方 Wordpress 文档:

deprecated: [
    {
      attributes: {...this.attributes},
      save: (props) => {
        const {
          attributes: {
            mediaURL,
            boxTitle,
            boxDescription,
            linkText,
            linkHref,
            linkTitle
          },
          className,
        } = props;
        console.log('dep');
        console.log(props);

        let boxClass = 'cta-box';
        let contentDescription = '';

        if (boxDescription.length) {
          boxClass += ' cta-box-description';
          contentDescription = (
            <p>
              {boxDescription}
            </p>
          )
        }

        return (
          <div className={`cta-block-box ${className}`}>
            <a
              className="cta-box-link"
              style={{ backgroundImage: "url(" + mediaURL + ")" }}
              rel="noopener noreferrer"
            >
              <div className={boxClass}>
                <h3>
                  {boxTitle}
                </h3>
                {contentDescription}
                <span className="arrow">{linkText ? linkText : linkTitle}</span>
              </div>
            </a>
          </div>
        );
      },
    }
  ],

此后编辑器页面崩溃,我在控制台中收到错误消息,未定义属性(在脚本文件中显示不正确的行)。这是“之后”的脚本内容 (https://pastebin.com/dVdLMx7N)。

react-dom.min.js?ver=16.13.1:125 ReferenceError: attributes is not defined
    at save (cta-box2.js?f66a:242)
    at Wt (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3)
    at Qt (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3)
    at block-editor.min.js?ver=4378547cec8f5157a02ead3dfc5c65b2:12
    at hooks.min.js?ver=50e23bed88bcb9e6e14023e9961698c1:2
    at $r (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3)
    at blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3
    at Ur (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3)
    at blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3
    at Array.reduce (<anonymous>)

如有任何帮助,我们将不胜感激!我怀疑我遗漏了一些小细节,但到目前为止我还没有找到它。并且无法在网络上找到足够的相关信息。

提前致谢!

your "after" script中有两个问题:

  1. 属性不匹配(而this实际上是window对象):attributes: {...this.attributes}(见第212行)

    所以你在第 24 行与 attributes 属性 一起使用的内容也应该与第 212 行的 属性 一起使用。(因为你只更改了输出,所以块属性保持不变)

  2. save output/markup 也不匹配 — 在“之前”脚本中,您有 href={linkHref},但在 deprecated 属性 的“之后”脚本,save 输出没有那个 href(see this diff)

因此请确保属性和 save 输出与旧/“之前”脚本中的匹配,以下是您的代码的样子,但请注意,我只包括了主要部分需要修复:

// Define the attributes and use it with the root "attributes" property and
// the one in the "deprecated" property.
const blockAttributes = {
  mediaID: {
    type: 'number'
  },
  mediaURL: {
    type: 'string'
  },
  boxTitle: {
    type: 'string',
    default: ''
  },
  // ... the rest of the attributes here.
};

registerBlockType('hswp/test-box', {
  title: __('Test Box', 'modula'),
  // ... your code.
  attributes: blockAttributes,
  // ... your code.
  deprecated: [
    {
      attributes: blockAttributes,
      save: (props) => {
        // ... your code.

        return (
          <div className={`cta-block-box ${className}`}>
            <a
              className="cta-box-link"
              href={linkHref}
              style={{ backgroundImage: "url(" + mediaURL + ")" }}
              rel="noopener noreferrer"
            >
              ... your code.
            </a>
          </div>
        );
      },
    }
  ],
});

此外,请注意 PlainText component 没有(截至撰写时)名为 tagName 的 属性。