Simplify block creation

[arumsey]

Is your feature request related to a problem? Please describe. Currently, if you want to create a block you need to use the createTable function. Since every Helix block must follow a specific pattern however, createTable requires code to be duplicated during an import for every block that needs to be created.

Adding a createBlock function on top of createTable can abstract away this duplication and reduce block creation down to its bare essentials which is a block name and either an object of name/value pairs or a two-dimensional array of rows and columns.

In addition metadata creation should be split up in to metadata object creation and the actual metadata block creation. That way an import could leverage the default object and add to it instead of having to duplicate the same code for metadata such as title and description.

Describe the solution you'd like

  static createBlock(document, { name, variants = [], cells: data }) {
    const headerRow = variants.length ? [`${name} (${variants.join(', ')})`] : [name];
    let blockRows = data;
    if (!Array.isArray(data)) {
      blockRows = Object.entries(data).map(([key, value]) => {
        if (Array.isArray(value)) {
          value = value.map((v) => {
            const p = document.createElement('p');
            p.innerHTML = v;
            return p;
          });
        } else {
          value = [value];
        }
        return [key, value];
      });
    }
    return DOMUtils.createTable([headerRow, ...blockRows], document);
  }

Describe alternatives you've considered None, other than status quo and duplicated code.

Additional context This feature is also important for a Declarative Transformations API being proposed for the Helix Importer that has the potential for import scripts to be written without any code and just a JSON object.