首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在registerBlockType的编辑和保存功能中获取块唯一ID

在registerBlockType的编辑和保存功能中获取块唯一ID,可以通过使用Gutenberg提供的API来实现。

在编辑功能中,可以使用getBlockClientId函数来获取当前块的唯一ID。该函数接受一个参数,即当前块的block对象,返回当前块的唯一ID。可以在编辑功能的回调函数中使用该函数来获取块的唯一ID。

示例代码如下:

代码语言:txt
复制
const { registerBlockType, getBlockClientId } = wp.blocks;

registerBlockType('my-plugin/my-block', {
    // ...

    edit: (props) => {
        const blockId = getBlockClientId(props.block);

        // 使用块的唯一ID进行其他操作

        return (
            // 编辑界面的内容
        );
    },

    // ...
});

在保存功能中,可以使用getBlockAttributes函数来获取当前块的属性,其中包括块的唯一ID。该函数接受一个参数,即当前块的block对象,返回当前块的属性对象。可以在保存功能的回调函数中使用该函数来获取块的唯一ID。

示例代码如下:

代码语言:txt
复制
const { registerBlockType, getBlockAttributes } = wp.blocks;

registerBlockType('my-plugin/my-block', {
    // ...

    save: (props) => {
        const blockAttributes = getBlockAttributes(props.block);
        const blockId = blockAttributes.blockId;

        // 使用块的唯一ID进行其他操作

        return (
            // 保存的内容
        );
    },

    // ...
});

需要注意的是,以上示例代码中的my-plugin/my-block是自定义块的名称,需要根据实际情况进行替换。

关于Gutenberg的更多API和使用方法,可以参考腾讯云的Gutenberg文档:Gutenberg文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • WordPress 如何统计并显示文章阅读量?

    但随着主题流行,很多新手朋友发现 WP-PostViews 插件似乎不起作用,或不知道如何插入统计代码。 所以本文将介绍如何在主题模板中使用 WP-PostViews 插件统计功能。...这是因为主题中并不一定映射到主题 PHP 文件代码,而是在编辑器中生成并保存在数据库。...所以主题用户不应该通过添加 PHP 代码方式来使用该插件,而是改用插件默认提供短代码:38 次浏览或0 次浏览。如果不指定 ID 则显示与统计当前帖子或页面浏览量。...选择需要编辑模板 在编辑,在需要显示浏览量地方插入段代码38 次浏览即可,如图: 插入段代码 效果演示 完成模板编辑保存后,可在前端页面查看效果如下: 效果演示 总结 尽管 WP-PostViews...插件在功能上相对简约,但对于那些仅需统计展示WordPress文章浏览量用户而言,其简单性可能正是其优势。

    9710

    31、地址新增 — 定义数据结构与获取方式

    前言:前两章我们讲了地址列表地址填写两个页面的制作,这几章就是把上两章内容打通,新增一条数据并在地址列表展示,实现地址列表页与地址填写页数据互通获取编辑功能。...GitHub:https://github.com/Ewall1106/mall 1、地址数据结构 根据对地址列表地址填写所需要字段分析,我们可以知道数据结构应该是这样: id: 每条地址唯一标识...(2)这个时候我们点击保存按钮且应该为这个按钮添加一个save事件,通过官方文档可知,我们可以通过这个事件获取填写表单内容。 ? 截图来自vant官网 ? save获取用户所填写内容 ?...(1)当在地址编辑页面编辑完成以后,如何在上一级列表页面获取地址数据呢?...我们将这条数据保存起来,然后当进入到其他页面时再次从本地获取

    88630

    活动可视化搭建(拖拽生成页面)

    核心设计 大体流程是: 创建 -> 编辑 -> 保存 -> 发布 -> 展示 核心: 维护一个obj,保存着个组件父子关系,像一个node树,每个组件都有唯一ID,举例如下 const nodeTree...3.组件与渲染 每一类定制组件都有唯一name名,每一个组件在node树中被创建时也有唯一id,方便后期编辑渲染, 遍历node树递归调用主渲染文件,根据组件name名相应数据,渲染出对应组件...特点 编辑回退取消回退 每一次操作后,都存储一下node树,并放入回退队列,,通过指向队列上一个或下一个来实现回退取消回退,通过并限制队列长度,控制浏览器内存使用 组件上下移动指向父组件功能 用户编辑时...,可能会对组件位置进行调整,还有组件嵌套层级关系过多时,可能选中当前组件父组件比较困难,基于此提供了这两个功能, 具体实现,就是通过组件唯一Id,遍历node树查找,删除当前组件,然后插入在兄弟节点上面或下面..., 思考优化 关于活动页保存展现心路历程:单独开一个项目,或项目单独开一个页面,作为活动展示使用,根据唯一id获取不同数据渲染配置页面 问题: 代码不存粹,代码量较大,包含了所有定制组件模版 项目出现问题影响所有页面

    2K00

    搭建数据分析系统 Grafana 详细指南

    前言在当今数据驱动世界,数据可视化分析是确保业务决策有效性关键。Grafana 是一个开源分析监控平台,能够连接多种数据源并提供丰富可视化功能。...点击 “Add new panel” 按钮,进入面板编辑界面。添加面板在面板编辑界面,选择数据源( Prometheus)。...点击 “Add channel” 按钮,配置通知渠道( Email、Slack 等)。输入渠道名称相关配置,点击 “Save” 按钮保存。...添加告警规则打开需要添加告警面板,点击面板标题右侧下拉箭头,选择 “Edit”。在面板编辑界面,点击 “Alert” 选项卡。...在 “Import via grafana.com” 输入仪表盘 ID 或 URL,例如输入 1860 获取 Prometheus Node Exporter Full 仪表盘。

    20910

    Hadoop之hdfs体系结构

    数据实际上都是保存在Datanode本地Linux文件系统。每个Datanode会定期向Namenode发送 数据,报告自己状态(我们称之为心跳机制)。...HDFS集群只有唯一一个Namenode,负责所有元数据管理工作。...命名空间指就是文件系统树及整棵树内所有文件目录元数据,每个Namenode只能管理唯一一命名空间。...: 编辑日志文件,当hdfs文件系统发生打开、关闭、创建、删除、重命名等操作产生信息除了保存在内存中外,还会持久化到编辑日志文件。...比如上传一个文件后,日志文件里记录有这次事务txid,文件 inodeid,数据副本数,数据id,数据大小,访问时间,修改时间,大小,客户端信息,权限,id等 查看editlog文件方式

    33220

    详细聊聊Profibus总线GSD文件

    这里大家分享在Profibus总线,常常要使用GSD文件定义、结构和在设备管理重要作用。...GSD文件为开放式配置工具提供了一种自动获取设备特性方式。 GSD是可读ASCII文本文件,它包含用于通信通用设备专用规范。...GSDML编辑可以使用标准XML编辑器完成,并且应符合ISO 15745标准,这是设备描述基础。目标是允许更好地将设备集成到工程工具。...对于个别设备ID选择,取决于多个因素,例如在PA设备情况下取决于设备类型现有功能个数。 ID号9760H 被保留用于提供若干个不同功能PA 现场设备(多变量设备)。...PNO开发了一个GSD编辑器,以协助制造商为PROFIBUS DP从设备设置GSD文件。编辑器包括根据GSD规范语法语义检查。

    33010

    在DebianUbuntu上安装Ghost(CMS)博客发布平台

    它是功能丰富,现在有一个桌面应用程序(在Linux,WindowsMac OS上运行),只需在您计算机上提供Ghost所有功能功能。...鬼特点: 快速,可扩展高效。 提供基于降价编辑环境。 配有桌面应用程序 配有美丽把手模板。 支持简单内容管理。 支持作者,编辑管理员多重角色。 允许提前安排内容。 支持加速移动页面。...提供详细结构数据。 支持RSS,电子邮件Slack订阅。 启用简单网站编辑等等。...$ sudo mkdir -p /var/www/ghost 4.接下来,从GhostGitHub存储库获取最新版本Ghost,并将存档文件解压缩到上面创建目录。...在本文中,我们展示了如何在DebianUbuntu设置Ghost。 通过以下反馈表将您疑问或有关本指南任何想法发送给我们。

    1.3K40

    在Android Native层实现TryCatch异常处理机制

    3.2 如何在Native层获取更多异常信息 我们还可以在catch获取处理这些异常信息。例如,打印异常类型、出错地址、寄存器状态等。...在catch,尽量避免执行可能引发新异常代码。因为在catch中发生异常可能无法被捕获处理。...在catch,可以使用COFFEE_EXCEPTION()宏获取异常详细信息,例如信号编号、错误地址等。这些信息对于调试错误报告非常有用。...四、如何在Native层捕获处理C++抛出异常 在前面的部分,我们已经介绍了如何在Android Native层实现类似于Javatry/catch异常处理机制,并获取异常详细信息。...在信号处理函数获取异常详细信息(信号类型、出错地址、寄存器状态等),并在catch中进行处理。 对于C++抛出异常,使用C++try/catch语句进行捕获处理。

    13210

    三篇文章了解 TiDB 技术内幕:说计算

    续上文:三篇文章了解 TiDB 技术内幕:说存储 关系模型到 Key-Value 模型映射 在这我们将关系模型简单理解为 Table SQL 语句,那么问题变为如何在 KV 结构上保存 Table...),其中 TableID 在整个集群内唯一,IndexID/RowID 在表内唯一,这些 ID 都是 int64 类型。...同时只要我们我们小心地设计后缀部分编码方案,保证编码前编码后比较关系不变,那么就可以将 Row 或者 Index 数据有序地保存在 TiKV 。...每个 Database/Table 都被分配了一个唯一 ID,这个 ID 作为唯一标识,并且在编码为 Key-Value 时,这个 ID 都会编码到 Key ,再加上 m_ 前缀。...,tidb-server 会解析 MySQL Protocol Packet,获取请求内容,然后做语法解析、查询计划制定优化、执行查询计划获取处理数据。

    3.4K20

    MPM 卖场可视化搭建系统 — 架构流程设计

    优先原则,MPM 模板样式代码也会在编辑保存阶段被存放到这里; template.footer:直出端使用页面尾,一段不完整 HTML 代码,包含了页面的一些公共置底逻辑。...PageData 数据库模型 在编辑系统,运营人员创建一个卖场页面时,系统将生成一个默认页面 id,来唯一标识这个页面,同时生成一份初始化 PageData,与之一并写入到 SQL 数据库。...如何生成 PageData 在 MPM 编辑系统,一个卖场页面的编辑一般会经历加载、编辑保存、发布四个阶段,这也是 PageData 生成过程。 ?...保存发布时 MPM 小程序页面是 H5 页面区分开来两种不同页面类型,编辑流程也是独立。...小程序端解析过程 1、获取 PageData 在小程序打开 MPM 搭建页面时,引擎首先会请求获取该页面对应 PageData。

    1.3K52

    如何使用AngularJSPHP为任何位置生成短而独特数字地址

    您可以按照教程如何在Ubuntu 18.04上快速安装Git来安装设置Git。 第1步 - 获取Google API密钥 在本教程,您将使用JavaScript创建Google Maps界面。...保存文件,然后再次在浏览器访问该应用程序。您将看到以下内容: 您所见,我们已成功将地图添加到应用程序。您可以拖动地图以聚焦在不同位置,放大和缩小,以及在地图,卫星街道视图之间切换。...接下来,通过添加几个blur事件侦听器继续编辑。一个blur在一个给定页面元素失去焦点时发生事件。将以下突出显示行添加到forminput标记。...第7步 - 了解地图代码生成 在查看createDigitalAddressApp.js文件同时,滚动浏览您在上一步添加代码部分,以查找获取通过表单提交信息并将其处理为唯一地图代码代码。...结论 在本教程,您使用Google Maps API固定位置并获取其经度纬度信息。此信息用于使用Mapcode API生成唯一且短数字地址。地图代码有许多实际用例,从紧急服务到考古调查。

    13.2K20

    todomvc项目_reactive vue

    所有实现代码在文章结尾处 分析整个实现过程步骤: 1.显示大标题“todoMVC” 在h1引入{ {msg}},在js文件中将msg赋值,从而在html显示大标签内容 2.当没有数据时,两模板需要隐藏...将两个模板放在一个template标签,当items.length=0时,则v-if=false,进而两模板隐藏。 3.引入数据。将JS写好默认数据引入在html每一个li标签。...只要双击就触碰到方法使得它俩相等,相等就会触碰到显示editing这个功能。 进入到编辑标签后,将原本content赋予编辑标签内让我们编辑。...如果不想编辑的话就点击esc键,会使等式不相等,进而退出编辑功能。 如果想要保存的话可以点击enter键 或者使编辑框失去焦点。即可保存。在点击与失去上加上一个事件。...先进行判空,在保存,再把编辑页面去掉。这样就实现了一整个编辑大动作。 12.全局获取焦点设置当进入到这个页面后自动获取输入框焦点,无需手动点击后获取焦点。 设置全局指令。

    1.1K00

    Redis+Lua 实现消息接口幂等性

    Redis Lua脚本与事务 从定义上来说, Redis 脚本本身就是一种事务, 所以任何在事务里可以完成事, 在脚本里面也能完成。 并且一般来说, 使用脚本要来得更简单,并且速度更快。...return true:返回布尔值 true 给调用方,表示设置过期时间设置都成功。 else:如果 SETNX 返回值不为 1,则执行以下代码。...(全局唯一),业务唯一标识作为幂等处理关键依据,订单号、交易号、流水号等 // $execResult = self::saveDeliverSetCommand($orderSn)...messageId操作在finally执行,无论是否重复消费处理逻辑成功与否都会确保删除业务全局唯一messageId。...EXISTS、SCRIPT FLUSH、SCRIPT KILL、SCRIPT LOAD,自 3.2.0 加入了 lua 脚本调试功能命令SCRIPT DEBUG。

    71631
    领券