Come aggiungere una categoria personalizzata come wrapper per blocchi personalizzati nell'editor Gutenberg

Question

Come aggiungere una categoria personalizzata come wrapper per blocchi personalizzati nell'editor Gutenberg

29 set 2018, 18:23:58

Visualizzazioni: 14.2K

Voti: 11

Come sappiamo dall'API fornita da Gutenberg possiamo creare un blocco personalizzato come

const { registerBlockType } = wp.blocks;

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

})

ma come posso creare un wrapper (una categoria tipo layout) intorno ai miei blocchi personalizzati nell'editor Gutenberg? Diciamo che voglio avere un contenitore per i miei elementi personalizzati come slider, gallerie...

fefe

894

categorie personalizzazione editor editor di blocks

Tutte le risposte alla domanda

Commenti

Sembra buono ma non riesco a farlo funzionare. Posso confermare che il filtro viene chiamato in get_block_categories() in post.php come trovato da Pat J.

Ryan Bayne

11 feb 2019 16:10:42

Se stai utilizzando un plugin, devi aggiornare la riga del titolo a 'title' => __( 'MyTitle', 'my-plugin-slug' ) assicurati che il nome della categoria per il tuo php del plugin e il tuo blocco js corrispondano e non dimenticare di riattivare il tuo plugin.

Hunter Nelson

19 ott 2019 08:43:47

È possibile filtrare l'elenco delle categorie di blocchi predefinite utilizzando il filtro block_categories. Inserisci il codice nel file functions.php o your-plugin.php. Spiegato qui nel manuale di WordPress Gutenberg

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

Per utilizzare un'icona SVG puoi sostituire l'icona in js. Definisci la tua icona.

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

e sostituisci l'icona utilizzando la funzione updateCategory da wp.blocks; aggiungendo la classe components-panel__icon aggiungerà uno spazio di 6px sul lato sinistro dell'icona.

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

Aamer Shahzad

1.67K

26 feb 2019 20:37:41

Commenti

E dove dovresti aggiungere la funzione wp.blocks.updateCategory. Ho provato questo ma non riesco a farlo funzionare. Puoi condividere un file .js completo che funzioni? Inoltre, se registro una categoria e non ho blocchi assegnati a quella categoria, dovrebbe comunque essere elencata? Non riesco nemmeno a registrare la mia categoria. Inoltre non vedo il filtro block_categories nella documentazione dei filtri di riferimento: https://codex.wordpress.org/Plugin_API/Filter_Reference

Radmation

9 apr 2019 19:56:32

Non sto usando alcun boilerplate. ecco il file di ingresso per i miei blocchi https://codepen.io/talentedaamer/pen/YMZzjY utilizzato in https://wordpress.org/plugins/easy-blocks/

Aamer Shahzad

10 apr 2019 09:51:13

Funziona perfettamente, grazie! Anche l'annullamento funziona: updateCategory('ghostkit', { icon: '' })

kero

17 mag 2019 17:24:49

fefe 894 · Accepted Answer · 2018-09-30T22:51:03Z

Scavando più a fondo nella documentazione, ho ottenuto il seguente risultato.

Esiste un modo per raggruppare i tuoi blocchi personalizzati in una determinata categoria in Gutenberg, e per questo abbiamo il metodo block_categories_all. Quindi con un filtro, puoi estendere le categorie predefinite con quelle personalizzate.

Ecco il mio esempio:

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

Puoi trovare maggiori informazioni su questo nell'API fornita.

fefe

894

30 set 2018 22:51:03