A block is an HTML component organized as an empty container where you can place other components: wiz-text, wiz-image, or wiz-button. As best practice, add the wiz-placeholder components to create a block. Then add other components within the columns in the wiz-placeholder component.

For more information, see Blocks in eWizard and Block development. You can reuse blocks in your email project.

You can create blocks locally on your computer or add blocks from the eWizard.js repository. Also, you can group and filter blocks by brands or other custom filters.

A local block is a directory with the index.vue file containing the block template. Add local blocks to the common/blocks-library directory of your email project. The block directory can also include other common assets and media files.

You can initialize an empty block template with eWizard CLI to develop your email block from scratch. Also, you can copy the existing block directory.

You can't use local blocks with the blocks added from the repository. The email App.vue file must not have the blocks from ./node_modules/@blocks in the template.

Before adding local blocks to the email scaffolding template:

1) Remove all existing blocks from the blocks.json file:

2) Remove all blocks from the template in the App.vue file.

To add a local block:

1) Provide the path to the local blocks in the blocks, blocksFilename, and blocksManifest fields of the ./.ewizard/settings.json file.

For example:

— blocks is a path to the directory where you store the blocks. The recommended path is common/blocks-library.

— blocksFilename is the name of the file that defines which blocks appear in eWizard Editor. The default value is blocks.json.

— blocksManifest is the full path to the file that defines what blocks appear in eWizard Editor. The default value is common/blocks-library/blocks.json.

2) Add the block directory to ./common/blocks-library. For example, ./common/blocks-library/block1.

NOTE: You can also initialize a block with eWizard CLI. In this case, the initialized block directory contains all the required files.

3) Add index.vue and icon.png files to the block directory:

— index.vue contains the block markup with email components.

— icon.png is the block image that displays in eWizard Editor.

You can add media files to the block directory, for example, ./common/blocks-library/block1/media/my-image.png.

4) Add the block to the ./common/blocks-library/blocks.json file of your email project to use it in eWizard Editor.

For more information, see Make blocks visible in eWizard Editor.

5) Archive the email project with wiz archive and upload the zipped project to eWizard to add the block to the email layout in Editor.

The email blocks in the eWizard.js repository are developed by Viseven, for example, header, footer, or signature. You can use these blocks in eWizard Editor after adding them to the email template.

As best practice, install blocks from the repository to the node_modules/@blocks directory of your email project. The blocks contain basic markup, an icon, and a package.json file with the information and dependencies.

NOTE: You can't use the blocks from the repository with local blocks.

To add blocks from the eWizard.js repository:

1) Provide the path to the blocks in the blocks, blocksFilename, and blocksManifest fields of the ./.ewizard/settings.json file:

— blocks is the path to the directory where the blocks are stored. If you want to install a block from a repository, the recommended value is node_modules/@blocks.

— blocksFilename is the name of the file that defines which blocks appear in eWizard Editor. The default value is blocks.json.

— blocksManifest is the full path to the file that defines which blocks appear in eWizard Editor. The default value is common/blocks-library/blocks.json.

2) Add the dependencies for the blocks in the package.json file of your project. You can also install a specific version of a block. For example, the 1.1.0 version of the content-2a block and the latest version of the content-2b block.

3) Install the blocks to the node_modules/@blocks directory:

After the installation of the blocks, add them to the blocks.json file of your project to use it in eWizard Editor. For more information, see Make blocks visible in eWizard Editor.

You can install the module placeholder block from the eWizard.js repository. Use the module placeholder block to add modules from Veeva Vault.

To install the module placeholder block:

1) Provide the path to the blocks in the blocks, blocksFilename, and blocksManifest fields of the ./.ewizard/settings.json file:

— blocks is the path to the blocks storage directory. For the module placeholder block, the recommended value is node_modules/@blocks.

— blocksFilename is the name of the file that defines which blocks appear in eWizard Editor. The default value is blocks.json.

— blocksManifest is the full path to the file that defines which blocks appear in eWizard Editor. The default value is common/blocks-library/blocks.json.

2) Add the dependencies for the module-placeholder block and the wiz-block-v2 component to the ./package.json file.

NOTE: wiz-block-v2 is the 2.0.0 version of the wiz-block email component used specifically for the module-placeholder block.

3) Install module-placeholder and wiz-block-v2 in your email project.

4) Register the wiz-block-v2 component globally in your email by adding it to the ./extensions/common.js file.

For more information, see Register the component globally in the project.

5) Add the module-placeholder to the blocks.json file to use it in eWizard Editor.

To use blocks in eWizard Editor, add them to the blocks.json file of your project.

1) Set the path to the blocks.json file in ./.ewizard/settings.json using the blocksFilename and blocksManifest properties.

2) Add the blocks as objects within the components array of blocks.json. For example, block1, block2, and module-placeholder blocks:

— id is the block ID. The field is required for the block to be visible in eWizard Editor.

— name is the name of the block displayed in eWizard Editor.

— group is the group where the block belongs to. For more information, see Block groups.

NOTE: If you use filters in your project, use the groups property instead.

— filters is the filter that's applied to the block. For more information, see Block filters.

— icon is the block image that appears in eWizard Editor.

— brand is the brand the block belongs to. For more information, see Block brands.

— countries is the object you can use to control what countries the block is displayed for. This object has two arrays: include and exclude. For more information, see Configure blocks for countries and languages.

— languages is an array where you can add the languages you want to display the block for. The languages must be in the three-letter ISO 3 format. For more information, see Configure blocks for countries and languages.

— metadata is an array that includes fields for displaying dynamic blocks for specific themes, CLMs, and email purposes. For more information, see Dynamic themes in emails.

— clm is the target system for the block. For more information, see Configure blocks for CLM systems.

You can add blocks to groups in blocks.json, so they appear organized by groups in eWizard Editor.

TIP: When you use filters, add groups to the filters array. You can't use both groups and filters arrays in blocks.json. For more information, see Block filters.

If your email template supports dynamic themes, the order of the blocks in a group depends on their order in the blocks-themes.json file. When your template doesn't have the blocks-themes.json file, the block order is the same as in the blocks.json file.

To add a block to a group:

1) Add groups to the groups array. For example, group1, group2, and group3.

2) Specify which group the block belongs to in the group field of the block. For example, block1 belongs to group1:

You can filter and group blocks for eWizard Editor in the filters array of the blocks.json file.

TIP: You can use either the filters, brands or groups array in an email.

For example, HEADER, BODY, and FOOTER groups in eWizard Editor:

To set up a block filter:

1) Open the common/blocks-library/blocks.json file in your project root directory.

2) Enter the filter and group values in the filters array. For example:

— id is the filter or group ID.

— field defines if the object is a filter or a group. Use filters for filters and groups for groups.

— name is the name of the filter or group that appears in eWizard Editor.

3) Specify which filters apply to the block in the filters property of each block. For example, filter1 and filter2 are applied to the header-1 block, and filter2—to the body-1 block:

TIP: Block brands are deprecated, use Block filters instead.

You can filter blocks by brands in eWizard Editor.

NOTE: A template can contain either filters or brands.

To filter blocks by brands:

1) Add the brands field to the blocks.json file of your project. For example, CureAll and BestRemedy brands:

2) Add the brand field to each block. For example, the block header-1 belongs to the CureAll brand:

To generate icons for blocks in the email project manually, use the wiz screen block command and its options. For automatic generation of icons for blocks in emails, add the following configuration to the ./settings.json file:

When you upload the zipped project to eWizard and open it in eWizard Editor, the Blocks tab has icons for all the blocks even if there are no local icon files.

Upon changing the content in Editor, eWizard.js adds the common/icons/blocks/icon.jpg icons for all the blocks. Download the source code and open the email project locally to view JPG files of the block icons.

You can change the default common/icons/blocks path to the directory with the icons for blocks:

To change the block icon width for all the icons generated automatically in the common/icons/blocks directory:

1) Add the following configuration to the ./settings.json file:

Set the block icon width in pixels, for example: 700px.

2) Archive the project with the wiz archive command.

3) Upload the zipped project to My library.

4) Open the email in Editor and change the content.

5) Download the source and open the project locally.

The width of all block icons in the ./common/icons/blocks directory is now 700 pixels.

To skip automatic icon generation or to generate monochrome (black-and-white) icons for specific blocks, add the following configuration to the blocks.json or blocks-themes.json file:

When you archive and upload the email project to eWizard, the skipped blocks either don't have icons on the Blocks tab in Editor or have the custom icons from the block directory. The blocks with the monochrome setting have the black-and-white icons.

TIP: Use the skip setting when you want to skip automatic icon generation for specific blocks. In this case, eWizard Editor uses the custom icon in the block directory.

Certain blocks can have a different appearance in the eWizard PREVIEW/EDIT mode or in Viewer. To display the block icons as they appear in these modes, add the following configurations to the ./settings.json file:

• To display block icons as they appear in the eWizard PREVIEW mode or in Viewer, add the view mode:

• To display block icons as they appear in the eWizard EDIT mode, add the edit mode:

TIP: The view mode is used by default.

• To apply the view or edit mode to specific block icons, add the respective mode configuration to the blocks.json or blocks-themes.json file: