Como JavaScript está influenciando o WordPress

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:

  • Layout
  • Formatação
  • Widgets
  • Có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

Lista de pacotes node para WordPress
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:

npm install @wordpress/scripts --save-devCode language: CSS (css)

Com esse pacote nodeJS conseguimos realizar formatação, validação de código e tests:

  • wp-scripts build
  • wp-scripts format-js
  • wp-scripts lint-style
  • wp-scripts lint-js
  • wp-scripts start
  • wp-scripts test-e2e
  • wp-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:

npm install @wordpress/blocks --saveCode 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:

npm init @wordpress/block [nome-do-seu-bloco]Code language: JavaScript (javascript)

Ele irá criar um bloco com os comandos para:

  • Inicia o desenvolvimento: npm start
  • Compilar o código para produção: npm run build
  • Formatar o código JavaScript da sua aplicação: npm run format:js
  • validaçã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.


Publicado

em

,

por

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *