Editor Gutenberg: Añadir una categoría personalizada como contenedor para bloques personalizados

Question

Editor Gutenberg: Añadir una categoría personalizada como contenedor para bloques personalizados

29 sept 2018, 18:23:58

Vistas: 14.2K

Votos: 11

Como sabemos por la API proporcionada por Gutenberg podemos crear un bloque personalizado como

const { registerBlockType } = wp.blocks;

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

})

pero ¿cómo creo un contenedor (categoría como diseño) alrededor de mis bloques personalizados en el editor Gutenberg? Digamos que quiero tener un colector para mis elementos personalizados como slider, galería...

fefe

894

categorías personalización editor block editor

Todas las respuestas a la pregunta

Comentarios

Se ve bien pero no logro hacer que funcione. Puedo confirmar que el filtro se llama en get_block_categories() en post.php como encontró Pat J.

Ryan Bayne

11 feb 2019 16:10:42

Si estás usando un plugin necesitas actualizar tu línea de título a 'title' => __( 'MyTitle', 'my-plugin-slug' ) asegúrate de que el nombre de categoría para tu plugin php y tu block js coincidan y no olvides reactivar tu plugin.

Hunter Nelson

19 oct 2019 08:43:47

Es posible filtrar la lista de categorías de bloques predeterminadas utilizando el filtro block_categories. Coloca el código en el archivo functions.php o your-plugin.php. Explicado aquí en el Manual de 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' => __( 'Mi categoría', 'my-plugin' ),
                'icon'  => 'wordpress',
            ),
        )
    );
}
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );

Para usar un icono SVG puedes reemplazar el icono en JS. Define tu icono.

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

y reemplaza el icono usando la función updateCategory de wp.blocks; agregando la clase components-panel__icon añadirá un espacio de 6px al lado izquierdo del icono.

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

Aamer Shahzad

1.67K

26 feb 2019 20:37:41

Comentarios

¿Y dónde deberías agregar la función wp.blocks.updateCategory? He intentado esto y no puedo hacer que funcione. ¿Podrías compartir un archivo .js completo que funcione? Además, si registro una categoría y no tengo bloques asignados a esa categoría, ¿debería aparecer en la lista? Tampoco puedo registrar mi categoría. Tampoco veo el filtro block_categories en la documentación de referencia de filtros: https://codex.wordpress.org/Plugin_API/Filter_Reference

Radmation

9 abr 2019 19:56:32

No estoy usando ninguna plantilla (boilerplate). Aquí está el archivo de entrada para mis bloques https://codepen.io/talentedaamer/pen/YMZzjY usado en https://wordpress.org/plugins/easy-blocks/

Aamer Shahzad

10 abr 2019 09:51:13

¡Funciona perfectamente, gracias! Eliminar también funciona: updateCategory('ghostkit', { icon: '' })

kero

17 may 2019 17:24:49

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

Profundizando más en la documentación, obtuve el siguiente resultado.

Existe una forma de agrupar tus bloques personalizados alrededor de una categoría dada en Gutenberg, y para ello tenemos el método block_categories_all. Así que con un filtro, puedes extender las categorías predeterminadas con otras personalizadas.

Aquí está mi ejemplo:

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

Puedes encontrar más sobre esto en la API proporcionada.

fefe

894

30 sept 2018 22:51:03