Skapa block som är instrumenterade för användning med den universella redigeraren create-block

Lär dig hur du skapar block som är instrumenterade för användning med den universella redigeraren i WYSIWYG-redigering med Edge Delivery Services.

Förutsättningar prerequisites

Den här guiden innehåller stegvisa instruktioner för hur du skapar block som är instrumenterade för den universella redigeraren i WYSIWYG-redigering med Edge Delivery Services-projekt. Det handlar om att lägga till komponenter, läsa in komponentdefinitioner i den universella redigeraren, publicera sidor, implementera blockdekoration och format, göra ändringar i produktionen och verifiera dem. När du är klar med den här guiden kan du skapa och distribuera ett nytt block för ditt eget projekt.

Den här guiden kräver kunskaper om WYSIWYG-redigering med Edge Delivery Services och den universella redigeraren. Innan du börjar den här guiden bör du ha tillgång till Edge Delivery Services och känna till grunderna i den:

Den här guiden bygger vidare på det arbete som gjorts i Utvecklarhandboken Komma igång för WYSIWYG-redigering med Edge Delivery Services .

Lägga till ett nytt block i projektet add-block

I den här guiden skapar du ett block som återger ett minnesvärt citat på sidan.

För att förenkla det här exemplet görs alla ändringar i main-grenen i projektdatabasen. Självfallet för ditt faktiska projekt bör du följa vedertagna utvecklingsmetoder genom att utveckla på en annan gren och granska alla ändringar via pull-begäran innan du sammanfogar till main.

Adobe rekommenderar att du utvecklar block i tre faser:

Följande exempel på offertblock följer den här metoden.

Skapa blockdefinition och modell create-block-model

1&punkt; klona GitHub-projektet lokalt som du skapade i Utvecklarhandboken Komma igång för WYSIWYG-redigering med Edge Delivery Services och öppna det i en valfri redigerare.

2&punkt; Redigera filen component-definition.json i projektets rot och lägg till följande definition för det nya offertblocket och spara filen.

JSON-exempel

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" } } } } }

Skärmbild

3&punkt; Redigera filen component-models.json i projektets rot och lägg till följande modelldefinition för det nya offertblocket och spara filen.

JSON-exempel

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": "" } ] }

Skärmbild

4&punkt; Redigera filen component-filters.json i projektets rot och lägg till offertblocket i filterdefinitionen så att blocket kan läggas till i valfritt avsnitt och spara filen.

JSON-exempel

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

Skärmbild

5&punkt; Använd Git för att genomföra ändringarna i din main-gren.

Skapa innehåll med blocket create-content

Nu när det grundläggande offertblocket är definierat och implementerat i exempelprojektet kan du lägga till ett offertblock på en befintlig sida.

Formatera blocket style-block

Nu när du har ett fungerande offertblock kan du formatera det.

1&punkt; återgå till redigeraren för ditt projekt.

2&punkt; Skapa en quote-mapp i mappen blocks.

3&punkt; I den nya quote-mappen lägger du till en quote.js-fil som implementerar blockdekoration genom att lägga till följande JavaScript och spara filen.

JavaScript-exempel

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); }

Skärmbild

4&punkt; I mappen quote lägger du till en quote.css-fil för att definiera blockets format genom att lägga till följande CSS-kod och spara filen.

CSS-exempel

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; }

Skärmbild

5&punkt; Använd Git för att genomföra ändringarna i din main-gren.

6&punkt; återgå till webbläsarfliken i Universal Editor där du redigerade sidan i ditt projekt och läsa in sidan igen för att visa det formaterade blocket.

7&punkt; se det nu formaterade citattecknet på sidan.

8&punkt; Verifiera att ändringarna flyttades till produktion genom att navigera till den publicerade sidan. Länken liknar https://<branch>--<repo>--<owner>.hlx.page

Grattis! Du har nu ett fullt fungerande och formaterat citattecken. Du kan använda det här exemplet som bas för att utforma egna projektspecifika block.

Blockalternativ block-options

Om du behöver ett block som ska se ut eller bete dig lite annorlunda baserat på vissa omständigheter, men inte tillräckligt annorlunda för att bli ett nytt block i sig, kan du låta författarna välja mellan blockalternativen.

Genom att lägga till en classes-egenskap i blocket återges egenskapen i tabellhuvudet för enkla block eller som värdelista för objekt i ett behållarblock.

{
  "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"
        }
      ]
    }
  ]
}

Använda andra arbetsgrenar other-branches

Den här guiden gjorde att du kunde binda dig direkt till grenen main för enkelhetens skull. Detta är vanligtvis inte något problem vid försök i en exempeldatabas. För verkligt projektarbete bör du följa bästa praxis för utveckling genom att utveckla på en annan gren och granska alla ändringar via pull-begäran innan du sammanfogar till main.

När du inte utvecklar i grenen main kan du lägga till ?ref=<branch> i fältet Universal Editor för att läsa in sidan från din gren. <branch> är filialnamnet som det skulle användas för ditt projekts förhandsgransknings- eller direktwebbadresser, t.ex. https://<branch>--<repo>--<owner>.hlx.page.

Publicering av innehåll med en ny modell stöds bara när modellen sammanfogas med grenen main.

Nästa steg next-steps

Nu när du vet hur man skapar block är det viktigt att förstå hur man modellerar innehåll på ett semantiskt sätt för att uppnå en smidig utvecklarupplevelse.

Läs dokumentet Innehållsmodellering för WYSIWYG-redigering med Edge Delivery Services i projekt om du vill veta hur innehållsmodellering fungerar för WYSIWYG-redigering med Edge Delivery Services i projekt.