Query Loop块是一个功能强大的工具，它允许用户循环浏览一个确定的帖子列表，并显示一组特定的块，这些块将继承列表中每个帖子的上下文。例如，可以将其设置为循环浏览某一类别的所有帖子，并为每个帖子显示其特色图像。当然，还有更多！
但正是因为Query Loop块功能强大，可以进行大量定制，所以它也可能令人望而却步。大多数用户不想看到Query Loop块的全部功能，因为大多数用户不熟悉“查询”的概念及其相关的技术术语。相反，大多数用户可能会喜欢块的预设版本，需要调整的设置更少，命名更清晰。默认情况下提供的Post List变体就是一个很好的例子：用户将使用Query Loop块，而不会暴露其技术性，也更有可能发现和理解块的用途。
以同样的方式，许多扩展器可能需要一种方式来呈现块的定制版本，具有自己的预设、附加设置，并且没有与其用途无关的自定义选项（例如，通常是自定义帖子类型）。Query Loop块提供了创建此类变体的强大方法。
通过使用某些特定的Query Loop块设置注册您自己的块变体，您可以更好地控制它的显示方式，同时仍然能够使用Query Lood块下面提供的全部功能。如果您不熟悉块变体，请了解有关它们的更多信息在这里.
使用块变体API，您可以提供最适合您使用的默认设置。
为了让Query Loop变体正常工作，我们需要：
–注册块变化核心/查询带有一些默认值的块
–定义块变体的布局
–使用命名空间中的属性处于活动状态块变化特性
例如，让我们开始一段旅程，为注册了书 自定义帖子类型.
第一步是创建一个变体，该变体的设置方式是提供一个块变体，默认情况下，该块变体将显示图书列表，而不是博客帖子。完整的变体代码如下所示：
const MY_VARIATION_NAME='MY-plugin/books-list'；registerBlockVariation（'core/query'{名称：MY_VARIATION_name，title:'图书列表'，description:'显示图书列表'，isActive:（｛namespace，query｝）=>{返回(名称空间===MY_VARIATION_NAME&&query.postType===“书”);},icon:/**SVG图标可以位于此处*/，属性：{名称空间：MY_VARIATION_NAME，查询：{每页：6，页数：0，偏移：0，postType:'书'，订单：'desc'，orderBy:'日期'，作者：“”，搜索：“”，不包括：[]，粘性：“”，继承：false，},},范围：[“插入器”]，});
如果这听起来太多了，别担心，让我们仔细看看这里的每一个属性，看看它们为什么在那里，以及它们在做什么。
基本上，您可以从以下内容开始：
registerBlockVariation（'core/query'{name:'my-plugin/books-list'，属性：{查询：{/** ...如果需要，可以进行更多查询设置*/postType:'书'，},},} );
这样，用户就不必选择自定义postType（后类型）从下拉列表中选择，并且已经显示了正确的配置。然而，您可能会问，用户将如何找到并插入此变体？好问题！要启用此功能，您应该添加：
{/** ...变化特性*/范围：[“插入器”]，}
这样，当用户在编辑器中搜索时，您的块将像其他任何块一样显示。此时，您可能还需要向变体添加自定义图标、标题和描述，如下所示：
{/** ...变异特性*/title:'图书列表'，description:'显示图书列表'，icon:/*此处为您的svg图标*/，}
此时，您的自定义变体将与独立块几乎无法区分。完全为您的插件打上烙印，易于发现，并可作为插件直接供用户使用。
然而，您的查询循环变体目前还无法工作-我们仍然需要定义布局，以便它能够正确呈现。
请注意，Query Loop块支持“块”作为字符串范围属性。理论上，这是为了在插入块本身之后能够拾取变化。阅读有关块变体选取器的更多信息在这里.
然而，它是不可取的要在当前使用它，这是由于使用模式和范围：[“块”]变量，除postType（后类型）和继承查询属性，这可能会导致冲突和非功能性变化。
为了避免这种情况，有两种方法，第一种是添加默认值内部块，如下所示：
内部块：[['核心/后模板'，{},[[“核心/文章标题”]，[“核心或文章摘录”]]，],['核心/查询分页']，['核心/查询-无结果']，],
通过拥有内部块在您的变体中，您基本上跳过了带有建议模式的Query Loop块的设置阶段，该块被插入这些内部块作为其起始内容。
另一种方法是注册特定于您的变体的模式，这将在设置中建议，并替换块的流。
Query Loop块确定自身是否存在活动变体，以及是否存在可用于此变体的特定模式。如果有，这些模式将是唯一建议给用户的模式，而不包括原始Query Loop块的默认模式。否则，如果没有这样的模式，将建议使用默认模式。
为了使模式与Query Loop变体“连接”，您应该添加变体的名称，并以Query Loopname为前缀（例如。核心/query/$variation_name)到图案的块类型属性。有关注册模式的更多详细信息请看这里.
如果您没有提供内部块在您的变体中，当用户选择时，还有一种方法可以建议“连接的”变体开始空白在设置阶段。这是以类似于“连接”模式的方式处理的，方法是检查Query Loop是否有活动变体以及是否有任何连接变体可供建议。
为了将一个变体连接到另一个Query Loop变体，我们需要定义范围具有的属性[块]作为值和命名空间定义为数组的属性。此数组应包含名称(名称属性）。
例如，如果我们有一个查询循环变体公开给插入器(范围：[插入器])名字是产品，我们可以连接作用域块通过设置其命名空间属性到[“产品”]。如果用户在单击后选择此变体开始空白，命名空间属性将被主插入器变体覆盖。
在实现此变体后，您可能会意识到一个小问题：虽然用户在插入变体时它对用户是透明的，但Gutenberg仍会将该变体识别为其核心的Query Loop块，因此，在插入之后，它将在编辑器的树视图中显示为Query Lood块。
我们需要一种方法来告诉编辑器，这个块确实是您的特定变体。这就是处于活动状态属性是为了：它是一种根据块的属性确定某个变量是否处于活动状态的方法。你可以这样使用它：
{/** ...变化特性*/isActive：（{namespace，query}）=>{返回(命名空间===MY_VARIATION_NAME&&query.postType===“书”);},}
你可能只想比较postType（后类型）以便古腾堡在任何时候都能将块识别为您的变体postType（后类型）比赛书。然而，由于其他插件可能希望发布基于书也可以使用post类型，或者我们可能只是不希望每次用户将类型设置为书手动通过编辑器设置。
这就是为什么Query Loop块公开一个名为命名空间它实际上在块实现中什么也不做，它被用作扩展程序识别和限定自己的变体的简单而一致的方法。此外，处于活动状态也只接受具有要比较的属性的字符串数组。经常，命名空间就足够了，所以您可以这样使用它：
{/** ...变化特性*/属性：{/** ...变量属性*/namespace:“my-plugin/books-list”，},isActive：[“命名空间”]，}
像这样，Gutenberg将知道，只有在它与自定义名称空间匹配的情况下，它才是您的特定变体！太方便了！
即使有了所有这些，您的自定义帖子类型也可能有独特的要求：它可能支持您可能想要筛选和查询的某些自定义属性，或者其他一些查询参数可能不相关，甚至完全不受支持！我们在构建Query Loop块时考虑到了这样的用例，所以让我们看看如何解决这个问题。
假设你根本不用粘性的属性，因此这与自定义块完全无关。为了不让用户混淆设置可能做什么，并且只向他们公开清晰的用户体验，我们希望此控件不可用。此外，假设您不使用作者字段，它通常指示将该帖子添加到数据库中的人，而不是使用自定义图书作者字段。因此，不仅要保持作者过滤器会令人困惑，它会彻底“中断”您的查询。
因此，Query Loop块变体支持一个名为允许的控件，它接受要显示在检查器侧栏上的控件的键数组。默认情况下，我们接受所有控件，但只要为该属性提供数组，我们就只想指定与我们相关的控件！
从古腾堡14.2版开始，可使用以下控件：
继承–显示允许直接从模板继承查询的切换开关。postType（后类型）–显示可用帖子类型的下拉列表。秩序–显示下拉列表以选择查询顺序。粘性的–显示一个下拉列表，选择如何处理粘性帖子。taxQuery（税务查询）–显示当前所选文章类型的可用分类筛选。作者–显示输入字段以按作者筛选查询。搜索–显示输入字段以按关键字筛选查询。
在我们的案例中，财产看起来如下：
{/** ...变化特性*/allowedControls:[“inherit”，“order”，“taxQuery”，“search”]，}
如果要隐藏上述所有可用控件，可以将空数组设置为允许的控件.
请注意，我们还禁用了postType（后类型）控件。当用户选择我们的变体时，为什么要向他们显示一个令人困惑的下拉列表来更改帖子类型？除此之外，它可能会打破障碍，因为我们可以实现自定义控件，我们很快就会看到。
因为我们的插件使用了我们需要查询的自定义属性，所以我们希望添加我们自己的控件，以允许用户选择那些属性，而不是我们刚刚从核心检查器控件中禁用的属性。我们可以通过反应HOC钩入阻塞过滤器，如下所示：
从“@wordpress/block-editor”导入{InspectorControls}；使用BookQueryControls=（BlockEdit）=>（props）=>导出常量{//如果是我们的变体，我们只想添加这些控件，//所以在这里我们可以实现一个自定义逻辑来检查它，类似//到上述“isActive”功能。//以下假设您编写了一个自定义`isMyBooksVariation`//函数来处理。return是MyBooksVariation（props）吗？(<><BlockEdit key=“edit”{…props}/><检验员控制><BookAuthorSelector/>{/**我们的自定义组件*/}</InspectorControls></>) : (<BlockEdit key=“edit”{…props}/>);};addFilter（'editor.BlockEdit'，'core/query'，withBookQueryControls）；
当然，您将负责实现控件的逻辑（您可能想看看@wordpress/组件使控件与Gutenberg UI无缝匹配）。在查询块属性中的对象可用于根据需要创建自定义查询，只需稍加努力。
目前，您可能需要实现稍微不同的路径，以使查询在前端（即最终用户端）正确运行，并在编辑器端显示正确的预览。
{/** ...变异特性*/属性：{/** ...变量属性*/查询：{/** ...如果需要，可以进行更多查询设置*/postType:'书'，/**我们的自定义查询参数*/本书作者：J.R.R.Tolkien}}}
Query Loop块主要通过Post Template块起作用，后者接收属性并从中构建查询。Query Loop块的其他一级子块（如Pagination块）的行为方式相同。他们构建查询，然后通过过滤器公开结果查询_操作_锁定_查询_值.
您可以挂接到该过滤器并相应地修改查询。至少要检查一下是否只对变体应用过滤器，以确保不会对其他Query Loop块产生副作用！
if（“my-plugin/books-list”===$block[“attrs”][“namespace”]）{添加筛选器(“query_loop_block_query_vars”，函数（$query）{/**您可以在此处读取块自定义查询参数并构建查询*/},);}
（在上面的代码中，我们假设您有一些方法来访问块，例如在预渲染块过滤器，但具体解决方案可能因使用情况而异，因此这不是一个坚定的建议）。
为了完成我们的自定义变体，我们可能希望编辑器对自定义查询中的更改做出反应，并相应地显示适当的预览。这不是功能块所必需的，但它可以为块的使用者提供完全集成的用户体验。
Query Loop块使用WordPress REST API。添加到查询对象将作为查询参数传递给API。这意味着这些额外的参数应该由REST API支持，或者由自定义过滤器处理，例如rest_{$this->post_type}_query过滤器，它允许您挂接到自定义帖子类型的任何API请求。像这样：
添加筛选器(“rest_book_query”，函数（$args，$request）{/**我们可以从这里访问我们的自定义参数*/$book_author=$request->get_param（'bookAuthor'）；/** ...自定义查询逻辑*/});
就像这样，您将创建一个Query Loop块的完全功能变体！