It is a Dev version of the Blocks email builder plugin.The Prod version that will be released in the nearest future will have minor differences: it will not contain experimental features and the whole already existing feature set will be tested way more thoroughly before the releases.

Installation

Run this code in the command prompt:

$ npm i [email protected] -save

Add the Blocks plugin to your App config.

For the Webpack module bundler

Package import:

const useblocksPlugin = require('useblocks/webpack')

Defining the package in the app:

module.exports = {
	plugins: [
		new UseblocksWebpackPlugin(),
	]
}

For the Vite module bundler

Package import:

import useblocksPlugin from 'useblocks/vite'

Defining the package in the app:

export default defineConfig({
	plugins: [useblocksPlugin()],
})

Initialization

Import the Blocks plugin into your component:

import * as useblocks from "useblocks"

The Plugin configuration contains a parameter named getAuthToken. For authorization, you must pass the application's OAuth token to its value. For debugging purposes, the dev version of the plugin supports a mechanism for obtaining a token from the front of the application. To use this mechanism you need first to define auth-proxy in AppConfig:

Fetching the OAuth token on the backend

curl --location 'https://api.useblocks.io/oauth/token' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'client_id=*******' \
--data-urlencode 'client_secret=*******' \
--data-urlencode 'grant_type=client_credentials'

Creating the Blocks plugin entity

useblocks.init({
	getAuthToken: getAuthToken,
	element: "#test",
	content: {
		title: "Email subject",
		html: "EMAIL_CODE",
	},
	config: { }
}).then(instance => {  })

You can get the EMAIL_CODE from our example or paste the HTML code of your own email

Configuration

Plugin configuration is JSON with several nesting levels. In the config you can set the appearance, content, and the logic the plugin will work with.

Element

You can send the element line into the plugin configuration. It is a DOM element selector and you need to initiate the plugin inside of it. If the element is not defined, the app will run in the background mode.

Content

The content section contains parameters of an email that must be displayed in the editor. This is what can be sent to this parameter:

{string}

HTML code of an email.

{object} email options

{
	id?: string; // A unique ID of a project in your system.
	html?: string; // HTML code of an email.
	subject?: string; // Email subject line.
	preheader?: string; // Email preheader.
}

{object} full description

{
	temlateId?: string; // Email template ID in Blocks.
	email?: object; // email options.
	blocks?: []; // Additional blocks.
	comments?: []; // Comments in an email.
}

You can change the content at any moment after the initialization with the help of the instance.show(content) method.

Config

This section is dedicated to setting the appearance and settings of the editor. You can change the configuration of this section after the initialization with the help of useblocks.setConfig or useblocks.updateConfig.

The list of parameters of the config section

| Parameter | Description | Default | | ---------------------- | --------------------------------- | ------- | | theme | Plugin theme: light, dark. | light | | headerArrowBackVisible | Displaying the "Back" arrow. | true | | headerTitleVisible | Displaying the "Title" field. | true | | headerPreheaderVisible | Displaying the "Preheader" field. | true | | pathEnabled | Bread crumbs | true | | ... | ... | ... |

Events

Events can be sent to configurations or added to them later while working with the instance of the plugin. All event subscribers can be asynchronous features.

Example

useblocks.init({
	....,
	// Subscription to events in the initialization.
	handleReadEmail: (e) => {},
	handleSaveEmail: async (e) => {}
}).then((instance) => {
	// Subscription to events after the initialization.
	const dispose = instance.handleReadEmail(e => {});
	const dispose = instance.handleSaveEmail(async (e) => {});
});

By sending the asynchronous feature you can implement the asynchronous data load.

Example

useblocks.init({
	element: "#test",
	content: {
		id: "1"
	}
	handleReadEmail: async (id) => {
		return await  fetchData(id); // Your data fetch feature.
	}
}).then((instance) => { 
	setTimeout(() => instance.show({ id: "2" }), 1000)
});

Events

| Name | Description | | ------------------------- | -------------------------------------------- | | handleReadEmail | read email handler | | handleSaveEmail | fires when email saved | | handleReadEmailAutoSaves | read autosaves handler | | handleEmailAutosave | fires when email autosave | | handleRemoveEmailAutoSave | fires when email autosave delete | | handleReadBlocks | read blocks handler | | handleSaveBlock | fires when block save | | handleRemoveBlock | fires when block delete | | handleReadComments | read comments handler | | handleSaveComment | fires when comment save | | handleRemoveComment | fires when comment delete | | handleSaveButtonClick | fires when user clicked on 'save' button | | handleNextButtonClick | fires when user clicked on 'next' button | | handlePreviousButtonClick | fires when user clicked on 'previous' button | | handleEmailInit | fires when email iframe inited | | handleEmailChanged | fires when email changed | | handleHtmlChanged | fires when email Html changed | | handleDestroy | fires when app destroyed | | handleLoad | fires when app loaded | | handleLoadImage | fires when image loading |

Methods

| Method name | Description | | ------------------------- | -------------------------------------------- | | init | Initialization (async) | | show | Altering the content after the initialization| | destroy | Destruction of the instance of the plugin | | reset | Resetting the whole configuration | | getEmail | Getting the current email | | getConfig | Getting the configuration | | getBlocks | Getting the blocks from the project | | getComments | Getting the commentaries for the email | | getEmailRevisions | Getting the list of the email revisions | | setConfig | Setting new config parameters | | updateConfig | Updating config parameters | | notify | Notifications display | | getElement | Getting an element of initialization | | save | Saving an email |

Keywords

none