Editorul Gutenberg - Adăugarea unei categorii personalizate ca wrapper pentru blocuri personalizate

Question

Editorul Gutenberg - Adăugarea unei categorii personalizate ca wrapper pentru blocuri personalizate

29 sept. 2018, 18:23:58

Vizualizări: 14.2K

Voturi: 11

După cum știm din API-ul furnizat de Gutenberg, putem crea un bloc personalizat astfel:

const { registerBlockType } = wp.blocks;

registerBlockType( 'my-namespace/my-block', {
    // Configurarea blocului personalizat
})

Dar cum pot crea un wrapper (o categorie similară cu layout-ul) în jurul blocurilor mele personalizate în editorul Gutenberg? De exemplu, vreau să am un colector pentru elementele mele personalizate precum slider, galerie...

fefe

894

categorii personalizare editor editor pe blocuri

Toate răspunsurile la întrebare

Comentarii

Arată bine, dar nu reușesc să o fac să funcționeze. Pot confirma că filtrul este apelat în get_block_categories() în post.php așa cum a descoperit Pat J.

Ryan Bayne

11 feb. 2019 16:10:42

Dacă folosești un plugin, trebuie să actualizezi linia de titlu la 'title' => __( 'MyTitle', 'my-plugin-slug' ) asigură-te că numele categoriei pentru PHP-ul pluginului tău și pentru block JS se potrivesc și nu uita să reactivezi pluginul.

Hunter Nelson

19 oct. 2019 08:43:47

Este posibil să filtrați lista de categorii de blocuri implicite folosind filtrul block_categories. Puneți codul în fișierul functions.php sau your-plugin.php. Explicații aici în 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' => __( 'Categoria mea', 'my-plugin' ),
                'icon'  => 'wordpress',
            ),
        )
    );
}
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );

Pentru a utiliza o pictogramă svg, puteți înlocui pictograma în js. Definiți pictograma.

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

și înlocuiți pictograma folosind funcția updateCategory din wp.blocks; adăugând clasa components-panel__icon va adăuga un spațiu de 6px în partea stângă a pictogramei.

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

Aamer Shahzad

1.67K

26 feb. 2019 20:37:41

Comentarii

Și unde ar trebui să adaugi funcția wp.blocks.updateCategory. Am încercat asta și nu funcționează. Poți să împărtășești un fișier .js complet funcțional? De asemenea, dacă înregistrez o categorie și nu am niciun bloc atribuit acelei categorii, ar trebui să fie totuși listată? Nici nu reușesc să înregistrez categoria mea. De asemenea, nu văd filtrul block_categories în documentația de referință a filtrelor: https://codex.wordpress.org/Plugin_API/Filter_Reference

Radmation

9 apr. 2019 19:56:32

Nu folosesc niciun boilerplate. Iată fișierul de intrare pentru blocurile mele https://codepen.io/talentedaamer/pen/YMZzjY folosit în https://wordpress.org/plugins/easy-blocks/

Aamer Shahzad

10 apr. 2019 09:51:13

Funcționează perfect, mulțumesc! Și eliminarea funcționează: updateCategory('ghostkit', { icon: '' })

kero

17 mai 2019 17:24:49

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

Mergând mai adânc în documentație, am obținut următorul rezultat.

Există o modalitate de a grupa blocurile personalizate în jurul unei categorii date în Gutenberg, și astfel avem metoda block_categories_all. Deci cu un filtru, poți extinde categoriile implicite cu cele personalizate.

Iată exemplul meu:

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

Puteți afla mai multe despre aceasta în API-ul furnizat.

fefe

894

30 sept. 2018 22:51:03