Fix Jetpack contact form spacing (#2174)

Author: tylersticka

.changeset/dull-squids-listen.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Fix issue where Jetpack contact forms could have extra spacing

src/vendor/wordpress/demo/contact-form/form.twig

@@ -5,6 +5,13 @@
     {# Markup generated in a local WordPress instance with Jetpack 1.19 on March 14, 2023 #}
     <div data-test="contact-form" id="contact-form-test" class="wp-block-jetpack-contact-form-container " style="--jetpack--contact-form--primary-color: rgb(61, 132, 245); --jetpack--contact-form--background-color: rgb(255, 255, 255); --jetpack--contact-form--text-color: rgb(0, 0, 0); --jetpack--contact-form--border: 2px inset rgb(227, 227, 227); --jetpack--contact-form--border-color: rgb(227, 227, 227); --jetpack--contact-form--border-size: 2px; --jetpack--contact-form--border-style: inset; --jetpack--contact-form--border-radius: 0px; --jetpack--contact-form--input-background: rgb(255, 255, 255); --jetpack--contact-form--input-padding: 1px 2px; --jetpack--contact-form--input-padding-top: 1px; --jetpack--contact-form--input-padding-left: 2px; --jetpack--contact-form--font-size: 13.3333px; --jetpack--contact-form--font-family: -apple-system; --jetpack--contact-form--line-height: normal;">
       <form action="#contact-form-test" method="post" class="contact-form commentsblock wp-block-jetpack-contact-form">
+        {#
+          Storybook won't preserve an inline script here, but sometimes the
+          contact form has one, so we're going to insert a div instead to test
+          that the nested `wp-block-jetpack-contact-form` elements don't have
+          unnecessary spacing.
+        #}
+        <div></div>
         <div class="wp-block-jetpack-contact-form is-style-default" style="padding-top:16px;padding-right:16px;padding-bottom:16px;padding-left:16px">
           <div class="grunion-field-name-wrap grunion-field-wrap">
             <label for="gtest-name" class="grunion-field-label name">Name<span>(required)</span></label>

src/vendor/wordpress/styles/_jetpack-blocks.scss

@@ -21,6 +21,13 @@
   padding: 0 !important;
 }
 
+/// For some reason the Jetpack contact form sometimes applies the same class
+/// to an immediate child element, which is an issue when that element includes
+/// an inline script that can trigger our vertical rhythm.
+.wp-block-jetpack-contact-form > .wp-block-jetpack-contact-form {
+  margin-block-start: 0;
+}
+
 /// Apply our existing form component styles to Jetpack form fields.
 .grunion-field {
   /// Test-based inputs