A block is an HTML container component organized as an empty table where you can place other components: wiz-text, wiz-image, or wiz-button. As best practice, create a block by adding the wiz-block component and then inserting other components inside the wiz-block component.

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

You can create blocks locally on your computer. Also, blocks can be grouped and filtered 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 messenger ad project. The block directory can also include other common assets and media files.

The messenger ad scaffolding template includes the default-block directory.

You can either initialize an empty block template using eWizard CLI to start developing your messenger ad block from scratch or copy the default-block.

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.

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

— blocksFilename is the file name 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 the ./common/blocks-library directory. For example, ./common/blocks-library/block1.

TIP: When you initialize a block with eWizard CLI, the 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 messenger ad components.

— icon.png is the block image that appears 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 messenger ad project to use it in eWizard Editor.

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

5) Archive the messenger ad project with wiz archive.

Upload the zipped project to eWizard Editor and add the block to the messenger ad layout.

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 and block2:

— id is the ID of the block. 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.

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

— groups is the group the block belongs to. Use this property to group blocks if you use 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.

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

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

To add a block to a group:

1) Add groups to the groups array. For example, group1, group2, or 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.

To set up a block filter:

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

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

— id is the ID of a filter or a group.

— 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:

You can filter blocks by brands in eWizard Editor.

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

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: