Skip to content

Commit 1c2d229

Browse files
tylerstickatylersticka
authored
Add styles for details and .wp-block-details (#2199)
* Add details/summary styles * Add support for wp-block-details
1 parent 110fe44 commit 1c2d229

File tree

7 files changed

+137
-0
lines changed

7 files changed

+137
-0
lines changed

‎.changeset/honest-paws-hug.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@cloudfour/patterns': minor
3+
---
4+
5+
Add styles for WordPress core "Details" block.

‎.changeset/violet-grapes-teach.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@cloudfour/patterns': minor
3+
---
4+
5+
Add default styles for `details` element.

‎src/base/_defaults.scss‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
@use 'sass:math';
22
@use '../compiled/tokens/scss/color';
3+
@use '../compiled/tokens/scss/ease';
4+
@use '../compiled/tokens/scss/font-weight';
5+
@use '../compiled/tokens/scss/line-height';
36
@use '../compiled/tokens/scss/size';
7+
@use '../compiled/tokens/scss/transition';
48
@use '../mixins/border-radius';
59
@use '../mixins/emdash';
610
@use '../mixins/ms';
@@ -258,6 +262,80 @@ blockquote > footer > cite {
258262
}
259263
}
260264

265+
/// Details/Summary
266+
///
267+
/// 1. Apply vertical rhythm between child elements, similar to `blockquote`
268+
269+
details {
270+
@include spacing.vertical-rhythm; // 1
271+
272+
/// 1. Offset the summary text a bit from its contents
273+
/// 2. Use the same interaction affordance as buttons
274+
/// 3. Set up our custom marker. Because Safari for `::marker` is poor, we
275+
/// have to use some hackery instead.
276+
/// 4. Apply padding that is consistent with lists.
277+
///
278+
> summary {
279+
color: var(--theme-color-text-emphasis); // 1
280+
cursor: pointer; // 2
281+
font-weight: font-weight.$medium;
282+
list-style: none; // 3
283+
padding-inline-start: size.$spacing-type-block-indent; // 4
284+
position: relative; // 3
285+
286+
/// Safari 16.6 demands more than `list-style: none`
287+
&::-webkit-details-marker {
288+
display: none;
289+
}
290+
}
291+
292+
/// Icon affordance for summary. We use a pseudo element so we can rotate it
293+
/// without an additional asset.
294+
///
295+
/// 1. Align nicely with adjacent text, using the default `line-height` as a
296+
/// fallback when line-height units aren't supported.
297+
/// 2. Offset just a bit visually so the pointer aligns nicely with the
298+
/// content below. We use `translate` instead of `transform` so we can
299+
/// modify the rotation without repeating this style.
300+
> summary::before {
301+
background-position: center;
302+
background-repeat: no-repeat;
303+
background-size: contain;
304+
block-size: line-height.$loose * 1em; // 1
305+
block-size: 1lh; // 1
306+
content: '';
307+
inline-size: 1em;
308+
inset-inline-start: 0;
309+
position: absolute;
310+
translate: -33% 0; // 2
311+
312+
// Vary the icon color based on the theme.
313+
@include theme.styles {
314+
background-image: svg-load(
315+
'icons/caret-right.svg',
316+
fill=color.$text-dark
317+
);
318+
}
319+
320+
@include theme.styles(dark) {
321+
background-image: svg-load(
322+
'icons/caret-right.svg',
323+
fill=color.$text-light-emphasis
324+
);
325+
}
326+
327+
// Animate the icon rotation if the user has no reduced motion preference.
328+
@media (prefers-reduced-motion: no-preference) {
329+
transition: rotate transition.$immediate ease.$out;
330+
}
331+
}
332+
333+
// Rotate the icon when the details element is open.
334+
&[open] > summary::before {
335+
rotate: 90deg;
336+
}
337+
}
338+
261339
/**
262340
* Apply some sensible defaults to tables
263341
*/

‎src/design/defaults.stories.mdx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,3 +126,15 @@ To add space between the `hr` and adjacent elements, consider wrapping the secti
126126
<p>Shifting our focus to something else entirely…</p>`}
127127
</Story>
128128
</Canvas>
129+
130+
## Details/Summary
131+
132+
<Canvas>
133+
<Story name="Details/Summary">
134+
{`<details open>
135+
<summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</summary>
136+
<p>Mauris imperdiet est lectus, porttitor lobortis magna bibendum mattis.</p>
137+
<p>Nullam feugiat ornare lorem id sollicitudin. </p>
138+
</details>`}
139+
</Story>
140+
</Canvas>

‎src/vendor/wordpress/core-blocks.stories.mdx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
22
import blockCodeDemo from './demo/code.twig';
3+
import blockDetailsDemo from './demo/details.twig';
34
import blockEmbedSpeakerDeckDemo from './demo/embed/speakerdeck.twig';
45
import blockEmbedYouTubeDemo from './demo/embed/youtube.twig';
56
import blockImageDemo from './demo/image.twig';
@@ -262,6 +263,27 @@ The text overlay inside the cover block its own `div` wrapper with a class of
262263
</Story>
263264
</Canvas>
264265

266+
## Details
267+
268+
A simple wrapper for the HTML `details` element.
269+
270+
<Canvas>
271+
<Story
272+
name="Details"
273+
parameters={{ layout: 'fullscreen' }}
274+
argTypes={{
275+
open: {
276+
control: { type: 'boolean' },
277+
},
278+
background_color: {
279+
control: { type: 'text' },
280+
},
281+
}}
282+
>
283+
{(args) => blockDetailsDemo(args)}
284+
</Story>
285+
</Canvas>
286+
265287
## Embed
266288

267289
The embed block wraps any embedded content in a `figure` element with class

‎src/vendor/wordpress/demo/details.twig‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div class="o-container o-container--pad o-container--prose">
2+
<div class="o-container__content o-rhythm">
3+
<p>This content precedes the details block.</p>
4+
<details class="wp-block-details
5+
{%- if background_color %} has-{{background_color}}-background-color has-background{% endif %}"
6+
{%- if open %} open{% endif %}>
7+
<summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</summary>
8+
<p>Mauris imperdiet est lectus, porttitor lobortis magna bibendum mattis. Nullam feugiat ornare lorem id sollicitudin. </p>
9+
<p>Vestibulum non tellus auctor, consectetur dui tincidunt, congue nisl. Morbi vehicula, ex et interdum pulvinar, turpis turpis gravida ligula, a imperdiet risus ipsum a risus.</p>
10+
<p>Sed ante dolor, sollicitudin ut dictum in, convallis vitae justo. Phasellus pellentesque dui leo, tempus suscipit orci hendrerit non. Duis ante purus, cursus non enim sed, eleifend luctus sapien. Sed est elit, fringilla eget placerat aliquet, imperdiet nec lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
11+
</details>
12+
<p>This content follows the details block.</p>
13+
</div>
14+
</div>

‎src/vendor/wordpress/styles/_utilities.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
/// 2. …but if the alignment is not center, we use fluid inline padding instead
4949
/// so that the inner content will align with its siblings.
5050
p,
51+
.wp-block-details,
5152
.wp-block-group,
5253
.wp-block-media-text,
5354
.wp-block-quote {

0 commit comments

Comments
 (0)