@wordpress/block-library 8.30.0 → 8.31.0

package/build-module/table/deprecated.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText, getColorClassName, useBlockProps, __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles } from '@wordpress/block-editor';
+import { RichText, getColorClassName, useBlockProps, __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, __experimentalGetElementClassName } from '@wordpress/block-editor';
 
 // As the previous arbitrary colors won't match theme color palettes, the hex
 // value will be mapped to the style.color.background attribute as if it was
@@ -19,8 +19,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 = getColorClassesAndStyles(attributes);
+    const borderProps = getBorderClassesAndStyles(attributes);
+    const classes = classnames(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 createElement(Tag, null, rows.map(({
+        cells
+      }, rowIndex) => createElement("tr", {
+        key: rowIndex
+      }, cells.map(({
+        content,
+        tag,
+        scope,
+        align,
+        colspan,
+        rowspan
+      }, cellIndex) => {
+        const cellClasses = classnames({
+          [`has-text-align-${align}`]: align
+        });
+        return createElement(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 createElement("figure", {
+      ...useBlockProps.save()
+    }, createElement("table", {
+      className: classes === '' ? undefined : classes,
+      style: {
+        ...colorProps.style,
+        ...borderProps.style
+      }
+    }, createElement(Section, {
+      type: "head",
+      rows: head
+    }), createElement(Section, {
+      type: "body",
+      rows: body
+    }), createElement(Section, {
+      type: "foot",
+      rows: foot
+    })), hasCaption && createElement(RichText.Content, {
+      tagName: "figcaption",
+      value: caption,
+      className: __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: {
@@ -44,27 +282,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
         }
       }
     },
@@ -79,27 +297,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
         }
       }
     },
@@ -114,27 +312,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
         }
       }
     }
@@ -256,6 +434,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: {
@@ -282,27 +481,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
         }
       }
     },
@@ -317,27 +496,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
         }
       }
     },
@@ -352,27 +511,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
         }
       }
     }
@@ -469,6 +608,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: {
@@ -489,22 +644,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
         }
       }
     },
@@ -519,22 +659,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
         }
       }
     },
@@ -549,22 +674,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
         }
       }
     }
@@ -637,5 +747,5 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [v3, v2, v1];
+export default [v4, v3, v2, v1];
 //# sourceMappingURL=deprecated.js.map