Use block dataKey instead of block key for define for variable name

[MaxMorais]

To construct a UI like below

We often need to use repeater block, internally the repeater block define a key based on the blockKey, what create codes like

{%- if not key_u7ps3awh6.price.unitary -%}
  {%- if key_u7ps3awh6.price.monthly -%}
   <h4>R$ {{ key_u7ps3awh6.price.monthly.real }}<sup style="font-weight: 200;">{{ key_u7ps3awh6.price.monthly.dec }}</sup>/<sub style="font-weight: 200;">mês</sub></h4>
  {%- endif -%}
  
  {%- if key_u7ps3awh6.price.yearly -%}
   <h4>{%- if key_u7ps3awh6.price.monthly %} - {%- endif -%}R$ {{ key_u7ps3awh6.price.yearly.real }}<sup style="font-weight: 200;">{{ key_u7ps3awh6.price.yearly.dec }}</sup>/<sub style="font-weight: 200;">ano</sub></h4>
  {%- endif -%}
  
{%- else -%}
<h4>R$ {{ key_u7ps3awh6.price.unitary.real }}<sup style="font-weight: 200;">{{ key_u7ps3awh6.price.unitary.dec }}</sup>/<sub style="font-weight: 200;">und</sub></h4>
{%- endif -%}

This code works because internally, the builder defined a variable key_{block.get('blockId')}, but it makes impractical to deal with that in the long term!

Reasons are:

1 - We dont have any reference on the UI that tell us that my block have the id u7ps3awh6
2 - The block ID is internally controlled by the framework, what means, if we duplicate the block, the logic breaks and again we dont have hints about the new variable name!

My proposal is to make use of the dataKey of the repeater block, to generate a more organic key like below

{%- if not key_products.price.unitary -%}
  {%- if key_products.price.monthly -%}
   <h4>R$ {{ key_products.price.monthly.real }}<sup style="font-weight: 200;">{{ key_products.price.monthly.dec }}</sup>/<sub style="font-weight: 200;">mês</sub></h4>
  {%- endif -%}
  
  {%- if key_products.price.yearly -%}
   <h4>{%- if key_products.price.monthly %} - {%- endif -%}R$ {{ key_products.price.yearly.real }}<sup style="font-weight: 200;">{{ key_products.price.yearly.dec }}</sup>/<sub style="font-weight: 200;">ano</sub></h4>
  {%- endif -%}
  
{%- else -%}
<h4>R$ {{ key_products.price.unitary.real }}<sup style="font-weight: 200;">{{ key_products.price.unitary.dec }}</sup>/<sub style="font-weight: 200;">und</sub></h4>
{%- endif -%}