Have the WYSIWYG reflect styles that include input parameters

By Michael Deroche on 27 Mar 2015
Say I have a web block with a single container in it.  I want the background of that container to change between a few different colors.

I have a style called "blue", defined in the theme:
   .blue { background-color: blue; }

I would like to pass this color style name to the web block as a parameter, so I can style the background color of the container dynamically.  I made a text input parameter on the web block called "Color".  In the Exteded Properties of the container in the web block, I put "class" as a key and "Color" as a value:



Then I go to my web screen, drag over the web block, and put "blue" in as the Color input parameter:



Unfortunately, the WYSIWYG editor is not passing "blue" to the web block.  In the browser the container shows up as blue, but in the WYSIWYG the style is not applied:



It seems to be the parameter that is causing this issue.  If I manually type in the literal string "blue" instead of using the parameter, or if I use the Style property instead of the Extended Properties panel, then the blue style is processed and the WYSIWYG editor shows the blue background on the container:




For something like "background-color", this issue is not huge, but for other styles (such as positioning styles), this can be problematic as the WYSIWYG editor is not displaying what the actual website looks like.
This idea has no comments yet. Be the first to comment!