github-learning-lab[bot] commented 4 years ago

Hello, World!

:sparkles: Branch: richtext

Introdução

Começamos nossa jornada pelo clássico "Hello, World!". Para criar algo do tipo, precisamos conhecer os blocos do Store Framework e usar um que nos possibilite a criação de textos. Este bloco se chama Rich Text.

Rich Text

O Rich Text é somente um das dezenas de blocos disponíveis no Store Framework. É um bloco que parece simples, mas que possibilita uma série de customizações para criar textos. Para começar, todo texto escrito no Rich Text suporta linguagem Markdown, isso faz com que a estilização do texto seja muito mais fácil.

Olhando a documentação do bloco é possível encontrar a especificação técnica. Uma das seções presentes é a de Blocks API nela é vista toda a lista de propriedades (props) que o Rich Text possui. As propriedades são o principal ponto de customização de um bloco, são elas que garantem que um mesmo bloco possa ter visual e comportamento completamente diferente, dependendo de como for configurado.

Começando

Vamos então começar a personalizar a home page. No seu tema é possível encontrar um arquivo chamado blocks.jsonc na pasta store/. Neste arquivo é determinada a organização dos blocos que se deseja usar. A linguagem para composição do layout é simples e baseada em JSON.

No blocks.jsonc se ver um bloco que é padrão em todos os temas: store.home. Este bloco determina os blocos filhos que estarão expostos na home page.

  {
    "store.home": {
      blocks: [

      ]
    }
    ...
  }

Vamos então incluir o Rich Text em seu corpo:

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

Dessa forma, o store.home agora sabe que precisará renderizar um Rich Text. Todavia, ainda não especificamos qual o visual desse Rich Text. Para isso, precisamos fazer uma definição de bloco.

Definição de blocos

A definição de blocos deve ser sempre feita fora de qualquer outro bloco, no nível da raiz do arquivo JSON.

  {
    "store.home": { 
      "blocks": [
        "rich-text" <----- Aqui o bloco está dentro de outro 
      ]
    },
    "rich-text": { <----- Aqui estamos na raiz
    }
  }

Na definição é possível determinar o comportamento e visual de um bloco. Para tal devem ser usados pontos de customização, começaremos usando as props do Rich Text:

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

      }
    }
  }

Observe novamente a documentação do Rich Text e vamos, então, definir as props que usaremos para customizá-lo.

Queremos fazer um simples "Hello, World!", olhando nas props vemos uma que se chama: text (Text written in markdown language to be displayed). Essa é, então, a prop que determinará qual o texto que será exibido.

Incluindo essa prop temos, então:

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

Olhando a documentação do Markdown vemos que para deixar itálico basta colocar * antes e depois do texto:

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

Para posicioná-lo ao centro, podemos adicionar textPosition (Choose in which position of the component text will be displayed, left, center or right. Default: "LEFT") e atribuí-lo CENTER:

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

Atividade

Defina um rich-text na sua home e crie um texto "Hello, World!" em negrito e posicionado à direita.

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

vtex-course-hub[bot] commented 4 years ago

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Code compilation :white_check_mark: Define the rich text in the home block :white_check_mark: Make a rich text declaration :white_check_mark: Define bold Hello, World! :white_check_mark: Hello, World! positioned right