it-swarm-eu.dev

Editor Gutenberg přidat vlastní kategorii jako obal pro vlastní bloky

Jak víme z poskytnutého API od Gutenbergu, můžeme vytvořit vlastní blok jako

const { registerBlockType } = wp.blocks;

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

})

ale jak vytvořit obálku (kategorie jako rozložení) kolem mých vlastních bloků v editoru gutenberg? Řekněme, že chci mít sběratele pro mé vlastní prvky jako je posuvník, galerie ...

categoriescustomizationeditorblock-editor
4
fefe

Hlubší hloubení v dokumentaci jsem dostal následující výsledek.

Existuje způsob, jak seskupit své vlastní bloky kolem dané kategorie v Gutenbergu, a proto máme metodu block_categories. Takže s filtrem můžete rozšířit výchozí kategorie o vlastní.

Zde je můj příklad:

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

Více se o tom dozvíte v poskytovaném API .

4
fefe

Seznam výchozích bloků je možné filtrovat pomocí filtru block_categories. Umístěte kód do souboru functions.php nebo your-plugin.php. Vysvětlil zde ve WordPress Gutenberg Handbook

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 );

Chcete-li použít ikonu svg, můžete nahradit ikonu v souboru js. Definujte svou ikonu.

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>;

a nahraďte ikonu pomocí updateCategory funkce z wp.blocks; přidáním třídy components-panel__icon se přidá 6px místo na levé straně ikony.

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