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.

Nova api de blocos gutenberg

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.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.