diff --git a/.changeset/fifty-pigs-sniff.md b/.changeset/fifty-pigs-sniff.md new file mode 100644 index 000000000..5dd3299c3 --- /dev/null +++ b/.changeset/fifty-pigs-sniff.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add default hr styles and improved WordPress Separator block styles diff --git a/src/base/_defaults.scss b/src/base/_defaults.scss index 1c302f3f5..579dd4b6b 100644 --- a/src/base/_defaults.scss +++ b/src/base/_defaults.scss @@ -1,3 +1,4 @@ +@use 'sass:math'; @use '../compiled/tokens/scss/color'; @use '../compiled/tokens/scss/size'; @use '../mixins/border-radius'; @@ -268,3 +269,21 @@ figcaption { address { font-style: normal; } + +/** + * Horizontal rules + * + * We use border styles and `currentColor` for greater compatibility with + * the WordPress Gutenberg "Separator" block. + * + * 1. Our goal is for the borders to add together to form the total desired + * width. We do this because that's what WordPress's Gutenberg block does + * in order to support weird border+background style combinations. + */ + +hr { + border-color: currentColor; + border-style: solid; + border-width: math.div(size.$edge-medium, 2) 0; /* 1 */ + color: var(--theme-color-border-text-group); +} diff --git a/src/design/defaults.stories.mdx b/src/design/defaults.stories.mdx index 2db95e73e..868e406b9 100644 --- a/src/design/defaults.stories.mdx +++ b/src/design/defaults.stories.mdx @@ -112,3 +112,17 @@ For syntax highlighting, see [our Prism theme](/docs/vendor-prism--bash-shell). }} + +## Horizontal rule + +Only use `hr` elements to represent a "thematic break" in content, such as a change in topic within a section. For divisions that are purely presentational, use CSS instead. + +To add space between the `hr` and adjacent elements, consider wrapping the section of content in [a Rhythm object](/docs/objects-rhythm--default-story). + + + + {`

…and so ends this topic.

+
+

Shifting our focus to something else entirely…

`} +
+
diff --git a/src/vendor/wordpress/core-blocks.stories.mdx b/src/vendor/wordpress/core-blocks.stories.mdx index 5e5c39ce8..8bf2ddcf0 100644 --- a/src/vendor/wordpress/core-blocks.stories.mdx +++ b/src/vendor/wordpress/core-blocks.stories.mdx @@ -1,4 +1,4 @@ -import { Story, Canvas, Meta } from '@storybook/addon-docs'; +import { Story, Canvas, Meta, ArgsTable } from '@storybook/addon-docs'; import blockImageDemo from './demo/image.twig'; const alignmentClasses = { None: '', @@ -502,15 +502,27 @@ The separator block adds the `wp-block-separator` class to an `hr` element. Styles controls add `is-style-default`, `is-style-wide` or `is-style-dots` classes. -The color controls, if used, can add both `has-text-color` and `has-background` -classes, as well as modifier classes for predefined color choices. +The color controls, if used, can add both `has-text-color` and `has-background` classes, as well as modifier classes for predefined color choices. For consistency with [our default hr](/docs/design-defaults--horizontal-rule), we only support the text color option. - - - {`
`} + + + {(args) => `
`}
+ + ## Spacer The spacer block is a `div` with a class of `wp-block-spacer`. diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index 97e3221fd..efa2dfe90 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -281,3 +281,16 @@ $wp-button-gap: size.$spacing-gap-button-group-default; text-align: left; } } + +/** + * Gutenberg block: Separator + * + * The default separator is intended to be partial-width, so we apply those + * styles selectively here rather than un-applying them to the other modifiers. + */ + +.wp-block-separator.is-style-default { + margin-left: auto; + margin-right: auto; + width: calc(100% / 3); +}