对ACF块使用上下文

上次更新时间:2024年1月31日

概述

ACF Blocks为更具创意的建筑打开了大门。我们之前探讨过的一个例子是使用InnerBlock和父/子关系,其中我们将ACF块相互嵌套。嵌套ACF块可以组织块结构和代码库,同时可以获得精细的编辑体验。

准备好深入研究代码了吗?
您可以下载 tt4child.zip文件! 确保拥有Twenty TwentyFour主题以及ACF PRO。

ACF 6.0引入了对WordPress块上下文的支持块上下文允许更高级别的块(如父块)提供同一结构中的子块可以使用的值。此功能允许直接子块和层次结构下的块从父块接收值。此过程无需将这些值直接嵌入到代码中,也无需在父块和子块之间建立直接链接。

需要注意的是,块上下文只流动向下地从父块,并且不可能从子块向上共享数据到其父块。

创建块上下文

块上下文在块的块.json,就像其他块属性和属性一样。块上下文的关系取决于是否存在块供应商和一块消费者提供块上下文的。

这个供应商块定义提供上下文在其中块.json以下为:

提供上下文的示例块

{…block.json的其余部分“提供上下文”:{“acf/fields”:“数据”},…block.json的其余部分}

以及消费者块定义使用上下文在里面它的 块.json以下为:

使用上下文的示例块

{…block.json的其余部分“usesContext”:[“acf/fields”],…block.json的其余部分}

在ACF块中显示上下文值

在ACF块之间建立绑定上下文关系后,可以通过检查并输出子块模板中的值来引用任何嵌套块中父块的值。

<?php echo$context['acf/fields']['an_example_field'];?>

需要注意的一点是:ACF块在块编辑器中使用字段键,块数据仅在保存时水合为字段名。因此,您应该使用$context['acf/fields']['field_key']获取对模板中数据的访问权限(如果存在),然后返回默认值$context[字段名称]如果没有。这支持上下文数据的后端和前端输出。

此外,每当提供父块的字段值在编辑器中更新时,使用父块上下文的子块将自动重新赋值。

您还应该知道,与子块共享ACF数据将导致将完整的ACF字段数据发送回服务器以渲染预览。这可能会对编辑器中的块产生性能影响。

此外,ACF自动通过帖子IdpostType(后类型)默认情况下向下遍历块上下文,这加快了在查询循环块

结论

总之,ACF Blocks引入了一种通用且功能强大的方法来扩展WordPress编辑器的功能,提供了一组丰富的功能,可以增强开发人员和编辑器的体验。通过利用InnerBlock和父/子关系,您可以更灵活、更精确地构建内容。ACF 6.0中引入的块上下文进一步增强了这一点,它允许数据在块之间无缝流动,消除了直接代码嵌入或显式关系的需要。

这一进步简化了开发过程,并为内容管理和演示开辟了无数创造性的可能性。无论您是在构建复杂的布局、打造独特的编辑体验,还是提供动态内容关系,配备块上下文功能的ACF块都是WordPress开发库中的一个宝贵工具。

请记住,虽然ACF块和块上下文的强大功能带来了极大的灵活性,但重要的是要考虑性能影响和数据管理的最佳实践,以确保您的站点保持快速响应。使用正确的方法,ACF Blocks可以改变您思考和使用WordPress构建的方式。

下载 tt4child.zip文件并深入研究代码,直接了解ACF块如何彻底改变WordPress项目。编码快乐!

相关的