Open github-learning-lab[bot] opened 3 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x:
: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 :x: Your text is not bold :x: Your text is not positioned at right
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
: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
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 calledhome.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, namelystore.home
. This block determines which child blocks will be displayed on the home page.Let's use Rich Text in its body:
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.
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
: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:
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
*
:To center align the text, we can add the
textPosition
prop and give it theCENTER
value: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.
:no_entry_sign: Are you lost?
Is there any problem with this step? What about sending us a feedback? :pray:
Submit feedback
If you're still unsure as to how to send your answers, click here.