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

Block library for the WordPress editor.

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

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

import { InnerBlocks, getColorClassName, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

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 createElement(Tag, useInnerBlocksProps.save(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 createElement(Tag, useBlockProps.save(), createElement("div", {
      className: "wp-block-group__inner-container"
    }, createElement(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 = getColorClassName('background-color', backgroundColor);
    const textClass = getColorClassName('color', textColor);
    const className = classnames(backgroundClass, textClass, {
      'has-text-color': textColor || customTextColor,
      'has-background': backgroundColor || customBackgroundColor
    });
    const styles = {
      backgroundColor: backgroundClass ? undefined : customBackgroundColor,
      color: textClass ? undefined : customTextColor
    };
    return createElement("div", {
      className: className,
      style: styles
    }, createElement("div", {
      className: "wp-block-group__inner-container"
    }, createElement(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 = getColorClassName('background-color', backgroundColor);
    const textClass = getColorClassName('color', textColor);
    const className = classnames(backgroundClass, {
      'has-text-color': textColor || customTextColor,
      'has-background': backgroundColor || customBackgroundColor
    });
    const styles = {
      backgroundColor: backgroundClass ? undefined : customBackgroundColor,
      color: textClass ? undefined : customTextColor
    };
    return createElement("div", {
      className: className,
      style: styles
    }, createElement("div", {
      className: "wp-block-group__inner-container"
    }, createElement(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 = getColorClassName('background-color', backgroundColor);
    const className = classnames(backgroundClass, {
      'has-background': backgroundColor || customBackgroundColor
    });
    const styles = {
      backgroundColor: backgroundClass ? undefined : customBackgroundColor
    };
    return createElement("div", {
      className: className,
      style: styles
    }, createElement(InnerBlocks.Content, null));
  }

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