Categorias
WordPress

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 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.