I ran into a weird problem while modifying a section with a few blocks. Basically, I wanted to add a new block to an already existing section. I've already set up the schema, and this part works as expected. But the problem is, I can not use the block settings inside a < style> or {% style %} tag. But the settings work fine in the HTML lines. Note: section settings work in style tag, just the block setting doesn't.
Example 1 (doesn't work):
<style>
.custom_box {
background: {{block.settings.box_color_from_block}};
}
</style>
Example 2 (works):
<div class="custom_box" style="background: {{block.settings.box_color_from_block}};"> </div>
Example 3(works):
<style>
.custom_box {
background: {{section.settings.box_color_from_section}};
}
</style>
Note: I have a color picker inside the block I am creating with the id "box_color_from_block", and when it wasn't working, I added a color picker in the section with the id "box_color_from_section" to test. And I found the above result.
I searched on google and found a similar StackOverflow post from 2 years ago. There, somebody suggested adding the input in the section instead of the block. Sure enough, it works, but it's not useable for me. I specifically need example 1 to work.
The setup is that I am generating a < div> using a {% for %} loop for every product in a collection. Thus, the method in example 2 becomes unsuitable. And every < div> needs to have a different background color. There'll be like 5/6 color pickers(will vary depending on the collection). Thus, adding them to the section will make the already crowded section even more filled up. Hence, I want to add the color pickers inside the block settings, which is pretty empty.
Thanks a whole bunch in advance for reading through, and I'd be really grateful for an answer. My main issue is, that I'm puzzled by the situation. I don't really know what's happening and why.
According to the information you provided, in example 2 it works because you are using block.settings.box_color_from_block inside the div which is inside a liquid for loop.
In your for loop you are looping though section.blocks to get each block data :
{% for block in section.blocks %}
<div class="custom_box" style="background: {{block.settings.box_color_from_block}};"></div>
{% endfor %}
in your Example 1 , you are not looping through liquid for loop in your CSS, thus {{block}} is undefined.
Solution :
You need 2 for loops, one for the HTML and one for the CSS.
In the HTML loop you create your div with a unique ID for each block using {{block.id}} .
In the second for loop in the CSS you use the div ID to customize it using block settings
<style>
{% for block in section.blocks %}
#custom_box_{{block.id}}{
background: {{block.settings.box_color_from_block}}
}
{% endfor %}
</style>
{% for block in section.blocks %}
<div id="custom_box_{{block.id}}" class="custom_box"></div>
{% endfor %}