bootstrap5-p1/src/blocks/row1columns228/block.js

A custom GrapesJS plugin for Bootstrap 5.1.3.

/**
 * BLOCK: row1columns228
 * @param {Object} opts - Global block options
 * @param {Object} blockProps - Specific block options
 * @return {Object} - Block object
 */
export default (opts = {}, blockProps) => {
  const { ...defaultOpts } = opts;
  const {
    attrsRow,
    attrsCell,
    styleRow,
    styleClm,
    styleCustom,
    category,
    select,
  } = blockProps;

  const block = {
    category: category,
    select: select,
    id: "1row ",
    label: "<span>1 Row <br/> 3 Columns 2/2/8</span>",
    media: `<svg class="custom-blocks" width="113" height="66" viewBox="0 0 113 66" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="1.35254" y="1" width="15.6" height="64" rx="3"   stroke-width="2"/>
    <path d="M1 5C1 2.79086 2.79086 1 5 1H9V64H5C2.79086 64 1 62.2091 1 60V5Z" fill="#2DA94F"/>
    <rect x="19.9883" y="1" width="15.6" height="64" rx="3"   stroke-width="2"/>
    <rect x="38.623" y="1" width="72.5412" height="64" rx="3"   stroke-width="2"/>
    </svg>
              `,
    content: `<div ${attrsRow} class="gjs-row row bs-row" >
    <div ${attrsCell} class="gjs-cell col-sm col-md-2 col-lg-2 position-relative bs-column"></div>
    <div ${attrsCell} class="gjs-cell col-sm col-md-2 col-lg-2 position-relative bs-column"></div>
    <div ${attrsCell} class="gjs-cell col-sm col-md-8 col-lg-8 position-relative bs-column"></div>
  </div>
              ${`<style>
                  ${styleRow}
                  ${styleClm}
                  ${styleCustom}
                </style>`}
              `,
  };

  return block;
};