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

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 9.41.0 (2026-03-04)
+
 ## 9.40.0 (2026-02-18)
 
 ## 9.39.0 (2026-01-29)

package/build/button/block.json

@@ -63,9 +63,6 @@
 		},
 		"gradient": {
 			"type": "string"
-		},
-		"width": {
-			"type": "number"
 		}
 	},
 	"supports": {
@@ -81,6 +78,13 @@
 				"text": true
 			}
 		},
+		"dimensions": {
+			"width": true,
+			"__experimentalSkipSerialization": [ "width" ],
+			"__experimentalDefaultControls": {
+				"width": true
+			}
+		},
 		"typography": {
 			"__experimentalSkipSerialization": [
 				"fontSize",
@@ -145,6 +149,10 @@
 		"root": ".wp-block-button .wp-block-button__link",
 		"typography": {
 			"writingMode": ".wp-block-button"
+		},
+		"dimensions": {
+			"root": ".wp-block-button",
+			"width": ".wp-block-button"
 		}
 	}
 }

package/build/button/deprecated.cjs

@@ -39,6 +39,22 @@ var import_compose = require("@wordpress/compose");
 var import_migrate_font_family = __toESM(require("../utils/migrate-font-family.cjs"));
 var import_migrate_text_align = __toESM(require("../utils/migrate-text-align.cjs"));
 var import_jsx_runtime = require("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 = [
@@ -126,6 +142,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 = (0, import_block_editor.__experimentalGetBorderClassesAndStyles)(attributes);
+    const colorProps = (0, import_block_editor.__experimentalGetColorClassesAndStyles)(attributes);
+    const spacingProps = (0, import_block_editor.__experimentalGetSpacingClassesAndStyles)(attributes);
+    const shadowProps = (0, import_block_editor.__experimentalGetShadowClassesAndStyles)(attributes);
+    const typographyProps = (0, import_block_editor.getTypographyClassesAndStyles)(attributes);
+    const buttonClasses = (0, import_clsx.default)(
+      "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
+      },
+      (0, import_block_editor.__experimentalGetElementClassName)("button")
+    );
+    const buttonStyle = {
+      ...borderProps.style,
+      ...colorProps.style,
+      ...spacingProps.style,
+      ...shadowProps.style,
+      ...typographyProps.style,
+      writingMode: void 0
+    };
+    const wrapperClasses = (0, import_clsx.default)(className, {
+      [`has-custom-width wp-block-button__width-${width}`]: width
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...import_block_editor.useBlockProps.save({ className: wrapperClasses }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_block_editor.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: {
@@ -323,9 +538,9 @@ var v13 = {
     ) });
   },
   isEligible(attributes) {
-    return !!attributes.textAlign;
+    return !!attributes.textAlign || typeof attributes.width === "number";
   },
-  migrate: import_migrate_text_align.default
+  migrate: (0, import_compose.compose)(migrateWidth, import_migrate_text_align.default)
 };
 var v12 = {
   attributes: {
@@ -502,7 +717,11 @@ var v12 = {
         rel: isButtonTag ? null : rel
       }
     ) });
-  }
+  },
+  isEligible(attributes) {
+    return typeof attributes.width === "number";
+  },
+  migrate: migrateWidth
 };
 var v11 = {
   attributes: {
@@ -743,12 +962,13 @@ var v10 = {
       }
     ) });
   },
-  migrate: import_migrate_font_family.default,
-  isEligible({ style }) {
-    return style?.typography?.fontFamily;
+  migrate: (0, import_compose.compose)(migrateWidth, import_migrate_font_family.default),
+  isEligible({ style, width }) {
+    return style?.typography?.fontFamily || typeof width === "number";
   }
 };
 var deprecated = [
+  v14,
   v13,
   v12,
   v11,
@@ -847,7 +1067,11 @@ var deprecated = [
         }
       ) });
     },
-    migrate: (0, import_compose.compose)(import_migrate_font_family.default, migrateBorderRadius)
+    migrate: (0, import_compose.compose)(
+      migrateWidth,
+      import_migrate_font_family.default,
+      migrateBorderRadius
+    )
   },
   {
     supports: {
@@ -927,7 +1151,11 @@ var deprecated = [
         }
       ) });
     },
-    migrate: (0, import_compose.compose)(import_migrate_font_family.default, migrateBorderRadius)
+    migrate: (0, import_compose.compose)(
+      migrateWidth,
+      import_migrate_font_family.default,
+      migrateBorderRadius
+    )
   },
   {
     supports: {
@@ -1007,7 +1235,11 @@ var deprecated = [
         }
       ) });
     },
-    migrate: (0, import_compose.compose)(import_migrate_font_family.default, migrateBorderRadius)
+    migrate: (0, import_compose.compose)(
+      migrateWidth,
+      import_migrate_font_family.default,
+      migrateBorderRadius
+    )
   },
   {
     supports: {
@@ -1070,7 +1302,7 @@ var deprecated = [
         }
       );
     },
-    migrate: migrateBorderRadius
+    migrate: (0, import_compose.compose)(migrateWidth, migrateBorderRadius)
   },
   {
     supports: {
@@ -1118,6 +1350,7 @@ var deprecated = [
     },
     isEligible: (attributes) => !!attributes.customTextColor || !!attributes.customBackgroundColor || !!attributes.customGradient || !!attributes.align,
     migrate: (0, import_compose.compose)(
+      migrateWidth,
       migrateBorderRadius,
       migrateCustomColorsAndGradients,
       migrateAlign
@@ -1282,7 +1515,7 @@ var deprecated = [
         type: "string"
       }
     },
-    migrate: oldColorsMigration,
+    migrate: (0, import_compose.compose)(migrateWidth, oldColorsMigration),
     save({ attributes }) {
       const {
         url,
@@ -1354,7 +1587,7 @@ var deprecated = [
         }
       ) });
     },
-    migrate: oldColorsMigration
+    migrate: (0, import_compose.compose)(migrateWidth, oldColorsMigration)
   },
   {
     attributes: {
@@ -1390,7 +1623,7 @@ var deprecated = [
         }
       );
     },
-    migrate: oldColorsMigration
+    migrate: (0, import_compose.compose)(migrateWidth, oldColorsMigration)
   }
 ];
 var deprecated_default = deprecated;