Skip to content

Instantly share code, notes, and snippets.

@ctlcltd

ctlcltd/wp_gutenberg_columns_css_framework_classnames.js

Last active March 11, 2019 20:18
Download ZIP

Revisions

  1. ctlcltd revised this gist Mar 11, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion wp_gutenberg_columns_css_framework_classnames.js
    View file
    Original file line number Diff line number Diff line change
    @@ -98,7 +98,7 @@ var addColumnClassname = function(props, blockType, attributes) {
    attributes._columns = columns;
    attributes.columns = columns;

    parent.columns--;
    tci[index].columns--;

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

  2. ctlcltd revised this gist Dec 11, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion wp_gutenberg_columns_css_framework_classnames.js
    View file
    Original file line number Diff line number Diff line change
    @@ -83,7 +83,7 @@ var addColumnClassname = function(props, blockType, attributes) {

    for (var i = parseInt(tci.count); i > 0; i--) {
    if (columns === 0) {
    parent = ttci[i]._id;
    parent = tci[i]._id;
    columns = parseInt(tci[i].columns);
    col = parseInt(tci[i]._cols);
    }
  3. ctlcltd created this gist Dec 10, 2018.
    120 changes: 120 additions & 0 deletions wp_gutenberg_columns_css_framework_classnames.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,120 @@
    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 = ttci[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;

    parent.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);