✅ Notizie, temi, plugin WEB e WordPress. Qui condividiamo suggerimenti e le migliori soluzioni per siti web.

Crea un blocco Gutenberg personalizzato – Parte 3: oggetti di scena e componenti di WordPress

7

Il passaggio precedente di questa serie di tutorial ha spiegato come registrare un blocco personalizzato, sia in Javascript che in PHP. In questo passaggio impareremo come utilizzare i componenti di WordPress per aggiungere diversi tipi di campi e impostazioni.

Per utilizzare i componenti di WordPress nel nostro blocco, dobbiamo prima conoscere gli oggetti di scena.

Puntelli

Props è una caratteristica importante in React ed è fondamentalmente un modo per passare variabili o funzioni ad altri componenti. Se non hai familiarità con gli oggetti di scena di React, puoi leggere il tutorial ufficiale di React a riguardo.

WordPress fornisce alcuni oggetti di scena per le funzioni edite in. All’interno di questi oggetti di scena otteniamo accesso a cose critiche, come attributi e un metodo per aggiornare i nostri attributi. Esamineremo gli attributi in dettaglio nel passaggio successivo! save``registerBlockType()

Finora nel nostro blocco abbiamo scritto la funzione per edite in savequesto modo:

Dovresti abituarti ad aggiungere il parametro propsa entrambi edite save, in questo modo:

Ora hai pieno accesso alla variabile propse a tutto ciò che contiene dall’interno edite save. Se sei curioso, puoi aggiungere a console.log(props);nella editfunzione prima returndell’istruzione. Dovresti vedere quali oggetti di scena sono disponibili nel debugger della console.

Utilizzo dei componenti di WordPress

Come accennato in precedenza, abbiamo accesso a un’enorme libreria di componenti e funzioni utili all’interno del pacchetto globale wp. Troverai componenti pronti per l’uso per qualsiasi tipo di componente relativo all’input che ti viene in mente. Gli esempi includono input di testo, input di testo RTF, menu a discesa, interruttori, caselle di controllo, pulsanti in stili diversi, caricatore multimediale e selettori di colori. Ci sono anche funzioni e componenti per funzionalità più avanzate. Ad esempio, eseguire query su WordPress per i contenuti (post, categorie, ecc.) con funzioni integrate o recuperare con l’API REST.

È sia più semplice che consigliato utilizzare i componenti dell’interfaccia utente di WordPress. Questo per assicurarsi che il design e la funzionalità siano il più snelli possibile per non confondere o infastidire gli utenti.

Ma sfortunatamente al momento in cui scrivo la documentazione per Gutenberg è molto scarsa. Ho trovato il modo migliore per conoscere ciò che esiste all’interno del wppacchetto e come funzionano i componenti effettivamente cercando nel loro repository Github Gutenberg ufficiale. Alcuni dei pacchetti (cartelle) hanno un testo readme che offre un po’ di documentazione. Dai un’occhiata al readme per un pulsante o per l’ interruttore, ad esempio.

Il repository Github dovrebbe corrispondere a ciò che è all’interno del wppacchetto (a seconda della versione che hai e del ramo che stai guardando in Github). Ciò significa che ogni cartella che vedi nella directory principale in Github risiede nel pacchetto packagesglobale. wpAd esempio, ricorda che la funzione che abbiamo usato nel passaggio precedente, registerBlockType(), era inside wp.blocks, il che significa che troverai il codice sorgente per questa funzione esportato all’interno di packages/blocks/.

Poiché ho sviluppato una serie di blocchi Gutenberg personalizzati e ho approfondito un po’ il repository Github, ho scoperto che ci sono alcuni pacchetti che contengono le funzionalità più comuni utilizzate per la creazione di blocchi personalizzati. Li includerò di seguito.

Per una panoramica più completa dei componenti disponibili, consiglio di scaricare il mio eBook gratuito che copre i componenti disponibili in Gutenberg! Contiene i componenti più comuni e utili con documentazione su prop ed esempi di codice:

Una rapida panoramica dei pacchetti più comuni che utilizzerai per i blocchi

Ovviamente ce ne sono molti di più disponibili, ma quello che segue è quello più comune per lo sviluppo di blocchi. Utilizzeremo la maggior parte, se non tutti, di questi in questa serie di tutorial. Ogni volta che si desidera utilizzare un componente, è necessario sapere in quale pacchetto si trova.

wp.components

Troverai la maggior parte dei componenti di input dell’interfaccia utente all’interno di wp.components. Esempi sono input di testo diversi, select, checkbox, pulsanti di opzione, componenti trascinabili, pulsanti, colorpicker, datepicker e così via. Troverai anche componenti dell’interfaccia utente che puoi utilizzare per la barra degli strumenti del blocco e il contenuto della barra laterale delle impostazioni (denominata InspectorControls) nell’editor.

Controlla le cartelle nel repository Github.

wp.blockEditor e wp.editor

In questi due pacchetti troverai componenti utili per RTF, gestione di immagini/caricatore multimediale e componenti per l’aggiunta effettiva di barre degli strumenti o pannelli Inspector (barra laterale) personalizzati.

Alla fine di questa serie esamineremo la creazione di blocchi dinamici in cui utilizzeremo PHP per il rendering dell’output del blocco e per questo utilizzeremo un componente da wp.editor.

A quanto ho capito, la maggior parte dei componenti è iniziata nei wp.editorprimi giorni di Gutenberg, ma soprattutto dopo WordPress 5.3, molti di essi sono stati spostati in wp.blockEditor. Se utilizzi un componente in wp.editorcui WordPress prevede di trasferirsi in wp.blockEditoresso non fallirà per ora, ma nel debugger della console riceverai avvisi che è stato deprecato e che dovresti passare wp.blockEditorquando puoi. E in modo reversibile, se stai seguendo questa serie con una versione precedente di WordPress per qualche motivo, potresti riscontrare errori durante la chiamata di componenti che non sono wp.blockEditorancora stati spostati.

Crea un blocco Gutenberg personalizzato - Parte 3: oggetti di scena e componenti di WordPress

elemento.wp

All’interno wp.elementtroverai componenti che corrispondono ai componenti React. Ad esempio Component(che corrisponde a React.Component) e Fragment( React.Fragment). Li useremo quando inizieremo a dividere il nostro codice in componenti separati.

wp.i18n

Come dice il nome, il wp.i18npacchetto contiene funzioni per la gestione della traduzione. Contiene le stesse funzioni di traduzione che conosciamo in PHP; per esempio __()e _e(). Lo esamineremo in dettaglio in <<<>>>> quando impareremo come tradurre il nostro blocco.

wp.data

Il wp.datapacchetto serve per interrogare WordPress per i dati al di fuori dell’editor. Ci sono componenti per l’invio dei messaggi withSelecte selectche useremo più avanti in questa serie per interrogare i post all’interno del nostro blocco.

wp.compose

Il pacchetto precedente e wp.composesono per la costruzione di blocchi più avanzati. All’interno di questo pacchetto troveremo componenti e funzioni per creare i cosiddetti componenti di ordine superiore. I componenti di ordine superiore sono una tecnica di pattern in React per il riutilizzo di componenti e logica, e la useremo in combinazione con wp.dataper interrogare i post.

Basta parlare: come usi in pratica alcuni di questi componenti?

Come menzionato prima; per utilizzare i componenti di WordPress devi sapere dove si trovano. Spero che la mia panoramica sopra combinata con il repository Github ti dia un’idea di dove trovarli.

Non dimenticare che puoi sempre aggiungere qualsiasi normale tag HTML, come div, span, intestazioni e così via. Ricorda solo di seguire le linee guida di React negli attributi. Ad esempio classè una parola chiave riservata in React (per la creazione di componenti basati su classi), quindi se vuoi aggiungere una classe a un elemento HTML devi usare className.

Nota: durante lo sviluppo, non dimenticare di iniziare npm run starta compilare il codice.

Come semplice esempio, proviamo alcuni componenti per vedere come appaiono. Li destrutturiamo dai loro pacchetti corrispondenti e li usiamo nella nostra editfunzione.

Questo, ad esempio, risulterà nel nostro blocco simile a questo nell’editor.

Crea un blocco Gutenberg personalizzato - Parte 3: oggetti di scena e componenti di WordPress

Noterai che riceverai messaggi di errore in Console quando li digiti e che non salverà ciò che digiti durante l’aggiornamento del post (e l’aggiornamento). Questo perché ci mancano gli oggetti di scena sui componenti che sono la connessione agli attributi, dove sono archiviati tutti i nostri dati di blocco. Gli oggetti di scena sono responsabili del passaggio dei valori salvati e delle funzioni responsabili dell’aggiornamento dei nostri attributi quando qualcosa viene modificato nei nostri input. Questo è ciò che faremo nel passaggio successivo, dove inizieremo finalmente a scrivere del codice reale.

Fonte di registrazione: awhitepixel.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More