Forms: fix seperators not aligning consistently (#40967)

* Fix: seperator block styling in the form block * changelog * Make the seperator earier to overwrite * Fix the different styles to have the desired width. * Remove any vertical margin * Update projects/packages/forms/changelog/fix-25025-form-seperator Co-authored-by: Aaron Robertshaw <[email protected]> * Update projects/plugins/jetpack/changelog/fix-25025-form-seperator Co-authored-by: Aaron Robertshaw <[email protected]> * Remove the is-style-default class * update to code to be more together. * Update to use 100px vs 150px since that is the most common default saparator * Also inherit the styles in the editor * bug fix --------- Co-authored-by: Miguel Lezama <[email protected]> Co-authored-by: Aaron Robertshaw <[email protected]>
Automattic · Feb 6, 2025 · da84905 · da84905
1 parent 1e3c985
commit da84905
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 0 deletions.
diff --git a/projects/packages/forms/changelog/fix-25025-form-seperator b/projects/packages/forms/changelog/fix-25025-form-seperator
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Improves the styling options of the separator block when placed inside the form block
diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss
@@ -93,6 +93,17 @@
 			&[data-type='jetpack/field-consent'] {
 				align-self: center;
 			}
+
+			&:where( .wp-block-jetpack-contact-form .wp-block-separator ){
+				max-width: var( --wp--preset--spacing--80, 100px );
+				margin-left: auto;
+				margin-right: auto;
+			}
+			&:where( .wp-block-jetpack-contact-form .wp-block-separator.is-style-wide ),
+			&:where( .wp-block-jetpack-contact-form .wp-block-separator.is-style-dots ) {
+				max-width: inherit;
+			}
+
 		}
 	}
 

diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css
@@ -235,6 +235,16 @@
 	box-sizing: border-box;
 }
 
+:where( .wp-block-jetpack-contact-form .wp-block-separator ) {
+	max-width: var( --wp--preset--spacing--80, 100px );
+	margin-top: 0;
+	margin-bottom: 0;
+}
+:where( .wp-block-jetpack-contact-form .wp-block-separator.is-style-wide ),
+:where( .wp-block-jetpack-contact-form .wp-block-separator.is-style-dots ) {
+	max-width: inherit;
+}
+
 /* Added circa Nov 2022: container class assigned to topmost block div */
 .wp-block-jetpack-contact-form-container.alignfull .wp-block-jetpack-contact-form {
 	padding-right: 0;

diff --git a/projects/plugins/jetpack/changelog/fix-25025-form-seperator b/projects/plugins/jetpack/changelog/fix-25025-form-seperator
@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Forms: Improve the styling of the separator block when placed inside the form block