Usando um modelo com InnerBlocks no WordPress Block Editor (Gutenberg)

Ao criar um bloco no WordPress Block Editor (Gutenberg), você pode criar uma área que permite que outros tipos de bloco sejam aninhados dentro do seu bloco. Você faz isso com o InnerBlockscomponente.

Em nossos outros guias, exploramos anteriormente padrões de blocos e modelos de blocos. Este guia analisa a criação de um modelo para blocos aninhados.

Pré-requisitos

• Familiarize-se com a criação de plugins para WordPress Gutenberg

Criar um plug-in de bloco aninhado

Depois de executar as etapas no tutorial de criação de um plug-in do Gutenberg, até (mas não incluindo) a etapa 5, você deve ter a estrutura pronta para criar o plug-in de bloco aninhado.

Adicionar InnerBlocks a/src/edit.js

Abra /src/edit.jsno seu editor e substitua a importação pelo useBlockPropsseguinte:

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

Isso nos permitirá usar o componente InnerBlocks em nosso método de renderização de edição.

Em seguida, altere toda a função Editar para o seguinte:

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

Isso registra o InnerBlock

Saída dos atributos em/src/save.js

Abra /src/save.jsno seu editor e substitua a importação pelo useBlockPropsseguinte:

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

Isso nos permitirá usar o componente InnerBlocks em nosso método save render.

Em seguida, imprima o conteúdo do componente Innerblocks substituindo a savefunção pelo seguinte:

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

Isso simplesmente gera o valor dos InnerBlocks em um arquivo <div>.

Compilando o Plugin

Abra o terminal, verifique se você está no diretório raiz do seu plugin e execute o seguinte comando:

O script irá compilar. Se você tiver algum erro, o terminal deve informá-lo sobre o que são.

Adicionando o modelo InnerBlocks

Para manter as coisas simples, vamos usar exatamente o mesmo modelo que criamos anteriormente para os padrões de bloco e o guia de modelo de bloco.

O template é muito semelhante ao que definimos em nosso guia de templates de blocos, porém os atributos estão em um objeto ao invés de um array multidimensional.

Substitua a Editfunção pelo seguinte 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>
    );
}

Isso cria um modelo para o bloco aninhado. Observe o uso de templateLockque está definido como todos. Isso se comporta da mesma forma que o bloqueio de modelo para o modelo de bloco e tem as duas opções a seguir:

• all— impede todas as operações. Não é possível inserir novos blocos, mover blocos existentes ou deletar blocos.
• insert— impede a inserção ou remoção de blocos, mas permite mover os blocos existentes.

Você também pode definir quais blocos são permitidos dentro dos blocos aninhados.

1. Inserindo e Visualizando o Template InnerBlocks

---

Você pode inserir o bloco aninhado da mesma forma que qualquer outro bloco, clicando no ícone de mais e pesquisando por Wholesome Plugin.

Inserindo o modelo de bloco aninhado

Observe que, como antes, os blocos aninhados dentro dos blocos aninhados não têm o bloqueio de modelo aplicado a eles.

É claro que existem soluções alternativas para isso, sendo criativo com a forma como você cria uma combinação de modelos de bloco e blocos aninhados personalizados.

Visualizando o Bloco

Depois de alguns ajustes com o SCSS, nosso bloco de saída se parece com algo assim:

Inserindo o modelo de bloco aninhado

Em vez de bloquear o modelo, você pode restringi-lo declarando quais blocos você tem permissão para inserir nele. Basta substituir a Editfunção pelo seguinte 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>
    );
}

Aqui omitimos o templateLockargumento e, em vez disso, restringimos nosso bloco aninhado aos seguintes blocos:

• Coluna (core/column)
• Colunas (core/columns)
• Grupo (core/group)
• Título (core/heading)
• Parágrafo (core/paragraph)

Novamente, isso não funcionará em nenhum bloco aninhado dentro do modelo.

• Precisa de algo mais flexível? Tente registrar um padrão de bloco em vez disso
• Precisa de algo mais estático? Tente registrar um modelo de bloco