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

Block library for the WordPress editor.

// packages/block-library/src/table/deprecated.js
import clsx from "clsx";
import {
  RichText,
  getColorClassName,
  useBlockProps,
  __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
  __experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
  __experimentalGetElementClassName
} from "@wordpress/block-editor";
import { jsx, jsxs } from "react/jsx-runtime";
var oldColors = {
  "subtle-light-gray": "#f3f4f5",
  "subtle-pale-green": "#e9fbe5",
  "subtle-pale-blue": "#e7f5fe",
  "subtle-pale-pink": "#fcf0ef"
};
var v4Query = {
  content: {
    type: "rich-text",
    source: "rich-text"
  },
  tag: {
    type: "string",
    default: "td",
    source: "tag"
  },
  scope: {
    type: "string",
    source: "attribute",
    attribute: "scope"
  },
  align: {
    type: "string",
    source: "attribute",
    attribute: "data-align"
  },
  colspan: {
    type: "string",
    source: "attribute",
    attribute: "colspan"
  },
  rowspan: {
    type: "string",
    source: "attribute",
    attribute: "rowspan"
  }
};
var v4 = {
  attributes: {
    hasFixedLayout: {
      type: "boolean",
      default: false
    },
    caption: {
      type: "rich-text",
      source: "rich-text",
      selector: "figcaption"
    },
    head: {
      type: "array",
      default: [],
      source: "query",
      selector: "thead tr",
      query: {
        cells: {
          type: "array",
          default: [],
          source: "query",
          selector: "td,th",
          query: v4Query
        }
      }
    },
    body: {
      type: "array",
      default: [],
      source: "query",
      selector: "tbody tr",
      query: {
        cells: {
          type: "array",
          default: [],
          source: "query",
          selector: "td,th",
          query: v4Query
        }
      }
    },
    foot: {
      type: "array",
      default: [],
      source: "query",
      selector: "tfoot tr",
      query: {
        cells: {
          type: "array",
          default: [],
          source: "query",
          selector: "td,th",
          query: v4Query
        }
      }
    }
  },
  supports: {
    anchor: true,
    align: true,
    color: {
      __experimentalSkipSerialization: true,
      gradients: true,
      __experimentalDefaultControls: {
        background: true,
        text: true
      }
    },
    spacing: {
      margin: true,
      padding: true,
      __experimentalDefaultControls: {
        margin: false,
        padding: false
      }
    },
    typography: {
      fontSize: true,
      lineHeight: true,
      __experimentalFontFamily: true,
      __experimentalFontStyle: true,
      __experimentalFontWeight: true,
      __experimentalLetterSpacing: true,
      __experimentalTextTransform: true,
      __experimentalTextDecoration: true,
      __experimentalDefaultControls: {
        fontSize: true
      }
    },
    __experimentalBorder: {
      __experimentalSkipSerialization: true,
      color: true,
      style: true,
      width: true,
      __experimentalDefaultControls: {
        color: true,
        style: true,
        width: true
      }
    },
    __experimentalSelector: ".wp-block-table > table",
    interactivity: {
      clientNavigation: true
    }
  },
  save({ attributes }) {
    const { hasFixedLayout, head, body, foot, caption } = attributes;
    const isEmpty = !head.length && !body.length && !foot.length;
    if (isEmpty) {
      return null;
    }
    const colorProps = getColorClassesAndStyles(attributes);
    const borderProps = getBorderClassesAndStyles(attributes);
    const classes = clsx(colorProps.className, borderProps.className, {
      "has-fixed-layout": hasFixedLayout
    });
    const hasCaption = !RichText.isEmpty(caption);
    const Section = ({ type, rows }) => {
      if (!rows.length) {
        return null;
      }
      const Tag = `t${type}`;
      return /* @__PURE__ */ jsx(Tag, { children: rows.map(({ cells }, rowIndex) => /* @__PURE__ */ jsx("tr", { children: cells.map(
        ({
          content,
          tag,
          scope,
          align,
          colspan,
          rowspan
        }, cellIndex) => {
          const cellClasses = clsx({
            [`has-text-align-${align}`]: align
          });
          return /* @__PURE__ */ jsx(
            RichText.Content,
            {
              className: cellClasses ? cellClasses : void 0,
              "data-align": align,
              tagName: tag,
              value: content,
              scope: tag === "th" ? scope : void 0,
              colSpan: colspan,
              rowSpan: rowspan
            },
            cellIndex
          );
        }
      ) }, rowIndex)) });
    };
    return /* @__PURE__ */ jsxs("figure", { ...useBlockProps.save(), children: [
      /* @__PURE__ */ jsxs(
        "table",
        {
          className: classes === "" ? void 0 : classes,
          style: { ...colorProps.style, ...borderProps.style },
          children: [
            /* @__PURE__ */ jsx(Section, { type: "head", rows: head }),
            /* @__PURE__ */ jsx(Section, { type: "body", rows: body }),
            /* @__PURE__ */ jsx(Section, { type: "foot", rows: foot })
          ]
        }
      ),
      hasCaption && /* @__PURE__ */ jsx(
        RichText.Content,
        {
          tagName: "figcaption",
          value: caption,
          className: __experimentalGetElementClassName(
            "caption"
          )
        }
      )
    ] });
  }
};
var v3Query = {
  content: {
    type: "string",
    source: "html"
  },
  tag: {
    type: "string",
    default: "td",
    source: "tag"
  },
  scope: {
    type: "string",
    source: "attribute",
    attribute: "scope"
  },
  align: {
    type: "string",
    source: "attribute",
    attribute: "data-align"
  }
};
var v3 = {
  attributes: {
    hasFixedLayout: {
      type: "boolean",
      default: false
    },
    caption: {
      type: "string",
      source: "html",
      selector: "figcaption",
      default: ""
    },
    head: {
      type: "array",
      default: [],
      source: "query",
      selector: "thead tr",
      query: {
        cells: {
          type: "array",
          default: [],
          source: "query",
          selector: "td,th",
          query: v3Query
        }
      }
    },
    body: {
      type: "array",
      default: [],
      source: "query",
      selector: "tbody tr",
      query: {
        cells: {
          type: "array",
          default: [],
          source: "query",
          selector: "td,th",
          query: v3Query
        }
      }
    },
    foot: {
      type: "array",
      default: [],
      source: "query",
      selector: "tfoot tr",
      query: {
        cells: {
          type: "array",
          default: [],
          source: "query",
          selector: "td,th",
          query: v3Query
        }
      }
    }
  },
  supports: {
    anchor: true,
    align: true,
    color: {
      __experimentalSkipSerialization: true,
      gradients: true,
      __experimentalDefaultControls: {
        background: true,
        text: true
      }
    },
    spacing: {
      margin: true,
      padding: true
    },
    typography: {
      fontSize: true,
      lineHeight: true,
      __experimentalFontFamily: true,
      __experimentalFontStyle: true,
      __experimentalFontWeight: true,
      __experimentalLetterSpacing: true,
      __experimentalTextTransform: true,
      __experimentalTextDecoration: true,
      __experimentalDefaultControls: {
        fontSize: true
      }
    },
    __experimentalBorder: {
      __experimentalSkipSerialization: true,
      color: true,
      style: true,
      width: true,
      __experimentalDefaultControls: {
        color: true,
        style: true,
        width: true
      }
    },
    __experimentalSelector: ".wp-block-table > table"
  },
  save({ attributes }) {
    const { hasFixedLayout, head, body, foot, caption } = attributes;
    const isEmpty = !head.length && !body.length && !foot.length;
    if (isEmpty) {
      return null;
    }
    const colorProps = getColorClassesAndStyles(attributes);
    const borderProps = getBorderClassesAndStyles(attributes);
    const classes = clsx(colorProps.className, borderProps.className, {
      "has-fixed-layout": hasFixedLayout
    });
    const hasCaption = !RichText.isEmpty(caption);
    const Section = ({ type, rows }) => {
      if (!rows.length) {
        return null;
      }
      const Tag = `t${type}`;
      return /* @__PURE__ */ jsx(Tag, { children: rows.map(({ cells }, rowIndex) => /* @__PURE__ */ jsx("tr", { children: cells.map(
        ({ content, tag, scope, align }, cellIndex) => {
          const cellClasses = clsx({
            [`has-text-align-${align}`]: align
          });
          return /* @__PURE__ */ jsx(
            RichText.Content,
            {
              className: cellClasses ? cellClasses : void 0,
              "data-align": align,
              tagName: tag,
              value: content,
              scope: tag === "th" ? scope : void 0
            },
            cellIndex
          );
        }
      ) }, rowIndex)) });
    };
    return /* @__PURE__ */ jsxs("figure", { ...useBlockProps.save(), children: [
      /* @__PURE__ */ jsxs(
        "table",
        {
          className: classes === "" ? void 0 : classes,
          style: { ...colorProps.style, ...borderProps.style },
          children: [
            /* @__PURE__ */ jsx(Section, { type: "head", rows: head }),
            /* @__PURE__ */ jsx(Section, { type: "body", rows: body }),
            /* @__PURE__ */ jsx(Section, { type: "foot", rows: foot })
          ]
        }
      ),
      hasCaption && /* @__PURE__ */ jsx(RichText.Content, { tagName: "figcaption", value: caption })
    ] });
  }
};
var v2Query = {
  content: {
    type: "string",
    source: "html"
  },
  tag: {
    type: "string",
    default: "td",
    source: "tag"
  },
  scope: {
    type: "string",
    source: "attribute",
    attribute: "scope"
  },
  align: {
    type: "string",
    source: "attribute",
    attribute: "data-align"
  }
};
var v2 = {
  attributes: {
    hasFixedLayout: {
      type: "boolean",
      default: false
    },
    backgroundColor: {
      type: "string"
    },
    caption: {
      type: "string",
      source: "html",
      selector: "figcaption",
      default: ""
    },
    head: {
      type: "array",
      default: [],
      source: "query",
      selector: "thead tr",
      query: {
        cells: {
          type: "array",
          default: [],
          source: "query",
          selector: "td,th",
          query: v2Query
        }
      }
    },
    body: {
      type: "array",
      default: [],
      source: "query",
      selector: "tbody tr",
      query: {
        cells: {
          type: "array",
          default: [],
          source: "query",
          selector: "td,th",
          query: v2Query
        }
      }
    },
    foot: {
      type: "array",
      default: [],
      source: "query",
      selector: "tfoot tr",
      query: {
        cells: {
          type: "array",
          default: [],
          source: "query",
          selector: "td,th",
          query: v2Query
        }
      }
    }
  },
  supports: {
    anchor: true,
    align: true,
    __experimentalSelector: ".wp-block-table > table"
  },
  save: ({ attributes }) => {
    const { hasFixedLayout, head, body, foot, backgroundColor, caption } = attributes;
    const isEmpty = !head.length && !body.length && !foot.length;
    if (isEmpty) {
      return null;
    }
    const backgroundClass = getColorClassName(
      "background-color",
      backgroundColor
    );
    const classes = clsx(backgroundClass, {
      "has-fixed-layout": hasFixedLayout,
      "has-background": !!backgroundClass
    });
    const hasCaption = !RichText.isEmpty(caption);
    const Section = ({ type, rows }) => {
      if (!rows.length) {
        return null;
      }
      const Tag = `t${type}`;
      return /* @__PURE__ */ jsx(Tag, { children: rows.map(({ cells }, rowIndex) => /* @__PURE__ */ jsx("tr", { children: cells.map(
        ({ content, tag, scope, align }, cellIndex) => {
          const cellClasses = clsx({
            [`has-text-align-${align}`]: align
          });
          return /* @__PURE__ */ jsx(
            RichText.Content,
            {
              className: cellClasses ? cellClasses : void 0,
              "data-align": align,
              tagName: tag,
              value: content,
              scope: tag === "th" ? scope : void 0
            },
            cellIndex
          );
        }
      ) }, rowIndex)) });
    };
    return /* @__PURE__ */ jsxs("figure", { ...useBlockProps.save(), children: [
      /* @__PURE__ */ jsxs("table", { className: classes === "" ? void 0 : classes, children: [
        /* @__PURE__ */ jsx(Section, { type: "head", rows: head }),
        /* @__PURE__ */ jsx(Section, { type: "body", rows: body }),
        /* @__PURE__ */ jsx(Section, { type: "foot", rows: foot })
      ] }),
      hasCaption && /* @__PURE__ */ jsx(RichText.Content, { tagName: "figcaption", value: caption })
    ] });
  },
  isEligible: (attributes) => {
    return attributes.backgroundColor && attributes.backgroundColor in oldColors && !attributes.style;
  },
  // This version is the first to introduce the style attribute to the
  // table block. As a result, we'll explicitly override that.
  migrate: (attributes) => {
    return {
      ...attributes,
      backgroundColor: void 0,
      style: {
        color: {
          background: oldColors[attributes.backgroundColor]
        }
      }
    };
  }
};
var v1Query = {
  content: {
    type: "string",
    source: "html"
  },
  tag: {
    type: "string",
    default: "td",
    source: "tag"
  },
  scope: {
    type: "string",
    source: "attribute",
    attribute: "scope"
  }
};
var v1 = {
  attributes: {
    hasFixedLayout: {
      type: "boolean",
      default: false
    },
    backgroundColor: {
      type: "string"
    },
    head: {
      type: "array",
      default: [],
      source: "query",
      selector: "thead tr",
      query: {
        cells: {
          type: "array",
          default: [],
          source: "query",
          selector: "td,th",
          query: v1Query
        }
      }
    },
    body: {
      type: "array",
      default: [],
      source: "query",
      selector: "tbody tr",
      query: {
        cells: {
          type: "array",
          default: [],
          source: "query",
          selector: "td,th",
          query: v1Query
        }
      }
    },
    foot: {
      type: "array",
      default: [],
      source: "query",
      selector: "tfoot tr",
      query: {
        cells: {
          type: "array",
          default: [],
          source: "query",
          selector: "td,th",
          query: v1Query
        }
      }
    }
  },
  supports: {
    align: true
  },
  save({ attributes }) {
    const { hasFixedLayout, head, body, foot, backgroundColor } = attributes;
    const isEmpty = !head.length && !body.length && !foot.length;
    if (isEmpty) {
      return null;
    }
    const backgroundClass = getColorClassName(
      "background-color",
      backgroundColor
    );
    const classes = clsx(backgroundClass, {
      "has-fixed-layout": hasFixedLayout,
      "has-background": !!backgroundClass
    });
    const Section = ({ type, rows }) => {
      if (!rows.length) {
        return null;
      }
      const Tag = `t${type}`;
      return /* @__PURE__ */ jsx(Tag, { children: rows.map(({ cells }, rowIndex) => /* @__PURE__ */ jsx("tr", { children: cells.map(
        ({ content, tag, scope }, cellIndex) => /* @__PURE__ */ jsx(
          RichText.Content,
          {
            tagName: tag,
            value: content,
            scope: tag === "th" ? scope : void 0
          },
          cellIndex
        )
      ) }, rowIndex)) });
    };
    return /* @__PURE__ */ jsxs("table", { className: classes, children: [
      /* @__PURE__ */ jsx(Section, { type: "head", rows: head }),
      /* @__PURE__ */ jsx(Section, { type: "body", rows: body }),
      /* @__PURE__ */ jsx(Section, { type: "foot", rows: foot })
    ] });
  }
};
var deprecated_default = [v4, v3, v2, v1];
export {
  deprecated_default as default
};
//# sourceMappingURL=deprecated.js.map