Gutenberg 區(qū)塊樣式 API 簡介

Gutenberg 提供了不同的 API，可幫助開發(fā)人員增強/擴展現(xiàn)有功能，今天；我們將在本教程中介紹 Gutenberg 樣式 API 以及一個示例。

什么是古騰堡樣式 API？

Gutenberg 樣式 API 允許我們使用其他樣式擴展現(xiàn)有的 Gutenberg 塊。這是一個簡單的 API，但在某些情況下非常有用。

入門

為了開始，使用這個啟動模板“ CakeWP/gutenberg-extension-starter-template ”快速創(chuàng)建基于古騰堡的插件。

Gutenberg 塊樣式 API 是如何工作的？

這是對 Gutenberg 中塊樣式如何工作的高級解釋。

選擇塊樣式時，Gutenberg 在塊包裝器上添加一個新類（從塊樣式 slug 生成）。

選擇器：is-style-{slug}

然后，我們可以使用上面生成的選擇器使用 CSS 范圍設(shè)置塊的樣式。

如何為 Gutenberg 列表塊創(chuàng)建其他塊樣式

當(dāng)您想在帖子/頁面中顯示項目符號時，Gutenberg 核心列表塊非常有用，但是目前（在本教程的時候），沒有任何種類的內(nèi)置列表樣式可供您選擇。因此，作為 Gutenberg 塊樣式 API 的示例，我們將使用以下附加樣式擴展 Gutenberg 核心列表塊：

風(fēng)格一：心形

風(fēng)格二：星星

風(fēng)格3：箭頭

您可以使用registerBlockStyle(blockSlug, styles)方法在 Gutenberg 中注冊塊樣式。

目前，古騰堡塊樣式包含以下 3 個屬性：

• name：區(qū)塊樣式的標(biāo)識符名稱。
• label : 區(qū)塊樣式標(biāo)簽
• isDefault(optional)：通過添加這個可選的“ isDefault ”屬性，您可以指定在沒有提供自定義類名時應(yīng)該使用這種特定的塊樣式。

// src/index.js
wp.blocks.registerBlockStyle("core/list", [
	{
		name: "heart",
		label: "Heart",
	}
]);

您也可以像這樣取消注冊上述樣式：wp.blocks.unregisterBlockStyle('core/list', 'heart')

上面的代碼為核心 Gutenberg 列表塊注冊了一個新樣式的“心形”。

目前，樣式不會做任何事情，因為我們還沒有添加任何樣式。在這種情況下，生成的選擇器應(yīng)該是“ is-style-heart ”（因為提供了樣式 slug）。

現(xiàn)在讓我們?yōu)檫@個特定的塊樣式添加一些樣式。

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

如果您使用的是我們的 Gutenberg 入門擴展模板。在src → style.scss中添加相同的樣式，以便樣式在前端工作。

該樣式現(xiàn)在應(yīng)該可以按預(yù)期工作。

現(xiàn)在讓我們添加其他剩余樣式（“箭頭”和“星星”）。

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: "→ ";
}

最后結(jié)果

注：本文內(nèi)容來自 gutenberghub.com，由 WordPress大學(xué) 翻譯整理。