Correct Gutenberg font size utility names (#1335)

Author: tylersticka

.changeset/rare-lobsters-try.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Fix missing dashes in some Gutenberg font size utility class names

src/mixins/_ms.scss

@@ -5,11 +5,11 @@
   @return math.pow($ratio, $step) * $base;
 }
 
-@function step-class-segment($step) {
+@function step-class-segment($step, $negative-prefix: 'n') {
   $result: math.abs($step);
 
   @if $step < 0 {
-    $result: 'n#{$result}';
+    $result: $negative-prefix + $result;
   }
 
   @return $result;

src/vendor/wordpress/styles/_utilities.scss

@@ -70,7 +70,9 @@ $color-map: meta.module-variables('color-base');
 }
 
 @for $level from -2 through 3 {
-  $level-segment: ms.step-class-segment($level);
+  // WordPress treats numbers as separate segments in slugs, so we must add an
+  // extra dash to negative number class segment prefixes
+  $level-segment: ms.step-class-segment($level, 'n-');
 
   .has-heading-#{$level-segment}-font-size {
     @include headings.level($level, false);

src/vendor/wordpress/utilities.stories.mdx

@@ -19,8 +19,8 @@ const fontSizeControlConfig = {
       '',
       'big',
       'small',
-      'heading-n2',
-      'heading-n1',
+      'heading-n-2',
+      'heading-n-1',
       'heading-0',
       'heading-1',
       'heading-2',
@@ -63,7 +63,7 @@ When a background color is chosen, rounded corners and padding may be added (dep
 
 ## Font Size
 
-We include `has-{font-size}-font-size` classes for our `big`, `small` and heading level [size tokens](/docs/design-tokens-size--page) to support [the `editor-font-sizes` feature](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#block-font-sizes).
+We include `has-{font-size}-font-size` classes for our `big`, `small` and heading level [size tokens](/docs/design-tokens-size--page) to support [the `editor-font-sizes` feature](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#block-font-sizes). Note that negative number class segments include an extra dash (`n-1` instead of `n1`) due to WordPress's kebab-case formatting of slugs.
 
 <Canvas>
   <Story