BlockAttr

Configuration object defining supported attributes for different block types.

const BlockAttr: {
  EMPTY_CONTAINER: EmptyContainerAttributes;
  CONTAINER: ContainerAttributes;
  BLOCK_IMAGE: ImageAttributes;
  BLOCK_BUTTON: ButtonAttributes;
}

Description

BlockAttr provides a structured definition of attributes supported by various block types in the Stripo Email Editor. These attributes define the configurable properties that can be set on blocks, enabling dynamic behavior and customization. Each block type has its own set of relevant attributes that correspond to its functionality.

Import

import { BlockAttr } from '@stripoinc/ui-editor-extensions';

Block Attribute Definitions

CONTAINER

Attributes for container blocks.

CONTAINER: {
  widthPercent: 'width-percent'
}

Attributes

Attribute	Type	Description
widthPercent	string	Container width as percentage of structure width

Usage Example

getTemplate() {
    const {STRUCTURE, CONTAINER, BLOCK_TEXT, BLOCK_BUTTON} = BlockType;

    // Create a two-column structure:
    // - First column: 50% width containing a Text Block
    // - Second column: 50% width containing a Button Block
    return `
            <${STRUCTURE}>
                <${CONTAINER} ${BlockAttr.CONTAINER.widthPercent}="50">
                    <${BLOCK_TEXT}>
                        <p>Lorem ipsum dolor sit amet</p>
                    </${BLOCK_TEXT}>
                </${CONTAINER}>
                
                <${CONTAINER} ${BlockAttr.CONTAINER.widthPercent}="50">
                    <${BLOCK_BUTTON} ${BlockAttr.BLOCK_BUTTON.href}="https://stripo.email">
                        Click me
                    </${BLOCK_BUTTON}>
                </${CONTAINER}>
            </${STRUCTURE}>
        `
}

---

EMPTY_CONTAINER

Attributes for empty container blocks.

EMPTY_CONTAINER: {
  widthPercent: 'width-percent',
  blocks: 'blocks'
}

Attributes

Attribute	Type	Description
widthPercent	string	Container width as percentage of structure width
blocks	string	List of blocks ids available for insertion through quick actions

Usage Example

getTemplate() {
    const {STRUCTURE, EMPTY_CONTAINER, BLOCK_IMAGE, BLOCK_TEXT} = BlockType;

    // Specify block IDs that will appear as quick-add icons in the empty container        
    return `
            <${STRUCTURE}>
                <${EMPTY_CONTAINER} 
                    ${BlockAttr.EMPTY_CONTAINER.widthPercent}="100"
                    ${BlockAttr.EMPTY_CONTAINER.blocks}="${BLOCK_IMAGE}, ${BLOCK_TEXT}, simple-block">  
                </${EMPTY_CONTAINER}>
            </${STRUCTURE}>
        `
}

---

BLOCK_IMAGE

Attributes for image blocks.

BLOCK_IMAGE: {
  src: 'src',
  alt: 'alt',
  href: 'href'
}

Attributes

Attribute	Type	Description
src	string	Image URL
alt	string	Alternative text for accessibility
href	string	URL the image links to when clicked

Usage Example

getTemplate() {
    const {STRUCTURE, CONTAINER, BLOCK_IMAGE} = BlockType;

    return `
            <${STRUCTURE}>
                <${CONTAINER} ${BlockAttr.CONTAINER.widthPercent}="100">
                    <${BLOCK_IMAGE}
                        ${BlockAttr.BLOCK_IMAGE.src}="https://hpy.stripocdn.email/content/guids/CABINET_e5244175dd1729a1d6ee1f8bd0d5490f/images/50421523966142571.jpg"
                        ${BlockAttr.BLOCK_IMAGE.alt}="Lorem ipsum"
                        ${BlockAttr.BLOCK_IMAGE.href}="https://stripo.email">
                    </${BLOCK_IMAGE}>
                </${CONTAINER}>
            </${STRUCTURE}>
        `
}

---

BLOCK_BUTTON

Attributes for button blocks.

BLOCK_BUTTON: {
  href: 'href'
}

Attributes

Attribute	Type	Description
href	string	URL the button links to when clicked

Usage Example

getTemplate() {
    const {STRUCTURE, CONTAINER, BLOCK_BUTTON} = BlockType;

    return `
            <${STRUCTURE}>
                <${CONTAINER} ${BlockAttr.CONTAINER.widthPercent}="100">
                    <${BLOCK_BUTTON} ${BlockAttr.BLOCK_BUTTON.href}="https://stripo.email">
                        Click me
                    </${BLOCK_BUTTON}>
                </${CONTAINER}>
            </${STRUCTURE}>
        `
}