Creating Custom Blocks in TJML

You can create and upload your own blocks using the TJML framework.
To upload your custom assets, go to the My Assets section in the block library panel of the Pixcraft Builder and click Upload.

Structure of a Custom Block File

A file written in the framework language for uploading blocks must have the following structure:

<tj-ui>
	<m-body>
	
		<m-assets>
			<m-asset><!-- block --></m-asset>
			...
			<m-asset data-title="Asset name" data-tags="Head, light"><!-- block --></m-asset>
			...
			<m-asset advanced><!-- block --></m-asset>
		</m-assets>
	
	</m-body>
</tj-ui>

Inside the <m-assets> and </m-assets> tags, you need to place your blocks wrapped in <m-asset></m-asset>. There is no limit to the number of assets (blocks). To make them easier to find, you can assign a name to each asset using the data-title attribute. You can also specify a list of searchable tags in the data-tags attribute, separated by commas.

By default, users will be able to edit the following within a block:

• All text (m-text), including its styles and links
• Replace image sources (src) in m-img
• Set image links (href) in m-img
• Set alternative text (alt) for images in m-img
• Edit button text (m-button)
• Set button links (href) in m-button

If you want to give users more customization options for the blocks, you'll need to add them as advanced settings.

Advanced Blocks

To fine-tune which parameters of a block should be editable, you need to mark it as advanced by adding the advanced attribute to the m-asset tag.

By default, no properties are editable in advanced blocks, except for text (m-text) and button text (m-button).
However, you can make any property editable by adding the desired attribute with the m- prefix. For example:

<m-wrap padding="10px" m-padding="wrap"><!-- code --></m-wrap>

By default, the block will have 10px padding on all sides, but this value can be edited via the properties panel.

In the example, the property value is set as wrap — this allows you to link the same property across similar elements within the block by assigning them the same key. For example:

<m-boxes>
	<m-box>
		<m-wrap bgcolor="#cccccc" m-bgcolor="box"><!-- code --></m-wrap>
	</m-box>
	<m-box>
		<m-wrap bgcolor="#cccccc" m-bgcolor="box"><!-- code --></m-wrap>
	</m-box>
</m-boxes>

Similarly, you can create dependent images — for example, to use identical bullets in a list.

Structure Control

In advanced blocks, you can add elements that are controlled via the structure panel. To do this, use the m-if attribute and specify the text to be displayed in the structure panel as its value. For example:

<m-row>
	<m-column m-if="vk">
		<m-img href="#" src="img/vk.png" width="30" height="30"></m-img>
	</m-column>
	<m-column m-if="fb">
		<m-img href="#" src="img/fb.png" width="30" height="30"></m-img>
	</m-column>
	<m-column m-if="ok">
		<m-img href="#" src="img/ok.png" width="30" height="30"></m-img>
	</m-column>
</m-row>