Criação de blocos instrumentados para uso com o editor universal create-block

Saiba como criar blocos instrumentados para uso com o Editor universal em criação WYSIWYG com projetos Edge Delivery Services.

Pré-requisitos prerequisites

Este guia fornece instruções passo a passo sobre como criar blocos instrumentados para o Editor universal na criação WYSIWYG com projetos Edge Delivery Services. Ela abrange a adição de componentes, o carregamento de definições de componentes no Universal Editor, a publicação de páginas, a implementação de decoração e estilos de blocos, a introdução das alterações na produção e a verificação delas. Ao concluir este guia, você pode criar e implantar um novo bloco para seu próprio projeto.

Este guia requer necessariamente conhecimento existente de criação WYSIWYG com projetos Edge Delivery Services, bem como o editor universal. Antes de começar este guia, você já deve ter acesso aos Edge Delivery Services e estar familiarizado com as suas noções básicas, incluindo:

Este guia se baseia no trabalho realizado no Guia de Introdução do Desenvolvedor para criação WYSIWYG com o guia Edge Delivery Services.

Adicionar um novo bloco ao seu projeto add-block

Neste guia, você criará um bloco para renderizar uma cotação memorável em sua página.

Para simplificar este exemplo, todas as alterações são feitas na ramificação main do repositório do projeto. É claro que, para seu projeto real, você deve seguir as práticas recomendadas de desenvolvimento desenvolvendo em uma ramificação diferente e revisando todas as alterações por meio de uma solicitação de pull antes de mesclar com o main.

A Adobe recomenda que você desenvolva blocos em uma abordagem de três fases:

O exemplo de bloco de citação a seguir segue essa abordagem.

Criar Definição e Modelo de Bloco create-block-model

1&ponto; Clona o projeto GitHub localmente criado no Guia de Introdução do Desenvolvedor para criação WYSIWYG com o guia Edge Delivery Services e o abre em um editor de sua escolha.

2&ponto; Edite o arquivo component-definition.json na raiz do projeto e adicione a seguinte definição para seu novo bloco de aspas e salve o arquivo.

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

Captura de tela

3&ponto; Edite o arquivo component-models.json na raiz do projeto e adicione a seguinte definição de modelo para seu novo bloco de aspas e salve o arquivo.

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

Captura de tela

4&ponto; Edite o arquivo component-filters.json na raiz do projeto e adicione o bloco de aspas à definição de filtro para permitir que o bloco seja adicionado a qualquer seção e salve o arquivo.

Exemplo de JSON

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

Captura de tela

5&ponto; Usando o Git, confirme essas alterações na ramificação main.

Criar conteúdo com o bloco create-content

Agora que o bloco de cotação básico está definido e comprometido com o projeto de amostra, é possível adicionar um bloco de cotação a uma página existente.

Estilo do Bloco style-block

Agora que você tem um bloco de cotação de trabalho, é possível aplicar o estilo a ele.

1&ponto; Retornar ao editor do seu projeto.

2&ponto; Crie uma pasta quote na pasta blocks.

3&ponto; Na nova pasta quote, adicione um arquivo quote.js para implementar a decoração de blocos, adicionando o seguinte JavaScript e salvando o arquivo.

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

Captura de tela

4&ponto; Na pasta quote, adicione um arquivo quote.css para definir o estilo do bloco, adicionando o seguinte código CSS e salvando o arquivo.

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

Captura de tela

5&ponto; Usando o Git, confirme essas alterações na ramificação main.

6&ponto; Retorne à guia do navegador do Editor universal, onde você estava editando a página do projeto, e recarregue a página para visualizar seu bloco estilizado.

7&ponto; veja o bloco de aspas agora estilizado na página.

8&ponto; Verifique se as alterações foram enviadas para produção navegando até a página publicada. O link será semelhante a https://<branch>--<repo>--<owner>.hlx.page

Parabéns! Agora você tem um bloco de cotação totalmente funcional e estilizado. Você pode usar este exemplo como base para criar seus próprios blocos específicos de projeto.

Opções de bloco block-options

Se você precisar de um bloco para ter aparência ou comportamento um pouco diferente com base em determinadas circunstâncias, mas não for diferente o suficiente para se tornar um novo bloco, poderá permitir que os autores escolham entre opções de bloco.

Ao adicionar uma propriedade classes ao bloco, a propriedade é renderizada no cabeçalho da tabela para blocos simples ou como lista de valores para itens em um bloco de contêiner.

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

Uso de outras ramificações de trabalho other-branches

Por questões de simplicidade, este guia fez você confirmar diretamente na ramificação main. Para experimentação em um repositório de amostra, isso geralmente não é um problema. Para o trabalho real do projeto, você deve seguir as práticas recomendadas de desenvolvimento desenvolvendo em uma ramificação diferente e revisando todas as alterações via solicitação de pull antes de mesclar com main.

Quando você não estiver desenvolvendo na ramificação main, poderá anexar ?ref=<branch> na barra de localização do Editor Universal para carregar a página da ramificação. <branch> é o nome da ramificação como seria usado para a visualização do seu projeto ou URLs ativas, por exemplo, https://<branch>--<repo>--<owner>.hlx.page.

Só há suporte para a publicação de conteúdo com um novo modelo quando o modelo é mesclado à ramificação main.

Próximas etapas next-steps

Agora que você sabe como criar blocos, é essencial entender como modelar o conteúdo de uma maneira semântica para alcançar uma experiência simplificada do desenvolvedor.

Consulte o documento Modelagem de conteúdo para criação WYSIWYG com projetos Edge Delivery Services para saber como funciona a modelagem de conteúdo para criação WYSIWYG com projetos Edge Delivery Services.