diff --git a/.changeset/stupid-walls-sip.md b/.changeset/stupid-walls-sip.md new file mode 100644 index 000000000..14f7edb91 --- /dev/null +++ b/.changeset/stupid-walls-sip.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add support for Jetpack Markdown Block diff --git a/.changeset/tender-wasps-type.md b/.changeset/tender-wasps-type.md new file mode 100644 index 000000000..ffbd91f5b --- /dev/null +++ b/.changeset/tender-wasps-type.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Use custom properties for Rhythm spacing to support inheritance diff --git a/src/mixins/_spacing.scss b/src/mixins/_spacing.scss new file mode 100644 index 000000000..effb506b8 --- /dev/null +++ b/src/mixins/_spacing.scss @@ -0,0 +1,29 @@ +@use "../compiled/tokens/scss/size"; + +/// Applies styles for a vertical rhythm layout object. Used by the `o-rhythm` +/// pattern and for relevant Gutenberg blocks. Makes heavy use of Heydon +/// Pickering's "lobotomized owl" selectors: By adding `margin-top` to adjacent +/// elements, we avoid impacting the layout of the container itself (which would +/// complicate alignment of adjacent columns). +/// @link https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/ +/// @param {Number} $space - The default space between. +@mixin vertical-rhythm($space: size.$rhythm-default) { + & > * + * { + margin-top: $space; + // Allow space to be overridden using custom properties + margin-top: var(--rhythm); + } + + // Where custom properties are supported, also allow headings to receive their + // own rhythm. + @supports (--custom: properties) { + & > * + h1, + & > * + h2, + & > * + h3, + & > * + h4, + & > * + h5, + & > * + h6 { + margin-top: var(--rhythm-headings); + } + } +} diff --git a/src/objects/rhythm/rhythm.scss b/src/objects/rhythm/rhythm.scss index 1fd2811e1..a57053af6 100644 --- a/src/objects/rhythm/rhythm.scss +++ b/src/objects/rhythm/rhythm.scss @@ -1,45 +1,31 @@ @use "../../compiled/tokens/scss/size"; +@use "../../mixins/spacing"; -/** - * This pattern makes heavy use of Heydon Pickering's "lobotomized owl" - * selectors. By adding `margin-top` to adjacent elements, we avoid impacting - * the layout of the container itself (which would complicate alignment of - * adjacent columns). - * - * @see https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/ - */ - -.o-rhythm > * + * { - margin-top: size.$rhythm-default; +:root { + --rhythm: #{size.$rhythm-default}; + --rhythm-headings: var(--rhythm); } -/** - * General spacing modifiers - */ +.o-rhythm { + @include spacing.vertical-rhythm(size.$rhythm-default); +} + +// General spacing modifiers -.o-rhythm--compact > * + * { - margin-top: size.$rhythm-compact; +.o-rhythm--compact { + --rhythm: #{size.$rhythm-compact}; } -.o-rhythm--condensed > * + * { - margin-top: size.$rhythm-condensed; +.o-rhythm--condensed { + --rhythm: #{size.$rhythm-condensed}; } -.o-rhythm--generous > * + * { - margin-top: size.$rhythm-generous; +.o-rhythm--generous { + --rhythm: #{size.$rhythm-generous}; } -/** - * Heading modifiers - */ +// Heading modifiers .o-rhythm--generous-headings { - & > * + h1, - & > * + h2, - & > * + h3, - & > * + h4, - & > * + h5, - & > * + h6 { - margin-top: size.$rhythm-generous; - } + --rhythm-headings: #{size.$rhythm-generous}; } diff --git a/src/objects/rhythm/rhythm.stories.mdx b/src/objects/rhythm/rhythm.stories.mdx index 53632e7ad..a25404c9d 100644 --- a/src/objects/rhythm/rhythm.stories.mdx +++ b/src/objects/rhythm/rhythm.stories.mdx @@ -51,3 +51,38 @@ behave as expected. {articleDemo} + +## Inheriting Rhythm + +The vertical spacing applied by the Rhythm object only applies to direct children. In some cases, you may want elements below to inherit rhythm. This can be accomplished in two main ways. + +### Via HTML + +If you have access to the markup, you can add the `o-rhythm` class to the child element: + +```html +
+ +
+ +
+ +
+``` + +### Via Sass + +Our project includes a `spacing.vertical-rhythm` mixin that will apply the basic object rules to any selector: + +```scss +@use 'path/to/mixins/spacing'; + +.unchangeable-vendor-selector { + @include spacing.vertical-rhythm(); +} +``` + +## Custom Properties + +- `--rhythm`: Amount of vertical space between adjacent elements. Defaults to our `$rhythm-default` [size token](/docs/design-tokens-size--page#rhythm). +- `--rhythm-headings`: Extra space to precede headings that follow another element. Defaults to the value of `--rhythm`. diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss index e633ca957..c090f1c09 100644 --- a/src/vendor/wordpress/_wordpress.scss +++ b/src/vendor/wordpress/_wordpress.scss @@ -1,2 +1,3 @@ @use 'styles/core-blocks'; +@use 'styles/jetpack-blocks'; @use 'styles/utilities'; diff --git a/src/vendor/wordpress/jetpack-blocks.stories.mdx b/src/vendor/wordpress/jetpack-blocks.stories.mdx new file mode 100644 index 000000000..cc2351230 --- /dev/null +++ b/src/vendor/wordpress/jetpack-blocks.stories.mdx @@ -0,0 +1,29 @@ +import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; + + + +# Jetpack Blocks + +WordPress developer Automattic provides a [Jetpack](https://jetpack.com/) plugin that includes additional blocks. We support a selection of these. + +## Markdown Block + +The markdown block applies vertical rhythm between its children. If contained within a [Rhythm object](/docs/objects-rhythm--default-story), the markdown block will inherit the same spacing. For example, if the Rhythm object uses the `o-rhythm--generous` modifier, the markdown block will inherit the generous spacing. + +See also: [Markdown Block documentation](https://jetpack.com/support/markdown/) + + + + {`
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ex + enim. Nunc efficitur scelerisque dolor et sollicitudin. +

+

+ Donec finibus lorem elit, eu consectetur quam pellentesque sed. + Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. +

+
`} + + diff --git a/src/vendor/wordpress/styles/_jetpack-blocks.scss b/src/vendor/wordpress/styles/_jetpack-blocks.scss new file mode 100644 index 000000000..94513cbe7 --- /dev/null +++ b/src/vendor/wordpress/styles/_jetpack-blocks.scss @@ -0,0 +1,5 @@ +@use '../../../mixins/spacing'; + +.wp-block-jetpack-markdown { + @include spacing.vertical-rhythm(); +}