使用InnerBlocks和post-meta设置多块插件

WordPress一直以来都具有难以置信的灵活性和可定制性。块和站点编辑器正在扩展我们创建自定义体验的能力，而创建自定义块的能力只会增强这种能力。

目前创建块实用程序只允许一次创建一个块，不提供多块设置的选项。例如，如果您想创建两个或多个相关的块，尤其是其中一个自定义块将使用另一个来管理用户体验的块，该怎么办？如果您打算使用post-meta为用户提供额外的上下文，该怎么办？这些是常见的用例，也是WordPress一直擅长的领域。 

下面，您将学习如何使用创建块实用程序。

让我们通过设置使用评级系统查看帖子或自定义帖子类型（CPT）的功能来保持这一点，并将其包含在可在查询循环中使用的另一个自定义块中。当创作者发布评论（书籍、电影、产品）并需要评级系统来显示他们的帖子时，这可以用于您的内容。最终结果应如下所示：

具体来说，您将构建：

1. 带有三个特定内部块的审查卡块：
   1. 标题(核心/职务)
   2. 评级块（我们也会制作）
   3. 摘录(核心/后摘录)
2. 评级块将：
   1. 对帖子（或CPT）进行评级，从一颗星到五星或红心
   2. 使用帖子元存储评分
   3. 使用Post Query块中的块显示每个帖子的评级。

您需要设置一个本地环境和一个带有已安装NodeJS以运行命令。如果尚未设置本地环境，可以使用wp-现在,本地WP，或列出的其他选项在这里那会符合你的需要。

如果您想遵循完成的代码，可以在这个Github回购并将根据需要进行更新；欢迎公关！

设置多块插件

让我们从建立项目结构开始。在您的终端中，cd到您的wp-content/插件目录。如果您正在使用wp-现在你可以在任何你喜欢的目录下工作。

脚手架插件文件

运行npx@wordpress/create-block@最新事后审查块。这将在名为审查后区块。进入该目录并在您选择的代码编辑器中打开它。你应该看到事后审查-blocks.php文件。打开它，您的代码应该如下所示（没有默认注释）：

/***插件名称：Post Review Blocks*描述：使用“创建块”工具构建的块示例。*要求至少：6.1*需要PHP:7.0*版本：0.1.0*作者：WordPress贡献者*许可证：GPL-2.0或激光*许可证URI:https://www.gnu.org/licenses/gpl-2.0.html*文本域：审阅后块**@包CreateBlock*/if（！defined（'ABSPATH'））{退出；//如果直接访问，则退出。}函数create_block_post_review_blocks_block_init（）{寄存器块类型（__DIR__.'/内部版本）；}add_action（'init'，'create_block_post_review_blocks_block_init'）；

插件本身应该具有如下文件结构：

-建造/-型钢混凝土/-.editorconfig（编辑配置）-.gitignore（.git忽略）-.package-lock.json文件-.package.json文件-事后审查-blocks.php-自述.md

你将在事后审查-blocks.php文件和型钢混凝土本教程的目录，以及建造目录将自动生成。

用脚手架固定砌块

接下来，删除型钢混凝土目录，以便型钢混凝土为空，并且光盘进入型钢混凝土如果你还不在那里。

运行以下两个命令：

npx@wordpress/create-block@最新审查卡块--无插件npx@wordpress/create-block@最新额定块--无插件--变量动态

这将创建我们的多块设置所需的两个自定义块。请注意--无凝集素两个命令。该标志表示这只是创建块文件，而不是所需的所有插件文件。此外，您可以看到额定块将是一个“动态”块，使用PHP渲染。为什么？这使您可以同时练习静态和动态块.

现在，我们有两个街区型钢混凝土文件夹：

• 额定块
• 审查卡块

你可以处理更多的事情：

• 进入块.json的文件额定块并更改“偶像“属性来自”笑脸“至”星形填充的”.
• 在这两个块.json文件，添加“关键字“属性“keywords”：[“rating”，“review”]。用户在搜索时会发现新块更容易。  
• 在事后审查-blocks.php文件，更新创建块_发布_查看_块_块_输入注册两个块，如下所示：

函数create_block_post_review_blocks_block_init（）{寄存器块类型（__DIR__.'/build/rating-block'）；寄存器块类型（__DIR__.'/build/review-card-block'）；}add_action（'init'，'create_block_post_review_blocks_block_init'）；

构建块并激活插件

现在，从根本上事后审查块插件（“根”与package.json包文件），运行npm启动，这些块应该构建到它们自己的子目录中建造。您可以在本教程的其余部分继续运行此脚本。或者，如果您想运行其他命令，或者当您对以下文件进行更改时，您可以停止并重新启动它块.json。脚本需要运行才能在编辑器中显示任何更改。

构建成功后，在WordPress仪表板中或通过WP-CLI激活插件wp插件激活postreview-blocks.

此时，您可以通过创建新帖子并通过键入我们使用的关键字之一检查块的插入器来检查块是否正在注册：

成功！🎉

现在您知道了如何设置多块插件的结构。您可以将新块添加到型钢混凝土文件夹创建块并在建造目录。

现在是时候添加post元功能、分配内部块并限制块的使用位置了。

注册post meta

打开事后审查-blocks.php然后在创建块_发布_查看_块_块_输入功能：

//添加一些帖子元数据函数寄存器_review_rating_post_meta（）{$post_meta=数组(“_rating”=>数组（“type”=>“integer”），“_ratingStyle”=>数组（“type”=>“string”），);foreach（$post_meta作为$meta_key=>$args）{注册表_成本_元数据('帖子'，$meta_key，阵列(“show_in_rest”=>真，“single”=>真，“type”=>$args['type']，“auth_callback”=>函数（）{return current_user_can（'edit_posts'）；}));}}add_action（'init'，'register_review_rating_post_meta'）；

此函数注册您需要的两个后置元键：

• _额定值
• _评分方式

这些需要注册。否则，当您更新我们的评级块时，数据将不会保存。您还会注意到这两个元键的前缀带有下划线：_。这“保护”元不会在帖子的自定义字段部分中使用，也不会被该元框中的值覆盖。

最后，请注意显示_重置设置为true，并且授权回调检查以确保用户至少有编辑_文章特权。如果元数据没有显示在WordPress REST API中，则无法在块编辑器中进行编辑。 

构建评级块

评级栏允许用户根据1到5的等级对帖子进行评级，并在显示星形表情符号之间进行选择(⭐) 或者一个心形表情符号(❤️). 您可以将这些表情符号复制到代码中。通过此功能，该块实现了两个目标：

1. 演示如何保存和从post meta中提取
2. 允许在查询循环发布模板中使用发布元数据

有许多应用程序用于CPT的此类功能，包括：

• 员工目录电子邮件或位置元
• 图书目录额定值或国际标准图书编号元
• 配方索引美味或准备时间（_T）元

可能性有很多！

好的，本节中的所有编辑都将在src/额定块目录。

添加基本CSS

以下CSS用于样式.scss文件。打开该文件，删除其中的任何CSS，然后粘贴以下内容，这将在块周围添加填充，并确保星形为黄色，而心形为红色。

.wp块创建块评级块{填充：1rem 0；}.wp-block-create-block-rating-block跨度额定星{颜色：黄色；}.wp-block-create-block-rating-block跨度.rating-heart{颜色：红色；}

根据您的喜好调整这些选项并保存文件。

将属性和usesContext添加到block.json文件

打开块.json并添加以下属性：

“usesContext”：[“postId”，“postType”]，“属性”：{“评级”：{“type”：“integer”，“默认”：5},“评级风格”：{“type”：“字符串”，“default”：“star”}},“示例”：{“属性”：{“评级”：4，“ratingStyle”：“明星”}}

上面的JSON执行以下操作：

• 使用上下文：允许我们获取帖子的ID和类型的值
• 属性：标识要保存在块上的属性
• 例子：预览块在添加时的外观

单击此处查看最终结果块.json文件。

更新edit.js文件

有很多事情要处理。您可以将其分为三个部分：

• 导入和分配
• 检索和存储post meta的功能
• 带有编辑器侧栏中组件的Return方法
   

可以找到完整文件在GitHub上.

删除文件中当前的内容。然后，在编辑.js文件，添加以下内容：

从“@wordpress/i18n”导入｛__｝；从“@wordpress/element”导入{useEffect}；从“@wordpress/block-editor”导入{useBlockProps、InspectorControls}；从“@wordpress/components”导入{PanelBody、RangeControl、SelectControl}；从“@wordpress/core-data”导入{useEntityProp}；导入“./editor.scss”；

本节设置我们的导入：

• __是我们的国际化方法
• 使用效果允许您更新元数据
• 使用块属性提供了要使用的块特性
• 检查员控制允许您将控件添加到Inspector侧栏
• 面板主体,RangeControl（范围控制）、和选择控制是为块属性设置用户控件的所有组件
• 使用实体属性提供对post元的访问
• 最后，导入SCSS文件

接下来，添加以下内容：

导出默认函数Edit（{属性：{rating，ratingStyle}，集合属性，上下文：｛postType，postId｝，} ) {const[meta，updateMeta]=使用实体属性(“postType”，职位类型，“元”，postId，);//在此处添加功能代码//在此处添加return（）方法//其他代码将放在这里，不要忘记或删除右花括号！}

这是编辑方法，它控制块编辑器中显示的内容。首先，您传入并分配以下内容：

• 额定值和评级风格传入并分配给属性状态对象
• 集合属性是用于属性状态对象得到更新
• postType（后类型）和postId与上下文一起从使用上下文您在上面定义的

接下来，您将看到元和updateMeta（更新元数据）方法正在从使用实体属性方法，即块用于获取或更改元值.

好的，到目前为止还好吗？现在是功能！ 

代替“在此处添加功能代码”注释，添加以下方法：

使用效果（（）=>{const initStyle=元_评级风格？元_评级风格：“星型”；集合属性({评级：meta_评级||0，评级样式：initStyle，});}, []);const onChangeRating=（val）=>{更新Meta({…元，_额定值：val，});集合属性({额定值：val});};const onChangeRatingStyle=（val）=>{updateMeta（更新元数据）({…元，_评级风格：val，});集合属性({评级风格：val});};const getRatingEmojis=（）=>{让ratingEmojis=“”；for（设i=0；i<额定值；i++）{ratingEmojis+=ratingStyle===“明星”？"⭐" : "❤️";}回报率Emojis；};

这些方法的作用是什么

• 使用效果负载运行（假设第二个参数为[])并检查存储的post meta中的值并为其赋值额定值和评级风格，默认为星号(⭐)
• 更改额定值将在检查器中更改评级值时更新评级值
• 更改分级样式对评级风格
• 获取分级表情是一个循环，用于返回分级的正确星星或红心的数量和样式。

最后，添加以下内容代替注释“add return（）method here”：

返回(<><检验员控制><PanelBody title={__（“评级”，“多块插件”）}><范围控制label={__（“分级”，“多块插件”）}值={rating}onChange={onChangeRating}最小值=｛1｝最大值={5}/><选择控制label={__（“分级样式”，“多块插件”）}onChange={onChangeRatingStyle}value=｛ratingStyle｝选项={[{标签：__（“Star”，“multiblock-plugin”），值：“star”，},{标签：__（“心脏”，“多块plugin”），值：“心”，},] }/></PanelBody></InspectorControls><div{…useBlockProps（）}><p><strong>评分：</strong>{“”}<span className=｛`rating-${ratingStyle｝`｝>｛getRatingEmoji（）｝</span></p></div></>);

这里的返回函数有两个主要部分：检查员控制以及编辑器块的实际输出。

在检查员控制，我们创建一个面板主体包含RangeControl（范围控制）和a选择控制. TheRangeControl（范围控制）确定给职位或CPT的评级的1到5。这个选择控制决定是显示明星表情还是心形表情。

决赛分区是显示标签“Rating:”的输出，然后输入正确的样式和星号或红心数。

保存此内容并将块添加到帖子后，您应该会看到以下内容：

如果滑动范围滑块或在心形和星形之间切换，您应该会看到星形或心形实时更新。

有关添加和使用post meta的更多信息，请查看这个很棒的教程.

更新render.php文件

由于您将此块创建为动态块，因此需要实现如何在前端显示评级。您可以在中删除代码渲染.php文件并添加以下内容：

<?php（电话）全球$post；$ratingEmojis=''；//从帖子元数据获取评级和评级样式$rating=get_post_meta（get_the_ID（），'_rating'，true）；$ratingStyle=get_post_meta（get_the_ID（），'_ratingStle'，true）；//如果未设置分级样式，则默认为星形if（！$ratingStyle）{$ratingStyle='star'；}//生成分级表情。对于（$i=0；$i<$rating；$i++）{$rating表情符号=$ratingStyle===“星型”？”⭐️' : '❤️';}?><p<？php echo get_block_wrapper_attributes（）；？>><?php echo wp_kses_post（'<strong>评级：</strong><span class=“Rating-'.$ratingStyle.'”>'.$ratingEmojis.'</span>'，'multiblock-plugin'）；？></p>

这里需要注意几点：

• 这是在帖子的上下文中出现的，因此我们可以使用获取ID（）
• 块使用类和其他属性包装获取块包装属性（）

这意味着您现在在前端也有一个功能性评级块：

好极了！ 

如果你想检查你的工作，你可以看到最后的文件在GitHub上否则，是时候在我们的多块设置中继续下一个块了。

构建审查卡块

这个块将涉及更少的代码，更多的是关于配置的。我们想用这个块做一些事情：

• 将特定块指定为评审卡的“内部块”
• 仅允许评审卡中的某些区块
• 限制此卡的使用位置，即作为Query Loop块中的post模板

此块不需要样式，因此删除.scss文件文件或样式。

本节中的所有代码都将在src/review卡块目录。

更新block.json文件

首先需要在block.json文件打开它并添加以下内容：

“父级”：[“核心/后模板”]，“允许的块”：[“核心/职务”，“创建块/分级块”，“核心/文章摘要”]

首先，添加一个父块属性，指示Review Card只能在核心/后模板块。其次，复习卡块本身只允许使用三个块。您将在下面看到这一点。

如果需要，请将此处的设置与Github回购.

edit.js中的InnerBlocks

在编辑.js文件中，将所有代码替换为以下内容：

从“@wordpress/i18n”导入{__}；从“@wordpress/block-editor”导入{InnerBlocks，使用BlockProps}；导入“./editor.scss”；常量REVIEW_TEMPLATE=[[“核心/文章标题”，{isLink:true，占位符：“文章标题”}]，[“创建块/评级块”，{}]，[“核心/后摘录”，{占位符：“姿势内容…”}]，];导出默认函数Edit（）{return<InnerBlocks template={REVIEW_template}templateLock=“all”/>；}

此文件中的主要区别是您正在导入内部块并将块模板作为内部块分配给审查卡块。

接下来，审查_模板是数组的数组，第一个索引是要使用的块，第二个索引是具有要传递的任何配置的对象。例如，您可以看到核心/职务块采用两种默认值：

• isLink（isLink）设置为真的，这意味着标题是可以点击的，它会带你进入帖子
• 占位符如果，出于某种原因，没有标题

然后，你可以看到内部块组件用于编辑函数，传入审查_模板并锁定块。这只是向您展示如果情况需要，如何锁定模板中的块，但这不是必需的。

编辑save.js文件

自从事后审查块是一个静态块，您需要编辑保存.js文件以允许将块保存到数据库。打开该文件，删除内容，然后添加以下内容：

从“@wordpress/block-editor”导入{InnerBlocks，使用BlockProps}；导出默认函数save（{attributes}）{返回(<div{…useBlockProps.save（）}><内部块。内容/></div>);}

在这种情况下，由于内部块设置和使用，只需传入内部块。内容。保存文件后，返回块编辑器。

测试块

如果你还没有，使用新的评级块为每个帖子创建两到三个不同评级的帖子。发布这些帖子。

然后，在仪表板中打开一个新页面并为该页面添加标题。“帖子评论…”是下面截图中的内容。接下来，添加Query Loop块。选择开始空白然后选择一个选项，如标题和日期. 

打开列表视图，您应该会看到如下内容：

现在：

• 点击帖子模板中的标题栏，使其高亮显示
• 然后单击插入器（蓝色的“+”按钮）并搜索查看卡块
• 一旦您在列表中看到它，单击它并返回到列表视图，在那里您应该可以看到评审卡块

保存或出版页面。 

您会注意到块编辑器中没有显示评级。这是因为Rating块是用PHP呈现的，并且是动态构建的，因此需要刷新。刷新页面时，您应该会看到不同帖子的不同评论：

令人惊叹的！

需要注意的一点是，如果您打开列表视图，您将看到Review Card块内部块上的锁。这些是早些时候设置的templateLock=“全部”并且不能四处移动或删除。

类似地，如果您尝试将“审阅卡”块移出“过账模板”块，您会发现这也是不允许的，因为该块要求其父块是“过账样板”块。

杰出的！你现在有了一个使用post-meta的多块插件，内部块和明确了InnerBlocks中允许哪些块。干得好！

还有一件事要做，你应该开始阻止定制的喜悦。

限制额定值块的使用

您可能已经在考虑这个问题，但当前的评级块设置应该仅限于在帖子或其他CPT上使用。为此，打开事后审查-blocks.php再次添加以下内容：

函数limit_rating_block_to_post_type（$allowed_block-types，$editor_context）{//在帖子编辑器中只允许使用段落、标题、列表和分级块。if（'post'===$editor_context->post->post_type）{返回数组(“核心/段落”，'核心/标题'，'核心/列表'，'创建块/评级块');}返回$allowed_block_types；}添加过滤器（'allowed_block_types_all'，'limit_rating_block_to_post_type'，10，2）；

使用此过滤器，可以指定何时何地可以插入额定值块。在这种情况下，代码给出了一个示例，即只有段落、标题、列表和评级块可以在帖子中使用。如果你打开一篇新文章并点击蓝色+插入器或键入“/”以插入块，您将看到选项现在非常有限：

这是需要考虑的问题，尤其是对于CPT，在CPT中，您可能只希望将有限数量的核心块或自定义块显示为用户的选项。

结束

构建多个自定义块时需要考虑很多因素。希望本教程有助于组织一些方法，并为您提供了一个多块蓝图，以便继续使用您自己的自定义。

这是包含代码的存储库如果你想克隆它或根据你的需要将其分叉。

祝你好运，玩得开心！

了解更多信息的资源

这些是用于开发本教程的一些有用资源。探索以下内容以加深您的区块知识：

• @wordpress/创建块 
• 核心块参考
• block.json中的元数据 
• 嵌套块：使用内部块
• 创建存储post meta的自定义块

道具@前列腺增生,@马蒂内兹杜克,@恩迪戈、和@韦尔奇为了校对和所有有用的建议！