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 di WYSIWYG con progetti di Edge Delivery Services.

Prerequisiti prerequisites

Questa guida fornisce istruzioni dettagliate su come creare blocchi instrumentati per l’Editor universale nei progetti di authoring WYSIWYG con 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 la creazione di 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:

  1. Creare la definizione e il modello per il blocco, rivederlo e portarlo in produzione.
  2. Crea contenuto con il nuovo blocco.
  3. Implementa la decorazione e gli stili per il nuovo blocco.

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 di WYSIWYG con Edge Delivery Services e aprilo in un editor scelto.

  • Il codice Microsoft viene utilizzato qui a scopo illustrativo.

Clonazione del progetto

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
Modifica del file component-definitions.json per definire il blocco citazione

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": "richtext",
       "name": "quote",
       "value": "",
       "label": "Quote",
       "valueType": "string"
     },
     {
       "component": "text",
       "valueType": "string",
       "name": "author",
       "label": "Author",
       "value": ""
     }
   ]
}
Schermata
Modifica del file component-models.json per definire il modello del blocco citazione

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
Modifica del file component-filters.json per definire i filtri per il blocco citazione

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

  • La conferma di main è solo a scopo illustrativo. Segui le best practice e utilizza una richiesta pull per il lavoro di progetto effettivo.

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.

  1. In un browser, accedi a AEM as a Cloud Service. Utilizzando la console Sites, accedi al sito creato nella Guida introduttiva per sviluppatori per la creazione di WYSIWYG con Edge Delivery Services e seleziona una pagina.

    • In questo caso, index viene utilizzato a scopo illustrativo.

    Selezione della pagina di indice nella console Sites

  2. Tocca o fai clic su Modifica nella barra degli strumenti della console e l’editor universale si aprirà.

    • Per caricare la pagina, potrebbe essere necessario toccare o fare clic su Accedi con Adobe per autenticarsi ad AEM nell’editor universale.
  3. Nell’editor universale, seleziona una sezione. Nel pannello delle proprietà, tocca o fai clic sull'icona Aggiungi, quindi seleziona il nuovo blocco Preventivo dal menu.

    • L’icona Aggiungi è un simbolo più.
    • Sai di aver selezionato una sezione se il contorno blu dell’oggetto selezionato presenta una scheda etichettata come Sezione.
    • In questo esempio, toccando o facendo clic leggermente sopra l’intestazione Lorem Ipsum viene selezionata una sezione contenente l’intestazione e il testo lorem ipsum.

    Selezionare una sezione nell’editor universale

  4. La pagina viene ricaricata e il blocco della citazione viene aggiunto nella parte inferiore della sezione selezionata con il contenuto predefinito specificato nel file component-definitions.json.

    • Il blocco delle virgolette può essere selezionato e modificato come qualsiasi altro blocco sul posto o nel pannello delle proprietà.
    • Lo stile viene applicato in un passaggio successivo.

    Pagina con il nuovo blocco della citazione nella sezione selezionata

  5. Quando sei soddisfatto del contenuto della citazione, puoi pubblicare la pagina toccando o facendo clic sul pulsante Pubblica nella barra degli strumenti dell’editor universale.

  6. Verifica che il contenuto sia stato pubblicato passando alla pagina pubblicata. Il collegamento sarà simile a https://<branch>--<repo>--<owner>.hlx.page

    Citazione pubblicata

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.

Crea una cartella delle citazioni

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
Aggiunta di JavaScript per decorare il blocco

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
Aggiunta di CSS per definire lo stile del blocco

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

  • La conferma di main è solo a scopo illustrativo. Segui le best practice e utilizza una richiesta pull per il lavoro di progetto effettivo.

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.

Blocco delle citazioni formattato nell’editor universale

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

Blocco delle citazioni pubblicato e formattato

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.

Riutilizzo dei blocchi per l'authoring basato su documenti reusing-blocks

Se si aderisce allo stesso modello di contenuto, è possibile utilizzare i blocchi creati per l’authoring WYSIWYG utilizzando l’Editor universale per l’authoring basato su documenti.

Per ulteriori informazioni, consulta il documento Blocchi per WYSIWYG e authoring basato su documenti.

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 di WYSIWYG con progetti Edge Delivery Services, consulta il documento Modellazione dei contenuti per la creazione di WYSIWYG con progetti Edge Delivery Services.

TIP
Per una procedura dettagliata end-to-end di creazione di un nuovo progetto Edge Delivery Services abilitato per la creazione di WYSIWYG con AEM as a Cloud Service come origine di contenuto, visualizzare questo webinar AEM GEMs.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab