Uso de una plantilla con InnerBlocks en el editor de bloques de WordPress (Gutenberg)

Cuando crea un bloque en el Editor de bloques de WordPress (Gutenberg), puede crear un área que permita anidar otros tipos de bloques dentro de su bloque. Haces esto con el InnerBlockscomponente.

En nuestras otras guías, exploramos previamente patrones de bloques y plantillas de bloques. Esta guía analiza la creación de una plantilla para bloques anidados.

requisitos previos

• Familiarícese con la creación de complementos para WordPress Gutenberg

Crear un complemento de bloque anidado

Después de haber llevado a cabo los pasos en el tutorial de creación de un complemento de Gutenberg, hasta (pero sin incluir) el paso 5, debe tener el marco en su lugar para crear el complemento de bloque anidado.

Añadir InnerBlocks a/src/edit.js

Ábralo /src/edit.jsen su editor y reemplace la importación por useBlockPropslo siguiente:

import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

Esto nos permitirá usar el componente InnerBlocks en nuestro método de procesamiento de edición.

Luego cambie toda la función Editar a lo siguiente:

export default function Edit() {
    return (<div { ...useBlockProps() }>
            <InnerBlocks/>
        </div>
    );
}

Esto registra el InnerBlock

Salida de los atributos en/src/save.js

Ábralo /src/save.jsen su editor y reemplace la importación por useBlockPropslo siguiente:

import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

Esto nos permitirá usar el componente InnerBlocks en nuestro método de guardar renderizado.

A continuación, genere el contenido del componente Innerblocks reemplazando la savefunción con lo siguiente:

export default function save() {
    return (<div { ...useBlockProps.save() }>
            <InnerBlocks.Content />
        </div>
    );
}

Esto simplemente genera el valor de InnerBlocks en un archivo <div>.

Compilando el complemento

Abra la terminal, asegúrese de estar en el directorio raíz de su complemento y ejecute el siguiente comando:

El script se compilará. Si tiene algún error, la terminal debe informarle cuáles son.

Agregar la plantilla InnerBlocks

Para simplificar las cosas, vamos a utilizar exactamente la misma plantilla que creamos anteriormente para los patrones de bloques y la guía de plantillas de bloques.

La plantilla es muy similar a la que definimos en nuestra guía de plantillas de bloques, sin embargo, los atributos están en un objeto en lugar de una matriz multidimensional.

Reemplace la Editfunción con el siguiente código:

export default function Edit() {
    return (<div { ...useBlockProps() }>
            <InnerBlocks
                template={ [
                    [ 'core/heading', { level: 2, content: 'Example Nested Block Template' } ],
                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],
                    [ 'core/columns', {},
                        [
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 1' } ],
                                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],
                                ]
                            ],
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 2' } ],
                                    [ 'core/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],
                                ]
                            ],
                        ]
                    ],
                ] }
                templateLock="all"
            />
        </div>
    );
}

Esto crea una plantilla para el bloque anidado. Tenga en cuenta el uso de los templateLockcuales se establece en todos. Se comporta igual que el bloqueo de plantilla para la plantilla de bloque y tiene las siguientes dos opciones:

• all— impide todas las operaciones. No es posible insertar nuevos bloques, mover bloques existentes o eliminar bloques.
• insert— evita insertar o quitar bloques, pero permite mover bloques existentes.

También puede definir qué bloques están permitidos dentro de los bloques anidados.

1. Inserción y visualización de la plantilla InnerBlocks

---

Puede insertar el bloque anidado de la misma manera que cualquier otro bloque, haciendo clic en el ícono más y buscando Wholesome Plugin.

Inserción de la plantilla de bloques anidados

Tenga en cuenta que, como antes, los bloques anidados dentro de los bloques anidados no tienen aplicado el bloqueo de plantilla.

Por supuesto, existen soluciones para esto, al ser creativo con la forma en que crea una combinación de plantillas de bloques y bloques anidados personalizados.

Ver el bloque

Después de jugar un poco con el SCSS, nuestro bloque de salida se parece a esto:

Inserción de la plantilla de bloques anidados

En lugar de bloquear la plantilla, puede restringirla indicando qué bloques puede insertar en ella. Simplemente reemplace la Editfunción con el siguiente código:

export default function Edit() {
    return (<div { ...useBlockProps() }>
            <InnerBlocks
                template={ [
                    [ 'core/heading', { level: 2, content: 'Example Nested Block Template' } ],
                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],
                    [ 'core/columns', {},
                        [
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 1' } ],
                                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],
                                ]
                            ],
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 2' } ],
                                    [ 'core/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],
                                ]
                            ],
                        ]
                    ],
                ] }
                allowedBlocks={ [
                    'core/column',
                    'core/columns',
                    'core/heading',
                    'core/paragraph',
                ] }
            />
        </div>
    );
}

Aquí omitimos el templateLockargumento y en su lugar restringimos nuestro bloque anidado a los siguientes bloques:

• columna (core/column)
• Columnas (core/columns)
• Grupo (core/group)
• Encabezado (core/heading)
• Párrafo (core/paragraph)

Nuevamente, esto no funcionará en ningún bloque anidado dentro de la plantilla.

• ¿Necesitas algo más flexible? Intente registrar un patrón de bloque en su lugar
• ¿Necesitas algo más estático? Intente registrar una plantilla de bloque