En el desenvolupament de blocs a l’editor de blocs de WordPress usualment s’utilitza el codi npm start des del terminal. Si no saps de què et parlo passa a l’article anterior:
Instal·lació per fer blocs a WordPress
Però, com fer que els canvis es reflixin immediatament al navegador ? (sense haver de refrescar manualment el navegador). Doncs es veu que hi ha una manera senzilla instal·lant un parell d’eines amb Node.
En la configuració del bloc, dins el fitxer package.json podem afegir el següent codi:
"preview": "npm-run-all --parallel sync start",
"sync": "browser-sync start -p testblocks.local --files **/*.php ./build"
npm-run-all és una eina CLI per executar npm-scripts multiples en paral·lel o seqüencialment. En aquest cas ‘testblocks.local és l’adreça web de desenvolupament local. L’has de canviar per la teva adreça.
Troba l’explicació aquí: https://www.npmjs.com/package/npm-run-all
I aqui https://browsersync.io
Cal fer prèviament la seva instal·lació:
npm install npm-run-all --save-dev
npm install browser-sync --save-dev
Fet els canvis a package.json i fetes les instal·lacions només caldrà invocar:
npm run preview
En aquest video tutorial he trobat les idees per afegir-ho ( veure el minut 11). “React In WordPress Boilerplate (Both Gutenberg Block Types & Front-End)”