Jetpack button: fix width and alignment settings (#41139)

* Jetpack button: fix width and alignment setting * changelog * Update styles of components using jetpack/button * Move align styles in mixin * Add align support for older themes * Add missing code after rebase * Fix unmerged conflict * Fix alignment for payment buttons Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/13142806123 Upstream-Ref: Automattic/jetpack@e658a26
Automattic · Feb 4, 2025 · 7302279 · 7302279
1 parent ae5490d
commit 7302279
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ This is an alpha version! The changes listed here are not final.
 - Updated package dependencies.
 
 ### Fixed
+- Fix submit button width and alignment
 - Forms: Hide fields without options.
 
 ## [0.36.0] - 2025-02-03

diff --git a/dist/blocks/editor.asset.php b/dist/blocks/editor.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('jetpack-connection', 'lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => 'c1d01623eabfd96090a5');
+<?php return array('dependencies' => array('jetpack-connection', 'lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '4a8e2b31cb2baa28218d');
diff --git a/dist/blocks/editor.css b/dist/blocks/editor.css
diff --git a/dist/blocks/editor.rtl.css b/dist/blocks/editor.rtl.css
diff --git a/dist/contact-form/css/grunion-rtl.css b/dist/contact-form/css/grunion-rtl.css
diff --git a/dist/contact-form/css/grunion.css b/dist/contact-form/css/grunion.css
diff --git a/src/contact-form/css/grunion.css b/src/contact-form/css/grunion.css
@@ -230,7 +230,7 @@
 	gap: var(--wp--style--block-gap, 1.5rem);
 }
 
-.wp-block-jetpack-contact-form > * {
+.wp-block-jetpack-contact-form > *:not(.wp-block-jetpack-button) {
 	flex: 0 0 100%;
 	box-sizing: border-box;
 }
@@ -241,8 +241,27 @@
 	padding-left: 0;
 }
 
-.wp-block-jetpack-button.alignright button {
-	float: right;
+.wp-block-jetpack-contact-form .wp-block-jetpack-button {
+	width: fit-content;
+}
+
+.wp-block-jetpack-contact-form .wp-block-jetpack-button.aligncenter {
+	display: block;
+
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wp-block-jetpack-contact-form .wp-block-jetpack-button.alignleft {
+	display: block;
+
+	margin-right: auto;
+}
+
+.wp-block-jetpack-contact-form .wp-block-jetpack-button.alignright {
+	display: block;
+
+	margin-left: auto;
 }
 
 .wp-block-jetpack-contact-form .grunion-field-wrap {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('jetpack-connection', 'lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => 'c1d01623eabfd96090a5');
		<?php return array('dependencies' => array('jetpack-connection', 'lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '4a8e2b31cb2baa28218d');