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 trás melhorias para ajudar na customização de blocos em temas e plugins .
Habilitando a API versão 2
Para fazer o uso da nova API, devemos especificar na criação de nosso bloco que iremos trabalhar com a versão 2 da API passando o atributo “apiVersion” dentro da função registerBlockType, exemplo:
registerBlockType( name, { apiVersion: 2 } );
Code language: CSS (css)
useBlockProps
Recentemente gravando o curso de Gutenberg em meu canal notei quando utilizando o script create-block os blocos vinha uma um novo hook react relacionado o useBlockProps.
Esse novo hook adiciona em 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 gerenciado 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á iremos utilizar mais exemplos com a nova API:
Se ainda não segue meu canal assine e acompanhe quando novas aulas forem publicadas.