web-dev-qa-db-ja.com

グーテンベルグエディタはカスタムブロックのラッパーとしてカスタムカテゴリを追加します

Gutenbergから提供されているAPIによって私たちが知っているように、私たちは以下のようにカスタムブロックを作成することができます。

const { registerBlockType } = wp.blocks;

registerBlockType( 'my-namespace/my-block', {

})

しかし、どうすればgutenbergエディタでカスタムブロックの周りにラッパー（レイアウトのようなカテゴリ）を作成するのですか？スライダー、ギャラリーなどのカスタム要素のコレクターが必要だとしましょう。

categoriescustomizationeditorblock-editor
4
fefe

ドキュメントを深く掘り下げると、次のような結果が得られました。

あなたのカスタムブロックをグーテンベルクの与えられたカテゴリの周りにグループ化する方法があります、そしてそれ故に我々はメソッドblock_categoriesを持っています。そのため、フィルタを使用すると、デフォルトのカテゴリをカスタムのカテゴリで拡張できます。

これが私の例です：

add_filter( 'block_categories', function( $categories, $post ) {
    return array_merge(
        $categories,
        array(
            array(
                'slug'  => 'my-slug',
                'title' => 'my-title',
            ),
        )
    );
}, 10, 2 );

これについての詳細は 提供されているAPI にあります。

4
fefe

block_categoriesフィルタを使用してデフォルトブロックカテゴリのリストをフィルタすることが可能です。コードをfunctions.phpまたはyour-plugin.phpファイルに配置します。 ここでWordPressグーテンベルクハンドブックで説明されている

function my_plugin_block_categories( $categories, $post ) {
    if ( $post->post_type !== 'post' ) {
        return $categories;
    }
    return array_merge(
        $categories,
        array(
            array(
                'slug' => 'my-category',
                'title' => __( 'My category', 'my-plugin' ),
                'icon'  => 'wordpress',
            ),
        )
    );
}
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );

SVGアイコンを使用するには、jsのアイコンを置き換えます。あなたのアイコンを定義します。

const icon = <svg className='components-panel__icon' width='20' height='20' viewBox='0 0 20 20' aria-hidden='true' role='img' focusable='false' xmlns='http://www.w3.org/2000/svg'>
    <rect fill="#ffffff" x="0" y="0" width="20" height="20"/>
    <rect fill="#1163EB" x="2" y="2" width="16" height="16" rx="16"/>
</svg>;

wp.blocks;のupdateCategory関数を使用してアイコンを置き換えるクラスcomponents-panel__iconを追加すると、アイコンの左側に6pxスペースが追加されます。

( function() {
    wp.blocks.updateCategory( 'my-category', { icon: icon } );
} )();
1
Aamer Shahzad