Wordpress – ¿Hay bloques de contenedores de Gutenberg?

Solución:

Me costó mucho preparar mi primer bloque contenedor / envoltorio para la acción. Esto es lo que he aprendido en las últimas horas:

Porque tuve serios problemas al importar el InnerBlocks Decidí usar el kit de herramientas create-guten-block. Después de la instalación solo tuve que ejecutar npx create-guten-block. Eso me proporcionó la estructura de archivos relacionados. Ahora cambié el archivo src / block / block.js al siguiente código:

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/editor';
const { __ } = wp.i18n;
registerBlockType( 'myplugin/container', {
    title: __( 'My Plugin Container', 'myplugin' ),
    icon: 'universal-access-alt',
    category: 'myplugin',
    getEditWrapperProps: function () {
        return {
            "data-align": "full"
        };
    },
    edit: function( props ) {
        return (
            <div className={ props.className }>
                <InnerBlocks />
            </div>
        );
    },
    save: function( props ) {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    },
} );

Después de ingresar al directorio a través de cli y ejecutar npm run build mi complemento estaba listo y funcionó como se esperaba.

El CSS simple que usé para este primer paso fue tanto para el front-end como para el backend:

.wp-block-myplugin-container{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: purple;
}

Usé esto en una máquina con Windows, después de actualizar el nodo a la versión más reciente, todo funcionó como se esperaba. Estoy contento con el resultado y me centro en la configuración avanzada (color / imagen de fondo, márgenes, rellenos, …) para este contenedor ahora.

¡Feliz codificación!

Esto es lo que segunda fase del desarrollo de Gutenberg se centrará en. Los desarrolladores pueden crear un bloque principal con un bloque interno predefinido para facilitar el proceso de configuración de la página para los usuarios.

Por ahora puede utilizar el componente InnerBlocks.

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/editor';

const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
<InnerBlocks
    allowedBlocks={ ALLOWED_BLOCKS }
/>

registerBlockType( 'my-plugin/my-block', {
    // ...

    edit( { className } ) {
        return (
            <div className={ className }>
                <InnerBlocks />
            </div>
        );
    },

    save() {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    }
} );

También hay opciones de templateLock y layouts para manipular las opciones. Para obtener más opciones, consulte – Documento oficial

Hay un nuevo bloque principal de “Sección” que estará disponible en una próxima actualización de Gutenberg que está destinada a cumplir el rol que estás buscando, creo:

Agregar bloque de sección

---

---

Utiliza Nuestro Buscador