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

WordPress古腾堡-块编辑器组件SelectControl:自定义事件属性

WordPress古腾堡-块编辑器组件SelectControl是WordPress古腾堡编辑器中的一个块组件,用于创建自定义的下拉选择框。它允许开发者定义选项列表,并在用户选择不同选项时触发自定义事件。

该组件的主要属性包括:

  1. label:下拉选择框的标签,用于描述该选择框的用途。
  2. value:当前选中的值。
  3. options:选项列表,包含每个选项的值和标签。
  4. onChange:当用户选择不同选项时触发的事件回调函数。

SelectControl组件的分类是前端开发中的UI组件,它可以用于创建用户界面中的下拉选择框,提供了更好的用户交互体验。

该组件的优势包括:

  1. 灵活性:开发者可以自定义选项列表,根据实际需求创建不同的下拉选择框。
  2. 可扩展性:SelectControl组件是WordPress古腾堡编辑器的一部分,可以与其他块组件无缝集成,扩展编辑器的功能。
  3. 用户友好:通过下拉选择框,用户可以方便地从多个选项中进行选择,提高了用户操作的便利性。

SelectControl组件的应用场景包括但不限于:

  1. 表单:可以用于创建表单中的下拉选择框,例如选择国家、城市、性别等。
  2. 设置页面:可以用于创建设置页面中的选项设置,例如选择主题颜色、语言等。
  3. 自定义块:可以用于自定义块的开发,为用户提供更多的选项。

腾讯云相关产品中与SelectControl组件相关的产品是腾讯云云开发(Tencent Cloud CloudBase),它是一款支持云原生开发的全栈化云开发平台。通过腾讯云云开发,开发者可以快速搭建和部署基于WordPress古腾堡编辑器的应用,并使用SelectControl组件创建自定义的下拉选择框。

更多关于腾讯云云开发的信息和产品介绍,请访问腾讯云官方网站:腾讯云云开发

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

相关·内容

WordPress 5.3 发布,全面优化编辑器

WordPress 5.3 主要是扩展和完善了 5.0 版本引入的编辑器,既编辑器,除了加入新的,交互和体验都更加直观。...此版本还引入了2020主题,为用户提供了更多的设计灵活性以及与编辑器的集成,从而让你更加容易创建漂亮的复杂布局的网页。...无障碍的改进包括了管理界面整合区块编辑器样式。...这些改进过的样式修正了许多无障碍访问的问题:表单字段和按钮的颜色对比度、编辑器和管理界面的外观一致性、新的底部通知、标准化的WordPress配色方案和全新的Motion交互,能让区块移动时更加流畅及自然...对开发者的改进 日期时间组件修正 开发者现在能够更稳定地与日期和时区一同工作。日期和时间功能的全新API函数能够用以实现时区获取和PHP互操作,还有其他bug修正。

60230

屏蔽 WordPress 编辑器,换回经典编辑器

WordPress 5.0 带来的编辑器(英文名是 Gutenberg)非常酷,也叫做编辑器(block editor),它把内容当作一来处理,每一有自己的设置,使用起来非常清晰好用:...编辑器使用不习惯 但是习惯是一件很难改变的事情,很多人习惯了经典的编辑器,对于编辑器总是用不习惯。...可能编辑器大部分的界面都是关注内容部分,对于摘要,特色图片,分类这些都放到侧边,并且默认隐藏,这个造成了很多人非常不习惯,甚至不知道哪里去设置。...我为了习惯的编辑模式,我把很多的针对文章的操作都移到了文章列表,比如在后台的文章列表设置文章特色图片,设置文章摘要,一键上传外部图片等,让编辑器专注于文章内容管理。...如何屏蔽编辑器 为了兼容,WordPress 官方也提供了 Classic Editor 插件,可以通过各种方式在编辑器和经典编辑器切换使用: 管理员可以设置默认的编辑器

41920
  • WordPress 5.7 发布,更好用的编辑器

    WordPress 5.7 发布,新版本改善了编辑器的编辑体验,并使用户能够轻松创建更多高级,并为编辑器添加更强大的自定义项,还有 HTTPS 切换等其他功能改进​。...编辑器更易使用 增强字体调整:编辑器很多的地方都可以调整字体,比如列表,代码等,并且无需切换界面。 增强可重用,更加稳定,更好用,并且支持自动保存。...支持拖放:支持将组从插入器中直接拖放到编辑器。 更多的 不懂代码也可以实现功能,做更多的事情。 封面:可以制作一个填充整个窗口的封面。...可以在 WordPress 默认仪表盘的配色方案找到新的调色板,主题,插件或任何其他组件,开发的时候可以参考使用,更多这方面的信息,请参考调色板开发说明。...延迟加载 iFrame iframes 也可以延迟加载了,WordPress 默认会给设置了高和宽的的 iframe 加上 loading="lazy" 的属性

    73420

    Wordpress如何禁用编辑器,使用传统经典编辑器

    编辑器和经典编辑器到底哪个更好用?这个因人而异,每个人的习惯都不相同,选择适合自己的就好了。...悦然网络工作室为客户制作企业网站都是使用的新版wordpress程序,而新版早就全面启用了编辑,这是一种模块化的编辑器,其实是非常好用的,不过也有一些用户不太习惯,还是想换回以前常见的那种编辑器。...有以下方式可以换回经典编辑器。 一、使用插件 登陆网站后台,依次点开“插件”-“安装”,然后搜索“classic”就可以找到经典编辑器插件了,如上图第一个,点安装就可以了。...二、使用网站模板自带功能 有些wordpress网站模板中集中了经典编辑器的切换开关,大家只需要设置一下就可以了。...操作如下: 登陆网站后台,依次点开“网站优化”-“WP优化”,然后在右侧看到会有一个“禁用编辑器的开关,把它打开就可以返回经典编辑器了。

    1.4K00

    WordPress新添加一个编辑器

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

    7710

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

    但是由于 WordPress 默认使用编辑器 Gutenberg),所有如果直接使用代码禁用 WordPress Rest API 默认路由就会导致后台编辑器无法正常使用。...故此子凡就来分享一个兼容 WordPress 编辑器的情况下,对外也能够禁用 WordPress rest api,具体代码如下: add_action('plugins_loaded',function...(){//兼容 编辑器 global $post; if( !...需要说明的是,以上代码中的主要实现原理就是判断用户是否登录以及是都有编辑权限,只有当用户登录,且拥有文章编辑权限的用户才不会禁用默认路由,以达到兼容编辑器的目的,当然如果你像子凡一样只用 WordPress...经典编辑器,那么建议直接禁用 WordPress 默认路由即可。

    71390

    WordPress 5.6 发布,新的 2021 主题和编辑器大更新

    WordPress 5.6 发布,这个版本发布了新的默认主题 2021,然后给增加大量的模块,让你更加方便插入图片,声音和视频。...编辑器更新 更灵活的布局:编辑器更加方便设置布局,支持单栏或者多栏,支持固定宽度,全屏头部,背景图支持渐变。...更多模式:在某些主题中,预配置的模式让在站点上创建页面变得轻而易举,所以更多的模式让你创建页面的时候变得更加方便快捷。...2021主题 2021 是一个完全为全新的编辑器创建的主题,并且带有自己专属的快模式,花几秒钟试试它不同的布局,就可以让你的文章脱颖而出。...支持 PHP 8 WordPress 5.6 标志着 WordPress 核心支持 PHP 8 迈出了第一步,WordPress 建议主题和插件作者要让自己的产品和 PHP 8 兼容,就是在正常使用情况下

    85240

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

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

    1.4K30

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

    导航支持多种方式菜单管理 新导航的侧边栏使得编辑站点菜单更加容易,可以快速添加、删除和对菜单项的重新排序。...在编辑器直接使用 Openverse 资源 Openverse 中已经有超过了 7 亿免费和公开许可的图片和音频,现在通过区块插入器直接集成到 WordPress 编辑器中。 ...无干扰模式专注写作 编辑器也支持无干扰写作模式了,可以一键隐藏侧边栏,所有面板和控件等,专注自己的创作。...自定义 CSS 用户可以通过设计工具和自定义 CSS 以自己希望的方式增强站点的外观,这不仅达到了更高级别的样式控制,也能实现在站点设计中实现最大的创造力和艺术性。...简单说 WordPress 6.2 主要的更新就是编辑器的更新,没有类似 WordPress 6.1 无需第三方插件就能实现首页 0 SQL 这个大的更新。

    1.1K40

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

    整个插件自己写的代码只有不到 30 行,就是利用 WordPress 的 wp_enqueue_scripts 接口让页面加载 prism 的样式和脚本代码。...非常简单,首先根据你使用不同编辑器略用不同。...如果你使用编辑器的话,先点击选择创建一个代码: 然后输入代码,选择该该区块: 点击右侧区块属性框,在额外的CSS类中输入:language-php,如果你的代码是 JS 则,输入 language-javascript...如果是经典编辑器,则切换到代码模式,然后把代码放到: 和  之间即可,如下图所示: pre 标签的 class...定义就是语言,如何设置,和上面的设置方式是一样的,自己灵活处理一下,个人感觉还是编辑器方便一点。

    1.8K30

    WordPress 推出了全新的区块样板构建器

    不过你多喜欢和怀念经典编辑器WordPress 已经在编辑器路上狂奔了,为了让大家更加方便使用编辑器,现在 WordPress.org 推出了全新的区块样板构建器,这个距离 WordPress.org...站点的编辑器中,直接使用。...下图就是 WordPress.org 官方的区块样板目录列表页: 鼠标移到每个样板上,就会显示「Copy」按钮,点击就会可以复制该区块样板,然后切换到自己的 WordPress 后台,在编辑器中直接粘贴即可...当然也可以点击查看该区块样板的详情,再复制使用: 区块样板创建器 顾名思义,不过是设计师,还是内容编辑,区块样板创建器可以让任何人创建自己的自定义样板,根据自己的想法,以任意方式排列区块的集合。...最后需要简单说一下,WordPress 的区块样板,基本都可以运行在所有的 WordPress 主题,但是在一些针对堡主题,可能运行的更好,比如你可以尝试一下默认的 2022 主题来测试这些区块样板

    39040

    WordPress 5.5 发布,关键词:速度,搜索,安全

    WordPress 5.5 发布,这个版本在「速度」、「搜索」、「安全」这三个方面加强了网站的能力: 速度 图片给网站增添了很多光彩,同时也让网站变得很慢,WordPress 5.5 使用了传说中的“懒加载...搜索 WordPress 5.5 默认提供了一个 XML sitemap 文件,具体怎么工作,还没仔细了解,我之后会把 WPJAM Basic 的「简单SEO」扩展基于该功能,进行升级。...编辑器 模式:通过使用文本和媒体的组合来创建复杂精美的布局。 新的目录:在后台编辑器就可以选择各种好用好玩的“”。 内联图像编辑:使用「图像」就能直接裁剪,旋转和缩放照片。...WordPress 已经换成了 allowed_options,WPJAM Basic 最新版已经做了兼容了,接下来,我将针对 WordPress 5.5 的最新功能,进行优化。

    42130

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

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

    28810

    如果你的 WordPress 安装了 PHP Everywhere 插件,请赶快升级或者删除

    如果你的 WordPress 安装了 PHP Everywhere,那么你要赶快升级到 3.0 版本或者删除了,因为近日该插件被披露存在三个严重的安全漏洞,攻击者可在受影响的网站上利用该漏洞,执行任意代码...PHP Everywhere 插件 PHP Everywhere 可以让你在 WordPress 随时随地使用 PHP 代码,使用户能够在 WordPress 的文章,页面和侧边栏中插入和执行 PHP...的代码,根据 WordPress 官方插件库的数据,该插件已被 3 万多个 WordPress 站点使用。...CVE-2022-24665 - 通过编辑器进行远程代码执行(同样需要贡献者的权限) 如果网站存在这三个漏洞,黑客将可以利用它们并执行恶意的 PHP 代码,甚至可以实现对网站的完全接管。...3.0.0 版本通过移除短代码功能,并且提供一个升级向导,将旧的短代码升级到 Gutenberg 编辑器里面的(block)。但是 3.0.0 版本只支持编辑器,不再支持原来的经典编辑器了。

    40130

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

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

    82510

    WPJAM Basic 去掉了「屏蔽 REST API」功能

    WPJAM Basic 的 REST API WordPress 是在 4.4 版本推出 REST API 功能,不过我在更早之前就在 WPJAM Basic 就做了 REST API 接口的功能,直到现在我还在使用...当然有一点我觉得 WPJAM Basic 的 REST API Rewrite 之后 URL 更好看的,比如果酱小程序的文章列表接口: https://博客域名/api/post/list.json 屏蔽 WordPress...随着 WordPress 版本的推进,功能的叠加,功能也产生了依赖,WordPress REST API 成为很多功能的基础,比如编辑器就是基于 REST API 的,所以很多人在 WPJAM Basic...的「优化设置」把 REST API 功能屏蔽了,然后发现没法用了,就来怼我:装了 WPJAM Basic,都不能用了。...所以很无语,虽然在「优化设置」已经做了处理,勾选了「屏蔽」才能勾选「屏蔽 REST API」,但是不知道什么原因,可能其他插件或者主题把编辑器屏蔽了,然后所有的罪都由 WPJAM Basic

    45620

    禁用 WordPress Auto Embeds 功能,加快页面解析速度

    WordPress 的 Easy Embeds 功能 这个就是 WordPress 的 Easy Embeds 的功能,可以让我们直接发布一个 URL(需要单独一行,纯文本,不带链接才行),就能把这个...在文章中直接输入这个 TED 地址: https://www.ted.com/talks/matt_mullenweg_why_working_from_home_is_good_for_business WordPress...就会自动把这个 URL 转化成 TED 对应页面的视频: 如果你是用 WordPress 编辑器,那么在编辑器可以看到目前支持的自动嵌入服务: 点击上图的按钮,点击对应的按钮: 输入链接...,然后点击潜入,也可以一键嵌入: 禁用 WordPress Auto Embeds 功能 从编辑器默认的潜入按钮, WordPress Easy Embeds 支持的自动嵌入网站大部分都是国外的网站...), 8 ); 所以我们只需要把这个 fliter 删除即可,但是我们不能使用 this 这个变量,需要用到 wp_embed 这个全局变量: // Disable auto-embeds for WordPress

    1.2K20

    一文详解 WordPress Shortcode 简码

    WordPress Shortcode 指的是使用[]包含的简码或者短代码,WordPress 会识别这些代码并根据它们定义的回调函数输出为内容。...another-shotcode] 更多内容[/mycode] [mycode foo="bar" id="123"]一些内容[/mycode] 使用 Shortcode 在后台撰写的文章的时候,如果是编辑器...,直接可以选择简码的区块,它在小工具分类的比较下面: 然后在简码的区块中输入具体简码: 如果不是编辑器则直接输入简码。...这是因为每个 Shortcode 都定义了一个对应的回调函数来处理,这个回调函数一般有两个参数:Shortcode 的属性参数和内容: function my_shortcode_func($attr,...这个 Shortcode,它的内容(content)就是邮箱地址,还定义了属性 link,它的值为 1 时候,邮箱显示为可点击,详细代码如下: add_shortcode('email', function

    1.6K20

    WordPress 官方推出的简洁文字阅读主题 Livro

    今天给大家推荐 WordPress 官方出的一个非常简洁的 WordPress 主题:Livro,这个主题使用深色背景,白色文字,适合文字阅读,按照官方说法,这样的设计是旨在让你获得如同阅读古典书籍时一样平静的感觉...我测试了一下,在中文环境下显示效果也是可以的: Livro 支持全站编辑 Livro 主题虽然简洁,但是支持编辑器全站编辑,所以就很容易进行自定义设置。...Livro 主题还内置了 15 种区块样板,但是大部分是页眉和页脚的,其中两个是页面的,一个是关于我们页面,一个是联系页面: 作为一个适合阅读的主题,我觉得对于一些主要作为文字的博客是非常合适的,并且是 WordPress...官方出的主题,所以主题的质量也是能够得到保证的,并且作为一个支持全站编辑的主题,作为研究 WordPress 主题的开发也是一个很好的例子。...演示:https://livrodemo.wordpress.com/?demo 下载:https://wordpress.org/themes/livro/

    55630
    领券