Introduzindo o Rich Text

Rich Text

Começaremos personalizando a página inicial. Na pasta /store/blocks do seu tema, você encontrará um arquivo chamadohome.jsonc. Este arquivo determina como os blocos que você pretende usar são organizados. A linguagem usada na composição do layout é simples e baseada em JSON.

Em home.jsonc, você notará um bloco que é padrão em todos os temas, ou seja,store.home. Este bloco determina quais blocos filhos serão exibidos na página inicial.

{
  "store.home": {
    "blocks": []
  }
  ...
}

Vamos usar Rich Text em seu corpo:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  }
  ...
}

Portanto, store.home agora sabe que precisa renderizar um Rich Text. No entanto, ainda não especificamos qual visual esse Rich Text deve adotar. Para isso, precisaremos definir o bloco.

Definindo blocos

A definição de um bloco deve sempre ser executada separadamente de qualquer outro bloco, no nível de origem do arquivo JSON.

{
  "store.home": {
    "blocks": [
      "rich-text" <----- Aqui o bloco é usado dentro de outro
    ]
  },
  "rich-text": { <----- Aqui está no nível da fonte
  }
}

Na definição do bloco, você pode definir seu comportamento e visual. Pontos de personalização devem ser usados ​​para conseguir isso, então vamos começar usando os props de Rich Text:

{
  "store.home": {
    "blocks": ["rich-text"]
  },
  "rich-text": {
    "props": {}
  }
}

Leia o Rich Text documentação mais uma vez e vamos definir os adereços que usaremos para personalizar o bloco.

Queremos obter um simples "Olá, Mundo!", E olhando para as props, notamos um chamado: text (Texto escrito em linguagem de marcação a ser exibido). Esta é a prop que determina qual texto será exibido.

Incluindo esta prop, agora temos o seguinte:

{
  "store.home": {
    "blocks": ["rich-text"]
  },
  "rich-text": {
    "props": {
      "text": "Hello, World!"
    }
  }
}

Lendo a documentação do Markdown, aprendemos que, para que um texto apareça em itálico, precisamos apenas colocar esse texto entre *

{
  "store.home": {
    "blocks": ["rich-text"]
  },
  "rich-text": {
    "props": {
      "text": "*Hello, World!*"
    }
  }
}

Para centralizar o alinhamento do texto, podemos adicionar a prop textPosition e atribuir a ela o valor CENTER:

{
  "store.home": {
    "blocks": ["rich-text"]
  },
  "rich-text": {
    "props": {
      "text": "*Hello, World!*",
      "textPosition": "CENTER"
    }
  }
}

Atividade

Defina um Rich Text em sua página inicial e crie um negrito "Hello, World!" que está alinhado à direita. Faça isso trocando o código já presente no arquivo store/blocks/home.jsonc por este:

{
  "store.home": {
    "blocks": [
+      "rich-text"
    ]
  },
+  "rich-text": {
+    "props": {
+      "text": "**Hello, World!**",
+      "textPosition": "RIGHT"
+    }
+  }
}

Depois de executar o vtex link, seu rich-text deve ficar assim:

Note: Lembre-se de acessar a documentação do Rich Text se você tiver alguma dúvida durante a atividade.

Está com dúvidas?

Veja o gabarito para esta etapa ou acompanhe nosso [office hours] no canal VTEX Developers(https://www.youtube.com/c/VTEXDevelopers)