小程序代理加盟外贸建站,就用成品站模板

Gutenberg 区块样式 API 简介

维翔主机 - 老牌WordPress空间

Gutenberg 提供了不同的 API,可帮助开发人员增强/扩展现有功能,今天;我们将在本教程中介绍 Gutenberg 样式 API 以及一个示例。

什么是古腾堡样式 API?

Gutenberg 样式 API 允许我们使用其他样式扩展现有的 Gutenberg 块。这是一个简单的 API,但在某些情况下非常有用。

入门

为了开始,使用这个启动模板“ CakeWP/gutenberg-extension-starter-template ”快速创建基于古腾堡的插件。


Gutenberg 块样式 API 是如何工作的?

这是对 Gutenberg 中块样式如何工作的高级解释。

选择块样式时,Gutenberg 在块包装器上添加一个新类(从块样式 slug 生成)。

选择器:is-style-{slug}

然后,我们可以使用上面生成的选择器使用 CSS 范围设置块的样式。

如何为 Gutenberg 列表块创建其他块样式

当您想在帖子/页面中显示项目符号时,Gutenberg 核心列表块非常有用,但是目前(在本教程的时候),没有任何种类的内置列表样式可供您选择。因此,作为 Gutenberg 块样式 API 的示例,我们将使用以下附加样式扩展 Gutenberg 核心列表块:

风格一:心形

心形列表样式

风格二:星星

星星列表样式

风格3:

箭头列表样式

您可以使用registerBlockStyle(blockSlugstyles)方法在 Gutenberg 中注册块样式。

目前,古腾堡块样式包含以下 3 个属性:

  • name:区块样式的标识符名称。
  • label : 区块样式标签
  • isDefault(optional):通过添加这个可选的“ isDefault ”属性,您可以指定在没有提供自定义类名时应该使用这种特定的块样式。
// src/index.js
wp.blocks.registerBlockStyle("core/list", [
	{
		name: "heart",
		label: "Heart",
	}
]);

您也可以像这样取消注册上述样式:wp.blocks.unregisterBlockStyle('core/list', 'heart')

上面的代码为核心 Gutenberg 列表块注册了一个新样式的“心形”。

新的心型

目前,样式不会做任何事情,因为我们还没有添加任何样式。在这种情况下,生成的选择器应该是“ is-style-heart ”(因为提供了样式 slug)。

现在让我们为这个特定的块样式添加一些样式。

/** src/editor.scss **/
.is-style-heart {
	list-style-type: " ";
}

如果您使用的是我们的 Gutenberg 入门扩展模板。在src → style.scss中添加相同的样式,以便样式在前端工作。

该样式现在应该可以按预期工作。

现在让我们添加其他剩余样式(“箭头”和“星”)。

wp.blocks.registerBlockStyle("core/list", [
	{
		name: "heart",
		label: "Heart",
	},
	{
		name: "star",
		label: "Star",
	},
	{
		name: "arrow",
		label: "Arrow",
	}
]);

添加样式。

.is-style-star {
    list-style-type: "★ ";
}

.is-style-heart {
	list-style-type: " ";
}

.is-style-arrow {
	list-style-type: "→ ";
}

最后结果

注:本文内容来自 gutenberghub.com,由 WordPress大学 翻译整理。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
15个WordPress主题,仅需499元!
WordPress开发

WordPress 外观-自定义(Customizer)选项字段数据清理示例

2022-3-31 7:31:00

WordPress开发WordPress资讯

WordPress 6.0 新增过滤器允许修改文章内容中的图片输出

2022-4-30 11:45:51

2 条回复 A文章作者 M管理员
  1. 萌哥,WordPress6.0Beta1昨天发布了,能讲讲新特性吗?谢谢啦~

    • 请继续关注WordPress大学,会发布相关内容

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索