Criação de blocos para WordPress com JavaScript e React

Slide 1

Slide 1 text

com JavaScript e React Criando blocos para WordPress Última atualização 11/08/2021

Slide 2

Slide 2 text

Sou um dos fundadores do estúdio Haste, atuo como desenvolvimento e gestão de projetos. Contribuo sempre que possível com a comunidade do WordPress em São Paulo. Acredito que devemos buscar uma web livre, com software livre (de verdade). Dentre diversas coisas, gosto de design, programação e jogos. allysonsouza.com.br Allyson Souza

Slide 3

Slide 3 text

Objetivo Introduzir a criação de blocos com JavaScript/React.

Slide 4

Slide 4 text

Motivação • Criar blocos personalizados para projetos • Criar blocos para disponibilizar ou vender

Slide 5

Slide 5 text

A S S U N T O D A PA L E S T R A A S S U N T O D A PA L E S T R A A CHEGADA DO GUTENBERG Capítulo 1

Slide 6

Slide 6 text

Editor clássico do WordPress, até a versão x.x

Slide 7

Slide 7 text

https:/ /wordpress.org/gutenberg/

Slide 8

Slide 8 text

• Como implementar um layout com duas ou mais colunas? • Como inserir elementos de layout mais complexo, como textos sobre imagens? • Como reordenar esses elementos? Limitações do editor clássico

Slide 9

Slide 9 text

Editar o HTML

Slide 10

Slide 10 text

Construtores visuais (Page builders)

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

A S S U N T O D A PA L E S T R A A S S U N T O D A PA L E S T R A ANATOMIA DO EDITOR 🔍

Slide 13

Slide 13 text

Título Fixed Toolbar Bloco Parágrafo Configurações do Post Painéis Configurações do Bloco em foco

Slide 14

Slide 14 text

Arquitetura do editor • Arquitetura própria • Foco em JavaScript • React como a biblioteca adotada

Slide 15

Slide 15 text

JavaScript É importante estar familiarizado com a linguagem. Referências 🔗 • JavaScript Tutorial for Beginners (1 hour): https:/ /www.youtube.com/watch?v=d 5ob3WAGeZE • JavaScript Beginners Microsoft: https:/ /www.youtube.com/watch?v=_ EDM5aPVLmo

Slide 16

Slide 16 text

ES5 ou ESNext Nos referimos a EcmaScript 5 (ES5) como a especiﬁcação atual de JavaScript que os navegadores têm adotado. Quando falamos em EcmaScript Next (ESNext), é um apelido para a mais recente versão da especiﬁcação, seja ela qual for. O Felipe Elia tem um vídeo explicando muito melhor do que eu: https:/ /www.youtube.com/watch?v=H-NxmG1mN6c

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

React • JSX • Componentes • Props (Mas se chegar a entender hooks, será ótimo!) Referências 🔗 • React Docs https:/ /pt-br.reactjs.org/

Slide 19

Slide 19 text

A S S U N T O D A PA L E S T R A A S S U N T O D A PA L E S T R A AMBIENTE DE DESENVOLVIMENTO 🎠

Slide 20

Slide 20 text

Requisitos • Instalação WordPress • Node • Npm

Slide 21

Slide 21 text

@wordpress/create-block npmjs.com/package/@wordpress/create-block Utilizando o pacote @wordpress/create-block nós teremos tudo que precisamos para criar um bloco com ESNext e React sem nos preocuparmos com conﬁgurações de compilação. Para criar blocos com ES5, você pode usar o @wordpress/blocks: npmjs.com/package/@wordpress/blocks

Slide 22

Slide 22 text

A S S U N T O D A PA L E S T R A A S S U N T O D A PA L E S T R A CRIANDO UM BLOCO 🧱

Slide 23

Slide 23 text

1. Instalar o @wordpress/create-block npm install -g @wordpress/create-block Instale o @wordpress/create-block globalmente (com o parâmetro -g) usando o npm.

Slide 24

Slide 24 text

2. Criar o novo bloco cd wp-content/plugins/ npx @wordpress/create-block novo-bloco Navegue até o diretório de plugins e execute o comando de criação do novo bloco. Esse comando criará um plugin com o código base do nosso bloco. > Comandos npm start npm run build npm run format npm run lint:js npm run lint:css

Slide 25

Slide 25 text

3. Estrutura de pastas 📂 wp-content/ ├─ 📂 plugins/ ├─ 📂 novo-bloco/ ◀ ├─ 📂 build/ ├─ 📂 node_modules/ ├─ 📂 src/ ├─ .editorconfig ├─ .gitignore ├─ block.json ├─ novo-bloco.php ├─ package.json ├─ readme.txt A estrutura de pastas criada deve ser mais ou menos esta ao lado.

Slide 26

Slide 26 text

📂 wp-content/ ├─ 📂 plugins/ ├─ 📂 novo-bloco/ ├─ 📂 build/ ├─ 📂 node_modules/ ├─ 📂 src/ ├─ .editorconfig ├─ .gitignore ├─ block.json ├─ novo-bloco.php ◀ ├─ package.json ├─ readme.txt 4. PHP Registro do plugin e registro do bloco com a função register_block_type()

Slide 27

Slide 27 text

Slide 28

Slide 28 text

{ "apiVersion": 2, "name": "create-block/novo-bloco", "version": "0.1.0", "title": "Novo Bloco", "category": "widgets", "icon": "smiley", "description": "ESNext standard and JSX support.", "supports": { "html": false }, "textdomain": "novo-bloco", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" } block.json

Slide 29

Slide 29 text

5. Estrutura da pasta src 📂 wp-content/ ├─ 📂 plugins/ ├─ 📂 novo-bloco/ ├─ 📂 build/ ├─ 📂 node_modules/ ├─ 📂 src/ ◀ └── edit.js └── editor.scss └── index.js └── save.js └── style.scss

Slide 30

Slide 30 text

6. index.js 📂 wp-content/ ├─ 📂 plugins/ ├─ 📂 novo-bloco/ ├─ 📂 build/ ├─ 📂 node_modules/ ├─ 📂 src/ └── edit.js └── editor.scss └── index.js ◀ └── save.js └── style.scss No JavaScript é onde especiﬁcamos como o bloco será exibido.

Slide 31

Slide 31 text

import { registerBlockType } from '@wordpress/blocks'; import './style.scss'; /** * Internal dependencies */ import Edit from './edit'; import save from './save'; registerBlockType( 'create-block/novo-bloco', { // @see ./edit.js edit: Edit, // @see ./save.js save, } ); src/index.js

Slide 32

Slide 32 text

... registerBlockType( 'create-block/novo-bloco', { edit: () => { }, save: () => { } } ); src/index.js Funções edit e save não precisam ser especiﬁcadas em arquivos separados

Slide 33

Slide 33 text

7. edit.js 📂 wp-content/ ├─ 📂 plugins/ ├─ 📂 novo-bloco/ ├─ 📂 build/ ├─ 📂 node_modules/ ├─ 📂 src/ └── edit.js ◀ └── editor.scss └── index.js └── save.js └── style.scss O arquivo edit.js é onde ﬁca a função edit, responsável pela renderização do bloco no editor.

Slide 34

Slide 34 text

import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return (

{ __( 'Novo Bloco! (Conteúdo no editor)', 'novo-bloco' ) }

); } src/edit.js useBlockProps() Hook que dará saída a diversos atributos, como um className único para o bloco

Slide 35

Slide 35 text

8. save.js 📂 wp-content/ ├─ 📂 plugins/ ├─ 📂 novo-bloco/ ├─ 📂 build/ ├─ 📂 node_modules/ ├─ 📂 src/ └── edit.js └── editor.scss └── index.js └── save.js ◀ └── style.scss O arquivo save.js é onde ﬁca a função save, responsável pela “renderização” do bloco no site.

Slide 36

Slide 36 text

import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; export default function save() { return (

{ __( 'Novo Bloco! (Conteúdo salvo)' ) }

); } src/save.js useBlockProps.save() Atenção, na função save nós precisamos usar useBlockProps.save() para dar saída nos atributos

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Novo Bloco – hello from the saved content!

Código salvo do bloco

Slide 39

Slide 39 text

A S S U N T O D A PA L E S T R A A S S U N T O D A PA L E S T R A ATRIBUTOS 🎲

Slide 40

Slide 40 text

Atributos // Exemplo 1 attributes: { conteudoDoParagrafo: { type: 'string', source: 'children', selector: 'p', }, } Atributos são uma forma de salvar estados de um bloco, permitindo, entre outras coisas, a edição de algumas de suas propriedades após o salvamento do post (em HTML) no banco de dados. https:/ /developer.wordpress.org/b lock-editor/reference-guides/bloc k-api/block-attributes/

Slide 41

Slide 41 text

Atributos // Exemplo 2 attributes: { imageURL: { type: 'string', source: 'attribute', selector: 'img', attribute: ‘src’ }, } Atributos são uma forma de salvar estados de um bloco, permitindo, entre outras coisas, a edição de algumas de suas propriedades após o salvamento do post (em HTML) no banco de dados. https:/ /developer.wordpress.org/b lock-editor/reference-guides/bloc k-api/block-attributes/

Slide 42

Slide 42 text

import { registerBlockType } from '@wordpress/blocks'; import { useBlockProps, RichText } from '@wordpress/block-editor'; registerBlockType( 'create-block/bloco-dinamico', { attributes: { richTextContent: { type: 'string', source: 'children', selector: 'p', }, }, edit: Edit, save, }); src/index.js

Slide 43

Slide 43 text

export default function Edit( {attributes, setAttributes} ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { richTextContent: newContent } ); }; return ( ); } src/edit.js

Slide 44

Slide 44 text

export default function save( { attributes } ) { return ( ); } src/save.js

Slide 45

Slide 45 text

👁 Editor

Slide 46

Slide 46 text

👁 Site

Slide 47

Slide 47 text

A S S U N T O D A PA L E S T R A A S S U N T O D A PA L E S T R A PARA CONTINUAR ESTUDANDO 🎓

Slide 48

Slide 48 text

Componentes import { RichText } from '@wordpress/block-editor'; Se aprofundar nas opções e possibilidades que o componente RichText oferece. https:/ /developer.wordpress.org/block-edit or/reference-guides/richtext/

Slide 49

Slide 49 text

Supports registerBlockType( 'create-block/novo-bloco', { supports: { color: { gradients: true, } }, edit: Edit, save, } ); Supports é a API que permite que você declare que seu bloco dá suporte a recursos do editor, como seleção de cor de fundo, alinhamento, tamanho de fonte, entre outros. https:/ /developer.wordpress.org/block-edit or/reference-guides/block-api/block-supp orts/

Slide 50

Slide 50 text

Apenas com isso já conseguimos ter suporte funcional ao seletor de gradiente de fundo do próprio editor.

Slide 51

Slide 51 text

InnerBlocks import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; export default function Edit() { return (

); } Crie blocos que aceitam outros blocos com o componente InnerBlocks. https:/ /developer.wordpress.org/block-edit or/how-to-guides/block-tutorial/nested-bl ocks-inner-blocks/

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Templates export default function Edit() { const MY_TEMPLATE = [ [ 'core/image', {} ], [ 'core/heading', { placeholder: 'Book Title' } ], [ 'core/paragraph', { placeholder: 'Summary' } ], ]; //... return ( ); } Especiﬁque templates, um conjunto de blocos pré-deﬁnidos com os quais seu InnerBlocks virá preenchido. https:/ /developer.wordpress.org/block-edit or/how-to-guides/block-tutorial/nested-bl ocks-inner-blocks/#template

Slide 54

Slide 54 text

Block Toolbar Utilizar e personalizar a toolbar do bloco. https:/ /developer.wordpress.org/block-edit or/how-to-guides/block-tutorial/block-con trols-toolbar-and-sidebar/

Slide 55

Slide 55 text

Settings Sidebar Criar opções e campos de conﬁguração para seus blocos na sidebar. https:/ /developer.wordpress.org/block-edit or/how-to-guides/block-tutorial/block-cont rols-toolbar-and-sidebar/#settings-sidebar

Slide 56

Slide 56 text

A S S U N T O D A PA L E S T R A A S S U N T O D A PA L E S T R A Considerações

Slide 57

Slide 57 text

Para pensar... • Evolução acelerada da API • Novo paradigma no CMS • Full Site Editing • Headless

Slide 58

Slide 58 text

Design é tornar o inteligível visível

Slide 59

Slide 59 text

WooCommerce: a plataforma mais popular de e-commerce do mundo O WooCommerce é um plugin gratuito para WordPress, que o transforma em uma plataforma de e-commerce. Para isso adiciona as funcionalidades necessárias para que pessoas efetuem compras online no site, como por exemplo: ● Catálogo de produtos ● Carrinho de compras para os clientes ● Checkout ● Ferramentas de gerenciamento da loja virtual

Slide 60

Slide 60 text

Exemplo do que eu tô falando. Essa imagem aqui é daora.

Slide 61

Slide 61 text

— Albert Einstein "O WordPress é um CMS, um sistema de gerenciamento de conteúdo.

Slide 62

Slide 62 text

"O WordPress é um CMS, um sistema de gerenciamento de conteúdo. É um software livre, open-source e gratuito. Fornece estrutura (banco de dados, templates de exibição, etc.) e uma interface amigável (painel do WordPress) para publicação de conteúdo na web, sem que seja necessário entrar em contato com o código." — Freire, Paulo. Comunicação e educação. 1980.

Slide 63

Slide 63 text

dos sites usam WordPress 35%

Slide 64

Slide 64 text

Obrigado! www.hastedesign.com.br @hastedesign Link da apresentação https://bit.ly/37DYzkg

Slide 65

Slide 65 text

Referências • Gerais • Teste o editor de blocos: https:/ /wordpress.org/gutenberg/ [em inglês] • JavaScript • JS: A forma certa: https:/ /jstherightway.org/pt-br/ • JavaScript Tutorial for Beginners (1 hour): https:/ /www.youtube.com/watch?v=d5ob3WAGeZE • JavaScript Beginners Microsoft: https:/ /www.youtube.com/watch?v=_EDM5aPVLmo