wake-up-neo.com

Der Gutenberg-Editor fügt eine benutzerdefinierte Kategorie als Wrapper für benutzerdefinierte Blöcke hinzu

Wie wir anhand der von Gutenberg bereitgestellten API wissen, können wir einen benutzerdefinierten Block als erstellen

const { registerBlockType } = wp.blocks;

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

})

aber wie erstelle ich einen Wrapper (kategorieähnliches Layout) um meine benutzerdefinierten Blöcke im Gutenberg-Editor? Angenommen, ich möchte einen Sammler für meine benutzerdefinierten Elemente als Schieberegler, Galerie ... haben.

categoriescustomizationeditorblock-editor
4
fefe

Ich habe mich tiefer in die Dokumentation vertieft und das folgende Ergebnis erhalten.

Es gibt eine Möglichkeit, Ihre benutzerdefinierten Blöcke um eine bestimmte Kategorie in Gutenberg zu gruppieren. Daher haben wir die Methode block_categories. Mit einem Filter können Sie also die Standardkategorien durch benutzerdefinierte Kategorien erweitern.

Hier ist mein Beispiel:

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

Mehr dazu finden Sie in der mitgelieferten API .

4
fefe

Mit dem Filter block_categories kann die Liste der Standardblockkategorien gefiltert werden. Platzieren Sie den Code in der Datei functions.php oder your-plugin.php. Hier im WordPress Gutenberg Handbuch erklärt

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

Um ein SVG-Symbol zu verwenden, können Sie das Symbol in js ersetzen. Definiere dein Icon.

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

wenn Sie das Symbol durch die Funktion updateCategory aus wp.blocks; ersetzen und die Klasse components-panel__icon hinzufügen, wird links neben dem Symbol ein 6px-Leerzeichen eingefügt.

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