Un tutorial de Gutenberg per a desenvolupadors principiants: Creeu el vostre primer bloc complementari

Tutorial de principiants de Gutenberg


Si penses desenvolupar alguna cosa per a WordPress el 2020, ignorar Gutenberg no és simplement una opció. Tots els complements i els temes han de cooperar bé amb Gutenberg i oferir una experiència d’usuari que sigui coherent en tot allò que un usuari pugui veure al tauler de control de WordPress. I sobretot perquè Gutenberg és part integrant de WordPress ara, simplement es coneix com l’editor de blocs.

Dit això, començar amb Gutenberg no és tan senzill. Si bé fa un parell d’anys que podríeu escriure un complement de qualitat de WordPress sense utilitzar res, sinó el bloc de notes, el procés s’ha tornat molt més dur ara..

Gutenberg utilitza tecnologies com l’API REST de WordPress, JavaScript i React. Per tant, eren necessaris nous requisits per a complements i temes per treballar amb Gutenberg.

La bona notícia és que anem a parlar sobre tot això avui! Aquest post serveix de tutorial de Gutenberg per a principiants, que volen crear un complement per a Gutenberg per primera vegada.

Ens centrem principalment en els diversos aspectes de la creació d’un plugin per a Gutenberg: la configuració de l’entorn de desenvolupament, la creació d’un plugin bàsic i alguns matisos de treball amb blocs..

1. Configureu el vostre entorn de desenvolupament de Gutenberg

Per començar el desenvolupament de Gutenberg, necessiteu uns coneixements bàsics de JavaScript i React. Aquí teniu un tutorial sobre JavaScript per a desenvolupadors de WordPress. A més, els paquets addicionals de Gutenberg poden necessitar l’ús d’un gestor de paquets NodeJS, npm.

Podeu instal·lar la versió més recent estable de NodeJS a Windows o MacOS mitjançant els instal·ladors al lloc oficial. Si teniu un servidor Linux, podeu compilar el codi font o utilitzar el gestor de paquets corresponent (com apt i yum). Per exemple, si utilitzeu Ubuntu, executeu les ordres següents al terminal.

Actualització sudo apt
sudo apt instal·lar nodejs npm

Després que la instal·lació tingui èxit, podeu executar la següent comanda per verificar la versió de NodeJS.

nodejs –versió

Després de marcar aquestes caselles, és una bona idea configurar el lloc web de prova de WordPress amb una instància del complement actual de Gutenberg (el complement independent) o fins i tot la versió de desenvolupament. de GitHub.

⚠️ Nota; mentre que Gutenberg està integrat a WordPress, aquesta versió no és la més recent. El desenvolupament de Gutenberg encara es produeix de manera bastant separada i tot allò nou s’inclou en el complement autònom de Gutenberg. La versió real de Gutenberg al nucli no ha de rebre cap actualització important des de la seva inclusió a WordPress 5.0. Sempre voleu estar treballant amb la versió més recent de Gutenberg, ja que us proporciona una millor oportunitat de demostrar el vostre treball futur i assegurant-vos que la vostra creació sintonitzarà amb tot el que arribarà al nucli de WordPress més endavant..

En una altra nota, si teniu intenció de contribuir al connector principal de Gutenberg, el repositori disposa de pautes de contribució sobre com configurar el vostre entorn local i configurar canvis per a la revisió.

�� Finalment, si voleu adaptar els vostres complements existents a Gutenberg, aquí teniu un tutorial detallat sobre com aconseguir-ho: primera part i segona part.

Per poder començar amb un directori de complements de plantilla que ja està a punt per cooperar amb Gutenberg, podeu plantejar-ho el connector Gutenberg. Una solució així us ajuda l’estructura de fitxers bàsica perquè pugueu centrar-vos en el contingut del connector. Per utilitzar la placa de calor, descarregueu i instal·leu el connector des d’aquí (zip). La instal·lació i l’activació del complement de boilerplate activa els blocs de mostra, que explorarem en aquest tutorial. Podeu trobar el codi de cada bloc al seu directori respectiu a la ubicació del complement de la placa de caldera.

2. Configuració inicial

Per recordar-ho, Gutenberg introdueix el concepte de blocs, que són un reemplaçament del llenç estàndard de l’editor TinyMCE. En alguns casos, els blocs també poden substituir codis curts i altres elements de contingut addicionals que els connectors utilitzats per afegir al contingut de WordPress de diverses maneres.

Si us interessa construir Gutenberg, l’enfocament més habitual és crear un complement que crei nous blocs i els posi a l’abast de l’usuari. Això és exactament el que farem en aquest tutorial de Gutenberg.

Les següents seccions descriuen el procés des del principi fins a la finalització.

El complement específic que anem a crear imprimeix un missatge amb un determinat fons personalitzable. Només és un exemple de creació, però podeu adoptar els principis aquí presentats i aplicar-los al vostre propi complement més complex.

Els conceptes bàsics per crear aquest complement han de ser familiars. Comença creant un directori nou al directori de plugins de WordPress. Hi col·locarem quatre fitxers:

  • index.php: Aquest fitxer conté metadades sobre el nou bloc de Gutenberg.
  • block.js: Aquest fitxer JavaScript registra el bloc personalitzat de Gutenberg.
  • editor.css: aquest fitxer conté estils per a l’editor.
  • style.css: aquest fitxer conté els estils per a la part frontal del bloc.

Els dos primers fitxers de la llista tenen cura de registrar el bloc i els dos següents fitxers defineixen els estils visuals dels elements del bloc.

3. Registre del bloc

En aquest pas per registrar un bloc per a Gutenberg, abastarem dos aspectes:

  • registre de metadades del complement amb el motor PHP de WordPress,
  • registrant el bloc amb el framework React que executa Gutenberg.

El fitxer index.php conté els actius obtinguts del bloc i de l’editor.

  • Primer, registreu les funcions personalitzades mitjançant add_action.
  • A continuació, definiu les funcions que mostren la ruta dels fitxers JavaScript i CSS del bloc i l’editor mitjançant les funcions wp_enqueue_style i wp_enqueue_script.

Resumim-ho mitjançant el codi PHP següent:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

funció gb_block_01_basic_editor_assets () {
// Scripts.
wp_enqueue_script (
‘gb-block-01-basic’,
plugins_url (“block.js”, __FILE__),
matriu (‘blocs wp’, ‘wp-i18n’, ‘element wp’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// Estils.
wp_enqueue_style (
‘gb-block-01-basic-editor’,
plugins_url (‘editor.css’, __FILE__),
matriu (‘wp-edit-blocks’),
filemtime (plugin_dir_path (__FILE__). “editor.css”)
);
}

Això defineix els recursos per a l’editor bàsic. Per al bloc només cal el fitxer CSS, que es defineix mitjançant la funció wp_enqueue_style.

El fitxer block.js descriu les propietats del bloc a l’editor de Gutenberg. Definim els atributs i propietats següents:

  • title – El títol del bloc
  • icona: icona a mostrar per al bloc; podeu seleccionar qualsevol icona aquesta col·lecció de dashicons
  • categoria: el grup al qual pertany el bloc. Exemples de grups de blocs són "comú," "format," "incrustar."
  • edit: una funció JavaScript que retorna un element DOM. Utilitzem la funció wp.element.createElement per crear un element DOM de paràgraf personalitzat, p, amb un text personalitzat escrit en ell. Gutenberg invoca aquesta propietat quan un usuari fa clic al bloc de l’editor.

(funció () {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
títol: __ (“GB Basic”, “GB”),
icona: “shield-alt”,
categoria: “comú”,

edit: function (accessoris) {
tornar wp.element.createElement (
‘p’,
{className: props.className},
‘Hola món! – de l’editor (01 Block Basic). “
);
},

});
}) ();

De la mateixa manera, podeu crear una propietat de desat que s’invoca quan el bloc està seleccionat des de la part frontal.

Al codi anterior, vam definir el nom de classe de l’element p amb el props.className, que crearà un nom de classe a partir de wp-block, seguit del nom del bloc. A la següent secció d’aquest tutorial de Gutenberg, definim els estils d’aquesta classe.

4. Personalització del bloc

Tal com s’ha comentat a l’apartat anterior, el següent pas d’aquest tutorial és definir les propietats dels elements del bloc. Definim un color de fons, un color de text i una sanefa.

.wp-block-gb-basic-01 {
color: # 000;
fons: mistyrose;
vora: 0,2rem vermell sòlid;
}

Al lloc dels fitxers CSS, també podeu afegir fitxers SCSS i compilar-los amb Node. Més endavant, aquí està un tutorial sobre l’estil dels elements de Gutenberg de CSS Tricks.

Resultats del teu primer tutorial de Gutenberg

Finalment estem preparats per provar el bloc que hem creat. Si el complement de Gutenberg està activat, dirigiu-vos a la secció + icona i comproveu si hi apareix el nou bloc.

nou bloc de Gutenberg

A continuació, si feu clic al bloc, notareu que es veu el missatge de dalt, amb un color de fons i una vora del fitxer CSS:

bloqueig en acció

Conclusió

Arribem al final del vostre primer tutorial de Gutenberg. Espero que això us hagi estat d’utilitat. Per descomptat, el que hem creat aquí no és súper complex, però us hauria de fer una idea de les estructures bàsiques quan treballeu amb Gutenberg i com podeu planificar el vostre pròxim plugin.

Primer, es va parlar dels passos per establir l’entorn de desenvolupament de Gutenberg. A continuació, varem introduir un complement de placa per ajudar a desenvolupar-lo. A continuació, el focus de la discussió es va canviar a diversos passos per registrar i dissenyar un nou bloc.

Espero que aquest tutorial de Gutenberg us hagi ajudat a crear el vostre primer complement de Gutenberg!

Si teniu cap pregunta, feu-ne un comentari als comentaris següents.

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map