While working on updating a section with multiple blocks, I encountered an unusual issue. My goal was to incorporate a new block into an existing section. The schema has been set up correctly, and everything is functioning as anticipated. However, the problem arises when trying to utilize block settings within a < style> or {% style %} tag. Surprisingly, these settings function properly in the HTML lines but not within the specified tags. It's worth noting that section settings work within the style tag, whereas block settings do not.
For instance (does not work):
<style>
.custom_box {
background: {{block.settings.box_color_from_block}};
}
</style>
Alternatively (works):
<div class="custom_box" style="background: {{block.settings.box_color_from_block}};"> </div>
Another example (works):
<style>
.custom_box {
background: {{section.settings.box_color_from_section}};
}
</style>
In my setup, there is a color picker embedded within the block I am creating with the identifier "box_color_from_block." When this failed to work, I experimented by introducing a color picker within the section labeled "box_color_from_section," yielding the outcomes described above.
Hunting for solutions online, I stumbled upon a related StackOverflow thread from two years back. A suggestion was made to relocate the input to the section instead of the block, which did indeed solve the issue but isn't feasible in my case. Specifically, Example 1 must be functional for my requirements.
The scenario entails generating a < div> using a {% for %} loop for each product within a collection. Consequently, the approach in Example 2 is inadequate as every < div> necessitates a distinct background color. With approximately 5/6 color pickers (variable based on the collection), integrating them into the section would overcrowd it further. Hence, the preference is to include the color pickers within the block settings, which are presently underutilized.
I extend my gratitude in advance for taking the time to read through this query, and I would greatly appreciate any insights provided. My primary challenge lies in deciphering why this situation is occurring and how to address it effectively.