API de Blocos Gutenberg versão 2

Na versão 5.6 do WordPress foi adicionado a nova API de blocos Gutenberg ou Block API 2, ele tem como foco tornar a edição de blocos mais leve, reduzindo a quantidade de elementos na árvore de elementos DOM do editor. A versão 2 também traz melhorias para ajudar na personalização de blocos em temas e plugins.

O que são Blocos Gutenberg?

Nada mais é a nova experiência de edição de conteúdo do WordPress utilizando componentes chamados de blocos, que inicialmente levaram o nome do projeto. Atualmente a experiência de edição em blocos ficou disponível em toda a edição do site. Essa experiência passa a se chamar edição completa do site. O projeto gutenberg possui um roadmap que inclui diversos recursos como uma experiência de page builder e multi-idioma.

Habilitando a API dos blocos Gutenberg versão 2

Para fazer o uso da nova API, devemos especificar na criação do nosso bloco que trabalharemos com a versão 2 da API passando o atributo “apiVersion” na função registerBlockType, exemplo:

registerBlockType( name, { apiVersion: 2 } );Code language: CSS (css)

useBlockProps

Recentemente gravando o curso de Gutenberg no meu canal notei quando utilizando o script create-block os blocos vinha um novo hook react relacionado o useBlockProps.

Esse novo hook adiciona no nosso bloco todos os atributos relacionados e o eventos necessários para um bloco. Agora qualquer propriedade que você deseja passar para o bloco deve ser administrado pelo useBlockProps. Assim utilizamos o useBlockProps da seguinte forma:

import { useBlockProps } from '@wordpress/block-editor';
 
function Edit( { attributes } ) {
    const blockProps = useBlockProps( {
        className: someClassName,
        style: { color: 'blue' },
    } );
    return <p { ...blockProps }>{ attributes.content }</p>;
}
Code language: JavaScript (javascript)

Comparando o mesmo código com a versão 1:

function Edit( { attributes } ) {
    return (
        <p className={ someClassName } style={ { color: 'blue' } }>
            { attributes.content }
        </p>
    );
}Code language: JavaScript (javascript)

Caso queira aprender a construir blocos Gutenberg, lá utilizaremos mais exemplos com a nova API:

Se ainda não segue o meu canal assine e acompanhe quando novas aulas forem publicadas.