Nota: questa guida è stata aggiornata per essere conforme alla nuova specifica Custom Elements versione 1. Puoi visualizzare la specifica e scoprire di più al riguardo.
A partire da luglio 2021, i componenti personalizzati obsoleti non sono più supportati in Google Web Designer. Per aggiornare i tuoi componenti personalizzati, consulta la guida all'upgrade.
Gli sviluppatori web esperti possono realizzare propri componenti personalizzati per Google Web Designer che estendono i componenti esistenti o ne creano di nuovi da zero. Altri utenti possono installare componenti personalizzati per aggiungere funzionalità ai loro progetti senza bisogno di modificare il codice.
Un pacchetto di componenti valido è formato da un file .zip che contiene un file manifest JSON. Il pacchetto può includere anche altri file, ad esempio un file JavaScript che definisce un elemento HTML personalizzato o altri necessari file JavaScript e CSS.
1. Definisci un elemento personalizzato
I componenti personalizzati sono implementati in Google Web Designer come elementi personalizzati.
Un elemento personalizzato è un tipo di elemento HTML che definisci con codice JavaScript e a cui assegni un nome tag personalizzato. Una volta definito un elemento personalizzato, puoi utilizzarlo come qualsiasi elemento standard. Le API DOM che supportano gli elementi HTML nativi funzionano anche con gli elementi personalizzati.
Scopri ulteriori informazioni sugli elementi personalizzati nelle specifiche HTML di WHATWG.
Segui queste linee guida per gli elementi personalizzati in Google Web Designer:
- Il nome tag per gli elementi personalizzati deve contenere un trattino (
-), ad esempiox-paneloexpand-button. - Lo spazio dei nomi
gwd -è riservato a Google Web Designer e non può essere utilizzato negli elementi personalizzati.
Guarda un esempio di codice di elemento personalizzato
2. Crea eventuali file JavaScript e CSS aggiuntivi necessari
Crea i file JavaScript e CSS che forniscono la funzione e lo stile che vuoi.
Puoi pubblicare file JavaScript e CSS da un server esterno invece di includere i file nel pacchetto. Aggiungi riferimenti a file esterni nel manifest JSON.
3. Esegui il transpile del codice in ES5 (facoltativo)
Per assicurare la massima compatibilità con il browser, ti consigliamo di transcompilare il codice del componente in modo che possa usare la sintassi JavaScript ES5. Questo contribuisce ad assicurare la corretta esecuzione del componente su browser meno recenti.
- Vai a Babel, un compilatore JavaScript, all'indirizzo https://babeljs.io/repl.
- Nella sezione Presets (Preset), seleziona es2015.
- Copia e incolla il codice JavaScript del componente nel riquadro a sinistra. Nel riquadro a destra viene visualizzata una versione traslata del codice che puoi utilizzare per il componente.
4. Crea un manifest JSON dei file del componente
I componenti personalizzati richiedono un file manifest in formato JSON denominato manifest.json che indica a Google Web Designer il componente. Segui lo schema dettagliato riportato di seguito. Ecco alcune proprietà degne di nota:
type: obbligatoria.version: obbligatoria. Aumenta il numero di versione ogni volta che aggiorni un componente personalizzato.customEmentsVersion: obbligatoria per i nuovi componenti conformi alla specifica Custom Elements v1.files: elenca i file inclusi nel pacchetto del componente personalizzato.externalScripts: indica le dipendenze degli script esterni. Questi script vengono aggiunti automaticamente in un blocco