Creazione di blocchi Gutenberg personalizzati per WordPress

La creazione di blocchi Gutenberg personalizzati per WordPress non deve essere difficile. Infatti, con un po' di codice, puoi creare i tuoi blocchi personalizzati senza dover utilizzare un plug-in. Gutenberg è un nuovo editor per WordPress che ti consente di creare blocchi personalizzati per i tuoi contenuti. I blocchi sono gli elementi costitutivi dei tuoi contenuti in Gutenberg. Possono essere utilizzati per aggiungere testo, immagini, video e altro. Per creare un blocco personalizzato , dovrai utilizzare un editor di testo come WordPress Code Editor o un plug-in come Block Lab. Una volta che hai un editor di testo, puoi creare un nuovo file nella tua directory del tema o del plugin. La prima cosa che devi fare è creare un tipo di blocco. Un tipo di blocco è una raccolta di impostazioni che definiscono il comportamento del blocco. Per fare ciò, dovrai usare la funzione register_block_type. Una volta che hai un tipo di blocco, puoi registrarlo con WordPress. Questa funzione prenderà due argomenti: il nome del tuo tipo di blocco e un oggetto che contiene le impostazioni per il tuo blocco. Dopo aver registrato il tipo di blocco, puoi iniziare ad aggiungere campi ad esso. I campi sono le impostazioni che controllano l'aspetto e il comportamento del blocco. Per aggiungere un campo al tuo tipo di blocco, dovrai usare la funzione add_field. Dopo aver aggiunto tutti i campi che desideri al tuo tipo di blocco, puoi registrarlo con WordPress. E questo è tutto! Ora hai creato un blocco Gutenberg personalizzato per WordPress.

L'editor di blocchi Gutenberg è stato uno dei miglioramenti di WordPress 5.0. L'editor Gutenberg divide il contenuto in blocchi, che sono sezioni facilmente riorganizzabili. La maggior parte degli sviluppatori non sarebbe in grado di creare blocchi progettati in modo nativo perché non hanno le capacità di React. La comunità degli sviluppatori di WordPress ha risposto sviluppando strumenti in grado di soddisfare i requisiti React/JavaScript. I blocchi in Block Lab vengono creati in tre fasi: aggiungerli all'interno dell'amministratore, copiarli e incollarli e quindi esportarli. Un'API può anche essere utilizzata per creare controlli personalizzati per il tuo blocco. Questo potrebbe non essere molto da guardare, ma ti darà un'idea di cosa puoi fare con un blocco Gutenberg personalizzato.

Per creare un blocco, dovremo creare un nuovo file chiamato block-notification-bar.php, che contiene un titolo (Barra di notifica) e tre campi. In risposta a questo file, apparirà un messaggio di notifica che ci chiede di inserire il nostro modello di blocco personalizzato nel nostro tema. Prima di caricare il file, assicurati che sia stato salvato e caricato sul tuo server web. Per noi è stato creato un blocco personalizzato. Tutto ciò che conta è che tu raggiunga quell'obiettivo. Abbiamo molte opzioni se vogliamo espandere ciò che abbiamo già creato. Icone, pulsanti e la possibilità di collegarsi a un altro post o pagina sono solo alcune delle funzionalità che possono essere aggiunte. Tutte queste abilità possono essere raggiunte tramite Block Lab, così come altri plugin sopra menzionati.

Plugin per blocchi personalizzati di WordPress

Ci sono molti ottimi plugin per blocchi personalizzati disponibili per WordPress. Ogni plug-in offre un diverso insieme di funzionalità e opzioni. Alcuni plug-in di blocchi personalizzati ti consentono di creare blocchi personalizzati per i tuoi post e le tue pagine, mentre altri forniscono una serie di blocchi predefiniti che puoi utilizzare.

Puoi creare facilmente post e pagine con WordPress aggiungendo contenuti ed elementi di layout come blocchi. WordPress offre un'ampia gamma di blocchi nella sua configurazione predefinita. Tuttavia, potresti voler creare un blocco personalizzato per eseguire un'attività specifica. Questo tutorial ti guiderà attraverso i passaggi per creare un blocco completamente unico. Il primo passo è inserire tre campi nel blocco delle testimonianze. Fare clic sul pulsante Aggiungi campo per iniziare a compilare il primo campo. Il secondo passaggio consiste nel creare un modello di blocco, che determinerà esattamente come verranno visualizzati i dati.

Il terzo passaggio consiste nello stile del markup di output del blocco facendo clic sulla scheda CSS. Caricando manualmente i modelli, puoi creare il tuo blocco personalizzato. In questo caso, PHP è il modo migliore per interagire con i campi dei blocchi personalizzati. Carica semplicemente il modello dell'editor sul tuo tema usando il metodo di caricamento. Per iniziare, visualizza in anteprima il blocco personalizzato. Prima di poter visualizzare in anteprima il tuo HTML/CSS, devi fornire alcuni dati di test. Crea un sito Web WordPress personalizzato con un blocco Gutenberg.

Per cercare un blocco, digita il nome o le parole chiave nella casella che appare dopo aver fatto clic sul pulsante Aggiungi nuovo blocco. Puoi visualizzare in anteprima il blocco salvando e modificando il tuo post e la tua pagina. Sul nostro sito di test, puoi vedere come appare il blocco delle testimonianze.

Crea reazione blocco Gutenberg

Ci sono alcuni modi per creare un blocco Gutenberg in React. Il primo modo è utilizzare lo strumento CLI create-guten-block. Questo impalcherà per te un nuovo blocco Gutenberg. Per utilizzare questo metodo, dovrai avere Node.js e npm installati sul tuo computer. Una volta installate queste dipendenze, puoi creare un nuovo blocco Gutenberg eseguendo il seguente comando: create-guten-block my-block Questo creerà una nuova directory chiamata my-block con tutti i file necessari per un blocco Gutenberg. Il secondo modo per creare un blocco Gutenberg in React è usare il pacchetto @wordpress/block-editor. Questo pacchetto include una funzione di supporto chiamata createBlock che può essere utilizzata per creare blocchi Gutenberg. Per utilizzare questo metodo, dovrai installare il pacchetto @wordpress/block-editor nel tuo progetto. Una volta installato il pacchetto, puoi creare un nuovo blocco Gutenberg eseguendo il seguente codice: import { createBlock } from '@wordpress/block-editor'; createBlock( 'my-block/my-block', { title: 'My Block', category: 'common', } ); Questo creerà un nuovo blocco chiamato my-block nella categoria comune. Il terzo modo per creare un blocco Gutenberg in React consiste nell'usare la funzione wp.blocks.createBlock . Questa funzione fa parte dell'API JavaScript di WordPress e può essere utilizzata per creare blocchi Gutenberg. Per utilizzare questo metodo, dovrai includere il pacchetto wp-api-request nel tuo progetto. Una volta installato il pacchetto, puoi creare un nuovo blocco Gutenberg eseguendo il seguente codice: import { wp } from 'wp'; wp.blocks.createBlock( 'my-block/my-block', { title: 'My Block', category: 'common', } ); Questo creerà un nuovo blocco chiamato my-block nella categoria comune.

Scopri come creare blocchi personalizzati in questo tutorial per l'editor Gutenberg. Utilizzerai un plug-in creato da te per completare l'attività. Sebbene uno dei temi predefiniti sia disponibile per creare un blocco Gutenberg personalizzato, dobbiamo ammettere che è possibile. In questo tutorial, esamineremo come creare un nuovo blocco personalizzato con Gutenberg. Inoltre, personalizzeremo l'aspetto del frontend e dell'editor in base alle preferenze di progettazione fornite. Se non vuoi dedicare molto tempo alla creazione di blocchi, puoi semplicemente aggiungerne uno e personalizzarli in base alle tue esigenze.

React è facile da usare nei temi personalizzati

React è un'eccellente libreria per la creazione di interfacce utente con JavaScript. WordPress lo ha utilizzato per alimentare il nuovo editor Gutenberg , così come la schermata di amministrazione del widget e i recenti aggiornamenti alle funzionalità di modifica dei contenuti del sito. Poiché React è già incorporato in WordPress, è semplice da usare nei temi personalizzati.

Gutenberg Crea un blocco pulsanti personalizzato

Gutenberg crea un blocco pulsanti personalizzato è uno strumento molto utile per creare pulsanti personalizzati per il tuo sito web. Con questo strumento puoi creare facilmente pulsanti che siano sia accattivanti che funzionali. Questo è un ottimo modo per aggiungere un tocco personale al tuo sito web e farlo risaltare dal resto.

In questo tutorial imparerai come creare il tuo primo blocco semplice nella popolare app. La nostra app WordPress @create-block è uno strumento ufficiale che ci consente di generare rapidamente codice Javascript/PHP/CSS. In modalità interattiva, puoi configurare il tuo blocco in una serie di passaggi. Quando stai imparando a conoscere Gutenberg, questo può essere estremamente utile. Se hai già impalcato il blocco, ora puoi accedere alla directory appena creata tramite un editor di codice. La struttura del plugin di blocco segue questa come è attualmente (al momento della stesura di questo tutorial). Esamineremo i dettagli di ciascun file e il suo utilizzo in questo modulo.

Il flag della riga di comando è un metodo comune per specificare le opzioni per i programmi della riga di comando. Prima di utilizzare i flag, sostituisci i valori nella directory flags con quelli che desideri utilizzare. Un foglio di stile che verrà accodato o applicato nell'editor. I dettagli di base del plugin sono discussi in dettaglio. WordPress visualizza le informazioni sul plug-in per impostazione predefinita. Per indicare a Git quali file ignorare durante la creazione di un progetto controllato dalla versione, è necessario includere il file Gitignore A.. Il repository contiene informazioni. Config consente agli sviluppatori di mantenere uno stile di codifica coerente su più progetti.

Sviluppo del plugin Gutenberg per WordPress

Il plugin WordPress Gutenberg è un progetto open source sviluppato da una comunità di volontari. Chiunque può contribuire al progetto e contribuire a renderlo migliore. Il plugin viene costantemente aggiornato e migliorato. Se sei uno sviluppatore, puoi contribuire al progetto sviluppando nuove funzionalità o correggendo bug.

Probabilmente hai sentito parlare di Gutenberg (l'editor di blocchi di WordPress), ma come inizi a creare il tuo plugin? I blocchi vengono creati con un semplice script WordPress. Il tipo di plugin WordPress creato qui è in genere un blocco, ma fornisce un buon punto di partenza per gli altri nel processo. Lo script Crea blocco può essere utilizzato come modello per creare il tuo plug-in. Puoi facilmente vedere il blocco nel front-end di WordPress, ma ha un aspetto diverso per aiutarti ad abituarti al back-end. Questo file deve essere generato in modalità sviluppo solo dopo che gli asset sono stati compilati. /node_modules – Questa è la cartella da cui sono memorizzati tutti i parametri dipendenti da JavaScript del tuo plugin.

In questo file sono disponibili file preimpostati contenenti utili ambienti di Visual Studio Code (VDC). Devi assicurarti di essere nella cartella dei plugin di WordPress se desideri creare un plugin. Di conseguenza, sarai in grado di visualizzare le fasi di sviluppo e produzione del plug-in. Apri /src/save.js nel tuo editor per sostituire la funzione di salvataggio con la seguente: BlockText può essere emesso come stringa in questo modo. Il codice seguente deve essere aggiunto alla radice del plug-in per visualizzare i blocchi in una categoria di blocchi personalizzata. La funzione registerBlockType.js restituisce un elenco delle categorie di blocchi, che possono quindi essere ricompilate utilizzando la funzione registerBlockType.js del plug-in.

L'editor dei contenuti di Gutenberg

Gli utenti di WordPress possono creare, modificare ed eliminare contenuti tramite l'applicazione a pagina singola (SPA) basata su React. A differenza del tradizionale editor di contenuti, questo fornisce un'interfaccia più fluida e intuitiva. Se desideri un editor di contenuti più potente, l' app Gutenberg non fa per te. Se preferisci un look più rilassato, puoi fare affidamento su Gutenberg.

Editor di blocchi personalizzati di WordPress

Puoi utilizzare questo blocco su qualsiasi post o pagina che desideri. Nella schermata Aggiungi nuovo blocco, utilizza la casella di ricerca per cercare il blocco digitandone il nome o le parole chiave. Dopo aver inserito il blocco nell'area del contenuto, vedrai i campi del blocco che hai creato per questo blocco personalizzato.

Questo tutorial ti guiderà attraverso il processo di creazione di un'istanza di editor di blocchi personalizzata completamente funzionale all'interno di WordPress. Questo editor verrà creato interamente all'interno di una pagina WP Admin personalizzata chiamata Block Editor (nel modo più creativo). Nel nostro Plug-A-Thon WordPress creeremo un editor. Ora dobbiamo generare del codice HTML nella nostra pagina personalizzata utilizzando il componente React dell'editor di blocchi. Come terzo argomento, utilizziamo la riga delle dipendenze dello script ($script_asset['dependencies']). Garantirà che gli script relativi a WordPress non siano inclusi nel pacchetto creato. Dobbiamo anche registrare i nostri stili CSS personalizzati e la libreria di formattazione predefinita di WordPress per poterli utilizzare.

Questo ci consente di utilizzare JavaScript per generare un Block Editor nell'HTML della pagina. La magia accade quando il componente per questo si chiama BlockEditor. È possibile eseguire il rendering dell'editor da PHP senza creare un JS globale. Il layout dell'editor è basato su un'impalcatura, come puoi vedere qui, oltre ad alcuni fornitori di contesto specializzati. Block EditorProvider è il componente più importante del pacchetto dell'editor di blocchi di WordPress. Come spiegato in precedenza, questo fornisce un nuovo contesto per un editor di blocchi nuovo di zecca nel contesto della modifica dei blocchi. Lo fa sottoscrivendo il registro fornito (tramite il provider withRegistry HOC), ascoltando gli eventi di modifica del blocco, determinando se la modifica del blocco è rimasta persistente e chiamando il gestore di input onChange quando necessario.

Il componente più intrigante è il componente BlockList, che aggiunge un elenco di blocchi all'editor. Vale la pena studiare questi componenti in dettaglio perché sono tra i più intricati e coinvolti. Per ulteriori informazioni sul nostro componente EditorBlock personalizzato, consulta il seguente articolo. Slot/riempimento viene implementato utilizzando il nostro componente Blockeditor (vedi sopra) per esporre un riempimento (barra laterale. InspectorFill) al suo interno, che importiamo e renderizziamo in seguito nell'implementazione. Di conseguenza, React ci consente di mantenere un componente di ispezione nel suo DOM mentre lo esegue il rendering nel markup in una posizione separata (ad esempio, nella barra laterale). I blocchi possono essere trovati anche all'interno di LocalStorage sotto la chiave getdavesbeBlocks.

Questi dati vengono serializzati nel formato Block Grammar, il che significa che possono essere archiviati in una stringa. GitHub ha compilato l'intero codice per l'editor di blocchi funzionante personalizzato. Il programma può essere scaricato e provato gratuitamente.