Final de 2018 tivemos o lançamento do Gutenberg a nova experiência de edição do WordPress, uma das ações mais impopulares da história da plataforma, mas como essa biblioteca JavaScript está influenciando o WordPress. Ação pode parecer invisível para a maioria dos usuários Gutenberg influenciará o futuro do desenvolvimento JavaScript e WordPress como conhecemos.
Desde o lançamento do WordPress a mais de 15 anos atrás muita coisa mudou na web e especialmente referente a desenvolvimento JavaScript. Gutenberg trouxe para o core do WordPress JavaScript moderno algo necessário para evolução da plataforma. Tecnologias como React, fazem parte do core do WordPress isso mesmo: React.
Esse movimento está transformando o desenvolvimento WordPress para muito mais modular, onde tivemos a introdução de blocos componentes visuais independentes que reduzem a responsabilidade dos temas referentes a funcionalidades.
Essa transição trouxe-nos uma pergunta qual será a responsabilidade de um tema numa aplicação WordPress?
Para isso precisamos entender alguns itens dentro do Gutenberg:
Blocos
Blocos trazem uma estrutura que permite o nosso editor de conteúdo sair de um grande bloco de texto para items modulares que permitem a sua composição de Layout, os Blocos são divididos em categorias como:
LayoutFormataçãoWidgetsCódigos incorporados
Por de trás das cortinas no banco de dados os blocos continuam sendo gravados na mesma tabela wp_content com uma diferença os blocos são marcados com comentários e renderizados pela API do Gutenberg.
Componentes e estado
Com a introdução de Blocos e React conceitos como Componentes e estado foram introduzidos com React elementos visuais armazenam estado que armazena informações relacionadas a um dado específico compartilhado por diferente elementos visuais. Mas isso trouxe uma série de desafios para a plataforma como controlar esse fluxo com PHP e React. Algumas modificações foram feitas e o React foi encapsulado para se adaptar com a plataforma. Funções para fazer a ponte entre PHP e React.
Modularização
Na biblioteca do Gutenberg existe um módulo com uma série de componentes base que podem ser reutilizados tanto no editor quando o front-end da aplicação se abrimos o console da nossa aplicação e digitarmos “wp.” Conseguimos visualizar todos os módulos disponíveis dentro do WordPress e se digitarmos wp.components conseguimos ver todos os componentes disponíveis no WordPress.
Todos os módulos do JavaScript para WordPress estão disponíveis como pacotes do nodeJS onde podemos ver no link: https://www.npmjs.com/search?q=%40wordpress
pacotes node WordPress
Além disso, o uso de pacotes permite o uso do Gutenberg fora do WordPress como foi utilizado pelo Drupal recentemente.
JavaScript moderno
Com Gutenberg temos a possibilidade de desenvolver com EcmaScript 5 ou EcmaScript 2015+, ou superior. Se ainda não domina a nova sintaxe do JavaScript você pode continuar desenvolvendo com EcmaScript 5, mas o recomendado é o uso de JavaScript moderno seu código ficará mais enxuto e você terá a possibilidade de trabalhar com JSX.
Nem todos os browsers suportam JavaScript moderno, por exemplo, Internet Explorer 11. Para isso precisamos fazer o uso de transpilers para fazer a conversão de JavaScript moderno para EcmaScript 5.
Plugins e Temas
Mas todos esses benefícios estão restritos para o Gutenberg? Não, os recursos do Gutenberg podem ser utilizados por plugins e temas. With the package @wordpress/scripts podemos incorporar scripts do core nos nossos plugins e temas. Para isso importamos no nosso projeto com o seguinte código:
Code language: CSS (css)
Com esse pacote nodeJS conseguimos realizar formatação, validação de código e tests:
wp-scripts buildwp-scripts format-jswp-scripts lint-stylewp-scripts lint-jswp-scripts startwp-scripts test-e2ewp-scripts test-unit-js
Para saber mais sobre os pacotes acesse: www.npmjs.com/package/@wordpress/scripts
Block Scaffolding
Lançado no final de fevereiro de 2020 um pacote node criar um modelo básico de um bloco Gutenberg. Como o conhecido create-react-app do React.
Para instalar rode o seguinte comando:
Code language: CSS (css)
O pacote cria um template de uma bloco com elementos básicos customização de CSS, JavaScript e PHP sem se preocupar com configuração de elementos como webpack, babel e ESLint.
Por padrão ele irá utilizar EcmaScript 2015+, mas podemos através de configurações definir o uso de EcmaScript 5. Após instalado o pacote @wordpress/blocks para criar um bloco básico no seu terminal de linha de comando digite:
Code language: JavaScript (javascript)
Ele irá criar um bloco com os comandos para:
Inicia o desenvolvimento: npm startCompilar o código para produção: npm run buildFormatar o código JavaScript da sua aplicação: npm run format:jsvalidação de código css e js: npm run lint:css ou npm run lint:js
Os requisitos básicos para utilizar o pacote são node 10.0.0 e npm 6.9.0.
Conclusão
Ainda estamos no início de uma revolução os desenvolvedores que acompanham o Gutenberg desde o início já estão tirando proveito desses benefícios, mudando a sua rotina referente ao desenvolvimento. Muitas empresas ainda estão adiando essa mudança de paradigma pode enxergar o WordPress apenas como um editor visual e outras por conta de Código legado.
Essa mudança irá mudar o jeito em que desenvolvemos a nossa aplicação WordPress de forma modular iremos sair da estrutura padrão de templates estáticos e entraremos numa estrutura que blocos serão utilizados em qualquer parte da nossa aplicação. Assim reduzindo ainda mais a dependência de funcionalidades de uma aplicação WordPress com o tema.
Nos próximos posts estarei a abordar o @wordpress/block com mais detalhes vamos observar na prática como utilizar essa poderosa ferramenta. Para acompanhar ver mais posts sobre Gutenberg e WordPress acesse a página da categoria.
Este artigo foi importado automaticamente por fazer parte do Planetário Dev. Quer fazer parte deste HUB de conteúdos? Faça parte do Planetário e veja as vantagens.
Não tem site ou blog? Seja um autor do site e ainda pode ser remunerado.
Mais sobre Newsletters?
32 melhores newsletters sobre negócios, startups e tecnologia para assinar em 2022
Leia também: