Skip to content

Commit 833b7e3

Browse files
tylerstickatylersticka
authored
Add styles for WordPress embed block (#2149)
1 parent 966f898 commit 833b7e3

File tree

5 files changed

+163
-35
lines changed

5 files changed

+163
-35
lines changed

‎.changeset/moody-candles-beg.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 in support of the WordPress embed block

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

Lines changed: 63 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,38 @@
11
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
22
import blockImageDemo from './demo/image.twig';
33
import blockCodeDemo from './demo/code.twig';
4+
import blockEmbedSpeakerDeckDemo from './demo/embed/speakerdeck.twig';
5+
import blockEmbedYouTubeDemo from './demo/embed/youtube.twig';
46
import blockGroupDemo from './demo/group.twig';
57
import blockTableDemo from './demo/table.twig';
8+
const blockEmbedDemoArgTypes = {
9+
alignment: {
10+
options: {
11+
None: '',
12+
Left: 'alignleft',
13+
Center: 'aligncenter',
14+
Right: 'alignright',
15+
Full: 'alignfull',
16+
Wide: 'alignwide',
17+
},
18+
control: { type: 'select' },
19+
},
20+
ratio: {
21+
options: {
22+
'21:9': '21-9',
23+
'18:9': '18-9',
24+
'16:9': '16-9',
25+
'4:3': '4-3',
26+
'1:1': '1-1',
27+
'9:16': '9-16',
28+
'1:2': '1-2',
29+
},
30+
control: { type: 'select' },
31+
},
32+
caption: {
33+
control: { type: 'text' },
34+
},
35+
};
636

737
<Meta title="Vendor/WordPress/Core Blocks" />
838

@@ -204,39 +234,35 @@ content and adding `is-type-embedType-embed`, `wp-block-embed-embedType` and
204234
Adding a caption in the editor includes a `figcaption` element before the closing
205235
`figure` tag.
206236

207-
<Canvas>
208-
<Story name="Embed">
209-
{`<figure
210-
class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-wp-themes-com"
211-
>
212-
<div class="wp-block-embed__wrapper">
213-
<blockquote
214-
class="wp-embedded-content"
215-
data-secret="AbCd1234"
216-
style="display: none;"
217-
>
218-
<a href="https://wp-themes.com/twentytwenty/?p=36"
219-
>Elements</a
220-
>
221-
</blockquote>
222-
<iframe
223-
title="Elements — wp-themes.com"
224-
class="wp-embedded-content"
225-
sandbox="allow-scripts"
226-
security="restricted"
227-
src="https://wp-themes.com/twentytwenty/?p=36/embed/#?secret=AbCd1234"
228-
data-secret="AbCd1234"
229-
width="580"
230-
height="257"
231-
frameborder="0"
232-
marginwidth="0"
233-
marginheight="0"
234-
scrolling="no"
235-
data-origwidth="580"
236-
data-origheight="327"
237-
></iframe>
238-
</div>
239-
</figure>`}
237+
Video embeds will attempt to fill the inline margins of the containing element
238+
by default. This can be overridden by selecting "center" alignment.
239+
240+
<Canvas isColumn>
241+
<Story
242+
name="Embed (YouTube)"
243+
parameters={{ layout: 'fullscreen' }}
244+
argTypes={blockEmbedDemoArgTypes}
245+
args={{
246+
alignment: '',
247+
ratio: '16-9',
248+
caption:
249+
'Jason Grigsby’s talk, “Imagining a Fluid Future for Design Tools”',
250+
}}
251+
>
252+
{(args) => blockEmbedYouTubeDemo(args)}
253+
</Story>
254+
<Story
255+
name="Embed (Speaker Deck)"
256+
parameters={{ layout: 'fullscreen' }}
257+
argTypes={blockEmbedDemoArgTypes}
258+
args={{
259+
alignment: '',
260+
ratio: '16-9',
261+
caption:
262+
'Slides for Jason Grigsby’s talk, “Imagining a Fluid Future for Design Tools”',
263+
}}
264+
>
265+
{(args) => blockEmbedSpeakerDeckDemo(args)}
240266
</Story>
241267
</Canvas>
242268

@@ -398,18 +424,20 @@ closing wrapper tag.
398424
Full: 'alignfull',
399425
Wide: 'alignwide',
400426
},
401-
defaultValue: '',
402427
control: { type: 'select' },
403428
},
404429
style: {
405430
options: {
406431
None: 'is-style-default',
407432
Outlined: 'is-style-outlined',
408433
},
409-
defaultValue: 'is-style-default',
410434
control: { type: 'select' },
411435
},
412436
}}
437+
args={{
438+
alignment: '',
439+
style: 'is-style-default',
440+
}}
413441
>
414442
{(args) => blockImageDemo({ alignment: args.alignment, style: args.style })}
415443
</Story>

‎src/vendor/wordpress/demo/embed/speakerdeck.twig

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{% embed '@cloudfour/objects/container/container.twig' with {
2+
class: 'o-container--prose o-container--pad-inline u-pad-block-1',
3+
alignment: alignment,
4+
ratio: ratio,
5+
caption: caption
6+
} only %}
7+
{% block content %}
8+
<figure class="wp-block-embed is-type-rich is-provider-speakerdeck wp-block-embed-speakerdeck
9+
wp-embed-aspect-{{ratio|default('16-9')}} wp-has-aspect-ratio
10+
{% if alignment %}{{alignment}}{% endif %}">
11+
<div class="wp-block-embed__wrapper">
12+
<iframe loading="lazy" title="Imagining a Fluid Future for Design Tools" id="talk_frame_974667" class="speakerdeck-iframe" src="//speakerdeck.com/player/2082db2379d94e04a3869d64ca9653fd" width="500" height="281" style="aspect-ratio:500/281; border:0; padding:0; margin:0; background:transparent;" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen"></iframe>
13+
</div>
14+
{% if caption %}
15+
<figcaption class="wp-element-caption">{{caption}}</figcaption>
16+
{% endif %}
17+
</figure>
18+
{% endblock %}
19+
{% endembed %}

‎src/vendor/wordpress/demo/embed/youtube.twig

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{% embed '@cloudfour/objects/container/container.twig' with {
2+
class: 'o-container--prose o-container--pad-inline u-pad-block-1',
3+
alignment: alignment,
4+
ratio: ratio,
5+
caption: caption,
6+
} only %}
7+
{% block content %}
8+
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube
9+
wp-embed-aspect-{{ratio|default('16-9')}} wp-has-aspect-ratio
10+
{% if alignment %}{{alignment}}{% endif %}">
11+
<div class="wp-block-embed__wrapper">
12+
<iframe loading="lazy" title="Fluid Design Tools for a Responsive Design System World" src="https://www.youtube.com/embed/N0HeulsGVnM?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" width="500" height="281" frameborder="0"></iframe>
13+
</div>
14+
{% if caption %}
15+
<figcaption class="wp-element-caption">{{caption}}</figcaption>
16+
{% endif %}
17+
</figure>
18+
{% endblock %}
19+
{% endembed %}

‎src/vendor/wordpress/styles/_core-blocks.scss

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
@use '../../../mixins/button';
88
@use '../../../mixins/emdash';
99
@use '../../../mixins/ms';
10+
@use '../../../mixins/ratio-box';
1011
@use '../../../mixins/spacing';
1112
@use '../../../mixins/table';
1213
@use '../../../mixins/theme';
@@ -130,6 +131,62 @@ $wp-button-gap: size.$spacing-gap-button-group-default;
130131
padding-inline: ms.step(1); // restoring default padding
131132
}
132133

134+
/// Gutenberg block: Embed
135+
136+
.wp-block-embed {
137+
// If the embed type has an aspect ratio, apply the same ratio-box styles as
138+
// our embed component.
139+
&.wp-has-aspect-ratio .wp-block-embed__wrapper {
140+
@include ratio-box.enhanced-styles;
141+
}
142+
143+
/// Supporting all aspect ratios that WordPress supports at the time of
144+
/// writing.
145+
/// @see {https://github.com/WordPress/gutenberg/blob/208e3e2/packages/block-library/src/embed/constants.js}
146+
147+
&.wp-embed-aspect-21-9 .wp-block-embed__wrapper {
148+
--aspect-ratio: 21/9;
149+
}
150+
151+
&.wp-embed-aspect-18-9 .wp-block-embed__wrapper {
152+
--aspect-ratio: 2;
153+
}
154+
155+
&.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
156+
--aspect-ratio: 16/9;
157+
}
158+
159+
&.wp-embed-aspect-4-3 .wp-block-embed__wrapper {
160+
--aspect-ratio: 4/3;
161+
}
162+
163+
&.wp-embed-aspect-1-1 .wp-block-embed__wrapper {
164+
--aspect-ratio: 1;
165+
}
166+
167+
&.wp-embed-aspect-9-16 .wp-block-embed__wrapper {
168+
--aspect-ratio: 9/16;
169+
}
170+
171+
&.wp-embed-aspect-1-2 .wp-block-embed__wrapper {
172+
--aspect-ratio: 1/2;
173+
}
174+
175+
// Apply consistent margin styles to video embeds.
176+
&.is-type-video {
177+
&:not(.alignwide):not(.alignfull):not(.aligncenter) {
178+
@include spacing.fluid-margin-inline-negative;
179+
}
180+
181+
// Prevent figcaption contents from hitting the viewport edge
182+
&:not(.aligncenter) {
183+
figcaption {
184+
@include spacing.fluid-padding-inline;
185+
}
186+
}
187+
}
188+
}
189+
133190
/// Gutenberg block: Image
134191
/// Styles for images inserted via Gutenberg blocks.
135192

0 commit comments

Comments
 (0)