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

是否有一个函数可以在我的gutenberg块中创建自定义块?

是的,WordPress的Gutenberg编辑器提供了一个函数来创建自定义块。这个函数是registerBlockType(),它允许你定义一个新的块,并指定它的属性、编辑器界面和保存逻辑。

registerBlockType()函数接受两个参数:块的名称和一个包含块属性和方法的对象。块的名称应该是一个唯一的字符串标识符,用于在编辑器中识别该块。

在块属性对象中,你可以定义块的各种属性,包括标题、图标、类名、描述等。你还可以指定编辑器界面的组件,用于渲染和编辑该块。这可以是一个函数组件或类组件。

在保存逻辑方面,你可以定义一个save属性,它是一个函数或回调,用于将块的内容保存到数据库中。你可以使用这个函数来处理块的属性,并生成最终的HTML输出。

以下是一个示例代码,展示了如何使用registerBlockType()函数创建一个自定义块:

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

registerBlockType( 'my-plugin/my-custom-block', {
    title: 'My Custom Block',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit: ( props ) => {
        const { attributes, setAttributes } = props;
        const { content } = attributes;

        const onChangeContent = ( newContent ) => {
            setAttributes( { content: newContent } );
        };

        return (
            <div>
                <h2>My Custom Block</h2>
                <textarea value={ content } onChange={ onChangeContent } />
            </div>
        );
    },
    save: ( props ) => {
        const { attributes } = props;
        const { content } = attributes;

        return (
            <p>{ content }</p>
        );
    },
} );

在这个示例中,我们创建了一个名为"my-plugin/my-custom-block"的自定义块。它有一个标题为"My Custom Block",图标为"smiley",分类为"common"。块的属性中只有一个content属性,它是一个字符串类型的属性,用于保存块的内容。

在编辑器界面中,我们使用一个文本区域来编辑content属性的值。当内容发生变化时,我们使用setAttributes()函数更新属性的值。

在保存逻辑中,我们简单地将content属性的值包装在一个<p>标签中,作为最终的HTML输出。

这只是一个简单的示例,你可以根据自己的需求定义更复杂的自定义块。如果你想了解更多关于自定义块的详细信息,可以参考腾讯云的WordPress云产品:腾讯云WordPress云产品

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

相关·内容

WordPress 6.1 正式版已发布,最全新功能图文介绍

状态和可见性面板现在称为摘要 摘要面板下永久链接和模板选项 改进信息面板 站点图标将替换 WordPress 徽标 新首选项 站点编辑器创建更多模板 快速搜索和使用模板部分 站点编辑器快速清除自定义...您也可以撰写文章和页面时选择这些字体。 总体而言,Twenty Twenty-Three 提供了一个漂亮画布,可以使用站点编辑器中提供设计工具创建一个网站。...站点编辑器创建更多模板 经典 WordPress 主题中,用户可以使用模板层次结构创建模板,并通过编写代码来扩展他们 WordPress 主题。...例如,如果您主题多个标题模板部分,那么您可以快速找到并应用其中一个。 只需选择单击模板部分选项并选择替换。 这将弹出一个模式弹出窗口,您可以在其中查找可以使用可用模板部分。...连接到 theme.json 数据过滤器(详情) WordPress 6.1 中使用 React 挂钩简化数据访问(详细信息) 新 is_login() 函数用于确定页面是否为登录屏幕。

4.6K30

神级WordPress主题框架Genesis 2.8发布:容易引起极大舒适感

这本来可以做到更好太多值得改进地方。...征询了Genesis社区个人和公司用户意见之后,明显可以知道,两个需求优先级要排到最高:一、提升演示内容导入体验,二、充分利用Gutenberg强大功能。...通过一键导入演示数据功能,主题开发者可以很轻松地一个使用了该主题新站上将所需插件和精心设计好Gutenberg导入进来。...此外,默认Gutenberg和定制化内容可以随演示内容一同导入,具有复用性,内容作者可以在其他任何页面或日志上重复使用,将来构建新内容时会感到更加强大更加模块化。...随着我们继续投资和发展Genesis框架,我们将扩展并发布更多新功能,以便设计者在他们创建体验得到更多快乐。

2K11

WordPress短代码怎么在当前文章内引用评论

强大 WordPress 当然是可以做到,自身自带函数可以获取到相关信息 Demo 这里就不放了,站点用不到,大概说一下实现过程 使用自带函数,检索评论列表 get_comments( string...|array $args = '' ) 评论列表可以是整个博客或着一篇文章,支持参数也有很多,比如post_id、user_id等等,自带排序 具体解释可以查看官方文档,这里就不详细介绍了 实现 功能实现就行...) { // 正则匹配获取评论链接,当作 a 链接。...文章调用: [fa_insert_comments] 或者 [fa_insert_comments id=666] 666 为文章ID,默认当前文章ID 前提是5.0之前编辑器中使用,5.0之后是...Gutenberg编辑器,这个编辑器怎么玩都不知道,已经是禁用状态了 使用如下代码禁用掉 //禁止 WordPress5.0 使用 Gutenberg 编辑器 add_filter('use_block_editor_for_post

84210

从Rust到远方:PHP星系

PHP是一种规范语言(意味着可以不同虚拟机实现方案)。...从脚手架开始 PHP附带一个脚本来创建一个扩展框架模板或者说脚手架,叫做ext_skel.php。这个脚本可以从Zend引擎虚拟机源代码找到(我们把它叫做php-src)。...声明类 注意:后面的4个代码不是本文核心,它只是需要编写代码,如果不打算编写一个PHP扩展,可以跳过它。...它只是一个指针和长度结构。指针指向原始输入字符串,因此没有副本(实际上这是Slice定义)。Zend Engine一个ZVAL_STRINGL宏,它允许从指针和长度创建字符串,太棒了!...我们已经看到现实世界如何用Rust编写一个解析器,如何将其绑定到C然后编译到一个静态库和C头文件,如何创建一个PHP扩展暴露一个函数和两个对象,如何将C绑定集成到PHP,以及如何在PHP中使用这个扩展

1.1K40

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

这个加号是添加内容按钮,点击展开后我们可以发现很多内置内容,包括段落、图片、音频、画册等 其次是段落编辑 段落编辑 当鼠标选定段落时候,段落上方会出现一些格式化工具,可以直接对内容格式进行操作...而右侧竖向省略号点击后则展开一些便携操作,主要是针对内容格式调整。 内容便携操作 那么,读者可能会好奇怎么修改文字大小和颜色这些格式呢?...至此,相信读者已经发现古腾堡一个特点,那就是操作都是围绕(Block)进行,这也是新版编辑器一个理念。...未来 WordPress 版本,我们可能会看到更多基于 SaaS 解决方案。 综上所述, WordPress 5.0 还是很值得让人期待呀!...总体上 WordPress 5.0 还是易用性上追求更大突破,这点儿从编辑器、SaaS 、移动端更好支持上都可以出来,无论是个人还是企业选择 WordPress 都是一个不错开始。

1.4K30

WordPress 4.9.8版本正式发布,修复了46个问题

下面我们说一说 WordPress 4.9.8 版本亮点: 包含“Try Gutenberg”标注 WordPress 4.9.8 包含“Try Gutenberg”标注,鼓励网站所有者安装 Gutenberg...插件,以测试他们现有内容和插件如何与编辑器一起使用。...它还提供了安装 Classic Editor 插件选项 ,如果他们觉得需要更多时间来准备切换到编辑器。... WordPress 4.9.8 ,标注将显示给以下用户: 如果未安装或激活 Gutenberg,则会在单个站点上向管理员用户显示标注,多站点上显示超级管理员用户。...除了主要关注点之外,4.9.8 一个值得注意变化是开发人员现在可以为对象子类型注册元键: 使用 WordPress 4.9.8,register_meta()函数不仅支持整个对象类型(帖子,术语,

1.2K20

WordPress 5.0 发布,新增基于「编辑器 Gutenberg

WordPress 5.0 终于发布,该版本最大更新就是编辑器,正式引入新基于(block-based)编辑器:Gutenberg,它可以给用户提供更简化编辑体验。...Gutenberg 编辑器 新 Gutenberg 编辑器不会改变内容在前端展示,它可以让博客作者快速插入任何类型多媒体内容,并重新排列你想要核心展示内容。每块内容都在自己,便于操作。...如果你精通 HTML 和 CSS,Gutenberg 编辑器也不会阻挡你,他只会简化你编辑过程,而不是效果。 WordPress 默认提供大量,而且社区也不断添加新。...这种全新编辑体验为设计和内容提供了更加一致处理。如果你正在为客户构建站点,则可以创建可重用,这有益于你客户随时添加新内容,同时仍保持一致外观。...切换回经典编辑器 如果你不习惯默认编辑器,你可以切换回使用经典编辑器,经典编辑器插件将保持 WordPress 核心代码,直到 2021 年。

45630

WordPress 5.0“Bebo” 正式版发布

WordPress 5.0 最大亮点就是正式引入新基于(block-based)编辑器 —— Gutenberg,给用户提供更简化编辑体验。...新 Gutenberg 编辑器不会改变访问者对你内容观感,它作用是让你快速插入任何类型多媒体并重新排列你想要核心展示内容。每块内容都在自己单独封装,便于操作。 ?...WordPress 默认提供大量,而且社区也不断添加新。 ? 这种全新编辑体验为设计和内容提供了更加一致处理。...如果你正在构建 client 站点,则可以创建可重用,这有益于你客户随时添加新内容,同时仍保持一致外观。...无论是运营照片博客,开展新业务还是支持非盈利组织,Twenty Nineteen 都非常灵活,可以满足你需求。 当然,不想改变习惯用户可以继续使用经典编辑器。

51330

为何PHP使用率大降40%?

18% 标记与 Stack Overflow 和 JetBrains 调查更一致,因此我们可以自信地说,PHP 开发者受欢迎程度已从约 30% 下降到现在 18%。...“认为 WordPress 中大部分新代码现在都是 JavaScript,而且已经一段时间了,”他回答观众提问时说。...“因此,从许多方面来说,你可以争辩说,根据大部分活动发生情况,Gutenberg 已使我们成为一个 JavaScript 优先项目。”...是的,你没看错:Matt Mullenweg 说 WordPress 现在是一个“JavaScript 优先项目”。该公司争议新基于用户界面 Gutenberg 是造成这种情况主要原因。...然而,仍然相当多开发者使用 PHP——两项大型开发者调查,18% 比例并非微不足道。这就是 PHP 基金会发挥作用地方。

19110

WordPress 6.0 正式版发布 版本详细讲解

Gutenberg 扩展到 WordPress 完整站点编辑体验意味着社区必须解决所有问题都是复杂而深远。WordPress 6.0 是社区致力于共同应对这些严峻挑战一个例子。...当您将某些从一种类型转换为另一种类型时(例如,从段落转换为代码),请保留现有样式。 创建自定义按钮,您制作任何新按钮都将自动保留样式自定义。...在编辑模板时,根部或之间,快速插入器会向您显示图案和模板部分,以帮助您更快地工作并发现新布局选项。 查询支持对多个作者进行过滤,支持自定义分类法,并支持自定义没有结果时显示内容。...组块中一次控制一组间隙、边距、排版等。 堆栈、行和组变体之间切换以定位具有更大布局灵活性组。 使用图库间隙支持功能来创建不同外观 – 从添加所有图像之间间距,到完全消除间距。...更好列表视图 新键盘快捷键使您能够从列表视图中选择多个,批量修改它们,并将它们拖放到列表。列表视图可以轻松打开和关闭;默认情况下它是折叠,只要您选择一个,它就会自动扩展到当前选择。

1.6K40

命令行上数据科学第二版 四、创建命令行工具

命令行工具优点是您不必记住整个一行程序,并且如果您将它包含到其他管道,它会提高可读性。在这个意义上,你可以把命令行工具想象成类似于编程语言中一个函数。...然而,使用编程语言好处是代码一个或多个文件。这意味着您可以轻松地编辑和重用这些代码。如果代码参数,它甚至可以被一般化,并重新应用于遵循类似模式问题。...通过命令添加参数,您可以增加编程语言提供灵活性。随后,将演示如何从用编程语言编写代码创建可重用命令行工具。...我们命令行工具许多固定命令行参数,例如用-nr代表sort,用-n 10代表head。最好保持前一个论点不变。然而,允许head命令不同值是非常有用。...无法提供这两种语言完整介绍,所以我假设您对 Python 或 R 一定了解。其他编程语言,如 Java、Go 和 Julia,创建命令行工具时也遵循类似的模式。

2.2K40

从Rust到远方:WebAssembly 星系

对于Gutenberg Rust解析器,没有使用像wasm-bindgen这样工具(这是一个纯粹gem),因为几个月前开始这个项目的时候遇到了一些限制。请注意,其中一些已经被解决了!...想要提醒读者GutenbergRust解析器开放了一个AST以及一个root函数(语法根),相应定义如下 pub enum Node { Block { name...alloc函数创建一个指定长度数组(因为它是一个顺序内存段)并且返回这个空数组指针。...内存开辟一空间来存buffer, 然后我们实例化一个unit8类型buffer视图,也就是说我们把这个buffer看作是一个u8序列,这个就是Rust想要, 最后这个buffer被循环复制到内存...为了能在这两个环境共享代码, 可以一个.mjs文件实现一个边界层(我们写Javascript代码),也就是ECMAScript模块。

1.5K20

关于“Python”核心知识点整理大全25

有时候,一些仅在try代码成功执行时才需要运行 代码;这些代码应放在else代码。except代码告诉Python,如果它尝试运行try代码 代码时引发了指定异常,该怎么办。...本节使用文本来自项目Gutenberg(http://gutenberg.org/),这个项目提 供了一系列不受版权限制文学作品,如果你要在编程项目中使用文学文本,这是一个很不错 资源。...为此,我们将要 分析文件名称存储一个列表,然后对列表每个文件都调用count_words()。...故意没有将siddhartha.txt放到word_count.py所在目录,让你能够看到这 个程序文件不存在时处理得有多出色: def count_words(filename): --...10.3.8 失败时一声不吭 在前一个示例,我们告诉用户一个文件找不到。但并非每次捕获到异常时都需要告诉用 户,有时候你希望程序发生异常时一声不吭,就像什么都没有发生一样继续运行。

8410

8个用于设计漂亮表格WordPress插件

WordPress作为内容管理工具一个好处是,几乎所有文字处理软件能做事情(例如文本格式,布局格式,嵌入图像等等)都可以WordPress编辑器完成,但比较欠缺一种功能是表格设计。...WordPress最新版Gutenberg编辑器已经了表格“功能。你可以在这里在线体验一下:https://wordpress.org/gutenberg/。可以快速插入一个简单表格。...Gutenberg表格工具 除此之外,你还在WordPress手写代码进行插入表格操作: ?...管理后台,提供了一个类似Excel界面。只需添加数据、选择样式和更改设置,然后发布即可。你可以使用该插件创建表格、图表,并且比TinyMCE具有更多格式设置。 League Table ?...当你大量外部数据时想要引入WordPress时,这个付费插件非常适。你所要做就是上传导入电子表格文件,然后自定义在你网站上显示方式。

4.9K20

WordPress 初学者词汇表(术语解释)

默认情况下,WordPress 会自动使用您帖子前 55 个单词作为摘录,不过您可以创建帖子时自定义一个摘录。 Meta 不,我们不是在谈论 Facebook。...Gravatar(头像) Gravatar是与您电子邮件相关联头像(名称和图像),您可以Gravatar主网站上创建它。现在相信您会问,这与 WordPress 什么关系?... WordPress ,您可以非常轻松地创建菜单,并且有内置设置可以将菜单分配到特定位置(例如,主菜单、侧边栏菜单、页脚菜单等)。...Gutenberg(古腾堡) Gutenberg是默认包含在 WordPress 无代码内容构建器。...Block and Block Templates(模板) 是您可以通过内容或页面构建器(例如 Gutenberg 或 Elementor)添加内容构建元素。

7.1K20

WordPress 禁用 Rest API 默认路由兼容古腾堡 Gutenberg 编辑器

但是由于 WordPress 默认使用编辑器(古腾堡 Gutenberg),所有如果直接使用代码禁用 WordPress Rest API 默认路由就会导致后台编辑器无法正常使用。...故此子凡就来分享一个兼容 WordPress 编辑器情况下,对外也能够禁用 WordPress rest api,具体代码如下: add_action('plugins_loaded',function...) remove_filter( 'rest_api_init', 'create_initial_rest_routes', 99 );//复制此行到当前主题 functions.php 文件可以直接禁用...WordPress 默认路由 }); 如果你已经使用类似或者其它方法禁用了 WordPress 默认路由,建议删除后使用子凡以上提供代码,如果从未使用过类似的功能或插件,可以复制以上代码到你当前所用主题...需要说明是,以上代码主要实现原理就是判断用户是否登录以及是都有编辑权限,只有当用户登录,且拥有文章编辑权限用户才不会禁用默认路由,以达到兼容古腾堡编辑器目的,当然如果你像子凡一样只用 WordPress

68990

超强VS Code,8个顶级扩展插件让前端开发如虎添翼!

但也许最酷是 VS Code 提供了规模超大扩展插件,扩展 商店 大量免费扩展可用于支持新语言、调试代码或添加各种其他自定义功能。你可以灵活配置自己编辑器,更好地满足日常开发需要。...但 ESLint 扩展可以使这个过程更容易。它能够执行代码之前帮你指出其中潜在问题。更强大是它允许你创建自己 linting 规则。...它有许多方便功能,包括代码、watches 和控制台中设置断点功能。另外你可以 VS Code 运行Chrome实例,或把调试器附加到单独运行浏览器实例。...WordPress 编辑器(又名 Gutenberg)是基于它建立。...界面主题:One Dark Pro [1240] One Dark Pro 敲代码时,一个醒目且养眼界面主题会很有帮助。毕竟编码过程可以持续好几个小时。

3.5K00

niRvana · 轻拟物主题4.8完美版

认为是时候从极致扁平稍微向拟物致敬了。...编辑器优势:完全可视化操作,无论是插入内容还是编辑参数,都可以可视化操作,而无须去修改繁琐代码。...您可以: 增加或减少边栏 定义每个边栏图标 分配边栏文章还是首页显示 当文章被检测到“文章目录”时,也会自动将文章目录当做一个边栏默认展示。...UI样式 您可以轻松文章插入小标题样式、模态框、提示框、折叠内容、内容回复可见、下载按钮、下拉菜单、站内文章链接等,例如: 图片 图片 未标题 显示下拉菜单 左眼会配右眼哭の博客...(WP5.0正式版上线后,主题Gutenberg模块将采用“回退机制”,即使模块升级,也不会出现无法编辑问题) v1.2.1 1、修复Gutenberg模块一些问题,虽然不知道正式版WP5.0是否正常

8.5K10

从Rust到远方:ASM.js星系

这展现了一个良好设计流水线和不同工作组的人良好合作。 题外话:如果你在读这篇博客,假设你是一个开发者。既然如此,很确定你可以花几个小时阅读源代码就像欣赏大师画作。...Javascript 输出gutenberg_post_parser.asm.js文件包含一个唯一函数叫做:GUTENBERG_POST_PARSER_ASM_MODULE,它返回一个对象包含了4个私有函数...你是否还记得WebAssembly作为Javascript边界Module对象?那和GUTENBERG_POST_PARSER_ASM_MODULE函数返回完全是一样。...#结论 我们已经看到ASM.js可以只支持Javascript环境(像IE)作为WebAssembly备用方案,并可适配环境打开或者关闭ASM.js优化。...我们也已经比较WebAssembly版本和纯Javascript版本解析器中看到同样速度结论。然而这个结论是否也适用于ASM.js模块呢?

1.5K20
领券