Apply re-usable "--block-xxxxx" CSS variables for block's size and position

[Dan-Peck]

In order to enhance CSS usability of block content, we will be making a slight change to blocks standard CSS properties from something that looks like this:

top:52.14120625468438%;
left:24.378129729518186%;
width:23.776979166666667%;
height:41.67564814814815%;

To this:

--block-y:52.14120625468438%;
--block-x:24.378129729518186%;
--block-width:23.776979166666667%;
--block-height:41.67564814814815%;
--block-width-px:233.443px
--block-height-px:727.42px
top:var(--block-y);
left:var(--block-x);
width:var(--block-width);
height:var(--block-height);

Noting that in addition to adding the variables, this changes the % to either vw or vh units.

This will allow all HTML containers within that block to also use var(--block-xxxxxx-px) CSS variables for sizing items based on the relative size of the block itself. For example:

font-size: max(5px, calc( var(--block-height-px) * 0.02 ))

Or another example:

font-size: calc(100% - var(--block-height-px) * 0.0125);

[Dan-Peck]

Note:

If anyone utilizes these new --block-xxxxx size and position variables in their Custom CSS, due to various relational/zooming/scaling factors involved, please note that the CSS may either be ignored, or may appear skewed within the Layout Editor. You will need to do final checks on the actual Screen, itself.

[Dan-Peck]

Merged in @ d2b6e79 and added to the queue for upcoming release to the live site.

[Dan-Peck]

Re-opening this case to address issues using vw/vh units in the --block-* vars when applied to a Custom-CSS-rotated-Screen that is commonly used on SmartTV browsers. The rotated SmartTV would be using units that were inverted from what was expected. The typical end result being that the rotated Screen would by truncated on its sides, and shifted up onto only the upper portion of the display.

For now, we have reverted the vw/vh units back to % units.

However, the percentages do not properly support an Issue currently in development where we use these settings to scale the font-size (and other elements) of the block based on the blocks dimensions.

In this update, then, a couple additional CSS variables will be introduced, and set in a programmatic manner. Those CSS variables will be:

• --block-width-px
• --block-height-px

In this manner, CSS can refer to these when they need the pixel unit size of a block rather than a % value that could skew calculations.

[Dan-Peck]

The revision has been merged in @ af6f46f and added to the queue for upcoming release to the live site.