diff --git a/.changeset/rare-lobsters-try.md b/.changeset/rare-lobsters-try.md new file mode 100644 index 000000000..b51fa12f8 --- /dev/null +++ b/.changeset/rare-lobsters-try.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': patch +--- + +Fix missing dashes in some Gutenberg font size utility class names diff --git a/src/mixins/_ms.scss b/src/mixins/_ms.scss index 754a87c69..62ea6dc46 100644 --- a/src/mixins/_ms.scss +++ b/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; diff --git a/src/vendor/wordpress/styles/_utilities.scss b/src/vendor/wordpress/styles/_utilities.scss index 68daaea32..580b91e31 100644 --- a/src/vendor/wordpress/styles/_utilities.scss +++ b/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); diff --git a/src/vendor/wordpress/utilities.stories.mdx b/src/vendor/wordpress/utilities.stories.mdx index bba2c3298..0e0c26429 100644 --- a/src/vendor/wordpress/utilities.stories.mdx +++ b/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.