From 3780aa5958e708239fb8b256624117de5a61b088 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci@Stacis-MacBook-Pro.local>
Date: Tue, 27 Oct 2020 13:24:42 -0700
Subject: [PATCH] Remove max width from buttons with custom width set

PR #23168 overhauls alignment controls on the Buttons container and
allows for full width. For a Button inside a very large container,
in order to be set correctly to 100% it must be able to exceed any
configured max-width.

This commit does not remove the max-width for any button that does
NOT have a custom width percentage selected. This is so that
default buttons continue to be sized as they normally would.
---
 packages/block-library/src/button/edit.js    |  2 +-
 packages/block-library/src/button/style.scss | 17 ++++++-----------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 487c6194df0d7..2136f5ddc6b24 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -237,7 +237,7 @@ function ButtonEdit( props ) {
 			<div
 				{ ...blockProps }
 				className={ classnames( blockProps.className, {
-					[ `wp-block-button__width-${ width }` ]: width,
+					[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 				} ) }
 			>
 				<RichText
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index f9c5250ac8987..ef6983f6bf277 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -34,32 +34,27 @@ $blocks-button__height: 3.1em;
 }
 
 .wp-block-button {
-	&.wp-block-button__width-25 {
-		width: 25%;
+	&.has-custom-width {
+		max-width: none;
 		.wp-block-button__link {
 			width: 100%;
 		}
 	}
 
+	&.wp-block-button__width-25 {
+		width: 25%;
+	}
+
 	&.wp-block-button__width-50 {
 		width: 50%;
-		.wp-block-button__link {
-			width: 100%;
-		}
 	}
 
 	&.wp-block-button__width-75 {
 		width: 75%;
-		.wp-block-button__link {
-			width: 100%;
-		}
 	}
 
 	&.wp-block-button__width-100 {
 		width: 100%;
-		.wp-block-button__link {
-			width: 100%;
-		}
 	}
 }