创建自定义古腾堡块——第 4 部分:属性

2022/12/24
创建自定义古腾堡块——第 4 部分:属性

在这一部分中,我们将了解如何定义属性、获取它们的值并更新它们。使用属性,我们可以接受来自编辑器的输入,保存并输出我们选择的内容。在上一步中,我们查看了 WordPress 组件、在哪里可以找到它们以及如何实现它们。在这篇文章中,我们将添加道具以连接到属性——保存的数据。

定义属性

attributes属性作为数组中的对象添加到registerBlockType(). 每个属性的键是属性名称,您必须type至少有属性。

type属性可以是以下任何一种;nullbooleanobjectarraynumber,stringinteger

您可以选择提供属性default来定义属性的起始值。如果您不提供默认值,该属性将默认为null.

另一个特性属性是sourceselector属性一起工作的,但这些是我们将在下面进一步详细介绍的挑剔的东西。

例如定义两个属性;exampleText作为字符串和postIds数组,看起来像这样:

const { registerBlockType } = wp.blocks;
registerBlockType(‘awp/firstblock’, {
title: ‘My first block’,
category: ‘common’,
attributes: {
exampleText: {
type: ‘string’,
default: ”
},
postIds: {
type: ‘array’
default: []
}
},
edit: (props) => {

您需要为块保存的任何内容(来自用户/编辑器的输入)都需要一个属性。由您决定如何构建数据,为每个数据定义单独的属性,或者将它们全部集中在一个对象中。这只是您如何获取他们的数据以及如何更新它们的不同之处。

获取属性值

属性可用作块editsave函数的道具。如果您从上一步开始关注本系列,请记住我们更新了函数以将 props 作为参数传递。

从 props 中解构属性是很常见的,因为你通常会经常引用它们。例如输出一个名为的属性exampleText看起来像这样:

edit: (props) => {
const { attributes } = props;
return <div>{attributes.exampleText}</div>
},

更新属性值

为了更新属性,我们在 props 中有一个可用的方法,称为setAttributes(). 此函数接受一个对象,您可以在其中添加您希望更新的任何属性。您可以一次只更新一个属性、多个属性或全部。如果您定义了多个属性并调用setAttributes()以仅更新其中一个,则不会触及其他属性。

如果您有使用 React 的经验,您可能会立即认识到setAttributes()和 之间的相似之处setState()。它们的工作方式完全一样,但不同的是 React 中的状态只是存储在组件本地的东西,而属性实际上是作为数据保存在组件外部的。

为了更新一个属性,你通常会从 props 中析构函数,并像这样调用它: 下面我们exampleText将属性更新为“Hi”。

const { setAttributes } = props;
setAttributes({ exampleText: ‘Hi’ });

自然地,您会setAttributes()在某些操作中运行 from。一个常见的例子是在用于存储属性onChange值的某种输入字段的 prop内。exampleText

确保以您在属性上定义的类型保存属性。例如,尝试将对象保存到字符串属性中时,您不会有任何运气。

让我们在实践中尝试一下!如果npm run start您还没有开始,请开始。

在自定义文本输入中显示属性并更新属性值

在上一步中,我们向 中添加了一些组件edit,例如文本输入,但没有存储任何内容。让我们在块中为其添加一个属性和一个文本输入。我们都将确保文本输入显示当前值,并且每当输入更改时我们都会更新属性。

添加文本输入及其onChange prop

const { registerBlockType } = wp.blocks;
const { TextControl } = wp.components;

registerBlockType(‘awp/firstblock’, {
title: ‘My first block’,
category: ‘common’,
attributes: {
exampleText: {
type: ‘string’,
default: ”
}
},
edit: (props) => {
const { attributes, setAttributes } = props;
return (
<div>
<TextControl
value={attributes.exampleText}
onChange={(newtext) => setAttributes({ exampleText: newtext })}
/>
</div>
);
},
save: () => {
return <div>:)</div>
}
});

我们解构attributessetAttributesfromprops因为我们将同时使用它们。然后我们使用TextControlWordPresswp.components包中的一个组件。我们向它传递两个道具;value将设置输入的值(包括初始值和我们输入时的值)以及对输入事件的操作onChange

value我们将它设置为我们属性的值;attributes.exampleText. 如果onChange我们运行一个函数,将输入的类型值作为参数传递newtext(输入值是从组件返回的 prop)。在该函数中,我们调用setAttributes()属性并将其更新exampleText为输入中键入的内容。

这是基本的 React——除了我们使用属性而不是状态这一事实。如果上面的内容让你感到困惑,我建议你看一下 React 的快速教程,因为这些可能会比我更好地解释这种方式!

刷新你的编辑器,看看这个块是如何工作的!你应该得到一个标准的文本输入来输入东西,只要你在后期编辑中点击保存/更新,它就会被保存。

结果在前端和数据库中

如果你在前端查看你的帖子,它应该仍然回显一个带有“:)”的div,因为这是我们的save功能中仍然有的。但是幕后发生了一些事情!我们块的注释块现在包含 JSON 格式的属性值。

您无法在执行正常the_content()调用的模板中看到注释块。要查看评论块,您有两种选择。要么看看post_contentposts 数据库表中的。或者添加echo get_the_content()模板并在检查/调试工具中查看它。

save显然,我们也可以从 props访问属性。

显示输入的值save

让我们在save函数中的 div 中显示属性的值:

save: (props) => {
const { attributes } = props;
return <div>{attributes.exampleText}</div>
}

注意:进行此更改后,您将在已添加此块的帖子中看到一个损坏的块。发生这种情况是因为编辑器遇到了与save我们现在定义的不同的输出。删除块并重新添加它。在您的文本输入中输入内容,更新帖子,然后在前端查看。

这实际上是它的要点。您决定在块中保存所需内容所需的属性。edit您将为用户呈现输入方式,注意显示当前值并在它们发生变化时更新它们。然后,save您提取保存的属性并根据需要呈现输出。

在本教程系列中,我们将接触更多不同的组件和属性。但是让我们看看这篇文章中的另一个组件,以了解属性特性source的全部内容。

RichText 和 attribute 属性source

WordPress 的RichText组件为您提供了一个“无边界”的文本区域,支持文本格式。您可能更喜欢使用它而不是(丑陋的?)标准文本输入或文本区域。但是请记住,RichText必须以不同的方式处理,因为您需要注意几个道具,并且我们在save函数中获取值的方式也有所不同。

添加RichText组件

最简单的形式RichText是像使用文本输入一样实现它:

const { registerBlockType } = wp.blocks;
const { RichText } = wp.blockEditor;

registerBlockType(‘awp/firstblock’, {

attributes: {
myRichText: {
type: ‘string’,
default: ”
}
},
edit: (props) => {
const { attributes, setAttributes } = props;
return (
<div>
<RichText
value={attributes.myRichText}
onChange={(newtext) => setAttributes({ myRichText: newtext })}
/>
</div>
);
},

RichText我们从包中解构组件wp.blockEditor,但除此之外,上面的内容与我们对标准文本输入所做的相同。

处理save_RichText

但是在save函数中你需要RichText再次使用组件来获取属性的值。我们调用RichText.Content并将 prop 设置value为我们的属性:

save: (props) => {
const { attributes } = props;
return (
<div>
<RichText.Content
value={attributes.myRichText}
/>
</div>
);
}

这将直接输出在 in 编辑器中键入的任何内容,RichText而不会包含任何 HTML。

当您使用时,您很可能希望在前端和编辑器RichText中控制文本周围的 HTML 包装器,例如 a<p>或 a 。<h2>为此,我们可以使用一个名为tagName.

该组件RichText还允许其他几个道具。您可以定义一个占位符文本,当它与placeholderprop 为空时显示(淡化)。该组件还允许您控制该字段允许哪些格式选项(它在工具栏中显示哪些按钮)。

RichTexttagName

使用 proptagName你可以预定义它的输出被包装在哪个 HTML 标签中。当你使用时,你应该在和中tagName使用相同的tagNameprop 和值。editsave

假设您想将属性值放入 a<h2>中,这将在编辑器中强制任何输入为 h2。在edit你可以做:

<RichText
tagName=”h2″
placeholder=”Write your heading here”
value={attributes.myRichText}
onChange={(newtext) => setAttributes({ myRichText: newtext })}
/>

并在Save中:

<RichText.Content
tagName=”h2″
value={attributes.myRichText}
/>

上面的代码现在将输出RichText内区域中输入的任何内容在<h2>标签中。

使用source

显然,您可以为一个块组合多个富文本,例如一个用于标题,一个用于段落。请记住,每个人都需要自己的属性。例如:

attributes: {
myRichHeading: {
type: ‘string’
},
myRichText: {
type: ‘string’
}
},
edit: (props) => {
const { attributes, setAttributes } = props;
return (
<div>
<RichText
tagName=”h2″
placeholder=”Write your heading here”
value={attributes.myRichHeading}
onChange={(newtext) => setAttributes({ myRichHeading: newtext })}
/>
<RichText
tagName=”p”
placeholder=”Write your paragraph here”
value={attributes.myRichText}
onChange={(newtext) => setAttributes({ myRichText: newtext })}
/>
</div>
);
},
save: (props) => {
const { attributes } = props;
return (
<div>
<RichText.Content
tagName=”h2″
value={attributes.myRichHeading}
/>
<RichText.Content
tagName=”p”
value={attributes.myRichText}
/>
</div>
);
}

但是,您现在将开始遇到一些问题。即使您可以在编辑器中进行文本格式设置,也不会保存任何(或部分)格式设置。当您在前端查看帖子时,它只会以h2和 的形式出现p,没有您设置的任何格式(斜体、粗体、链接)。甚至您的块的注释块也不包含格式。这是棘手的事情RichText。为了解决这个问题,我们需要使用属性 property source

source属性允许 WordPress 直接从帖子内容中提取和解释内容。如果一个属性没有source设置,它将被保存在 HTML 注释块中并从中提取。

使用时RichText我们通常设置sourcehtml,它使用 WordPress 的库来解析 HTML 标记。该属性source与另一个属性一起工作;selector它定义了它应该从哪个 HTML 标签中提取。

例如,我们在 paragraph 上设置source为as (否则它默认为块的根)。htmlRichTextselectorp

attributes: {

myRichText: {
type: ‘string’,
source: ‘html’,
selector: ‘p’
}
},

现在我们的第二个RichText应该成功保存所有文本格式。您还会注意到评论块现在只显示myRichHeadingJSON 中的属性。该属性myRichText已从评论块中完全消失。这是因为sourceWordPress 现在解析帖子内容而不是属性值的评论块。

老实说,我根本没有使用过该source属性,如果可以的话,我会建议避免使用它。WordPress 的文档更多地解释了您想要自己查看的来源和属性。

在这篇文章中,我们学习了属性的基础知识;如何定义它们、更新它们以及输出它们的值。在接下来的步骤中,我们将了解更多不同的组件以及如何在块内容本身之外添加设置;在工具栏和编辑器侧边栏(称为 Inspector)中。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注