古騰堡 Gutenberg 開發(fā)教程：為區(qū)塊創(chuàng)建自定義類別

當(dāng)您為自定義古騰堡塊創(chuàng)建 block.json 文件時，您需要向它提供一個category參數(shù)。

默認(rèn)情況下，我們可以使用默認(rèn)的之一：

• text– 文本，
• media– 媒體，
• design– 設(shè)計，
• widgets– 小工具，
• theme– 主題，
• embed– 嵌入。

但借助 block_categories_all過濾器（如果您仍在使用 WordPress 5.8.0版本或更低版本，可用 block_categories ），您可以輕松創(chuàng)建新的塊類別。

例如，讓我們看一下 Jetpack 插件創(chuàng)建的這個自定義類別：

這是我們的自定義類別：

如果您想知道我在“Blocks by Misha”類別中使用了哪些積木：

• “Subscription”——這個塊是我關(guān)于為古騰堡開發(fā)自定義塊的深入視頻課程的一部分。
• “Carousel” – 這是我的插件，添加了一個簡單的基于 Swiper 的輪播塊。
• “Map”——這是我的另一個插件，添加了谷歌地圖塊。

好吧，我們最后添加一個塊類別 – 就這么簡單：

add_filter( 'block_categories_all', 'misha_new_block_category' );

function misha_new_block_category( $block_categories ) {

	$block_categories[] = array(
		'slug' => 'misha-blocks',
		'title' => 'Blocks by Misha'
	);

	return $block_categories;
	
}

如何重新排序塊類別 

只需幾個簡單的步驟，我們就可以開始了：

1. 使用新的類別元素創(chuàng)建一個數(shù)組，該元素也是一個數(shù)組。使用任意隨機字符串作為數(shù)組元素索引。
2. 決定您的自定義類別應(yīng)出現(xiàn)在什么位置。不要忘記，數(shù)組中的計數(shù)從 開始0，因此如果您設(shè)置2為類別順序，那么它將出現(xiàn)在第 3 個位置。
3. 使用array_splice()函數(shù)將具有默認(rèn)塊類別的數(shù)組拆分為兩個數(shù)組，然后使用+運算符將??所有三個數(shù)組合并為一個數(shù)組。
4. 用于array_values()重置數(shù)組索引，因此其中不再有“字面上的任何東西”鍵。

完整代碼：

add_filter( 'block_categories_all', 'misha_new_block_category' );

function misha_new_block_category( $cats ) {

	// create a new array element with anything as its index
	$new = array(
		'literallyanything' => array(
			'slug'  => 'misha-blocks',
			'title' => 'Blocks by Misha'
		)
	);

	// just decide here at what position your custom category should appear
	$position = 2; // 2 – After Text and Media, so technically it is a 3rd position

	$cats = array_slice( $cats, 0, $position, true ) + $new + array_slice( $cats, $position, null, true );

	// reset array indexes
	$cats = array_values( $cats );

	return $cats;

}

對舊版本的 WordPress 使用 block_categories 

您還可以使用version_compare()函數(shù)來選擇合適的過濾器掛鉤，但對我來說這看起來不是一個非常干凈和好的解決方案。

if ( version_compare( get_bloginfo( 'version' ), '5.8', '>=' ) ) {
	add_filter( 'block_categories_all', 'misha_new_block_category' );
} else {
	add_filter( 'block_categories', 'misha_new_block_category' );
}

好了，感謝 Misha 的教程。