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.
Deixe um comentário