Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ctlcltd/21ee91114f7b389c995831c8c1aa5c02 to your computer and use it in GitHub Desktop.
Save ctlcltd/21ee91114f7b389c995831c8c1aa5c02 to your computer and use it in GitHub Desktop.
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.
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment