Getting Started With Rich Text

Rich Text

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 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 the 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. Do so by adding a code block like this in the store/blocks/home.jsonc file:

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

After running vtex link, your rich-text should look like this:

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

Any questions?

See the answersheet for this step or check our [office hours] on the VTEX Developers channel(https://www.youtube.com/c/VTEXDevelopers)