Creazione di blocchi dotati di strumenti per l’utilizzo con l’editor universale create-block

Scopri come creare blocchi instrumentati per l’utilizzo con l’Editor universale nell’authoring WYSIWYG con progetti di Edge Delivery Services.

Prerequisiti prerequisites

Questa guida fornisce istruzioni dettagliate su come creare blocchi instrumentati per l’editor universale nell’authoring WYSIWYG con progetti di Edge Delivery Services. Include l’aggiunta di componenti, il caricamento delle definizioni dei componenti nell’editor universale, la pubblicazione delle pagine, l’implementazione della decorazione dei blocchi e degli stili, l’introduzione delle modifiche nell’ambiente di produzione e la loro verifica. Al termine di questa guida, potrai creare e distribuire un nuovo blocco per il tuo progetto.

Questa guida richiede necessariamente una conoscenza esistente dell’authoring WYSIWYG con progetti di Edge Delivery Services e dell’editor universale. Prima di iniziare questa guida, è necessario avere già accesso a Edge Delivery Services e conoscere le relative nozioni di base, tra cui:

Questa guida si basa sul lavoro svolto nella Guida introduttiva per sviluppatori per l'authoring WYSIWYG con Edge Delivery Services.

Aggiunta di un nuovo blocco al progetto add-block

In questa guida, creerai un blocco per il rendering di un preventivo facile da ricordare sulla pagina.

Per semplificare questo esempio, tutte le modifiche vengono apportate al ramo main dell’archivio del progetto. Naturalmente, per il tuo progetto effettivo, dovresti seguire le best practice di sviluppo sviluppando su un ramo diverso e rivedendo tutte le modifiche tramite richiesta pull prima dell’unione con main.

Adobe consiglia di sviluppare blocchi in un approccio in tre fasi:

Il seguente esempio di blocco citazione segue questo approccio.

Crea modello e definizione di blocco create-block-model

1. Clona il progetto GitHub localmente creato nella Guida introduttiva per sviluppatori per l'authoring WYSIWYG con Edge Delivery Services e aprilo in un editor scelto.

2. Modificare il file component-definition.json nella radice del progetto e aggiungere la seguente definizione per il nuovo blocco di virgolette e salvare il file.

Esempio JSON

code language-json
{ "title": "Quote", "id": "quote", "plugins": { "xwalk": { "page": { "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "Quote", "model": "quote", "quote": "<p>Think, McFly! Think!</p>", "author": "Biff Tannen" } } } } }

Schermata

3. Modificare il file component-models.json nella radice del progetto e aggiungere la seguente definizione modello per il nuovo blocco virgolette e salvare il file.

Esempio JSON

code language-json
{ "id": "quote", "fields": [ { "component": "text-area", "name": "quote", "value": "", "label": "Quote", "valueType": "string" }, { "component": "text-input", "valueType": "string", "name": "author", "label": "Author", "value": "" } ] }

Schermata

4. Modificare il file component-filters.json nella radice del progetto e aggiungere il blocco delle virgolette alla definizione filtro per consentire l'aggiunta del blocco a qualsiasi sezione e il salvataggio del file.

Esempio JSON

code language-json
{ "id": "section", "components": [ "text", "image", "button", "title", "hero", "cards", "columns", "quote" ] }

Schermata

5&punto; utilizzando Git, esegui il commit di queste modifiche nel ramo main.

Creare contenuti con il blocco create-content

Dopo aver definito e confermato il blocco del preventivo di base nel progetto di esempio, è possibile aggiungere un blocco citazione a una pagina esistente.

Applicare uno stile al blocco style-block

Ora che disponi di un blocco della citazione di lavoro puoi applicare ad esso lo stile.

1. Tornare all'editor per il progetto.

2. Creare una cartella quote nella cartella blocks.

3. Nella nuova cartella quote, aggiungi un file quote.js per implementare la decorazione dei blocchi aggiungendo il seguente JavaScript e salva il file.

Esempio JavaScript

code language-javascript
export default function decorate(block) { const [quoteWrapper] = block.children; const blockquote = document.createElement('blockquote'); blockquote.textContent = quoteWrapper.textContent.trim(); quoteWrapper.replaceChildren(blockquote); }

Schermata

4. Nella cartella quote, aggiungi un file quote.css per definire lo stile del blocco aggiungendo il seguente codice CSS e salva il file.

Esempio CSS

code language-css

.block.quote { background-color: #ccc; padding: 0 0 24px; display: flex; flex-direction: column; margin: 1rem 0; } .block.quote blockquote { margin: 16px; text-indent: 0; } .block.quote > div:last-child > div { margin: 0 16px; font-size: small; font-style: italic; position: relative; } .block.quote > div:last-child > div::after { content: ""; display: block; position: absolute; left: 0; bottom: -8px; height: 5px; width: 30px; background-color: darkgray; }

Schermata

5&punto; utilizzando Git, esegui il commit di queste modifiche nel ramo main.

6&punto; Torna alla scheda del browser dell’Editor universale in cui stavi modificando la pagina del progetto e ricarica la pagina per visualizzare il blocco formattato.

7. Vedere il blocco delle virgolette ora formattato sulla pagina.

8. Verificare che le modifiche siano state inviate alla produzione passando alla pagina pubblicata. Il collegamento sarà simile a https://<branch>--<repo>--<owner>.hlx.page

Congratulazioni Ora disponi di un blocco delle citazioni completamente funzionante e formattato. Puoi utilizzare questo esempio come base per progettare blocchi specifici per il progetto.

Opzioni di blocco block-options

Se un blocco deve avere un aspetto o un comportamento leggermente diverso a seconda di determinate circostanze, ma non abbastanza diverso da diventare un nuovo blocco in sé, puoi consentire agli autori di scegliere tra le opzioni di blocco.

Aggiungendo una proprietà classes al blocco, quella di cui è stato eseguito il rendering nell’intestazione della tabella per i blocchi semplici o come elenco di valori per gli elementi in un blocco contenitore.

{
  "id": "simpleMarquee",
  "fields": [
    {
      "component": "text",
      "valueType": "string",
      "name": "marqueeText",
      "value": "",
      "label": "Marquee text",
      "description": "The text you want shown in your marquee"
    },
    {
      "component": "select",
      "name": "classes",
      "value": "",
      "label": "Background Color",
      "description": "The marquee background color",
      "valueType": "string",
      "options": [
        {
          "name": "Red",
          "value": "bg-red"
        },
        {
          "name": "Green",
          "value": "bg-green"
        },
        {
          "name": "Blue",
          "value": "bg-blue"
        }
      ]
    }
  ]
}

Utilizzo di altri rami di lavoro other-branches

Con questa guida hai eseguito la conferma direttamente nel ramo main per semplicità. La sperimentazione in un archivio di esempio in genere non è un problema. Per il lavoro effettivo del progetto, dovresti seguire le best practice di sviluppo sviluppando in un ramo diverso e rivedendo tutte le modifiche tramite richiesta pull prima di unire nel main.

Se non stai sviluppando nel ramo main, puoi aggiungere ?ref=<branch> nella barra di posizione dell’editor universale per caricare la pagina dal ramo. <branch> è il nome del ramo utilizzato per l’anteprima del progetto o gli URL live, ad esempio https://<branch>--<repo>--<owner>.hlx.page.

La pubblicazione di contenuti con un nuovo modello è supportata solo quando il modello viene unito al ramo main.

Passaggi successivi next-steps

Ora che sai come creare i blocchi, è fondamentale comprendere come modellare i contenuti in modo semantico per ottenere un’esperienza di sviluppo più snella.

Per informazioni sul funzionamento della modellazione dei contenuti per la creazione WYSIWYG con progetti Edge Delivery Services🔗, vedere il documento Modellazione dei contenuti per la creazione WYSIWYG con progetti Edge Delivery Services.