@wordpress/block-library/build/group/deprecated.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _classnames = _interopRequireDefault(require("classnames"));

var _blockEditor = require("@wordpress/block-editor");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
const migrateAttributes = attributes => {
  if (!attributes.tagName) {
    attributes = { ...attributes,
      tagName: 'div'
    };
  }

  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
  };
};

const deprecated = [// Version with default layout.
{
  attributes: {
    tagName: {
      type: 'string',
      default: 'div'
    },
    templateLock: {
      type: 'string'
    }
  },
  supports: {
    __experimentalOnEnter: true,
    __experimentalSettings: true,
    align: ['wide', 'full'],
    anchor: true,
    ariaLabel: true,
    html: false,
    color: {
      gradients: true,
      link: true,
      __experimentalDefaultControls: {
        background: true,
        text: true
      }
    },
    spacing: {
      margin: ['top', 'bottom'],
      padding: true,
      blockGap: true,
      __experimentalDefaultControls: {
        padding: true,
        blockGap: true
      }
    },
    __experimentalBorder: {
      color: true,
      radius: true,
      style: true,
      width: true,
      __experimentalDefaultControls: {
        color: true,
        radius: true,
        style: true,
        width: true
      }
    },
    typography: {
      fontSize: true,
      lineHeight: true,
      __experimentalFontStyle: true,
      __experimentalFontWeight: true,
      __experimentalLetterSpacing: true,
      __experimentalTextTransform: true,
      __experimentalDefaultControls: {
        fontSize: true
      }
    },
    __experimentalLayout: true
  },

  save(_ref) {
    let {
      attributes: {
        tagName: Tag
      }
    } = _ref;
    return (0, _element.createElement)(Tag, _blockEditor.useInnerBlocksProps.save(_blockEditor.useBlockProps.save()));
  },

  isEligible: _ref2 => {
    let {
      layout
    } = _ref2;
    return !layout || layout.inherit || layout.contentSize;
  },
  migrate: attributes => {
    const {
      layout = null
    } = attributes;

    if (!layout) {
      return attributes;
    }

    if (layout.inherit || layout.contentSize) {
      return { ...attributes,
        layout: { ...layout,
          type: 'constrained'
        }
      };
    }
  }
}, // Version of the block with the double div.
{
  attributes: {
    tagName: {
      type: 'string',
      default: 'div'
    },
    templateLock: {
      type: 'string'
    }
  },
  supports: {
    align: ['wide', 'full'],
    anchor: true,
    color: {
      gradients: true,
      link: true
    },
    spacing: {
      padding: true
    },
    __experimentalBorder: {
      radius: true
    }
  },

  save(_ref3) {
    let {
      attributes
    } = _ref3;
    const {
      tagName: Tag
    } = attributes;
    return (0, _element.createElement)(Tag, _blockEditor.useBlockProps.save(), (0, _element.createElement)("div", {
      className: "wp-block-group__inner-container"
    }, (0, _element.createElement)(_blockEditor.InnerBlocks.Content, null)));
  }

}, // Version of the block without global styles support
{
  attributes: {
    backgroundColor: {
      type: 'string'
    },
    customBackgroundColor: {
      type: 'string'
    },
    textColor: {
      type: 'string'
    },
    customTextColor: {
      type: 'string'
    }
  },
  supports: {
    align: ['wide', 'full'],
    anchor: true,
    html: false
  },
  migrate: migrateAttributes,

  save(_ref4) {
    let {
      attributes
    } = _ref4;
    const {
      backgroundColor,
      customBackgroundColor,
      textColor,
      customTextColor
    } = attributes;
    const backgroundClass = (0, _blockEditor.getColorClassName)('background-color', backgroundColor);
    const textClass = (0, _blockEditor.getColorClassName)('color', textColor);
    const className = (0, _classnames.default)(backgroundClass, textClass, {
      'has-text-color': textColor || customTextColor,
      'has-background': backgroundColor || customBackgroundColor
    });
    const styles = {
      backgroundColor: backgroundClass ? undefined : customBackgroundColor,
      color: textClass ? undefined : customTextColor
    };
    return (0, _element.createElement)("div", {
      className: className,
      style: styles
    }, (0, _element.createElement)("div", {
      className: "wp-block-group__inner-container"
    }, (0, _element.createElement)(_blockEditor.InnerBlocks.Content, null)));
  }

}, // Version of the group block with a bug that made text color class not applied.
{
  attributes: {
    backgroundColor: {
      type: 'string'
    },
    customBackgroundColor: {
      type: 'string'
    },
    textColor: {
      type: 'string'
    },
    customTextColor: {
      type: 'string'
    }
  },
  migrate: migrateAttributes,
  supports: {
    align: ['wide', 'full'],
    anchor: true,
    html: false
  },

  save(_ref5) {
    let {
      attributes
    } = _ref5;
    const {
      backgroundColor,
      customBackgroundColor,
      textColor,
      customTextColor
    } = attributes;
    const backgroundClass = (0, _blockEditor.getColorClassName)('background-color', backgroundColor);
    const textClass = (0, _blockEditor.getColorClassName)('color', textColor);
    const className = (0, _classnames.default)(backgroundClass, {
      'has-text-color': textColor || customTextColor,
      'has-background': backgroundColor || customBackgroundColor
    });
    const styles = {
      backgroundColor: backgroundClass ? undefined : customBackgroundColor,
      color: textClass ? undefined : customTextColor
    };
    return (0, _element.createElement)("div", {
      className: className,
      style: styles
    }, (0, _element.createElement)("div", {
      className: "wp-block-group__inner-container"
    }, (0, _element.createElement)(_blockEditor.InnerBlocks.Content, null)));
  }

}, // v1 of group block. Deprecated to add an inner-container div around `InnerBlocks.Content`.
{
  attributes: {
    backgroundColor: {
      type: 'string'
    },
    customBackgroundColor: {
      type: 'string'
    }
  },
  supports: {
    align: ['wide', 'full'],
    anchor: true,
    html: false
  },
  migrate: migrateAttributes,

  save(_ref6) {
    let {
      attributes
    } = _ref6;
    const {
      backgroundColor,
      customBackgroundColor
    } = attributes;
    const backgroundClass = (0, _blockEditor.getColorClassName)('background-color', backgroundColor);
    const className = (0, _classnames.default)(backgroundClass, {
      'has-background': backgroundColor || customBackgroundColor
    });
    const styles = {
      backgroundColor: backgroundClass ? undefined : customBackgroundColor
    };
    return (0, _element.createElement)("div", {
      className: className,
      style: styles
    }, (0, _element.createElement)(_blockEditor.InnerBlocks.Content, null));
  }

}];
var _default = deprecated;
exports.default = _default;
//# sourceMappingURL=deprecated.js.map