From 04ee2b5038d93fcebe2d9ec148bdbb11ef3e3192 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Tue, 29 Jun 2021 13:01:41 -0700 Subject: [PATCH 1/6] Use mixins and custom props for rhythm --- src/mixins/_adjacent.scss | 29 ++++++++++++++++++++ src/objects/rhythm/rhythm.scss | 48 ++++++++++++---------------------- 2 files changed, 46 insertions(+), 31 deletions(-) create mode 100644 src/mixins/_adjacent.scss diff --git a/src/mixins/_adjacent.scss b/src/mixins/_adjacent.scss new file mode 100644 index 000000000..4cead14ef --- /dev/null +++ b/src/mixins/_adjacent.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 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..8f06fd33e 100644 --- a/src/objects/rhythm/rhythm.scss +++ b/src/objects/rhythm/rhythm.scss @@ -1,45 +1,31 @@ @use "../../compiled/tokens/scss/size"; +@use "../../mixins/adjacent"; -/** - * 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 adjacent.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}; } From 6974947ff080cf36e8227bbfcd41c79cd39a0626 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Tue, 29 Jun 2021 13:09:07 -0700 Subject: [PATCH 2/6] Add Jetpack Markdown block support --- src/vendor/wordpress/_wordpress.scss | 1 + .../wordpress/jetpack-blocks.stories.mdx | 29 +++++++++++++++++++ .../wordpress/styles/_jetpack-blocks.scss | 5 ++++ 3 files changed, 35 insertions(+) create mode 100644 src/vendor/wordpress/jetpack-blocks.stories.mdx create mode 100644 src/vendor/wordpress/styles/_jetpack-blocks.scss 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..1982b36bd --- /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 + +Reenforces the containing element's rhythm. If contained within a [Rhythm object](/docs/objects-rhythm--default-story), its children will inherit the same 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..36c468f58 --- /dev/null +++ b/src/vendor/wordpress/styles/_jetpack-blocks.scss @@ -0,0 +1,5 @@ +@use '../../../mixins/adjacent'; + +.wp-block-jetpack-markdown { + @include adjacent.rhythm(); +} From 9e74e2bffe0aee18bb0209ddb02c2d7340c5c79b Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Tue, 29 Jun 2021 13:36:44 -0700 Subject: [PATCH 3/6] Improve Rhythm docs --- src/objects/rhythm/rhythm.stories.mdx | 35 +++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/objects/rhythm/rhythm.stories.mdx b/src/objects/rhythm/rhythm.stories.mdx index 53632e7ad..c85738f9a 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 an `adjacent.rhythm` mixin that will apply the basic object rules to any selector: + +```scss +@use 'path/to/mixins/adjacent'; + +.unchangeable-vendor-selector { + @include adjacent.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`. From d0323b7d5ba135a303496aa73e4f37140be1e676 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Tue, 29 Jun 2021 13:37:38 -0700 Subject: [PATCH 4/6] Add changeset --- .changeset/stupid-walls-sip.md | 5 +++++ .changeset/tender-wasps-type.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/stupid-walls-sip.md create mode 100644 .changeset/tender-wasps-type.md 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 From f33cb73ff489c2f2a40f4415fa652c7e7435595f Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Tue, 29 Jun 2021 15:41:37 -0700 Subject: [PATCH 5/6] Update src/vendor/wordpress/jetpack-blocks.stories.mdx Co-authored-by: Paul Hebert --- src/vendor/wordpress/jetpack-blocks.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vendor/wordpress/jetpack-blocks.stories.mdx b/src/vendor/wordpress/jetpack-blocks.stories.mdx index 1982b36bd..cc2351230 100644 --- a/src/vendor/wordpress/jetpack-blocks.stories.mdx +++ b/src/vendor/wordpress/jetpack-blocks.stories.mdx @@ -8,7 +8,7 @@ WordPress developer Automattic provides a [Jetpack](https://jetpack.com/) plugin ## Markdown Block -Reenforces the containing element's rhythm. If contained within a [Rhythm object](/docs/objects-rhythm--default-story), its children will inherit the same spacing. +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/) From 4c5cb8d975f329cab601fae935042ed89e04b55e Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Wed, 30 Jun 2021 09:36:39 -0700 Subject: [PATCH 6/6] Rename vertical rhythm mixin --- src/mixins/{_adjacent.scss => _spacing.scss} | 2 +- src/objects/rhythm/rhythm.scss | 4 ++-- src/objects/rhythm/rhythm.stories.mdx | 6 +++--- src/vendor/wordpress/styles/_jetpack-blocks.scss | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) rename src/mixins/{_adjacent.scss => _spacing.scss} (94%) diff --git a/src/mixins/_adjacent.scss b/src/mixins/_spacing.scss similarity index 94% rename from src/mixins/_adjacent.scss rename to src/mixins/_spacing.scss index 4cead14ef..effb506b8 100644 --- a/src/mixins/_adjacent.scss +++ b/src/mixins/_spacing.scss @@ -7,7 +7,7 @@ /// complicate alignment of adjacent columns). /// @link https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/ /// @param {Number} $space - The default space between. -@mixin rhythm($space: size.$rhythm-default) { +@mixin vertical-rhythm($space: size.$rhythm-default) { & > * + * { margin-top: $space; // Allow space to be overridden using custom properties diff --git a/src/objects/rhythm/rhythm.scss b/src/objects/rhythm/rhythm.scss index 8f06fd33e..a57053af6 100644 --- a/src/objects/rhythm/rhythm.scss +++ b/src/objects/rhythm/rhythm.scss @@ -1,5 +1,5 @@ @use "../../compiled/tokens/scss/size"; -@use "../../mixins/adjacent"; +@use "../../mixins/spacing"; :root { --rhythm: #{size.$rhythm-default}; @@ -7,7 +7,7 @@ } .o-rhythm { - @include adjacent.rhythm(size.$rhythm-default); + @include spacing.vertical-rhythm(size.$rhythm-default); } // General spacing modifiers diff --git a/src/objects/rhythm/rhythm.stories.mdx b/src/objects/rhythm/rhythm.stories.mdx index c85738f9a..a25404c9d 100644 --- a/src/objects/rhythm/rhythm.stories.mdx +++ b/src/objects/rhythm/rhythm.stories.mdx @@ -72,13 +72,13 @@ If you have access to the markup, you can add the `o-rhythm` class to the child ### Via Sass -Our project includes an `adjacent.rhythm` mixin that will apply the basic object rules to any selector: +Our project includes a `spacing.vertical-rhythm` mixin that will apply the basic object rules to any selector: ```scss -@use 'path/to/mixins/adjacent'; +@use 'path/to/mixins/spacing'; .unchangeable-vendor-selector { - @include adjacent.rhythm(); + @include spacing.vertical-rhythm(); } ``` diff --git a/src/vendor/wordpress/styles/_jetpack-blocks.scss b/src/vendor/wordpress/styles/_jetpack-blocks.scss index 36c468f58..94513cbe7 100644 --- a/src/vendor/wordpress/styles/_jetpack-blocks.scss +++ b/src/vendor/wordpress/styles/_jetpack-blocks.scss @@ -1,5 +1,5 @@ -@use '../../../mixins/adjacent'; +@use '../../../mixins/spacing'; .wp-block-jetpack-markdown { - @include adjacent.rhythm(); + @include spacing.vertical-rhythm(); }