Estoy usando el editor Gutenberg y el framework CSS Bootstrap. Por defecto, no hay un contenedor o algo así alrededor de un bloque Gutenberg.

Algunos de los bloques tienen una opción alignwide y alignfull para agregar algo como un contenedor a su alrededor. Estas opciones son buenas para imágenes de portada o párrafos.

Pero un bloque de encabezado (por defecto) no tiene esa opción.

Y me encantaría agregar una casilla de verificación adicional a cada bloque de Gutenberg para alternar un contenedor adicional div alrededor de él. No solo una clase.

Encontré algo para agregar un estilo extra a cada blog de Gutenberg: https: // www. billerickson.net/block-styles-in-gutenberg/

Aquí está el código desde allí:

wp.domReady( () => {

    wp.blocks.registerBlockStyle( 'core/heading', {
        name: 'default',
        label: 'Default',
        isDefault: true,
    } );

    wp.blocks.registerBlockStyle( 'core/heading', {
        name: 'alt',
        label: 'Alternate',
    } );

} );

Funciona bien, para darle al bloque una clase / estilo adicional. Pero no envuelve algo alrededor del bloque.

¿Hay alguna opción para agregar algo como una alternancia de contenedor (agrega div con la clase .container) a un bloque?

0
Cray 10 may. 2019 a las 16:37

3 respuestas

La mejor respuesta

Si alguien también necesita esto (como yo) hoy en día WordPress ya tiene otro filtro que es más fácil de implementar llamado render_block

https://developer.wordpress.org/reference/hooks/render_block/

Aquí hay un ejemplo

    function wporg_block_wrapper( $block_content, $block ) {
        if ( $block['blockName'] === 'core/paragraph' ) {
            $content = '<div class="wp-block-paragraph">';
            $content .= $block_content;
            $content .= '</div>';
            return $content;
        } elseif ( $block['blockName'] === 'core/heading' ) {
            $content = '<div class="wp-block-heading">';
            $content .= $block_content;
            $content .= '</div>';
            return $content;
        }
        return $block_content;
    }

    add_filter( 'render_block', 'wporg_block_wrapper', 10, 2 );
1
Rodolfo Estima Rodrigues 10 abr. 2020 a las 18:25

Probablemente tendrá que usar los blocks.getSaveElement para ajustar el elemento

https://developer.wordpress.org/block-editor/developers/filters/block-filters/#blocks-getsaveelement

function modifyGetSaveContentExtraProps( element, blockType, attributes ) {
    return (
        <div className = 'heading-wrapper' >
            { element }
        </div>
    );
}


wp.hooks.addFilter(
    'blocks.getSaveElement',
    'slug/modify-get-save-content-extra-props',
    modifyGetSaveContentExtraProps
);
0
Jonas Merhej 10 jun. 2019 a las 14:03

Es posible agregar un contenedor a un bloque central utilizando un filtro de bloque , pero no es tan simple y no recomendaría agregar una modificación a todos los bloques centrales. Una solución mucho más simple y flexible sería agregar un bloque de envoltorio personalizado que acepte InnerBlocks (de wp.editor) como elementos secundarios (incluso puede definir qué bloques aceptar) y establecer soporte para las opciones de alineación (en la barra de herramientas) y un ancla / id en la barra lateral de configuración de bloque. La clase para el contenedor se creará automáticamente a partir de su nombre de bloque. Luego puede usar su bloque de envoltorio personalizado solo si lo necesita y poner cualquier otro bloque dentro de él (un bloque de título, por ejemplo).

1
Vortac 15 may. 2019 a las 18:20