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

Introdução à criação de blocos para WordPress utilizando JavaScript e React.

Transcript

1. com JavaScript e React Criando blocos para WordPress Última atualização 11/08/2021
2. 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
3. Objetivo Introduzir a criação de blocos com JavaScript/React.
4. Motivação • Criar blocos personalizados para projetos • Criar blocos para disponibilizar ou vender
5. 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
6. Editor clássico do WordPress, até a versão x.x
7. https:/ /wordpress.org/gutenberg/
8. • 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
9. Editar o HTML
10. Construtores visuais (Page builders)
12. 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 🔍
13. Título Fixed Toolbar Bloco Parágrafo Configurações do Post Painéis Configurações do Bloco em foco
14. Arquitetura do editor • Arquitetura própria • Foco em JavaScript • React como a biblioteca adotada
15. 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
16. ES5 ou ESNext Nos referimos a EcmaScript 5 (ES5) como a especificaçã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 especificaçã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
18. React • JSX • Componentes • Props (Mas se chegar a entender hooks, será ótimo!) Referências 🔗 • React Docs https:/ /pt-br.reactjs.org/
19. 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 🎠
20. Requisitos • Instalação WordPress • Node • Npm
21. @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 configurações de compilação. Para criar blocos com ES5, você pode usar o @wordpress/blocks: npmjs.com/package/@wordpress/blocks
22. 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 🧱
23. 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.
24. 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
25. 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.
26. 📂 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()
27. <?php /** * Plugin Name: Novo Bloco * Description: Example block with ESNext and JSX support. * Requires at least: 5.8 * Requires PHP: 7.0 * Version: 0.1.0 * Author: The WordPress Contributors * Text Domain: novo-bloco * @package create-block */ function create_block_novo_bloco_block_init() { register_block_type( __DIR__ ); } add_action( 'init', 'create_block_novo_bloco_block_init' ); novo-bloco.php
28. { "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
29. 5. Estrutura da pasta src 📂 wp-content/ ├─ 📂 plugins/ ├─ 📂 novo-bloco/ ├─ 📂 build/ ├─ 📂 node_modules/ ├─ 📂 src/ ◀ └── edit.js └── editor.scss └── index.js └── save.js └── style.scss
30. 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 especificamos como o bloco será exibido.
31. 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
32. ... registerBlockType( 'create-block/novo-bloco', { edit: () => { }, save: () => { } } ); src/index.js Funções edit e save não precisam ser especificadas em arquivos separados
33. 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 fica a função edit, responsável pela renderização do bloco no editor.
34. import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p { ...useBlockProps() }> { __( 'Novo Bloco! (Conteúdo no editor)', 'novo-bloco' ) } </p> ); } src/edit.js useBlockProps() Hook que dará saída a diversos atributos, como um className único para o bloco
35. 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 fica a função save, responsável pela “renderização” do bloco no site.
36. import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; export default function save() { return ( <p { ...useBlockProps.save() }> { __( 'Novo Bloco! (Conteúdo salvo)' ) } </p> ); } src/save.js useBlockProps.save() Atenção, na função save nós precisamos usar useBlockProps.save() para dar saída nos atributos
38. <!-- wp:create-block/novo-bloco --> <p class="wp-block-create-block-novo-bloco"> Novo Bloco – hello from the saved content! </p> <!-- /wp:create-block/novo-bloco --> Código salvo do bloco
39. 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 🎲
40. 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/
41. 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/
42. 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
43. export default function Edit( {attributes, setAttributes} ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { richTextContent: newContent } ); }; return ( <RichText { ...blockProps } onChange={ onChangeContent } tagName="p" value={ attributes.richTextContent } /> ); } src/edit.js
44. export default function save( { attributes } ) { return ( <RichText.Content { ...useBlockProps.save() } tagName="p" value={ attributes.richTextContent } /> ); } src/save.js
45. 👁 Editor
46. 👁 Site
47. 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 🎓
48. Componentes import { RichText } from '@wordpress/block-editor'; <RichText { ...blockProps } onChange={ onChangeContent } tagName="p" value={ attributes.richTextContent } formattingControls={ [ 'bold', 'italic' ] } /> Se aprofundar nas opções e possibilidades que o componente RichText oferece. https:/ /developer.wordpress.org/block-edit or/reference-guides/richtext/
49. 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/
50. Apenas com isso já conseguimos ter suporte funcional ao seletor de gradiente de fundo do próprio editor.
51. InnerBlocks import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; export default function Edit() { return ( <div { ...useBlockProps() }> <InnerBlocks allowedBlocks={['core/image', 'core/paragraph']} /> </div> ); } 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/
53. Templates export default function Edit() { const MY_TEMPLATE = [ [ 'core/image', {} ], [ 'core/heading', { placeholder: 'Book Title' } ], [ 'core/paragraph', { placeholder: 'Summary' } ], ]; //... return ( <InnerBlocks template={ MY_TEMPLATE } templateLock="all" /> ); } Especifique templates, um conjunto de blocos pré-definidos 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
54. 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/
55. Settings Sidebar Criar opções e campos de configuraçã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
56. 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
57. Para pensar... • Evolução acelerada da API • Novo paradigma no CMS • Full Site Editing • Headless
58. Design é tornar o inteligível visível
59. 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
60. Exemplo do que eu tô falando. Essa imagem aqui é daora.
61. — Albert Einstein "O WordPress é um CMS, um sistema de gerenciamento de conteúdo.
62. "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.
63. dos sites usam WordPress 35%
64. Obrigado! www.hastedesign.com.br @hastedesign Link da apresentação https://bit.ly/37DYzkg
65. 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