I'm looking for a proper method to add css framework classname in Gutenberg (WordPress 5) core/columns core/column blocks without overriding them. Suggestions, ideas, feedbacks will be appreciated.

wp_gutenberg_columns_css_framework_classnames.js

window.theme_columns_inheritance = {initialized: false, grid: 12, last: -1, count: 0};



var initColumnsClassname = function(__) {
  if ('theme_columns_inheritance' in window && ! theme_columns_inheritance.initialized) {
    theme_columns_inheritance.initialized = true;
  }

  return __;
}


var addColumsClassname = function(props, blockType, attributes) {
  if (blockType && attributes && typeof attributes === 'object' && blockType.name === 'core/columns' && 'columns' in attributes) {
    if ('theme_columns_inheritance' in window && ! theme_columns_inheritance.initialized) {
      return props;
    }

    var tci = window.theme_columns_inheritance;

    var cols = 1;
    var classes = [];

    var columns = parseInt(attributes.columns) || 1;

    if ('_id' in attributes && attributes._id && '_columns' in attributes && attributes._columns === columns) {
      return props;
    }

    attributes._id = lodash.uniqueId();
    attributes._columns = columns;

    tci.last++;

    var index = parseInt(tci.last);
    var grid = parseInt(tci.grid);

    cols = grid / columns;

    tci[index] = { _id: attributes._id, _cols: cols, columns: attributes.columns };
    tci.last = index;

    if ('update' in tci === false && attributes._columns !== columns) {
      tci.update = true;
    } else {
      tci.count++;
    }

    classes.push('row');

    var _classes = props.className.replace(/(\srow)/g, '');
    classes = lodash.union(props.className.split(' '), classes);
    classes = lodash.uniq(classes);

    props.className = classes.join(' ');

    console.log('columns', arguments);
  }

  return props;
}


var addColumnClassname = function(props, blockType, attributes) {
  if (blockType && attributes && typeof attributes === 'object' && blockType.name === 'core/column') {
    if ('theme_columns_inheritance' in window && ! theme_columns_inheritance.initialized) {
      return props;
    }

    var tci = window.theme_columns_inheritance;

    if ('_id' in attributes && attributes._id && '_columns' in attributes && tci.update) {
      return props;
    }

    var classes = [];

    var index = tci.last;
    var parent = tci[index]._id;
    var columns = parseInt(tci[index].columns);
    var col = parseInt(tci[index]._cols);

    for (var i = parseInt(tci.count); i > 0; i--) {
      if (columns === 0) {
        parent = tci[i]._id;
        columns = parseInt(tci[i].columns);
        col = parseInt(tci[i]._cols);
      }
    }

    if (! columns) {
      return props;
    }

    attributes._id = lodash.uniqueId();
    attributes._parent = parent;
    attributes._columns = columns;
    attributes.columns = columns;

    tci[index].columns--;

    classes.push('col-' + col);

    var _classes = props.className.replace(/(\scol-\d)/g, '');
    classes = lodash.union(_classes.split(' '), classes);
    classes = lodash.uniq(classes);

    props.className = classes.join(' ');

    console.log('column', arguments);
  }

  return props;
}


wp.hooks.addFilter('editor.BlockEdit', 'theme.initColumnsClassname', initColumnsClassname);
wp.hooks.addFilter('blocks.getSaveContent.extraProps', 'theme.addColumsClassname', addColumsClassname);
wp.hooks.addFilter('blocks.getSaveContent.extraProps', 'theme.addColumnClassname', addColumnClassname);