How can I access the schema blocks and Add blocks value in CSS property?

Store Design
1

.slider-content {
text-align: {{ block.settings.text_align }};
}

{% schema %}
{
“name”: “Hero Slider”,
“blocks”: [

{
“type”: “select”,
“id”: “text_align”,
“label”: “Text alignment”,
“default”: “left”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “right”,
“label”: “Right”
}
]
}

]

I want to access the type select value in CSS property.

How Can I do it? I am trying many way but failed.

2

Block Access

{% for block in section.blocks %}
  {% if block.type == 'text_align' %}
    {{ block.settings.text_align }}
  {% endif %}
{% endfor %}

Block Write in schema

{% schema %}
{
  "name": "Hero Slider",
  "blocks": [
    {
       "name": "Text Align",
       "type": "text_align",
       "settings": [
            {
                "type": "select",
                "id": "text_align",
                "label": "Text alignment",
                "default": "left",
                "options": [
                    {
                        "value": "left",
                        "label": "Left"
                    },
                    {
                        "value": "center",
                        "label": "Center"
                    },
                    {
                        "value": "right",
                        "label": "Right"
                    }
                ]
            }
       ]
     }
   ]
}
{% endschema %}
1 Like
3

I could understand what you said. But I want to access the text_align id in my CSS property. So, I can change the text-align dynamically. That’s my point.