Instal·lació per fer blocs a WordPress

Instal·lació local de WordPress

Primer, comptem que ja tenim una instal·lació local de WordPress. Si no la tenim, primer podem buscar ‘Local by Flywheel’ (molt fàcil i recomanable) o una instal·lació de Docker per WordPress o qualsevol altre LAMP(Linux, Apache, MySQL y PHP) , XAMPP(Apache, MariaDB, PHP) o WAMP(Windows, Apache, MySQL y PHP) o qualsevol altre.

Local by Flywheel:

Una manera fàcil de desenvolupar llocs web del WordPress localment

https://localwp.com/

Lo primer és tenir WordPress funcionant i saber instal·lar les seves extensions. Si no ho has fet mai fes una pausa i comença amb la instal·lació.

Node + npm

Segon, si ja tenim WordPress localment i funcionant, ens cal tenir la instal·lació de Node i npm. També és aconsellable el gestor de versions nvm. Quan calgui utilitzarem el comandament npx que executa sense instal·lació. En el meu cas tinc la instal·lació de Node per Windows.

Node.js és un entorn d’execució de JavaScript de codi obert i multiplataforma.

https://nodejs.org/

npm és la biblioteca de programari més gran del món i també és un gestor de paquets i instal·lador de programari

https://www.npmjs.com/

nvm us permet instal·lar ràpidament i utilitzar diferents versions de node a través de la línia d’ordres.

https://github.com/nvm-sh/nvm#intro

NPX (‘Node Paquet eXecute’) és simplement un corredor de paquets NPM. Permet als desenvolupadors executar qualsevol paquet JavaScript disponible al registre NPM sense ni tan sols instal·lar-lo.

https://www.npmjs.com/package/npx

Hi ha molt manuals en anglès per fer la instal·lació d’aquestes eines. (Si puc actualitzaré aquesta entrada per afegir alguns detalls però ara no tinc el temps)

En un terminal, amb permisos, es pot comprovar la instal·lació d’aquesta manera:

> nvm use 14
> node --version
v14.21.2
> npm --version
6.14.17

Com que Node te diverses versions i WordPress necessita la versió 14 es pot executar el següent comandament:

> nvm use 14
Now using node v14.21.2 (64-bit)

WordPress Scripts

Si ja tenim la instal·lació local de WordPress només ens cal tenir els scripts per crear blocs fets WordPress . WordPress Scripts ens permeten la creació d’una extensió o plugin de blocs molt ràpidament. Primer cal el paquet:

npm install @wordpress/scripts --save-dev

Des de la instaI·lació de WordPress local podem crear un directori per un plugin de blocs amb la seva estructura de fitxers i totalment funcional. A la web de WordPress hi ha força informació. El procés comença en el terminal en el directori de plugins i escrivint els comandaments següents:

npx @wordpress/create-block el-meu-plugin
$ cd el-meu-plugin
$ npm start

Aquest comandament crea un directori amb tots els fitxers necessaris al seu lloc i amb les opcions per defecte.

Using the create-block Tool

Development Environment

En aquest moment ja tenim un ‘plugin’ que cal activar com qualsevol altra extensió des de el tauler del WordPress i que genera un bloc per defecte que es pot util·litzar amb l’editor de blocs.

Els fitxer a editar son al directori /src i els fitxer per producció a /build. En principi es pot fer un bloc senzill i funcional només editant els fitxers següents del directori /src

block.json, 
edit.js , 
save.js , 
editor.scss 
style.scss. 

Dos fitxers molt importants son al directori arrel:

package.json 
el-meu-plugin.php (el nom del fitxer pot ser el del nom del plugin)

El fitxer package.json és el que ens permet processar el plugin amb els scripts de WordPress.

El fitxer principal .php registra el bloc i permet registrar els fitxers de JavaScript o fitxers d’estils addicionals. A cada directori de ‘plugins’ que creem veurem que també s’ha creat un directori enorme anomenat node_modules. Aquest directori conté tot el que es necessita pel desenvolupament per l’editor de blocs i els components.

Des de el directori del ‘plugin’ per desenvolupar cal executar el comandament següent:

npm start

L’script vigila les modificacions dels fitxer del projecte i els actualitza si hi ha canvis. És fantàstic veure com qualsevol canvi actualitza els fitxers de destí ràpidament. Internament sembla que utilitza eines que com WebPack i Babel, que no conec, però no m’ha calgut afegir cap configuració. I per crear els fitxers definitius s’utilitza:

npm run build

Aquest comandament només crea una versió i cal enrecordar-se d’emprar el comandament si hem fet canvis als fitxers del projecte perquè caldrà tornar a executar el script.

npm run plugin-zip

Entorn de programació

Cal també tenir un bon entorn de programació. per exemple VSC (Visual Studio Code de Microsoft). És una eina gratuïta amb un munt d’extensions. Si el teniu integrat amb Git millor que millor. Gairebé tot es pot fer des de VSC. És una eina que necessita el seu aprenentatge.

Visual Studio Code. És ara mateix un dels millors entorns per programar.

https://code.visualstudio.com/

En el meu cas tinc instal·lat Git, un compte a github i Github Desktop. També tinc integrat VSC amb el comte de Github. Github no és essencial però és molt intuïtiu i facilita molt l´ús de git.

GIT i Github

https://github.com/

Plugins pel navegador per depurar

L’entorn ‘LocalWP’ permet depurar amb VSC activant el debugging directament amb un sol clic. Però al navegador Firefox tinc l’extensió XDebug Helper que es pot activar per connectar amb el VSC . En el VSC tinc les extension PHP Debugger i Debugger for Firefox.

Totes les eines d’aquest article son gratis!

Visca el codi lliure!