我如何正确弃用古腾堡块
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中有两个问题:
属性不匹配(而this
实际上是window
对象):attributes: {...this.attributes}
(见第212行)
所以你在第 24 行与 attributes
属性 一起使用的内容也应该与第 212 行的 属性 一起使用。(因为你只更改了输出,所以块属性保持不变)
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
的 属性。
我有一个自定义古腾堡块 (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中有两个问题:
属性不匹配(而
this
实际上是window
对象):attributes: {...this.attributes}
(见第212行)所以你在第 24 行与
attributes
属性 一起使用的内容也应该与第 212 行的 属性 一起使用。(因为你只更改了输出,所以块属性保持不变)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
的 属性。