@wordpress/block-library 9.40.2-next.v.202602271551.0 → 9.41.0

package/build-module/button/deprecated.mjs

@@ -16,6 +16,22 @@ import { compose } from "@wordpress/compose";
 import migrateFontFamily from "../utils/migrate-font-family.mjs";
 import migrateTextAlign from "../utils/migrate-text-align.mjs";
 import { jsx } from "react/jsx-runtime";
+var migrateWidth = (attributes) => {
+  const { width, ...otherAttributes } = attributes;
+  if (!width) {
+    return otherAttributes;
+  }
+  return {
+    ...otherAttributes,
+    style: {
+      ...otherAttributes.style,
+      dimensions: {
+        ...otherAttributes.style?.dimensions,
+        width: `${width}%`
+      }
+    }
+  };
+};
 var migrateBorderRadius = (attributes) => {
   const { borderRadius, ...newAttributes } = attributes;
   const oldBorderRadius = [
@@ -103,6 +119,205 @@ var blockAttributes = {
     selector: "a"
   }
 };
+var v14 = {
+  attributes: {
+    tagName: {
+      type: "string",
+      enum: ["a", "button"],
+      default: "a"
+    },
+    type: {
+      type: "string",
+      default: "button"
+    },
+    url: {
+      type: "string",
+      source: "attribute",
+      selector: "a",
+      attribute: "href",
+      role: "content"
+    },
+    title: {
+      type: "string",
+      source: "attribute",
+      selector: "a,button",
+      attribute: "title",
+      role: "content"
+    },
+    text: {
+      type: "rich-text",
+      source: "rich-text",
+      selector: "a,button",
+      role: "content"
+    },
+    linkTarget: {
+      type: "string",
+      source: "attribute",
+      selector: "a",
+      attribute: "target",
+      role: "content"
+    },
+    rel: {
+      type: "string",
+      source: "attribute",
+      selector: "a",
+      attribute: "rel",
+      role: "content"
+    },
+    placeholder: {
+      type: "string"
+    },
+    backgroundColor: {
+      type: "string"
+    },
+    textColor: {
+      type: "string"
+    },
+    gradient: {
+      type: "string"
+    },
+    width: {
+      type: "number"
+    }
+  },
+  supports: {
+    anchor: true,
+    splitting: true,
+    align: false,
+    alignWide: false,
+    color: {
+      __experimentalSkipSerialization: true,
+      gradients: true,
+      __experimentalDefaultControls: {
+        background: true,
+        text: true
+      }
+    },
+    typography: {
+      __experimentalSkipSerialization: [
+        "fontSize",
+        "lineHeight",
+        "textAlign",
+        "fontFamily",
+        "fontWeight",
+        "fontStyle",
+        "textTransform",
+        "textDecoration",
+        "letterSpacing"
+      ],
+      fontSize: true,
+      lineHeight: true,
+      textAlign: true,
+      __experimentalFontFamily: true,
+      __experimentalFontWeight: true,
+      __experimentalFontStyle: true,
+      __experimentalTextTransform: true,
+      __experimentalTextDecoration: true,
+      __experimentalLetterSpacing: true,
+      __experimentalWritingMode: true,
+      __experimentalDefaultControls: {
+        fontSize: true
+      }
+    },
+    reusable: false,
+    shadow: {
+      __experimentalSkipSerialization: true
+    },
+    spacing: {
+      __experimentalSkipSerialization: true,
+      padding: ["horizontal", "vertical"],
+      __experimentalDefaultControls: {
+        padding: true
+      }
+    },
+    __experimentalBorder: {
+      color: true,
+      radius: true,
+      style: true,
+      width: true,
+      __experimentalSkipSerialization: true,
+      __experimentalDefaultControls: {
+        color: true,
+        radius: true,
+        style: true,
+        width: true
+      }
+    },
+    interactivity: {
+      clientNavigation: true
+    }
+  },
+  selectors: {
+    root: ".wp-block-button .wp-block-button__link",
+    typography: {
+      writingMode: ".wp-block-button"
+    }
+  },
+  save({ attributes, className }) {
+    const {
+      tagName,
+      type,
+      fontSize,
+      linkTarget,
+      rel,
+      style,
+      text,
+      title,
+      url,
+      width
+    } = attributes;
+    const TagName = tagName || "a";
+    const isButtonTag = "button" === TagName;
+    const buttonType = type || "button";
+    const borderProps = getBorderClassesAndStyles(attributes);
+    const colorProps = getColorClassesAndStyles(attributes);
+    const spacingProps = getSpacingClassesAndStyles(attributes);
+    const shadowProps = getShadowClassesAndStyles(attributes);
+    const typographyProps = getTypographyClassesAndStyles(attributes);
+    const buttonClasses = clsx(
+      "wp-block-button__link",
+      colorProps.className,
+      borderProps.className,
+      typographyProps.className,
+      {
+        // For backwards compatibility add style that isn't
+        // provided via block support.
+        "no-border-radius": style?.border?.radius === 0,
+        [`has-custom-font-size`]: fontSize || style?.typography?.fontSize
+      },
+      __experimentalGetElementClassName("button")
+    );
+    const buttonStyle = {
+      ...borderProps.style,
+      ...colorProps.style,
+      ...spacingProps.style,
+      ...shadowProps.style,
+      ...typographyProps.style,
+      writingMode: void 0
+    };
+    const wrapperClasses = clsx(className, {
+      [`has-custom-width wp-block-button__width-${width}`]: width
+    });
+    return /* @__PURE__ */ jsx("div", { ...useBlockProps.save({ className: wrapperClasses }), children: /* @__PURE__ */ jsx(
+      RichText.Content,
+      {
+        tagName: TagName,
+        type: isButtonTag ? buttonType : null,
+        className: buttonClasses,
+        href: isButtonTag ? null : url,
+        title,
+        style: buttonStyle,
+        value: text,
+        target: isButtonTag ? null : linkTarget,
+        rel: isButtonTag ? null : rel
+      }
+    ) });
+  },
+  isEligible(attributes) {
+    return typeof attributes.width === "number";
+  },
+  migrate: migrateWidth
+};
 var v13 = {
   attributes: {
     tagName: {
@@ -300,9 +515,9 @@ var v13 = {
     ) });
   },
   isEligible(attributes) {
-    return !!attributes.textAlign;
+    return !!attributes.textAlign || typeof attributes.width === "number";
   },
-  migrate: migrateTextAlign
+  migrate: compose(migrateWidth, migrateTextAlign)
 };
 var v12 = {
   attributes: {
@@ -479,7 +694,11 @@ var v12 = {
         rel: isButtonTag ? null : rel
       }
     ) });
-  }
+  },
+  isEligible(attributes) {
+    return typeof attributes.width === "number";
+  },
+  migrate: migrateWidth
 };
 var v11 = {
   attributes: {
@@ -720,12 +939,13 @@ var v10 = {
       }
     ) });
   },
-  migrate: migrateFontFamily,
-  isEligible({ style }) {
-    return style?.typography?.fontFamily;
+  migrate: compose(migrateWidth, migrateFontFamily),
+  isEligible({ style, width }) {
+    return style?.typography?.fontFamily || typeof width === "number";
   }
 };
 var deprecated = [
+  v14,
   v13,
   v12,
   v11,
@@ -824,7 +1044,11 @@ var deprecated = [
         }
       ) });
     },
-    migrate: compose(migrateFontFamily, migrateBorderRadius)
+    migrate: compose(
+      migrateWidth,
+      migrateFontFamily,
+      migrateBorderRadius
+    )
   },
   {
     supports: {
@@ -904,7 +1128,11 @@ var deprecated = [
         }
       ) });
     },
-    migrate: compose(migrateFontFamily, migrateBorderRadius)
+    migrate: compose(
+      migrateWidth,
+      migrateFontFamily,
+      migrateBorderRadius
+    )
   },
   {
     supports: {
@@ -984,7 +1212,11 @@ var deprecated = [
         }
       ) });
     },
-    migrate: compose(migrateFontFamily, migrateBorderRadius)
+    migrate: compose(
+      migrateWidth,
+      migrateFontFamily,
+      migrateBorderRadius
+    )
   },
   {
     supports: {
@@ -1047,7 +1279,7 @@ var deprecated = [
         }
       );
     },
-    migrate: migrateBorderRadius
+    migrate: compose(migrateWidth, migrateBorderRadius)
   },
   {
     supports: {
@@ -1095,6 +1327,7 @@ var deprecated = [
     },
     isEligible: (attributes) => !!attributes.customTextColor || !!attributes.customBackgroundColor || !!attributes.customGradient || !!attributes.align,
     migrate: compose(
+      migrateWidth,
       migrateBorderRadius,
       migrateCustomColorsAndGradients,
       migrateAlign
@@ -1259,7 +1492,7 @@ var deprecated = [
         type: "string"
       }
     },
-    migrate: oldColorsMigration,
+    migrate: compose(migrateWidth, oldColorsMigration),
     save({ attributes }) {
       const {
         url,
@@ -1331,7 +1564,7 @@ var deprecated = [
         }
       ) });
     },
-    migrate: oldColorsMigration
+    migrate: compose(migrateWidth, oldColorsMigration)
   },
   {
     attributes: {
@@ -1367,7 +1600,7 @@ var deprecated = [
         }
       );
     },
-    migrate: oldColorsMigration
+    migrate: compose(migrateWidth, oldColorsMigration)
   }
 ];
 var deprecated_default = deprecated;