voidlabs / mosaico

Mosaico - Responsive Email Template Editor
https://mosaico.io
GNU General Public License v3.0
1.7k stars 500 forks source link

How to add style property editors to the sidebar for new templates? #527

Closed larssandergreen closed 5 years ago

larssandergreen commented 5 years ago

I'm using the HTMML template language and trying to add a new template to a block. In this case, I'm adding a caption underneath the image, but above the section title. I've essentially copied everything from the longtext type and made this a captiontext type.

However, I'm not having any luck getting the caption style to show up in the global or the block style setting in the editor. I have been able to insert a selection under content for the block to add or remove the caption.

Is there somewhere else that I need to change something to have this show up?

bago commented 5 years ago

In the -ko-supports you have to define a new "style" to be handled by the theming. Take textStyle as reference and name your style imageCaptionStyle or something similar, than name your property to have the "imageCaptionStyle" suffix and use "extend: imageCaptionStyle".

larssandergreen commented 5 years ago

I'm not sure I follow. I have captionTextStyle and captionTextStyle:preview in -ko-supports (based on longTextStyle) and captionTextStyle as a property of the singleArticleBlock. I'm not clear on what captionTextStyle should be a suffix to or and where to use extend: captionTextStyle.

I've pasted what I have below, am I missing a piece somewhere?

captionTextStyle { label: Caption; properties: face color size lineHeight align linksColor } captionTextStyle:preview { -ko-bind-text: @['AaZz']; -ko-font-family: @face; -ko-color: @color; -ko-font-size: @[size]px; }

and

singleArticleBlock { label: Image/Text Block; properties: captionVisible=true titleVisible=true buttonVisible=true imageVisible=true hrlineVisible=true imagewidth=534 captionTextStyle titleTextStyle longTextStyle buttonStyle caption image longText buttonLink; theme: contentTheme}

This is in the template for the singleArticleBlock: <caption editable="captionText" if="captionVisible"><p>cghdvfhdabhfbsdhjbfhjsdbhfbsdhbfhjsdbfjhbsdhjfbhjsdbfhjsbdhjfbsdhj</p></caption>

This is the template for the caption: ` `

bago commented 5 years ago

I don't see any captionTextStyle variable used in the template at all. You only use "captionText" and "captionVisible" variables.

larssandergreen commented 5 years ago

Thank you!

For others, what I ended up doing to get this working was setting the default style for the caption like this:

<default selector="block[theme='contentTheme'] caption" face="Arial, Helvetica, sans-serif" align="right" size="11px" color="#808080" style="captionTextStyle"></default>