JetGuten for Gutenberg

A Revolução do Gutenberg: Descobrindo o JetGuten for Gutenberg

O lançamento do editor Gutenberg trouxe uma nova perspectiva para a criação de conteúdo em WordPress. A equipe da Zemez, após monitorar atentamente o Gutenberg, decidiu que era hora de contribuir com um produto que se adequasse a essa nova realidade. Assim, nasceu o JetGuten, um addon criado para facilitar a adição de blocos de widgets em páginas construídas com o Gutenberg. Neste artigo, vamos explorar nossa jornada no desenvolvimento do JetGuten for Gutenberg e como essa experiência pode ser valiosa para quem está pensando em criar seus próprios produtos.

A Nova Era: JavaScript em Primeiro Lugar

Desde 2015, quando Matt Mullenweg aconselhou a comunidade WordPress a “aprender JavaScript, profundamente”, ficou claro que os desenvolvedores precisavam se adaptar. Ao criar o JetGuten for Gutenberg, a verdade dessa afirmação se tornou evidente. Na nossa primeira versão, o uso do PHP foi restrito basicamente à criação da estrutura do plugin e algumas implementações simples. Para tudo que envolvia a interface e as configurações dos blocos, utilizamos JavaScript. Embora o PHP ainda seja necessário para funções mais complexas, como trabalhar com dados de postagens ou APIs de terceiros, o foco principal é, de fato, JavaScript.

Mudanças nos Padrões de Desenvolvimento

Tradicionalmente, a separação entre a lógica da aplicação e a sua apresentação era uma diretriz básica no desenvolvimento de plugins WordPress. Em projetos anteriores, separávamos o tema e as lógicas com clareza, permitindo que desenvolvedores e usuários finais personalizassem a estrutura HTML. Contudo, com o Gutenberg, essa separação foi comprometida — a lógica está intimamente ligada à aparência, restringindo as opções dos desenvolvedores. Os ajustes de design agora precisam ser feitos apenas com CSS, limitando a habilidade de modificar o layout HTML dos blocos.

Liberdade na Criação de Interfaces

Uma das vantagens notórias do Gutenberg é a liberdade que ele oferece para os desenvolvedores na criação de interfaces. Existem dois locais principais onde elementos de interface personalizados podem ser adicionados: o corpo do bloco dentro do editor e o painel de configurações (ou “inspector de blocos”). Isso nos permite gerenciar a aparência do conteúdo de uma forma que não era possível anteriormente.

No nosso addon, por exemplo, introduzimos um controle no bloco de Caixa Animada que possibilita alternar entre as faces do bloco de forma intuitiva, tudo acessível na barra de ferramentas do editor. Esse nível de controle proporciona uma flexibilidade imensa para o desenvolvedor, diferente do que tínhamos ao criar plugins para Elementor.

A Separação entre Editor e Front-End

Comparado a outros construtores de páginas, Gutenberg apresenta a inovação de permitir que a aparência do bloco no editor seja diferente da versão apresentada no front-end. Essa possibilidade é um grande trunfo, pois oferece aos desenvolvedores a flexibilidade necessária para aprimorar a experiência do usuário.

Ao criar cada bloco, implementamos dois métodos: edit() e save(). O primeiro define como o bloco aparece no editor, enquanto o segundo determina como ele será gravado no banco de dados. Essa separação é fundamental para garantir que a funcionalidade se mantenha intacta em diferentes ambientes, permitindo um desenvolvimento mais dinâmico e adaptável.

Sensibilidade às Atualizações do Gutenberg

É importante destacar que o Gutenberg está em constante evolução. Durante o desenvolvimento do JetGuten for Gutenberg, nossa equipe enfrentou o desafio de lidar com alterações frequentes na API do plugin à medida que novas versões eram lançadas. A eficácia do nosso produto fez com que precisássemos implementar correções rapidamente para manter a compatibilidade com essas atualizações.

Felizmente, a equipe do Gutenberg fornece avisos antecipados sobre mudanças futuras, permitindo que desenvolvedores se preparem para ajustes necessários. Essa comunicação proativa é crucial para quem está desenvolvendo um plugin próprio e garantindo sua funcionalidade a longo prazo.

A Busca por Melhorias Práticas

Uma das dificuldades que encontramos foi a falta de “melhores práticas” bem estabelecidas para a criação de blocos. Embora existam recursos e tutoriais que nos ajudaram, nem todos os problemas foram resolvidos com o que estava disponível na época. Essa lacuna levou a algumas soluções que possivelmente parecerão inadequadas no futuro, mas era um desafio comum entre desenvolvedores lidando com uma nova ferramenta.

Esperamos que, à medida que mais tutoriais e guias voltados para Gutenberg surgirem, a criação de blocs se torne mais intuitiva e acessível, permitindo que mais desenvolvedores explorem essa nova fronteira.

Ferramentas de Automação: Uma Necessidade Vital

Por último, mas não menos importante, a utilização de ferramentas de automação como Gulp, Grunt e NPM é essencial no desenvolvimento de plugins que precisam ser compatíveis com Gutenberg. Essas ferramentas agilizam o processo de construção e são indispensáveis para que o desenvolvedor trabalhe eficientemente em um ambiente de desenvolvimento moderno.

Sem a automação, o desenvolvimento de um plugin que funcione bem com Gutenberg pode se tornar uma tarefa árdua. Isso se deve à complexidade adicional que vem com a criação de blocos em vez de simples shortcodes, onde cada bloco exige uma estrutura mais bem definida e uma abordagem de desenvolvimento mais cuidadosa.

Ao desenvolver o JetGuten for Gutenberg, nossa experiência foi um verdadeiro campo de aprendizado. O potencial do Gutenberg é vasto e, apesar dos desafios, a chance de criar interfaces de usuário mais ricas e dinâmicas é algo que não podemos ignorar. O futuro é brilhante para quem se atrever a explorar as possibilidades oferecidas pelo editor Gutenberg e, com certeza, o JetGuten é apenas o começo dessa jornada.

Em suma, se você está cogitando entrar nesse universo do Gutenberg, a jornada pode ser desafiadora, mas as recompensas são incomensuráveis. Aprender JavaScript, adaptar-se às novas práticas e utilizar ferramentas de automação são apenas o primeiro passo para se destacar nesse novo cenário. O JetGuten for Gutenberg foi concebido não apenas como um plugin, mas como um exemplo de como as novas tecnologias podem transformar a maneira como criamos conteúdo e interagimos com nossos usuários.