@wordpress/block-library 8.30.0 → 8.31.0

package/build/table/deprecated.js

@@ -26,8 +26,246 @@ const oldColors = {
   'subtle-pale-pink': '#fcf0ef'
 };
 
+// Fixed width table cells on by default.
+const 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'
+  }
+};
+const 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 = (0, _blockEditor.__experimentalGetColorClassesAndStyles)(attributes);
+    const borderProps = (0, _blockEditor.__experimentalGetBorderClassesAndStyles)(attributes);
+    const classes = (0, _classnames.default)(colorProps.className, borderProps.className, {
+      'has-fixed-layout': hasFixedLayout
+    });
+    const hasCaption = !_blockEditor.RichText.isEmpty(caption);
+    const Section = ({
+      type,
+      rows
+    }) => {
+      if (!rows.length) {
+        return null;
+      }
+      const Tag = `t${type}`;
+      return (0, _react.createElement)(Tag, null, rows.map(({
+        cells
+      }, rowIndex) => (0, _react.createElement)("tr", {
+        key: rowIndex
+      }, cells.map(({
+        content,
+        tag,
+        scope,
+        align,
+        colspan,
+        rowspan
+      }, cellIndex) => {
+        const cellClasses = (0, _classnames.default)({
+          [`has-text-align-${align}`]: align
+        });
+        return (0, _react.createElement)(_blockEditor.RichText.Content, {
+          className: cellClasses ? cellClasses : undefined,
+          "data-align": align,
+          tagName: tag,
+          value: content,
+          key: cellIndex,
+          scope: tag === 'th' ? scope : undefined,
+          colSpan: colspan,
+          rowSpan: rowspan
+        });
+      }))));
+    };
+    return (0, _react.createElement)("figure", {
+      ..._blockEditor.useBlockProps.save()
+    }, (0, _react.createElement)("table", {
+      className: classes === '' ? undefined : classes,
+      style: {
+        ...colorProps.style,
+        ...borderProps.style
+      }
+    }, (0, _react.createElement)(Section, {
+      type: "head",
+      rows: head
+    }), (0, _react.createElement)(Section, {
+      type: "body",
+      rows: body
+    }), (0, _react.createElement)(Section, {
+      type: "foot",
+      rows: foot
+    })), hasCaption && (0, _react.createElement)(_blockEditor.RichText.Content, {
+      tagName: "figcaption",
+      value: caption,
+      className: (0, _blockEditor.__experimentalGetElementClassName)('caption')
+    }));
+  }
+};
+
 // In #41140 support was added to global styles for caption elements which
 // added a `wp-element-caption` classname to the embed figcaption element.
+const 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'
+  }
+};
 const v3 = {
   attributes: {
     hasFixedLayout: {
@@ -51,27 +289,7 @@ const v3 = {
           default: [],
           source: 'query',
           selector: 'td,th',
-          query: {
-            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'
-            }
-          }
+          query: v3Query
         }
       }
     },
@@ -86,27 +304,7 @@ const v3 = {
           default: [],
           source: 'query',
           selector: 'td,th',
-          query: {
-            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'
-            }
-          }
+          query: v3Query
         }
       }
     },
@@ -121,27 +319,7 @@ const v3 = {
           default: [],
           source: 'query',
           selector: 'td,th',
-          query: {
-            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'
-            }
-          }
+          query: v3Query
         }
       }
     }
@@ -263,6 +441,27 @@ const v3 = {
 };
 
 // Deprecation migrating table block to use colors block support feature.
+const 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'
+  }
+};
 const v2 = {
   attributes: {
     hasFixedLayout: {
@@ -289,27 +488,7 @@ const v2 = {
           default: [],
           source: 'query',
           selector: 'td,th',
-          query: {
-            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'
-            }
-          }
+          query: v2Query
         }
       }
     },
@@ -324,27 +503,7 @@ const v2 = {
           default: [],
           source: 'query',
           selector: 'td,th',
-          query: {
-            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'
-            }
-          }
+          query: v2Query
         }
       }
     },
@@ -359,27 +518,7 @@ const v2 = {
           default: [],
           source: 'query',
           selector: 'td,th',
-          query: {
-            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'
-            }
-          }
+          query: v2Query
         }
       }
     }
@@ -476,6 +615,22 @@ const v2 = {
     };
   }
 };
+const v1Query = {
+  content: {
+    type: 'string',
+    source: 'html'
+  },
+  tag: {
+    type: 'string',
+    default: 'td',
+    source: 'tag'
+  },
+  scope: {
+    type: 'string',
+    source: 'attribute',
+    attribute: 'scope'
+  }
+};
 const v1 = {
   attributes: {
     hasFixedLayout: {
@@ -496,22 +651,7 @@ const v1 = {
           default: [],
           source: 'query',
           selector: 'td,th',
-          query: {
-            content: {
-              type: 'string',
-              source: 'html'
-            },
-            tag: {
-              type: 'string',
-              default: 'td',
-              source: 'tag'
-            },
-            scope: {
-              type: 'string',
-              source: 'attribute',
-              attribute: 'scope'
-            }
-          }
+          query: v1Query
         }
       }
     },
@@ -526,22 +666,7 @@ const v1 = {
           default: [],
           source: 'query',
           selector: 'td,th',
-          query: {
-            content: {
-              type: 'string',
-              source: 'html'
-            },
-            tag: {
-              type: 'string',
-              default: 'td',
-              source: 'tag'
-            },
-            scope: {
-              type: 'string',
-              source: 'attribute',
-              attribute: 'scope'
-            }
-          }
+          query: v1Query
         }
       }
     },
@@ -556,22 +681,7 @@ const v1 = {
           default: [],
           source: 'query',
           selector: 'td,th',
-          query: {
-            content: {
-              type: 'string',
-              source: 'html'
-            },
-            tag: {
-              type: 'string',
-              default: 'td',
-              source: 'tag'
-            },
-            scope: {
-              type: 'string',
-              source: 'attribute',
-              attribute: 'scope'
-            }
-          }
+          query: v1Query
         }
       }
     }
@@ -644,5 +754,5 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-var _default = exports.default = [v3, v2, v1];
+var _default = exports.default = [v4, v3, v2, v1];
 //# sourceMappingURL=deprecated.js.map