Open github-learning-lab[bot] opened 3 years ago
: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: 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.Entonces, vamos a usar el Rich Text en su cuerpo:
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.
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: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:
Revisando la documentación del Markdown vemos que para dejarlo en cursiva basta colocar
*
antes y después del texto:Para centrarlo, podemos agregar la prop
textPosition
y atribuirle el valorCENTER
: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í.