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

Hello, World!

:sparkles: Branch: richtext

Introducción

Comencemos nuestra jornada a través del clásico "Hello, World!". Para crear algo como esto, necesitamos conocer los bloques del Store Framework y usar uno que nos permita crear textos. Este bloque se llama Rich Text.

Rich Text

Rich Text es solo una de las decenas de bloques disponibles en el Store Framework. Es un bloque que parece simple, pero que permite una serie de personalizaciones para crear textos. Para empezar, todo el texto escrito en Rich Text soporta el lenguaje Markdown, esto hace con que la estilización del texto sea mucho más fácil.

Revisando la documentación del bloque es posible encontrar la especificación técnica. Una de las secciones presentes es la de Blocks API en la que puede ver la lista completa de propiedades (props) que posee el Rich Text. Las propiedades son el principal punto de personalización de un bloque, son las que garantizan que un mismo bloque pueda verse y comportarse de manera completamente diferente, dependiendo de cómo esté configurado.

Comenzando

Comencemos, entonces, a personalizar el home page. En su tema es posible encontrar un archivo llamado home.jsonc en la carpeta /store/blocks . En este archivo se determina la organización de los bloques que se desea utilizar. El lenguaje para la composición del layout es simple y está basado en JSON.

En home.jsonc se ve un bloque que es estándar en todos los temas: store.home . Este bloque determina los bloques hijos que se mostrarán en el home page.

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

Entonces, vamos a usar el Rich Text en su cuerpo:

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

De esta forma, el store.home ahora sabe que necesitará renderizar un Rich Text. Sin embargo, aún no hemos especificado cómo se ve este Rich Text. Para esto, necesitamos hacer una definición de bloque.

Definición de bloques

La definición de bloques se debe hacer siempre fuera de cualquier otro bloque, en el nivel de la raíz del archivo JSON.

{
  "store.home": {
    "blocks": [
      "rich-text" <----- Aquí el bloque está siendo usado dentro de otro
    ]
  },
  "rich-text": { <----- Aquí está en la raíz
  }
}

En la definición es posible determinar el comportamiento y aspecto de un bloque. Para esto, deben usarse puntos de personalización, comenzaremos usando las props del Rich Text:

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

    }
  }
}

Consulte nuevamente la documentación del Rich Text y definamos, entonces, las props que usaremos para personalizarlo.

Queremos hacer un simple "Hello, World!", examinando las props vemos una que se llama: text (Text written in markdown language to be displayed). Esta es, entonces, la prop que determinará cuál texto será exhibido.

Incluyendo esta prop tenemos, entonces:

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

Revisando la documentación del Markdown vemos que para dejarlo en cursiva basta colocar * antes y después del texto:

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

Para centrarlo, podemos agregar la prop textPosition y atribuirle el valor CENTER:

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

Actividad

Defina un Rich Text en su home y cree un texto "Hello, World!" en negrita y alineado a la derecha.

:information_source: Recuerde acceder a la documentación del Rich Text si tiene alguna duda durante la actividad.

:no_entry_sign: ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:

Crear feedback

Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.

vtex-course-hub[bot] commented 3 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