Como criar um plugin WordPress com React

Mauricio Bruno. O WordPress é uma ótima plataforma que suporta várias páginas e componentes. E só por ser tão grande pode intimidar quem quer desenvolver ali, ainda mais quando abrimos a documentação! Mas não se preocupe. Este artigo mostra que criar seus primeiros plugins e blocos do WordPress é relativamente fácil. Mostrarei como criar um plug-in com o mínimo de código, bem como integrar um aplicativo React a ele. Descobrimos agora?

Motivação

Digamos que você já tenha um site WordPress, mas foi solicitado a adicionar um detalhe a ele, por exemplo, agendamento de consultas médicas em uma plataforma específica. Nesse caso, dificilmente você encontrará um plugin pronto com a funcionalidade desejada. Também não é viável reconstruir todo o Front-end para adicionar esta função. Portanto, uma boa alternativa é criar um plugin com React.

Criaremos apenas parte dessa função aqui porque meu objetivo é mantê-la o mais simples possível. No entanto, o que faremos aqui permitirá que você incorpore um aplicativo React em qualquer página e, a partir daí, crie o que quiser. Vamos lá!

Criar o plug-in

Supondo que você já tenha o ambiente de desenvolvimento do WordPress instalado, vá até a pasta wp-content/plugins/ e crie uma nova para o plugin:

mkdir react-plugin

cd react-plugin

O primeiro passo é criar o arquivo principal, que no nosso caso será react-plugin.php:

<?php

/**

* Plugin Name: React Plugin

*/

Vamos deixar essa configuração mínima para garantir que o plug-in funcione. Você pode ver todos os campos disponíveis para configurar o plugin aqui.

Agora, ao acessar o painel do WordPress, mesmo sem nenhuma função, você pode ver que o plug-in já está disponível para ativação, para que você possa iniciá-lo sem problemas.

Em seguida, vamos iniciar o projeto com o React! Para conseguir isso, vamos iniciar o npm e instalar a dependência @wordpress/scripts.

npm init -y

npm install --save-dev @wordpress/scripts

O pacote @wordpress/scripts adiciona vários detalhes como React, ReactDOM, Babel, Sass e Typescript, e até nos ajuda a construir nosso código. Só com ele, podemos fazer muito.

Agora precisamos configurar três scripts no arquivo package.json porque vamos precisar deles para desenvolver o plugin:

{

...

"scripts: {

"build": "wp-scripts build

"start": "wp-scripts start",

"plugin-zip": "wp-scripts plugin-zip"

},

}

É hora de criar o ponto de entrada para nosso aplicativo React. Vamos criar uma pasta src onde colocaremos nosso código. Dentro dele haverá um arquivo index.jsx:

import React from "react";

import ReactDOM from "react-dom";

import { App } from "./App";

const containers = document.querySelectorAll(".react-plugin");

containers.forEach((container) => {

ReactDOM.render(<App />, container);

});

O snippet document.querySelectorAll(".react-plugin") retorna uma lista de todos os elementos na página que possuem a classe react-plugin. Para cada elemento retornado, renderizamos nosso app. Desta forma, nosso plugin pode ser inserido mais de uma vez na mesma página.

Agora vamos criar o componente src/App.jsx:

import React, { useState } from "react";

import "./App.scss";

export function App() {

const [counter, setCounter] = useState(0);

const increment = () => setCounter(counter + 1);

return <button onClick={increment}>Cliked me {counter} times!</button>;

}

E vamos aplicar alguns estilos com src/App.scss:

.react-plugin {

display: flex;

justify-content: center;

padding: 1.5rem;

background-color: black;

button {

border: 0;

border-radius: 0.5rem;

padding: 1rem 0.75rem;

cursor: pointer;

&:hover {

background-color: lightgray

}

}

}

OK, criamos um componente contador simples e usamos alguns estilos para testar se você pode usá-los, mas agora precisamos exibi-los em algum lugar. Como fazemos?

Registre os scripts

Em um aplicativo React normal, criaríamos uma página HTML e incluiríamos o link do nosso script lá. O WordPress é semelhante no fato de que ele lida com as páginas e precisamos dizer a ele para incluir nossos scripts e estilos. Para isso, utilizamos algumas funções que ele disponibiliza.

Agora vamos terminar o arquivo react-plugin.php:

<?php

/**

* Plugin Name: React Plugin

*/

function react_plugin_shortcode()

{

wp_enqueue_script(

"react_plugin_js",

plugin_dir_url(__FILE__) . "/build/index.js",

[ "wp-element"],

"0.1.0",

true

);

wp_enqueue_style(

"react_plugin_css",

plugin_dir_url(__FILE__) . "/build/index.css"

);

return "<div class='react-plugin'></div>"

}

add_shortcode("react-plugin", "react_plugin_shortcode");

Aqui definimos a função react_plugin_shortcode. Dentro desta função inserimos os scripts na página usando a função wp_enqueue_script e o CSS com wp_enqueue_style.O segundo argumento para essas funções é o caminho para os arquivos a serem inseridos. Vou colocá-lo onde os arquivos estarão depois de construirmos o código.

Observe que, como o terceiro argumento é wp_enqueue_script, passamos wp-element package como uma dependência do nosso script porque é deste pacote que o React virá quando o código da página for executado. Mas sim @wordpress/scripts já instalado já fornece React, então por que devemos colocar essa dependência aqui?

O que acontece é que o WordPress já tem o React como núcleo, então quando construímos o código, @wordpress/scripts não incluirá o código React em nosso plugin. Portanto, informamos ao WordPress nosso script para usá-lo por meio dessa dependência. Isso é bom porque ajuda a reduzir, no final, o tamanho do código gerado. Em poucas palavras, @wordpress/scripts nos ajuda na fase de desenvolvimento.

Ainda dentro da função, retornamos o código que irá substituir o shortcode, que é o elemento container do nosso app.

Por fim, vinculamos a função ao shortcode do plugin react, de modo que sempre que o WordPress encontrar o texto [react-plugin] em uma página, ele chamará nosso processo.

Agora vamos construir o código:

npm run build

Voilà!

Tudo pronto? A única coisa que resta é editar qualquer página ou post e colocar o shortcode que criamos, [react-plugin]:

Por fim, veremos o componente React já presente:

Viu como era simples? Podemos até ir mais longe e criar um bloco em vez de usar um shortcode. Isso torna ainda mais fácil usar nosso componente.

Criar um block

Vamos fazer algumas pequenas alterações em nosso código. A primeira coisa será adicionar o pacote @wordpress/blocks e use o script de início para construí-lo automaticamente:

npm install @wordpress/blocks

npm run start

Precisamos editar o arquivo principal do plugin (react-plugin.php). Observe que o código ficará semelhante ao que tínhamos antes:

<?php

/**

* Plugin Name: React Plugin

*/

function react_plugin_block_init()

{

register_block_type(

__DIR__ . '/build',

['render_callback' => 'react_plugin_render_block']

);

}

function react_plugin_render_block()

{

wp_enqueue_script(

"react_plugin_frontend_js",

plugin_dir_url(__FILE__) . "/build/frontend.js",

["wp-element"],

"0.1.0",

true

);

return "<div class='react-plugin'></div>"

}

add_action('init', 'react_plugin_block_init');

Criamos aqui a função react_plugin_block_init, que registrará nosso bloco usando a função que o WordPress fornece: register_block_type.Como primeiro argumento, passamos o caminho para uma pasta, para que o WordPress procure um arquivo block.json nesta pasta, onde colocaremos a configuração do bloco.

No segundo argumento, passamos outra função que criamos para executar quando o bloco for renderizado na página. Nesta função, assim como antes, inserimos um script na página e retornamos o elemento container, mas desta vez, vamos dividir o código em dois arquivos: o que usamos, index.js; e o segundo, frontend.js.

Finalmente, chamamos add_action para conectar nossas funções ao gancho init, o que fará com que nosso código seja executado assim que o WordPress for carregado.

Block.json

O WordPress recomenda colocar nossa configuração de bloco em um arquivo block.json (veja a documentação completa aquí). Vamos criá-lo agora dentro da pasta src.

{

"$schema": "<https://schemas.wp.org/trunk/block.json>"

"apiVersion": 2,

"name": "react-plugin/counter",

"title": "React Plugin Counter",

"category": "layout",

"icon": "button",

"editorScript": "file:./index.js",

"viewScript": "file:./frontend.js",

"style": "file:./index.css"

}

Observe as três últimas configurações: editorScript, viewScript, y style. Nele definimos qual código será utilizado quando estivermos na tela de edição da página, o código utilizado no "front-end" e o CSS utilizado por eles, respectivamente.

Agora vamos para o código JavaScript. Como eu disse antes, vamos dividi-lo em duas partes. Primeiro, src/index.js:

import { registerBlockType } from "@wordpress/blocks";

import { App } from "./App";

import metadata from "./block.json";

registerBlockType(metadata.name, {

edit: App,

});

Nesse arquivo, registramos nosso bloco em JavaScript, que é necessário para que funcione. Passamos nosso componente app para a opção de edição, pois devemos passar o que será exibido na seção admin da tela de edição da página. Finalmente, o arquivo src/frontend.jsx:

import React from "react";

import ReactDOM from "react-dom";

import { App } from "./App";

const containers = document.querySelectorAll(".react-plugin");

containers.forEach((container) => {

ReactDOM.render(<App />, container);

});

Aqui mantemos o que estava em nosso arquivo anterior, então este código será executado somente quando a página for renderizada, fazendo com que o bloco seja renderizado.

Com tudo pronto, só falta adicionar o bloco à página.

Isso é tudo! Ao visualizar a página, o componente React deve ser exibido sem problemas.

Parabéns!

Viu como é fácil criar um plugin WordPress com React? Claro que o que fizemos foi algo simples, com configuração mínima, mas o objetivo era mostrar como fazer.

Para finalizar, vamos construir nosso código e gerar um arquivo zip. Vamos executar os seguintes comandos no terminal:

npm run build

npm run plugin-zip.

Pronto! Agora você tem seu plugin pronto para distribuição! Suponha que você queira saber mais sobre o assunto. Nesse caso, recomendo que você verifique a documentação oficial do WordPress, principalmente o pacote [@wordpress/create-block] através deste link, o que o ajudará muito a criar blocos e outros elementos. Espero ter ajudado.