Custom mjml component

gulpfile.js

// ...
// register custom mjml component
const { registerComponent } = require('mjml-core');
const MjBlock = require('../src/components/mjml-block/src/index');
registerComponent(MjBlock);
// ...

mjml-button__src__index.js

// allows to group content inside mjml-column
// this component is a simplified version of mjml-column

const {BodyComponent} = require('mjml-core');

const tableAttrs = {
  border: '0',
  cellpadding: '0',
  cellspacing: '0',
  role: 'presentation',
  style: 'table',
  width: '100%',
};

const allowedAttributes = {
  'background-color': 'color',
  border: 'string',
  'border-bottom': 'string',
  'border-left': 'string',
  'border-radius': 'unit(px,%)',
  'border-right': 'string',
  'border-top': 'string',
  direction: 'enum(ltr,rtl)',
  'padding-bottom': 'unit(px,%)',
  'padding-left': 'unit(px,%)',
  'padding-right': 'unit(px,%)',
  'padding-top': 'unit(px,%)',
  padding: 'unit(px,%){1,4}',
  'vertical-align': 'enum(top,bottom,middle)',
  width: 'unit(px,%)',
};

const defaultAttributes = {
  direction: 'ltr',
  'vertical-align': 'top',
};

class MjBlock extends BodyComponent {
  getStyles() {
    return {
      div: {
        'font-size': '13px',
        'text-align': 'left',
        direction: this.getAttribute('direction'),
        display: 'inline-block',
        'vertical-align': this.getAttribute('vertical-align'),
        width: '100%',
      },
      table: {
        'background-color': this.getAttribute('background-color'),
        border: this.getAttribute('border'),
        'border-bottom': this.getAttribute('border-bottom'),
        'border-left': this.getAttribute('border-left'),
        'border-radius': this.getAttribute('border-radius'),
        'border-right': this.getAttribute('border-right'),
        'border-top': this.getAttribute('border-top'),
        'vertical-align': this.getAttribute('vertical-align'),
      }
    };
  }

  renderColumn() {
    const {children} = this.props;

    return `
      <table ${this.htmlAttributes(tableAttrs)}>
        ${this.renderChildren(children, {
      renderer: (component) =>
        component.constructor.isRawElement()
          ? component.render()
          : `
            <tr>
              <td
                ${component.htmlAttributes({
            align: component.getAttribute('align'),
            'vertical-align': component.getAttribute('vertical-align'),
            class: component.getAttribute('css-class'),
            style: {
              background: component.getAttribute(
                'container-background-color',
              ),
              'font-size': '0px',
              padding: component.getAttribute('padding'),
              'padding-top': component.getAttribute('padding-top'),
              'padding-right': component.getAttribute('padding-right'),
              'padding-bottom': component.getAttribute('padding-bottom'),
              'padding-left': component.getAttribute('padding-left'),
              'word-break': 'break-word',
            },
          })}
              >
                ${component.render()}
              </td>
            </tr>
          `,
    })}
      </table>
    `;
  }

  render() {
    let classesName = `mj-block ${this.getAttribute('css-class')} outlook-group-fix`;

    return `
      <div ${this.htmlAttributes({class: classesName, style: 'div'})}>
       ${this.renderColumn()}
      </div>
    `;
  }
}

MjBlock.defaultAttributes = defaultAttributes;
MjBlock.allowedAttributes = allowedAttributes;
MjBlock.tagName = 'mj-block';
module.exports = MjBlock;