Share
Gutenberg è il nuovo editor di WordPress e tutti ne parlano. Ha introdotto un modo completamente nuovo di scrivere contenuti con WordPress. Quindi gli sviluppatori non solo possono trarre vantaggio dal suo layout modellato a blocchi, ma anche gli utenti finali saranno in grado di creare layout di pagina dinamici.
Tuttavia, la creazione di blocchi personalizzati con Gutenberg può essere piuttosto una seccatura per gli sviluppatori che vogliono integrarlo nei loro progetti. Questo tutorial presenterà un incredibile toolkit-creare-Guten-block-attraverso il quale è possibile creare blocchi Gutenberg in pochi minuti.
Quindi iniziamo!
Accentsconagua
creare-Guten-blockcreare-Guten-block (CGB) è un toolkit per sviluppatori con configurazione zero per la creazione di blocchi Gutenberg di WordPress. Costruito da Ahmad Awais - mio marito e un sostenitore di sviluppatori open source che contribuisce regolarmente al nucleo di WordPress - il toolkit ha ridotto la difficoltà di creare blocchi di Gutenberg. È zero-config e crea blocchi senza lock-in e solo una singola dipendenza.
Per costruire un blocco Gutenberg, devi prima creare un plugin per WordPress. Per fare ciò, inizierai configurando Webpack, React, ES 6/7/8 / Next, ESLint, Babel, ecc. E potrai finalmente iniziare a codificare il tuo blocco. E dovrai continuare ad aggiornare le configurazioni degli strumenti come quelle che supportano pacchetti e librerie.
Questo rallenta lo sviluppo, quindi Ahmad ha nascosto tutta questa configurazione in un pacchetto ottimizzato chiamato CGB-scripts, che trovi nella cartella radice del blocco. Questa è la singola dipendenza che ho menzionato prima.
Quindi, invece di aggiornare tutto separatamente e regolarmente, il CGB-scripts il pacchetto è aggiornato e in questo modo è sempre possibile aggiornarlo senza apportare modifiche al codice. Questa è una cosa che mi è piaciuta di più.
Per farla breve…
creare-Guten-block è un go-to zero-config di uno sviluppatore. toolkit per costruire blocchi di WordPress Gutenberg in pochi minuti senza configurare Webpack, React, Modern JavaScript, ESLint, Babel, ecc. - progetto sito GitHub Analizziamo ora alcune delle funzioni più importanti dello strumento.
creare-Guten-block offre un ambiente di sviluppo aggiornato per lo sviluppo di un plugin Gutenberg per WordPress. È ricco di funzioni come:
La manutenzione e gli aggiornamenti di tutti gli strumenti sopra menzionati sono gestiti da una singola dipendenza di build: il CGB-scripts pacchetto. Quindi, nonostante l'utilizzo di Webpack, Babel, ESLint e altri fantastici progetti, puoi ancora godere di un'esperienza di sviluppo senza problemi con questo pacchetto, che rimarrà aggiornato tutto il tempo.
Durante l'utilizzo del creare-Guten-block toolkit, non è necessario configurare nulla. La maggior parte delle cose necessarie per lo sviluppo e l'ambiente di produzione sono preconfigurate.
Una preoccupazione che gli sviluppatori potrebbero avere prima di iniziare a utilizzare il CGB il toolkit è cosa fare se un progetto richiede qualche personalizzazione, poiché questi strumenti sono preconfigurati per funzionare in un modo specifico. Quindi, la buona notizia è che in qualsiasi momento puoi "espellere" il tuo progetto e personalizzarlo, ma poi dovrai mantenere la configurazione da solo.
Per espellere il tuo progetto, esegui un singolo comando e tutte le dipendenze di configurazione e generazione verranno spostate direttamente nel tuo progetto, e potrai iniziare esattamente dove hai lasciato.
Iniziare e lavorare con creare-Guten-block il toolkit è molto semplice. Basta installarlo e quindi eseguire per creare un plug-in di blocco Gutenberg per WordPress. Ma prima di questo, ci sono alcuni prerequisiti che devono essere impostati. Quindi, assicurati di avere quanto segue:
Quindi, segui questi semplici passaggi:
Devi avere node.js e npm installato. Se sono già installati, passa al passaggio successivo. Altrimenti, scarica Node.js e installalo. Per verificare l'installazione, digitare i seguenti comandi.
node -v # Risultati in v9.1.0 - assicurati di avere Nodo> = 8 installato. npm -v # Risultati in 5.6.0 - assicurati di avere npm> = 5.3 installato.
creare-Guten-block Ora, installerai creare-Guten-block all'interno del tuo WordPress locale /wp.local/wp-content/plugins/ directory. Inoltre, fornirai un nome per il plugin che desideri creare. Esegui il seguente comando e attendi qualche istante poiché potrebbero essere necessari alcuni minuti per l'installazione.
npx create-guten-block demo-block
Questo comando crea una directory di plugin chiamata demo-block all'interno della cartella corrente. Crea anche la struttura delle cartelle necessaria e installa le dipendenze dello sviluppatore.
Crea una struttura di cartelle come questa:
/local.dv/wp-content/plugins/demo-block ├── plugin.php ├── package.json ├── README.md | ├── dist | ├── blocks.build.js | ├── blocks.editor.build.css | └── blocks.style.build.css | └── src ├── block | ├── block.js | ├── editor.scss | └── style.scss | ├── blocks.js ├── common.scss └── init.php
Dopo aver completato la configurazione dell'installazione, apri la cartella del progetto ed esegui lo script di avvio digitando il seguente comando:
cd demo-block npm start
Il inizio di npm comando esegue il tuo plugin in modalità sviluppo. C'è anche un npm esegue build comando che ti aiuta a far girare il tuo plugin in modalità produzione. Continua a leggere per trovare dettagli su tre diverse funzioni che puoi eseguire con CGB kit di strumenti.
creare-Guten-block Quando lavori con questo script, lavorerai con tre script che ti aiuteranno sviluppare, costruire, e espellere il tuo plugin.
inizio di npm copioneQuesto comando viene utilizzato per compilare ed eseguire il blocco Gutenberg mentre stai lavorando in modalità sviluppo. Anche orologi per eventuali modifiche e riporta indietro con errori nel codice.
npm esegue build copionePer lavorare in modalità produzione, esegui questo comando all'interno di dist cartella. Qui, vedrai i messaggi di compilazione, gli errori e gli avvertimenti sui lanugine nella console. Questo comando viene eseguito solo una volta e riporta il gzip dimensioni del file del codice prodotto.
espulsione di npm run copioneSe in qualsiasi momento vuoi espellere il tuo plug-in creare-Guten-block, eseguire questo comando. Questo ti consente di personalizzare il progetto in base alle tue esigenze. Tuttavia, è un processo a senso unico e non può essere ripristinato.
Dopo aver espellereed, devi aggiornare e mantenere tutte le dipendenze del progetto da solo.
creare-Guten-block Dopo aver completato l'installazione e l'installazione, è possibile aprire il dashboard di WordPress e accedere a plugin sezione. Qui puoi trovare un nuovo plugin chiamato demo-block - CGB Gutenberg Block Plugin essere aggiunto. Clicca il Attivare pulsante e sei a posto.
Ora vai a Messaggi> Aggiungi nuovo per aprire l'editor Gutenberg. (Ricorda che il plugin Gutenberg è un prerequisito per il creare-Guten-block kit di strumenti.)
Clicca sul + icona per accedere a tutti i blocchi. Nella barra di ricerca, digita CGB e troverai un blocco Gutenberg che viene aggiunto.
Fare clic e aggiungere un blocco Gutenberg nell'editor di WordPress come questo:
Colpire il Pubblicare pulsante per vedere come appare sul front-end.
Sorpreso? Lo ero, quando ho capito che Ahmad ha disegnato i blocchi Gutenberg in modo diverso per il front-end e il back-end. Questo può essere ulteriormente verificato aprendo il src cartella del tuo demo-block plugin nell'editor di codice.
Qui trovi due file separati: editor.scss che gestisce il CSS per il back-end, e style.css (editor.css è accodato dopo style.scss, che lo rende più in alto nella priorità). Entrambi questi file sono stati inclusi nel main block.js file tramite il importare comando.
A differenza di altri kit di avviamento e piastre di riscaldamento, ci sono molte caratteristiche distintive che creare-Guten-block ha preso offerte, e per riassumere, ecco un breve riassunto delle sue caratteristiche principali:
CGB-scripts dipendenza creare-Guten-block è autorizzato dal MIT e disponibile gratuitamente su GitHub.
