Do Not Wrap Code Blocks (#1776)

This PR updates the styles for Code blocks to not wrap, since we prefer
to use overflow to scroll.

Author: spaceninja

.changeset/tricky-dots-vanish.md

@@ -0,0 +1,5 @@
+---
+"@cloudfour/patterns": minor
+---
+
+Disables WordPress default line wrapping behavior for Code blocks in favor of scrolling.

src/vendor/wordpress/demo/code.twig

@@ -3,13 +3,14 @@
   style="max-width: 40rem; margin: 0 auto; padding: 0 1.25rem"
 >
   <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper.</p>
-  <pre class="wp-block-code language-css"><code class="language-css">/* CSS */
-.card {
-  background: #f5f5f5;
-  display: inline-block;
-  margin: 0 0 1em;
-  width: 100%;
-  cursor: pointer;
-}</code></pre>
+  <pre class="wp-block-code language-css"><code class="language-css">&lt;img width="100" height="100" src="https://res.cloudinary.com/demo/image/upload/c_fill,w_100,h_100,g_face,dpr_2.0/smiling_man.jpg" />
+
+&lt;video width="640" height="480" poster="CloudinaryTales.jpg" controls>
+  &lt;source src="CloudinaryTales.webm" type="video/webm" />
+  &lt;source src="CloudinaryTales.ogv" type="video/ogg" />
+  &lt;source src="CloudinaryTales.mp4" type="video/mp4" />
+  &lt;track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English" default /&gt;
+  &lt;track src="subtitles-fr.vtt" kind="subtitles" srclang="fr" label="French" />
+&lt;/video></code></pre>
   <p>Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
 </div>

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

@@ -101,11 +101,17 @@ $wp-button-gap: size.$spacing-gap-button-group-default;
  *
  * 1. Set inline margins and padding to outdent the block out a bit,
  *    but keep the code aligned with the page content.
+ * 2. WordPress tries to wrap lines of code by default, but we prefer
+ *    to use overflow to scroll.
  */
 .wp-block-code,
 .wp-block-jetpack-markdown pre {
   @include spacing.fluid-margin-inline-negative; // 1
   @include spacing.fluid-padding-inline; // 1
+
+  code {
+    white-space: pre; // 2
+  }
 }
 
 /**