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

我们如何向古腾堡的editor.BlockListBlock添加自定义数据属性?

古腾堡(Gutenberg)是WordPress的一个编辑器,它使用了一种称为BlockListBlock的数据结构来表示编辑器中的块。要向古腾堡的BlockListBlock添加自定义数据属性,可以按照以下步骤进行操作:

  1. 创建一个自定义块类型:首先,您需要创建一个自定义块类型,可以使用WordPress提供的registerBlockType函数来实现。在这个函数中,您可以定义块的名称、属性、编辑器界面等。
  2. 添加自定义数据属性:在自定义块类型的属性中,您可以添加自定义数据属性。数据属性可以用来存储块的特定信息,例如颜色、大小、链接等。您可以使用attributes字段来定义这些属性,并为每个属性指定类型、默认值等。
  3. 更新BlockListBlock:一旦您定义了自定义块类型和属性,您可以使用古腾堡的API来更新BlockListBlock。通过调用updateBlockAttributes函数,您可以将自定义数据属性添加到特定的BlockListBlock中。

以下是一个示例代码,展示了如何向古腾堡的BlockListBlock添加自定义数据属性:

代码语言:txt
复制
// 创建自定义块类型
const MyCustomBlock = wp.blocks.registerBlockType('my-plugin/my-custom-block', {
    title: 'My Custom Block',
    category: 'common',
    attributes: {
        customData: {
            type: 'string',
            default: '',
        },
    },
    edit: () => {
        // 编辑器界面
    },
    save: () => {
        // 块保存逻辑
    },
});

// 更新BlockListBlock
wp.data.dispatch('core/block-editor').updateBlockAttributes(blockClientId, {
    customData: 'Custom Value',
});

在上述示例中,我们创建了一个名为"My Custom Block"的自定义块类型,并添加了一个名为"customData"的自定义数据属性。然后,我们使用updateBlockAttributes函数将自定义数据属性添加到特定的BlockListBlock中。

请注意,上述示例中的代码是基于WordPress的古腾堡编辑器,如果您使用的是其他编辑器或框架,可能需要相应地调整代码。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,建议您访问腾讯云官方网站或进行相关搜索,以获取与云计算领域相关的腾讯云产品和介绍信息。

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

相关·内容

微软MIT出品,AI自动朗读6万本电子书,还能用自己声音定制化

---- 新智元报道 编辑:润 【新智元导读】微软MIT等机构用AI将计划电子书转录为语音书,免费公众开放,还公开了制作流程。而且用户还可以用自己声音来进行配音。...世界上最大电子书库正被AI转录为有声书,免费所有人开放! 这个项目由微软,谷歌和计划共同发起,有望将计划包含接近6万本电子书库,利用AI文本转语音技术,全部转化为有声读物。...而且计划并未使用标准化HTML文件,电子书包含大量与音频阅读器无关文本,包括序言、目录、表格、插图、文本页码、脚注、抄写员笔记和其他奇怪内容。...这让研究团队对计划HTML文件整个集合进行聚类和可视化,并使得研究团队找到几大组通用结构文件。...使得研究团队能将注意力集中在读取后可以生成高质量录音文件任务上来。 下图显示了该聚类过程结果,表明计划收藏中自然出现了几个结构相似的电子书集群。

34030

展望 WordPress 5.0 会给我们带来哪些更新?

(Gutenberg)编辑器 Gutenberg,,1397 年出生于德国,是西方国家活字印刷术发明人,从而引导了一次媒介革命,其历史地位与中国毕昇比肩(当然,比毕昇晚了 400...多年),全名叫约翰内斯·,WordPress 新编辑器取名古意在这段历史致敬。...()。...至此,我相信读者已经发现一个特点,那就是操作都是围绕块(Block)进行,这也是新版编辑器一个理念。...目前互联网上一些自媒体平台都是采用这种理念,比如国际知名写作平台 Medium Medium 编辑界面 以上,便是关于 WordPress 新版编辑器 Gutenberg- 基本介绍,更多新功能和玩法大家可以自行安装体验

1.4K30
  • 给WordPress新添加一个编辑器

    在WordPress中添加一个额外编辑器(Gutenberg Editor)实例可以通过自定义代码实现。以下是一个基本步骤指南,帮助你在WordPress中添加第二个编辑器实例。...步骤 1: 创建一个自定义插件首先,创建一个自定义插件来包含你代码。你可以在 wp-content/plugins 目录下创建一个新文件夹,并在其中创建一个PHP文件。...; });})(jQuery);步骤 3: 添加自定义编辑器容器在你主题文件中(例如 functions.php 或 header.php),添加一个容器来承载第二个编辑器实例。步骤 4: 激活插件在WordPress后台,导航到“插件”页面,找到你创建自定义插件并激活它。步骤 5: 测试访问你网站,并检查页面底部是否出现了第二个编辑器实例。...注意事项性能影响:添加额外编辑器实例可能会对性能产生影响,特别是在低配置服务器上。兼容性:确保你代码与当前使用WordPress版本兼容。

    7910

    WordPress 5.7 发布,更好用编辑器

    ​WordPress 5.7 发布,新版本改善了编辑器编辑体验,并使用户能够轻松创建更多高级块,并为块编辑器添加更强大自定义项,还有 HTTPS 切换等其他功能改进​。...编辑器更易使用 增强字体调整:编辑器很多地方都可以调整字体,比如列表,代码等块,并且无需切换界面。 增强可重用块,更加稳定,更好用,并且支持自动保存。...支持拖放:支持将块和块组从插入器中直接拖放到编辑器。 更多块 不懂代码也可以实现功能,做更多事情。 封面块:可以制作一个填充整个窗口封面块。...一键切换 HTTP 到 HTTPS 从现在开始,将站点从 HTTP 切换到 HTTPS,只需一次点击,WordPress 会自动更新数据库中 URL,无需自己去做更多处理了。...延迟加载 iFrame iframes 也可以延迟加载了,WordPress 默认会给设置了高和宽 iframe 加上 loading="lazy" 属性

    73420

    屏蔽 WordPress 小工具区块编辑器模式,切换回经典模式

    通过 WPJAM Basic 屏蔽 WordPress 编辑器,换回经典编辑器之后,WordPress 小工具还是区块编辑模式,本来我想在屏蔽编辑器时候,同时也屏蔽小工具区块编辑器模式...,但是觉得这是主题功能,应该交给主题作者来处理。...不过提供一下如何禁用 WordPress 小工具区块编辑器模式,切换回经典模式方法,一共有三种: 一、使用 remove_theme_support 函数 主题可以通过调用 remove_theme_support...( 'widgets-block-editor' ) 来屏蔽小工具区块编辑器模式,在主题 functions.php 文件中添加如下代码: add_action('after_setup_theme...比如可以通过以下代码屏蔽小工具区块编辑器模式: add_filter('use_widgets_block_editor', '__return_false'); 使用过滤器接口,就有更多可定制性,可以加入一些自定义功能

    28810

    WPJAM「代码高亮」:一键实现 WordPress 页面代码高亮显示

    整个插件自己写代码只有不到 30 行,就是利用 WordPress wp_enqueue_scripts 接口让页面加载 prism 样式和脚本代码。...然后插件也兼容 WPJAM「静态文件」插件,不单独加载 prism 样式和脚本代码,把 prism 样式和脚本代码合并到整个站点唯一样式和脚本文件中: 所以这个从另外一个侧面说明 WPJAM 出品插件...,不是装越多越慢,反而相互之间会配合,最优化去处理问题。...如果你使用编辑器的话,先点击选择创建一个代码块: 然后输入代码,选择该该区块: 点击右侧区块属性框,在额外CSS类中输入:language-php,如果你代码是 JS 则,输入 language-javascript...定义就是语言,如何设置,和上面设置方式是一样,自己灵活处理一下,个人感觉还是编辑器方便一点。

    1.8K30

    WPJAM TinyMCE:一键增强 WordPress 经典编辑器

    现在大家都开始使用编辑器了,特别是 WordPress 最新几个版本发行,大部分更新都围绕编辑器,不过在一些地方还是有用到经典编辑器,比如我们花生小店商品编辑,就用不到那么高级编辑器...经典编辑器基本够用,但是有些格式化工具缺失,还是挺烦人,所以我们为了商家在花生小店时候方便编辑商品,我们做了一个 WordPress 经典编辑器增强插件,为了方便就叫做 WPJAM TinyMCE。...添加编辑器按钮 WPJAM TinyMCE 这个插件首先增加几个样式按钮:下划线,背景颜色,两端对齐等,增加了常用 WordPress 内容分页按钮,还支持设置字体和大小,最后还把按钮布局调整了一下,...安装 WPJAM TinyMCE 之前编辑器: 安装 WPJAM TinyMCE 之后编辑器: 新增插入表格功能 我增加了 TinyMCE 表格插件,让大家在编辑器就能够直接插入表格: 还支持表格行...直接插入屏幕截图 对于我们技术类型博客来说,在写说明时候插入屏幕截图,是非常常见操作,之前可能需要用到一些截图软件,把截图保存到电脑桌面,然后再上传到 WordPress 媒体库。

    82710

    wordpress资讯类主题NStory(纯净版宝塔版)

    防垃圾评论功能 图片延迟加载 AJAX分页和加载更多,可跳转 多功能缩略图裁剪 自定义缩略图大小 自定义边栏,可新建边栏 边栏随窗口响应移动 完善等级权限 全站自定义SEO功能 自定义配色 自定义CSS...自定义页面宽度 多功能标签页面筛选 每天凌晨等级自动更新 VIP 会员到期提醒 后期再开发更多实用功能和模块 用户中心 编辑资料 投稿 私信 动态 通知 VIP 认证 积分和余额 订单 自定义头像封面...(需要权限) 文件上传重命名 社交账号绑定 自定义媒体上传面板 允许投稿专题 允许投稿分类 投稿可选择或创建标签 限制敏感词 投稿字数限制 允许访问后台角色 邮件通知 允许上传文件类型 自动更新普通等级...禁用定时器 禁用编辑器 禁用小工具 禁用文章 Embed 格式化日期 格式化数字 在新窗口中打开链接 自动添加图像 alt 和 title 搜索重定向 仅搜索文章标题 简化分类链接 HTML...AJAX选择相关文章 自定义类型文章固定链接 移除菜单中多余标签 全站添加 canonical 标签 外链自动添加 nofollow 标签 专题中可选择除专题外其它文章类型 专题下文章列表可按类型进行筛选

    2.7K00

    一文详解 WordPress Shortcode 简码

    Shortcode API 这个功能是 WordPress 从 2.5 版本开始引入,使用它可以给日志内容添加各种功能,并且它接口非常容易使用,并且功能非常强大。...,如果是编辑器,直接可以选择简码区块,它在小工具分类比较下面: 然后在简码区块中输入具体简码: 如果不是编辑器则直接输入简码。...所有 Shortcode WordPress 系统定义了哪些 Shortcode,我们可以使用 WPJAM Basic 插件「常用简码」扩展来查看,激活扩展之后,在 「WPJAM」菜单「常用简码」子菜单中即可查看...这是因为每个 Shortcode 都定义了一个对应回调函数来处理,这个回调函数一般有两个参数:Shortcode 属性参数和内容: function my_shortcode_func($attr,...这个 Shortcode,它内容(content)就是邮箱地址,还定义了属性 link,它值为 1 时候,邮箱显示为可点击,详细代码如下: add_shortcode('email', function

    1.6K20

    WordPress 6.2 发布,全面提升站点编辑体验

    WordPress 6.2 版本今天发布了,新版全面提升了站点编辑器体验,引入了更多网站设计功能,并提供了新无干扰写作模式。...导航块支持多种方式菜单管理 新导航块侧边栏使得编辑站点菜单更加容易,可以快速添加、删除和对菜单项重新排序。...无干扰模式专注写作 编辑器也支持无干扰写作模式了,可以一键隐藏侧边栏,所有面板和控件等,专注自己创作。...自定义 CSS 用户可以通过设计工具和自定义 CSS 以自己希望方式增强站点外观,这不仅达到了更高级别的样式控制,也能实现在站点设计中实现最大创造力和艺术性。...简单说 WordPress 6.2 主要更新就是块编辑器更新,没有类似 WordPress 6.1 无需第三方插件就能实现首页 0 SQL 这个大更新。

    1.1K40

    盘点那些免费下载书籍方法

    我们生活在信息爆炸时代,每天我们都会接触到各种各样信息,有些信息是垃圾信息,有些信息却是非常宝贵信息,如何筛选出那些信息中有用价值信息,我想最好办法就是阅读书籍,而互联网为我们提供了很多可以免费下载电子书籍地方...这里有接近上万本教科书 pdf 可以免费下载,这些书籍都是由世界顶尖大学教授编写。它书籍种类更多是 IT,语言,工程,经济,职业,市场等方面的。...PDF Drive PDF Drive 是一个拥有接近 1 亿本电子书电子数据库搜索引擎。你可以使用它进行免费查询和下载。它拥有各种各样书籍,包括杂志,漫画,小说,艺术,科学等等。...(这是一个非盈利网站,网站没有广告,且是一个个人运营网站,如果你在这里有一点收获,或者希望古籍能够薪火相传,可以赞助一下这个网站) Gutenberg 计划是一个免费电子书在线图书馆,计划创始人迈克尔...·哈特于 1971 年发明了电子书,计划鼓励电子书创作和发行。

    1.6K20

    WordPress 4.9“Tipton”正式版已于11月14号正式发布

    说起博客开源程序,我想很多人都会想到wp,它是一种使用PHP语言开发博客平台,用户可以在支持PHP和MySQL数据服务器上架设属于自己网站,当然如果你技术很牛掰也可以把它当作一个内容管理系统(...最后,该版本还增加了一个很赞相册小工具,并改进了主题浏览和切换体验。 自定义工作流程改进 ? 网站设计自定义草稿和定期发布 是的,你没看错。...新相册小工具 对WordPress 4.8中媒体小工具采取了渐进式改进。选择你可以通过这个新小工具来添加相册。没错! 点击按钮,发布媒体 想要给你文本小工具添加媒体文件吗?...我们设计了符合使用体验更加顺利菜单创建过程。最新更新副本会引导你。 与合作 WordPress 团队正在致力于一种新方式,来创建和管理你网站内容,需要所有用户合作。...感兴趣用户可以进行测试这个项目,并帮助开发者一起改进!

    1.1K20

    WordPress给文章内容添加密码查看

    WordPress给文章内容添加密码查看 ---- WordPress给文章内容添加密码是我很久就弄好,一直没有时间写文章进行分享,我们在写文章过程中可能需要对一些文章进行隐藏或者添加密码,只有密码才能进行阅读文章加密码那一部分内容...第二步:添加CSS代码样式 后台主题设置–》自定义CSS代码里面添加下面的代码即可。...在编辑文章时,经典编辑器在“文本”模式下添加下面代码。编辑器–》添加自定义HTML模块或者简码模块–》添加下面代码。...编辑器正确操作如下图 声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。...如若本站内容侵犯了原著者合法权益,可联系我们进行处理。

    54020

    WPJAM Basic 6.0 详细更新说明

    WordPress 6.0 发布了,全面增强编辑器和全站编辑,虽然还是大部分关于编辑器,但是还是要升级适配一下,所以 WPJAM Basic 也升级到 6.0。...支持批量缓存 WordPress 6.0 增强了缓存功能,支持批量添加、设置和删除缓存,WPJAM Basic  object-cache.php 文件也增加了相关批量缓存操作函数。...WPJAM Basic 扩展优化 优化「相关文章」扩展文章类型处理,如果没有自定义文章类型或者自定义文章类型没有设置分类模式,后面不再有文章类型复选框。...新增函数和函数增强 wpjam_register_builtin_page_load 和 wpjam_register_plugin_page_load 添加 page_file 参数,这样就方便根据不同后台页面...支持在后台分类和标签页面的列表表头增加额外操作,比如筛选操作: 新增 wpjam_register_field_data_type 和 wpjam_get_field_data_type_object 函数,通过他们可以创建字段数据类型对象和获取字段数据类型对象

    34830

    一款简单WordPress主题June

    主题介绍 更新记录 详细信息 一款基于Bootstrap 5前端框架开发WordPress主题,CSS3+HTML5和响应式设计,可自定义背景风格(颜色或图片),支持绝大数浏览器浏览...数据库优化清理 集成wp-clean-up插件,WordPress数据库优化 SMTP邮箱设置 主题集成SMTP发信功能 ,简单设置后即可实现邮箱发信功能 禁用编辑器 还没有习惯,所以通过这个选项恢复到经典编辑器...去除分类标志 可去除链接中分类category标志,据说有利于SEO优化 网页后缀 页面链接添加.html后缀 评论等级 按评论数显示等级,评论达到1级才会显示评论者链接 网页后缀 页面链接添加...AJAX回复 Ajax无刷新提交评论,有邮件提醒、验证码反垃圾评论机制 自定义标志 网站LOGO(图片或字体logo、网站标题、favicon网站小标、默认头像、默认缩略图等都可自定义 短代码 主题集成丰富实用短代码...视频文章 视频自定义文章类型。 书籍文章 书籍自定义文章类型,显示正在看或看过书,并可以发表书评。 简言(说说) 可以发表类似微信朋友圈说说。 。。。。。。

    1.1K20

    WordPress 5.0默认老版编辑器

    方法3一句代码禁用Gutenberg 编辑器其实之前经典Classic Editor编辑器代码,在WordPress 50并没有被删除,上述插件也只是个切换开关而已。...关键代码就一句 addfilteruseblockeditorforpost,returnfalse将代码添加到当前主题函数模板functionsphp中,即可切换回之前编辑器,根本不需要那些插件。...虽然看起来很高端,但很多用户发现它很不方便,相比之下,还是更喜欢经典编辑器。如果经典编辑器真的被5.0版本取代了,如何禁用Gutenberg并保留经典WordPress编辑器呢? ?...方法3:一句代码禁用Gutenberg() 编辑器 其实之前经典Classic Editor编辑器代码,在WordPress 5.0并没有被删除,上述插件也只是个切换开关而已。...关键代码就一句: add_filter('use_block_editor_for_post', '__return_false'); 将代码添加到当前主题函数模板functions.php中,即可切换回之前编辑器

    1.3K10

    想要自定义WordPress后台界面?试试这款插件

    Aquila Admin Theme除了可以修改WP后台显示效果和颜色,还可以自定义LOGO图标、是否隐藏显示小部件等功能。 效果 ?...描述 Material Design启发了可自定义配色方案,并针对WordPress Admin(v4.0及更高版本)进行了重新设计。...在管理区域和登录屏幕中,使用您自己徽标代替WordPress徽标。 可使用颜色选择器自定义配色方案。 Roboto字体符合材料设计指南。...新自定义图标包。 当前用户角色已添加为管理员正文类。 从右上角删除了“你好..”。 重新设计了登录屏幕。 管理栏杂乱无章。 新仪表板小部件。 WordPress和插件支持仪表板上链接。...隐藏在编辑器中“更新”通知。 从帖子中删除了“帖子格式”。 多站点支持。 支持。 直接在仪表板上查看服务器信息。 媒体库支持清晰PNG图像。

    1.3K10
    领券