Reutilize componentes do React do Gutenberg em seus plugins do WordPress

Alguns dias atrás, David completou uma série de quatro posts no blog apresentando o React. Lá ele explicou a você como começar a usar o React para criar facilmente interfaces de usuário no WordPress. Especificamente, na parte 2 desta série de posts, David explicou como preparar o ambiente de desenvolvimento e como criar um componente React simples. Hoje veremos que além de criar seus próprios componentes React, é uma boa ideia reutilizar componentes existentes.

Desde que Gutenberg apareceu no WordPress, JavaScript e o framework React se tornaram uma parte fundamental na pilha de desenvolvimento do WordPress. É por isso que se você não está acostumado com essas tecnologias, deve aprendê-las o mais rápido possível. Fizemos isso e recodificamos completamente nossos plugins premium usando React. Isso implicou transformar todas as interfaces de usuário que já tínhamos com componentes React.

Como os programadores não devem reinventar a roda e, no mundo do desenvolvimento de software, menos é sempre mais, hoje veremos como reutilizar componentes React existentes no WordPress.

Os componentes do React incluídos no WordPress

O WordPress fornece mais de 80 componentes React que você pode reutilizar em seu desenvolvimento, através do pacote @wordpress/components do Gutenberg:

Em cada uma das pastas de componentes que você encontrará aqui no Github do projeto Gutenberg você tem o código fonte JavaScript de cada componente assim como seus estilos CSS, e documentação para saber como e quando usá-los.

Dentre os componentes que nós da Nelio utilizamos para nossas novas interfaces React, vale destacar Button e ButtonGroup para definir botões. Todos os controladores para campos e opções como CheckboxControl , InputControl , NumberControl , RadioControl , RangeControl , SelectControl ou TextControl . Ou mesmo TabPanel para interfaces com guias ou Popover e Modal para diálogos flutuantes. E há muito mais…

Se tivéssemos que desenvolver esses componentes do zero, certamente ainda estaríamos programando as novas interfaces React de nossos plugins premium agora. Reutilizar componentes existentes é a melhor coisa que você pode fazer como desenvolvedor para economizar tempo. E os fornecidos pelo Gutenberg para WordPress são perfeitos para seus plugins.

Como reutilizar componentes do WordPress React

Imagine que você queira usar um botão em sua interface desenvolvida em React. Graças aos componentes existentes no Gutenberg, você pode usar o componente Button diretamente, como você pode ver no exemplo a seguir:

 /** * WordPress dependencies */ import { Button } from '@wordpress/components'; export default function MyComponent() { return <Button>Click Me!</Button>; }

Você pode estar se perguntando que, para um botão, você não precisaria usar o componente Gutenberg e, em vez disso, usar uma tag <button> diretamente. E você estaria certo.

No entanto, usando o Button Gutenberg, o que você obtém é que seu botão tem o mesmo estilo CSS que os outros botões na interface do WordPress. Além disso, se o componente e seus estilos forem atualizados, algo que aconteceu em quase todas as novas versões do WordPress, como desenvolvedor você não precisará fazer nada. A responsabilidade pela atualização do Button Gutenberg não é sua. Se você usasse seu próprio botão, isso é algo que você teria que cuidar.

Para reutilizar um componente Gutenberg existente, basta verificar se este componente existe e importá-lo para o seu código através do pacote @wordpress/components . Como você pode ver no trecho de código acima, importamos o componente Button deste pacote. E para ter o pacote disponível dentro do seu projeto, você deve instalá-lo usando o comando npm install @wordpress/components no terminal. Mas isso já foi explicado por David em seus posts, então não vou abordar isso novamente.

O que você deve ter em mente é que, para que esses componentes peguem os estilos do WordPress, você deve definir wp-components como uma dependência do seu arquivo de estilo CSS ao enfileirar no WordPress com a função PHP wp_enqueue_style .

A menos que suas necessidades não sejam cobertas por esses componentes React fornecidos pelo Gutenberg, não reinvente a roda e use-os. Os benefícios de reutilizar componentes existentes são extremamente maiores do que usar seus próprios componentes.

Livro de histórias dos componentes do React de Gutenberg

Uma das novidades de Gutenberg é o Storybook que podemos encontrar no Github. O Storybook é uma ferramenta de código aberto que fornece um sandbox para desenvolver e visualizar componentes isoladamente. No caso do WordPress, serve como documentação para os componentes, entre outras coisas.

Entre as várias opções incluídas no Gutenberg Storybook temos a possibilidade de experimentar o editor de blocos através do menu Playground . Mas a opção mais interessante é poder ver a documentação dos componentes do Gutenberg de forma amigável.

Basta abrir o menu Componentes e lá você encontrará a lista de componentes que o WordPress disponibiliza através do pacote @wordpress/components . Você pode explorar cada componente React e ver exemplos de uso com seu código JavaScript completo.

Por exemplo, na captura de tela a seguir você vê exemplos do componente Button com as diferentes propriedades que os botões podem ter. Então, na aba História você tem o código fonte do exemplo completo:

Além disso, alguns componentes específicos incluem opções na guia Botões para modificar as propriedades do componente e visualizar as alterações que causam em sua interface.

Um desses componentes é o TextControl , que é usado para adicionar um campo de texto. Na captura de tela a seguir, vemos a guia Knob com diferentes opções para ocultar o rótulo do componente ou alterar os textos do rótulo e da ajuda. Assim, podemos ver como o componente ficará com as alterações e decidir como queremos usá-lo em nossas interfaces React:

Nem todos os componentes do pacote @wordpress/components possuem uma documentação completa no Storybook, então você terá que ir para a seção do pacote de componentes no Github para ver a versão mais recente do status dos componentes React no Gutenberg.

No entanto, à medida que a documentação do Gutenberg Storybook for concluída, ela se tornará cada vez mais interessante para os desenvolvedores. Ter documentação desse tipo no WordPress é um luxo. Sua utilidade está além da discussão.

Você já viu tudo o que os componentes React do Gutenberg podem fornecer para seus desenvolvimentos no WordPress. Em vez de reinventar a roda e desenvolver seus próprios componentes básicos, dê uma olhada nos componentes React do Gutenberg primeiro para obter consistência com o resto da interface do WordPress e economizar tempo de desenvolvimento e manutenção. Reutilizar software é a chave para sermos mais eficientes como desenvolvedores do WordPress.

Imagem em destaque por Morning Brew no Unsplash.