@wordpress/block-library/build-module/columns/deprecated.js

Block library for the WordPress editor.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { createBlock } from '@wordpress/blocks';
import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
/**
 * Given an HTML string for a deprecated columns inner block, returns the
 * column index to which the migrated inner block should be assigned. Returns
 * undefined if the inner block was not assigned to a column.
 *
 * @param {string} originalContent Deprecated Columns inner block HTML.
 *
 * @return {?number} Column to which inner block is to be assigned.
 */

function getDeprecatedLayoutColumn(originalContent) {
  let {
    doc
  } = getDeprecatedLayoutColumn;

  if (!doc) {
    doc = document.implementation.createHTMLDocument('');
    getDeprecatedLayoutColumn.doc = doc;
  }

  let columnMatch;
  doc.body.innerHTML = originalContent;

  for (const classListItem of doc.body.firstChild.classList) {
    if (columnMatch = classListItem.match(/^layout-column-(\d+)$/)) {
      return Number(columnMatch[1]) - 1;
    }
  }
}

const migrateCustomColors = attributes => {
  if (!attributes.customTextColor && !attributes.customBackgroundColor) {
    return attributes;
  }

  const style = {
    color: {}
  };

  if (attributes.customTextColor) {
    style.color.text = attributes.customTextColor;
  }

  if (attributes.customBackgroundColor) {
    style.color.background = attributes.customBackgroundColor;
  }

  const {
    customTextColor,
    customBackgroundColor,
    ...restAttributes
  } = attributes;
  return { ...restAttributes,
    style,
    isStackedOnMobile: true
  };
};

export default [{
  attributes: {
    verticalAlignment: {
      type: 'string'
    },
    backgroundColor: {
      type: 'string'
    },
    customBackgroundColor: {
      type: 'string'
    },
    customTextColor: {
      type: 'string'
    },
    textColor: {
      type: 'string'
    }
  },
  migrate: migrateCustomColors,

  save(_ref) {
    let {
      attributes
    } = _ref;
    const {
      verticalAlignment,
      backgroundColor,
      customBackgroundColor,
      textColor,
      customTextColor
    } = attributes;
    const backgroundClass = getColorClassName('background-color', backgroundColor);
    const textClass = getColorClassName('color', textColor);
    const className = classnames({
      'has-background': backgroundColor || customBackgroundColor,
      'has-text-color': textColor || customTextColor,
      [backgroundClass]: backgroundClass,
      [textClass]: textClass,
      [`are-vertically-aligned-${verticalAlignment}`]: verticalAlignment
    });
    const style = {
      backgroundColor: backgroundClass ? undefined : customBackgroundColor,
      color: textClass ? undefined : customTextColor
    };
    return createElement("div", {
      className: className ? className : undefined,
      style: style
    }, createElement(InnerBlocks.Content, null));
  }

}, {
  attributes: {
    columns: {
      type: 'number',
      default: 2
    }
  },

  isEligible(attributes, innerBlocks) {
    // Since isEligible is called on every valid instance of the
    // Columns block and a deprecation is the unlikely case due to
    // its subsequent migration, optimize for the `false` condition
    // by performing a naive, inaccurate pass at inner blocks.
    const isFastPassEligible = innerBlocks.some(innerBlock => /layout-column-\d+/.test(innerBlock.originalContent));

    if (!isFastPassEligible) {
      return false;
    } // Only if the fast pass is considered eligible is the more
    // accurate, durable, slower condition performed.


    return innerBlocks.some(innerBlock => getDeprecatedLayoutColumn(innerBlock.originalContent) !== undefined);
  },

  migrate(attributes, innerBlocks) {
    const columns = innerBlocks.reduce((accumulator, innerBlock) => {
      const {
        originalContent
      } = innerBlock;
      let columnIndex = getDeprecatedLayoutColumn(originalContent);

      if (columnIndex === undefined) {
        columnIndex = 0;
      }

      if (!accumulator[columnIndex]) {
        accumulator[columnIndex] = [];
      }

      accumulator[columnIndex].push(innerBlock);
      return accumulator;
    }, []);
    const migratedInnerBlocks = columns.map(columnBlocks => createBlock('core/column', {}, columnBlocks));
    const {
      columns: ignoredColumns,
      ...restAttributes
    } = attributes;
    return [{ ...restAttributes,
      isStackedOnMobile: true
    }, migratedInnerBlocks];
  },

  save(_ref2) {
    let {
      attributes
    } = _ref2;
    const {
      columns
    } = attributes;
    return createElement("div", {
      className: `has-${columns}-columns`
    }, createElement(InnerBlocks.Content, null));
  }

}, {
  attributes: {
    columns: {
      type: 'number',
      default: 2
    }
  },

  migrate(attributes, innerBlocks) {
    const {
      columns,
      ...restAttributes
    } = attributes;
    attributes = { ...restAttributes,
      isStackedOnMobile: true
    };
    return [attributes, innerBlocks];
  },

  save(_ref3) {
    let {
      attributes
    } = _ref3;
    const {
      verticalAlignment,
      columns
    } = attributes;
    const wrapperClasses = classnames(`has-${columns}-columns`, {
      [`are-vertically-aligned-${verticalAlignment}`]: verticalAlignment
    });
    return createElement("div", {
      className: wrapperClasses
    }, createElement(InnerBlocks.Content, null));
  }

}];
//# sourceMappingURL=deprecated.js.map