Multi-tone blocks EMAILS

Multi-tone blocks are available in email templates that define two or more color schemes. By default, all components in email template inherit the template-wide color scheme. Multi-tone blocks let you override this at the block level. As a result, each block carries its own scheme, and components inside it adapt automatically instead of inheriting from the template.

The multi-tone blocks feature is available only in email templates for themes with two or more color schemes.

Template configuration

To use the multi-tone blocks feature in email templates, the following template configuration is required:

• The feature isn't available by default. To activate it, add "multitoneBlocks": true to the template's settings.json file.

• For multi-tone blocks to work correctly, all component attributes that depend on color — inline styles, classes, and other color-driven properties — must be bound dynamically using the following format: :style="{ color: $theme['scheme:current'].some.color.var }"

This tells the component to resolve its color values from whichever scheme is active on its parent block, rather than from the template-wide scheme.

<template>
  <wiz-block
    class="block block-content01a m-full-width m-mw-auto"
    align="center"
    :class="$theme['scheme:current'].blocksData.BlockContent01A.firstBlockClass"
  >
    <wiz-placeholder>
      <wiz-column>
        <wiz-title
          :text="$t('title')"
          :class="$theme['scheme:current'].blocksData.BlockContent01A.firstTitleTextClass"
        ></wiz-title>
      </wiz-column>
    </wiz-placeholder>
    <wiz-placeholder>
      <wiz-column>
        <wiz-image
          :align="$theme['scheme:current'].blocksData.BlockContent01A.firstImageAlign"
          :width="$theme['scheme:current'].blocksData.BlockContent01A.firstImageWidth.width"
          :src="$theme['scheme:current'].blocksData.BlockContent01A.firstImageSrc"
          :alt="$theme['scheme:current'].blocksData.BlockContent01A.firstImageAlt"
          :class="$theme['scheme:current'].blocksData.BlockContent01A.firstImageClass"
          class="m-image-full-width"
        ></wiz-image>
      </wiz-column>
    </wiz-placeholder>
  </wiz-block>
</template>

Component registration

To ensure components dragged from the elements panel in eWizard Editor are styled correctly according to the target block scheme, do the following in components.js:

• Attributes (attrs): Component attributes must use the same template binding format: "$theme['scheme:current'].some.color.var".

• Text props and I18n: For text properties that contain inline styles, we use vue-i18n named formatting with token placeholders. Example: Default text.

• Tokens: The tokens needed for localizations (e.g., textColor) must be declared in the i18nTokens field at the root level of the component object. This maps each token to its scheme-aware value.

{
      name: "wiz-custom-button",
      component: WizCustomButton,
      attrs: () => ({
        text: `<span style='font-size:${theme.firstButtonTextFontSize
        };color:{buttonTextColor};font-family:${theme.firstFontFamily
        };'><strong>${theme.texts.placeholderButtonText ||
        '<b>BUTTON</b>'
        }</strong>`</span>,
        ':button-color': '$theme[\'scheme:current\'].componentsData.buttonColor',
      }),
      ewizardConfig: {
        icon: require("../media/images/components-icons/wiz-button.icon.png"),
        label: {
          eng: "Button",
        },
        name: "wiz-custom-button",
        i18nTokens: {
          buttonTextColor: '$theme[\'scheme:current\'].componentsData.buttonTextColor',
        },
      }
    }
}

$theme plugin

When "multitoneBlocks": true is defined in the template settings (settings.json), the $theme plugin handles providing all available color schemes:

• The system iterates over all color schemes available for the current theme.

• It injects them into the global $theme object under explicit keys matching the format scheme:<schemeId>.

• The currently active global scheme is injected under scheme:current.

Color scheme class format

When you switch a color scheme in eWizard Editor for a certain block, its wiz-block component automatically appends a corresponding class to the block root element in the block-scheme-<schemeId> format.