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

Hello, World!

:sparkles: Branch: helloworld

Introduction

We begin our journey with the classic "Hello, World!". In order to create something similar, we need to understand the Store Framework blocks and use one that allows us to create texts. This block is aptly called Rich Text.

Rich Text

The Rich Text is only one of the dozens of blocks available in Store Framework. It's a block that seems simple, but that allows a series of customizations meant to create texts. To start, any text written in Rich Text supports Markdown, making text styling much easier.

Looking at the block's documentation, we can find a technical specification. One of the sessions present is that of the Blocks API, in which we can see the list of all Rich Text properties (props). These properties are the main customization points of a block, which give a block its distinct visual and behavior, depending on how its been configured.

Starting out

We'll start by customizing the home page. In your theme's /store/blocks folder, you'll find a file called home.jsonc. This file determines how the blocks you intend to use are organized. The language used in the layout composition is simple and based on JSON.

In home.jsonc, you'll notice a block which is default in all themes, namely store.home. This block determines which child blocks will be displayed on the home page.

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

Let's use Rich Text in its body:

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

Thus, store.home now knows that it needs to render a Rich Text. However, we're haven't yet specified which visual this Rich Text should adopt. For that, we'll need to define the block.

Defining blocks

Defining a block must always be performed apart from any other block, at thee source level of the JSON file.

{
  "store.home": {
    "blocks": [
      "rich-text" <----- Here the block is used within another
    ]
  },
  "rich-text": { <----- Here it's at source level
  }
}

In the block's definition, you can set its behavior and visual. Customization points have to be used to achieve this, so we'll start off using the Rich Text props:

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

    }
  }
}

Read through the Rich Text documentation one more time and let's define the props we'll use to customize the block.

We want to achieve a simple "Hello, World!", and looking at the props we notice one called: text (Text written in markdown language to be displayed). This is the prop that determines which text will be displayed.

Including this prop, we now have the following:

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

Reading through the Markdown documentation, we learn that in order for a text to appear in italic, we just need to place that text between *:

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

To center align the text, we can add the textPosition prop and give it the CENTER value:

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

Activity

Define a Rich Text on your home page and create a bold "Hello, World!" that's right aligned.

:information_source: Remember to access the Rich Text documentation if you have any questions during the activity.

If you're still unsure as to how to send your answers, click here.

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::white_check_mark:

Tests

:white_check_mark: Getting the file :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