web-dev-qa-db-fra.com

L'éditeur Gutenberg ajoute une catégorie personnalisée à chaque bloc personnalisé

Comme nous le savons grâce à l’API fournie par Gutenberg, nous pouvons créer un bloc personnalisé en tant que

const { registerBlockType } = wp.blocks;

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

})

mais comment créer un wrapper (une catégorie semblable à celle-ci) autour de mes blocs personnalisés dans gutenberg editor? Disons que je veux avoir un collecteur pour mes éléments personnalisés en tant que curseur, galerie ...

categoriescustomizationeditorblock-editor
4
fefe

En creusant plus profondément dans la documentation, j'ai obtenu le résultat suivant.

Il existe un moyen de regrouper vos blocs personnalisés autour d’une catégorie donnée dans Gutenberg. Nous avons donc la méthode block_categories. Donc, avec un filtre, vous pouvez étendre les catégories par défaut avec celles personnalisées.

Voici mon exemple:

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

Vous trouverez plus d'informations à ce sujet dans l'API fournie .

4
fefe

Il est possible de filtrer la liste des catégories de blocs par défaut à l'aide du filtre block_categories. Placez le code dans le fichier functions.php ou your-plugin.php. Expliqué ici dans le manuel 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' => __( 'My category', 'my-plugin' ),
                'icon'  => 'wordpress',
            ),
        )
    );
}
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );

Pour utiliser une icône svg, vous pouvez remplacer l'icône dans js. Définissez votre icône.

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

et remplacez l'icône à l'aide de la fonction updateCategory de wp.blocks; en ajoutant la classe components-panel__icon, un espace 6px sera ajouté à gauche de l'icône.

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