 Alisson, boa noite, bem-vindo e fique à vontade de ir para compartilhar sua tela, sua apresentação, tá bom? Tá certo, Lucas. Obrigado, boa noite a todos que estão assistindo o WordCamp Floripa. Primeiramente para abenizar a organização, porque aí a gente sabe que não é fácil, né? É o momento que a gente está vivendo, organizar um evento como esse, mas muito legal, palestras muito interessantes Enfim, espero compartilhar um pouco também de conhecimento aqui com vocês. Vou compartilhar a minha tela para a gente iniciar. Bom, nessa palestra eu vou falar um pouco sobre criação de blocos para WordPress com JavaScript React, seguindo a onda aí do Gabriel, é paulada na programação, né? Eu coloquei última atualização 11 e 8 de 2021 na capa do slide, vou explicar depois para vocês, mas basicamente esse é um mundo que está em constante mudança, essa questão da criação de blocos. Falando um pouco sobre mim, eu sou um dos fundadores do Studioaste, que atua com desenvolvimento web, especialmente WordPress, o commerce, contribui sempre que possível com a comunidade WordPress em São Paulo, desde 2014 envolvido aí com a comunidade. Acredito que a gente tem que buscar uma web livre, com software livre, de verdade, no centro disso. Enfim, tem um link do meu site ali que não tem nada, não acesse. Falando um pouco do objetivo aqui hoje, é introduzir a criação de blocos com JavaScript React. É bastante conteúdo, tem muita coisa, então eu sabia que o tempo não me permitiria, a gente não está em uma oficina, a gente não vai conseguir construir um bloco em conjunto, a gente não está presencial. E eu também não me garanti no live code igual o Gabriel para vir botar a mão na massa aqui. Então vai ser mais uma introdução de mostrar um pouco como WordPress, arquitetoa, essa questão dos blocos e como vocês podem começar. Então é mais um roadmap, um atrilho, um empurrãozinho para vocês começarem a criar seus próprios blocos. Falando um pouco da motivação, porque você vai querer criar blocos personalizados para que fim? Você pode querer criar blocos personalizados para um projeto, você pegou um projeto de desenvolvimento de site para demandar criação de blocos ou você identificou que desenvolver blocos é um caminho legal para esse projeto. Ou você pode criar blocos para distribuir através do repositório oficial ou comercializar. Desde quando WordPress lançou esse editor de blocos ficou muito forte, já vieram vários plugins com pacotes de blocos, específicos e pode ser um caminho aí para você explorar comercialmente também. Iniciando, falar um pouco sobre a anatomia do editor. Acredito que todo mundo que está assistindo já deve ter visto o editor de blocos. Se não viu, a gente vai cobrir aqui um pouco da anatomia dele. Mas basicamente a gente tem o título, a gente tem a área onde de fato os blocos são inseridos. Ali tem um bloco de parágrafo. A gente tem essa barra fixa de ferramentas no topo, onde a gente tem alguns recursos de inserir blocos, ver o outline da página, a árvore de blocos e tudo mais, configurações do post e as configurações do bloco em foco, do bloco que está selecionado. E essa sidebar é separada em painéis. Cada painel expansível tem as suas próprias configurações. Falando em código, todo esse editor que o WordPress implementou no final de 2018 para revolucionar o modo como o conteúdo era cadastrado, tem uma arquitetura própria toda baseada em JavaScript. Então WordPress como CMS, programado, desenvolvido em PHP, mas esse editor traz uma arquitetura mais moderna, focada em JavaScript com muito front-end. E dentro disso, dentro desse contexto, WordPress, o time do WordPress selecionou o React como a biblioteca dotada para o desenvolvimento desse editor. Então JavaScript com React. Tem histórias bem legais para quem quiser dar uma pesquisada sobre a mudança da licença do React, sobre o drama se o WordPress iria usar React, View, React ou outra coisa, não iria usar nada. Foi um meses bem intensos na comunidade WordPress. Falando um pouco do JavaScript, é interessante que você esteja familiarizado com a linguagem. Então não dá para falar que você vai conseguir criar blocos com JavaScript sem ter uma familiaridade com a linguagem. Aqui eu coloquei algumas referências, mas a verdade é que tem muito material na internet. A gente sabe que nem todo material de qualidade, mas quer dizer, qualidades diferentes, mas cada um vai saber a forma que aprende melhor e tem muito, muito material sobre JavaScript. Acho que é a linguagem hoje que mais tem material na internet. Então busquem se aprofundar na linguagem, isso que eu digo, antes de querer desenvolver blocos. Outro ponto importante também, se você não está familiarizado com os termos, que a própria documentação do WordPress, quando vai falar de blocos, utiliza, e é bastante comum, ES5 e SNext. Quando a gente fala em ES5, a gente está falando da especificação do JavaScript, que é mais adotada pelos navegadores, que, enfim, suportada pelos navegadores. Quando a gente fala ESnext, um apelido para mais recente especificação da linguagem, seja ela qual for, que a gente vai poder usar os recursos mais recentes, que os navegadores ainda não estão suportando. E como que a gente utiliza isso? A gente vai ter um processo de build. Então os blocos, para criar blocos para o WordPress com JavaScript, você pode criar tanto com ES5 quanto com ESnext. Tanto que na documentação do editor, do Gutenberg, você vai ter essas abinhas para você ver o exemplo de código em ESnext, o exemplo de código em ES5. E qual é a diferença, ESnext? Você vai ter uma série de recursos mais recentes, como importação, error functions, tudo mais. E no geral, a sintaxe acaba sendo mais resumida, mais enxuta. Você tem que escrever menos código para fazer a mesma coisa. React também, você tem que ter uma noção do React, é bom ter essa noção do React antes de começar a desenvolver blocos. Felizmente, para benizar a comunidade brasileira de React, que traduziu, a toda a documentação do React é traduzida para o português. Então, recomendo bastante seguir por lá mesmo. E também não falta material. Outra plataforma que a gente sabe que está todo mundo falando, todo mundo querendo aprender. Então, recomendo que você se familiarize com os conceitos da linguagem JSX. O React vem com essa linguagem que adiciona alguns recursos ao JavaScript, uma sintaxe um pouco diferente. A gente consegue escrever HTML no JS. Componentes que é todo núcleo. A ideia dos blocos do WordPress são como componentes. São componentes do React, propriedades que são passadas por esses componentes e alguns outros conceitos de React que são importantes para o desenvolvimento de blocos. Mas, se você chegar a entender até hooks, seria bem interessante. Hooks do React, que são parecidos com hooks do WordPress, tem o seu dar ali para fazer um paralelo, mas são diferentes. Bom, falar um pouco sobre o ambiente de desenvolvimento agora. Falei um pouco do que você precisa saber para desenvolver blocos e agora como que a gente prepara um ambiente de desenvolvimento para a criação de blocos com JavaScript. Você pode tentar fazer isso na mão sem nada, mas eu vou falar aqui de algumas ferramentas que vão facilitar isso. Primeiro, você precisa ter uma instalação WordPress. Você precisa também de algumas ferramentas aqui que a gente vai utilizar para facilitar o nosso trabalho. O Node, JS e o NPM. O Node, JS e o NPM são por quê? A gente vai utilizar um pacote JavaScript, que é um pacote oficial do próprio time do WordPress para desenvolvimento de blocos e que roda no Node. Então a gente vai instalar ele com o NPM e vai executar as tarefas de build para a gente poder utilizar o ES Next sem se preocupar em configurar tudo isso, que a gente sabe que é uma parte que dá bastante trabalho. É a mesma ideia do seja que o Gabriel apresentou na palestra passada. É um pacote aí que vai facilitar a nossa vida para a gente não perder tanto tempo. Esse é o pacote, o WordPress Create Block para quem não conhece. Ele está lá hospedado no NPM. Ele é mantido pelo time do WordPress. E com ele a gente vai ter todo esse ferramental. Se você, por algum acaso, quiser recriar blocos com o S5, o time do WordPress também tem um bloquinho que está mencionado aqui embaixo, o WordPress Blocks. A gente vai usar o WordPress Create Block. E aí vamos lá começar. Como que a gente cria esse bloco? O primeiro passo é a gente instalar o pacote com o NPM. Então a gente supondo esses comandos estão supondo que você tem o Node instalado no seu máquina, o NPM. Você vai rodar eles no seu terminal. A gente vai fazer a instalação do pacote WordPress Create Block de forma global passando o parâmetro ifng para que a gente possa usar ele de qualquer diretório do nosso computador. Para criar o nosso bloco, a gente vai navegar até o diretório de plugins do nosso instalação WordPress e vai executar o comando NPX, WordPress Create Block e vai passar o slug do bloco, o nome do bloco. Com isso ele vai fazer o scaffold, ele vai fazer a fundamentação, ele vai criar os arquivos e pastas do nosso bloco. A partir disso, dentro da pasta do nosso bloco, a gente vai ter alguns comandos, os comandos para fazer essa compilação do JavaScript do Snext para o S5, para o JavaScript que os navegadores vão estar mais compatibilizados e algumas outras tarefas que ele também possibilita de validação de código, formatação e tudo mais. Essa é mais ou menos a estrutura, essa é a estrutura que ele vai gerar do nosso novo bloco, algumas pastas e alguns arquivos na raiz. A gente vai passar aqui a fazer um tour sempre mostrando qual é o bloco que a gente está falando. Esse primeiro arquivo, o novo bloco.php, ele é um arquivo que ele vai ter simplesmente uma função, que é a register block type. Essa função, apesar do editor, ele ser todo baseado em JavaScript, a gente ainda precisa fazer um registro dele no PHP. Em todos os meus exemplos, a gente vai ter essa abinha, essa linguinha falando qual é o nome do arquivo que está sendo editado para ficar mais fácil de identificar para vocês. Então, esse é o arquivo. Ele tem o cabeçalho do plugin e a função register block type. É muito importante falar, eu criei na pasta de plugins por que? Porque os blocos são plugins. Wordpress, na decisão da construção do novo editor, foi decidido que para criar novos blocos seriam criados como plugins. Então, a gente cria um plugin e no plugin a gente registra um bloco. Essa função register block type, ela é chamada no rook init e ela recebe um parâmetro que é o diretório atual com a constante, essa variável do PHP. Por que a gente passa só essa variável? Porque o Wordpress tem o create block, ele criou um outro arquivo chamado block JSON. Eu voltei um pouquinho aqui, na verdade, tem que passar. Que é um arquivo JSON onde, de fato, tem a especificação do bloco. Esse arquivo que vai, enfim, definir alguns detalhes mais importantes do nosso bloco como o título, em qual categoria do editor que ele vai aparecer, descrição. E aqui, alguns pontos bem importantes, que é o editor script, editor style, style, que recebem os caminhos de onde os scriptes e estilos do bloco estão armazenados no nosso diretório. Então, o editor script e editor style são o script e a folha de estilos que vão ser carregadas no editor. E o style é a folha de estilos que vai ser carregada no site. A gente vai entender um pouco melhor isso, essa distinção. Mas os blocos têm script e estilos para o editor e script e estilos para o site. Então, com isso, o PHP sabe que existe um bloco e agora a gente está entrando na pasta source, que é a pasta que a gente vai, de fato, modificar arquivos para a criação do nosso bloco. Na pasta source, a gente vai ter uma série de arquivos. A gente vai ter o arquivo index.js, que é o arquivo principal de especificação do bloco, onde o bloco é definido de fato. Qual é a estrutura desse arquivo? Ele tem importação dos módulos necessários, para a criação de um bloco. E também tem uma chamada de register block type. Só que é a register block type do JS agora. Essa register block type, ela recebe dois parâmetros. O primeiro parâmetro é uma string com o nome do bloco. Geralmente, a gente passa também um name space, então create block, barra, novo bloco. Poderia ser o nome da sua empresa, do seu projeto. Poderia ser wcfloripa, barra, novo bloco. É um name space para você organizar os blocos. E o segundo parâmetro é um objeto. Esse objeto, basicamente, tem duas propriedades, que são edit e save. A edit e save são duas propriedades bem importantes. São as propriedades que vão ser funções, que a gente define como o bloco vai ser exibido na edição e como ele vai ser salvo. Também a gente vai entender um pouco melhor isso. No caso do create block, ele cria a edit e save como arquivos separados. Então ele faz a importação, ele cria essas funções em arquivos separados. Porém, eles poderiam ser criados no mesmo arquivo. Não tem problema, como Aaron Functions, por exemplo. Você não precisaria desmembrar eles para arquivos distintos. Falando um pouco de edit, como é a sintaxe, a estrutura dessa função? Como eu falei, a função edit é que é responsável pela exibição do bloco, de fato, no editor, do markup. Até então a gente não tinha falado como vai ser o HTML do nosso bloco. E ela tem essa sintaxe aqui, em que ela retorna um componente, essa aqui é do react, essa sintaxe, retornando um componente, que na verdade é uma tag p, um elemento p, com esse conteúdo aqui, com esse texto. Essa função use block props, que ele faz a importação aqui em cima, e usa dentro do p, ela é um hook do react, que vai dar saída aos atributos do nosso bloco, como class name e alguns outros atributos que WordPress possa injetar. Então é importante sempre utilizar. Até funciona, até funcionar, se você não colocar isso, mas pode estar sujeito aí a muitos problemas. Então isso está definindo um bloco que na verdade é um parágrafo não editável, com um texto ingessado. A função save, ela é responsável pela renderização do bloco no site. Na verdade, é pelo salvamento do bloco mesmo. A gente vai entender também como que esses blocos são salvos. Ela é muito parecida com o edit, só que em vez de a gente usar use block props, a gente tem que usar use block props save, porque WordPress usa as propriedades que ele dá saída de estar e na hora de salvar são um pouco diferentes. E aí também tem a especificação novamente do markup, a gente especifica duas vezes por assim dizer, tem um pouco de repetição. E aí aqui mostrando um pouco como que esse bloco é exibido e como que ele é salvo. Se você alternar o editor do de blocos para o editor para HTML, você vai conseguir ver que os blocos são salvos dessa forma aqui, como comentários, como HTML envolvido em comentários. Então, os blocos, na verdade, são definidos, WordPress também definiu, como seriam feitos os blocos, eles optaram por essa arquitetura. Então o bloco é definido com um comentário HTML, com esse wp, dois pontos, o nome do bloco, e aqui um fechamento, uma tag, um hack de inserir numa tag envolvendo isso. E essa classe está vendo aqui? Class, wpBlock, isso aqui é o que o useBlockProps.save deu saída. Ele deu saída nessa classe, WordPress, criou automaticamente essa classe. Isso aqui é o que ele vai salvar no banco. Então esse HTML, a gente vai inserir em cheio de blocos aqui, se você ver a edição em conteúdo, WordPress ele vai salvar tudo isso no banco de dados, e sempre que você acessa o editor, ele vai fazer uma leitura, fazer o parser desses comentários HTML para, enfim, entender onde começa e termina cada bloco e permitir que ele seja editáveis novamente. Eu acho que eu já tenho um pouco tempo, eu vou dar uma corrida e espero que eu consiga passar tudo. Eu vou falar um pouco de atributos. Ali a gente viu um bloco totalmente estático. Os atributos é um recurso que vai permitir que a gente crie blocos dinâmicos. Então isso é uma forma de salvar estados de um bloco. A gente vai conseguir salvar informação, salvar a edição. Por exemplo, os atributos são definidos também como objeto. Aqui eu criei um atributo chamado conteúdo do parágrafo e eu tenho que especificar o tipo do dado, a origem dele, que é o source, e qual que é o selector. Basicamente é como ele vai encontrar, da onde ele vai extrair esse dado do HTML que foi salvo, para permitir que o usuário edite ele novamente. Então se eu quisesse fazer com que esse bloco que crie um P, permitir que o conteúdo fosse salvo, eu teria que fazer mais ou menos isso aqui. Falar que eu vou pegar o tipo do dado é uma string, a fonte é o filho do selector que é a tagP. Você também tem que especificar um selector HTML mesmo, de qual elemento que ele vai extrair esse conteúdo. E aí tem várias atributos, é um negócio bem interessante e pode pegar a fonte não necessariamente para seu conteúdo da tag, pode ser o atributo, pode pegar o atributo source de uma tag image. E aqui tem um exemplo de um componente de texto rico, aquele componente que você consegue colocar negrito, itálico e algumas links e tudo mais. Então especifico que aqui no register block type, agora eu tenho mais uma propriedade no block que é attributes, o atributo rick text content que vai puxar a string da fonte children, conseletor p. E aqui esse é o edit.js do block, que a gente tem um componente rick text, esse componente rick text wordpress já tem ele criado, já fornece ele e a partir daquele atributo, com a definição daquele atributo, a gente vai conseguir fazer com que o conteúdo dele seja editável. Os atributos, para a gente utilizar eles, a gente precisa passar eles como parâmetros aqui na função edit, agora a gente tem essa alteração, a gente está passando atributos e também estou passando esse outro parâmetro, que é a função set attributes, que a gente vai utilizar para que? atualizar o atributo sempre que houver mudanças, então agora a gente tem o evento onChange invocando essa função onChangeContent para fazer a atualização do atributo rick text content. Eu sei que vai ficar um pouco confusa a explicação por conta do tempo, mas slides acho que, enfim, vocês vão conseguir testar e a questão de experimentação mesmo, mas é importante entender esses conceitos do editor de blocks. E aqui na função save, aí a gente não tem os set attributes porque a gente não vai setar, no save a gente só vai utilizar ele para salvar o HTML no banco de dados, o HTML do nosso bloco. Então com isso a gente vai conseguir ter um bloco com um componente editável, então esse é um bloco usando um componente rick text, estou terminando já pessoal. E aqui é o bloco save no site. O legal de vocês verem também é o visual, como eu falei, o estilo também pode ser distinto, o estilo do editor e o estilo do site no bloco, você pode estilizar eles de forma diferente. Você não está amarrado. E aqui para continuarem estudando, falar um pouco das possibilidades do editor de blocks, por exemplo, se aprofundar nos componentes que WordPress já oferece, como rick text e buttons de alguns outros, e as propriedades que esses componentes têm, por exemplo, eu posso criar, inserir no meu bloco um componente rick text mas que permite apenas a formatação bold ou que permite bold itálico, que não permite links, você tem esse tipo de controle. E aí tem um link aqui da referência dos blocos dos componentes do WordPress. Outra coisa legal é essa API de suportes que o pessoal fundamentou recentemente, que você pode especificar se o bloco vai dar suportes a gradientes, tamanho de fonte. Para que serve isso? Com isso, você dando suporte ao seu bloco a gradientes, por exemplo, ele já vai inserir cor do WordPress, de gradiente do WordPress, você não vai ter muito trabalho. Inclusive, ele gera até o HTML, se você não quiser ele dar com isso, não quiser usar o, for utilizar o HTML, o CSS do Gutenberg, ele gera até o CSS. Então, com poucas linhas, bem declarativo, você consegue já adicionar isso. Um bloco muito interessante que dá muito poder é o Inner Blocks, que você tem um bloco que aceita outros blocos internamente. Então, ele é um componente que você isso é muito versátil. Você criar blocos que simplesmente aceitam blocos específicos. Você consegue limitar quais blocos eles aceitam. Então, isso para você criar blocos versátiles é muito interessante. Templates, Inner Blocks também aceita o que você defina um template específico. Então, você define aqui um array falando o primeiro bloco é uma imagem, o segundo é um cabeçalho, o terceiro é um parágrafo. E aí, você pode travar essa estrutura, enfim, permite que o usuário edite posteriormente. E também, todas essas alterações, entendendo esse conceito, você vai conseguir também mexer na toolbar dos blocos, aquela barrinha, quando você está editando um bloco que aparece para alguns blocos, e também no editor, você pode modificar esses elementos tudo com uma sintaxe bastante parecida com aquela que eu mostrei de criação de blocos. Os atributos também, você pode criar opções na barra lateral para que vão salvar atributos. Você pode criar campos que vão salvar essas opções a partir de inputs da barra lateral. Uma coisa interessante para se aprofundar. E algumas considerações finais, a evolução da API é muito acelerada, então, tem que estar sempre ligado nas versões, olhar o resumo do lançamento, o que foi feito, quais são as alterações, entender que isso traz um novo paradigma no CMS, essa questão dos blocos, principalmente com o full-site-edit que, enfim, vai ser uma realidade até o fim do ano, você editar o site inteiro com blocos. A gente está muito ligado nisso. E o Headless, para quem ouve muito falar sobre esse momento, o Headless e tal, ponderá que o Headless tem alguns cuidados e algumas dificuldades de trabalhar com o editor de blocos. Por fim, isso, obrigado. Tem o link aqui da apresentação, minhas redes, uso mais o Twitter, se vocês quiserem me seguir lá. E a gente pode trocar uma ideia, espero que vocês tenham gostado da apresentação. Obrigado, pessoal, desculpe estourar o tempo. Tranquilo, Alisson, obrigado você pelo conteúdo, acho que bem legal, essa questão da edição dos blocos é uma realidade para todo mundo desse que o Headless incorporou. Acho que tem ajudado muito a galera principalmente quem não domina, às vezes, o código, a se virar um pouco mais, mas foi interessante você mostrar aí como que as pessoas podem criar seus próprios blocos, fazerem coisas inclusive ali bem mais divertidas e robustas com seus blocos que talvez eles sintam falta nos que vêm default. O cara pode tunar os blocos que usam. Tem uma pergunta aqui, qual é a relação entre os blocos e o FSE? Queria que você falasse um pouco sobre isso e o futuro do WordPress com essa dupla. Certo, FSE para quem não sabe é o full-site-editing que é esse caminho que o WordPress está seguindo, é a edição total do site, você editar o site inteiro com blocos. Então hoje o WordPress já suporta, se você tiver um tema que declare esse suporte ao full-site-editing ele já vai permitir que você crie cabeçalhos com blocos, crie arquivos, template de arquivos com blocos, arquivo de categoria, tag, rodapest basicamente o que o pessoal faz com Elementor e com outros construtores visuais, você vai conseguir fazer com WordPress. A criação de blocos você vai utilizar blocos, você vai conseguir criar blocos específicos para essas áreas. Então eu tenho um bloco que só vai poder ser utilizado no cabeçalho, posso ter um bloco que é para uso em conteúdo você pode criar num projeto personalizado blocos específicos também para esses determinados contextos mas o desenvolvimento do WordPress criação de temas vai ser um negócio que vai mudar bastante. Então eu acho que o desenvolvimento de blocos ele vai estar mais interessante mais promissor para quem estiver pensando em fazer plugins e comercializar seus próprios blocos e projetos maiores que vão demandar e vão conseguir guiar cá com o curso de desenvolvimento de blocos personalizados. Legal, com certeza esse mercado vai ficar bem interessante daqui para frente. Muito obrigado Alisson pela sua participação pelos conteúdos que você trouxe aí o pessoal adorou, curtiram mesmo acho que deu uma desmistificada também no como é fazer isso e editar nada tão complexo assim talvez como algumas pessoas imaginam então foi bem bacana, obrigado. Obrigado pessoal, boa noite tchau tchau