Skip to content

Commit

Permalink
Merge pull request #217 from PRX/feat/106-improved-video-embeds
Browse files Browse the repository at this point in the history 
106: Improved video embeds
  • Loading branch information
@rpeterman-gp
rpeterman-gp authored May 29, 2024
2 parents 625f181 + a8cb64b commit aa5994c
Show file tree
Hide file tree
Showing 6 changed files with 417 additions and 31 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,23 @@
"ABSPATH",
"blockembed",
"dashicons",
"dataparse",
"DOCROOT",
"httponly",
"jetpack",
"Lando",
"multidev",
"multidevs",
"newspack",
"nocookie",
"pagename",
"postname",
"pullquote",
"shortcode",
"SITEURL",
"ssot",
"theworld",
"tiktok",
"uncategorized",
"untrailingslashit",
"wlwmanifest",
Expand Down
172 changes: 151 additions & 21 deletions wp-content/themes/the-world/css/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,16 @@ body {
}

.wp-block-post-content > * + * {
margin-block-start: 1.75rem !important;
margin-block-start: 1.75em !important;
}
.wp-block-post-content > * + *:not(.alignleft, .alignright) {
.wp-block-post-content > *:not(.alignleft, .alignright) {
margin-block-end: 0 !important;
}

.block-editor-block-list__layout.is-root-container > .wp-block-image img {
width: 100%;
}

.block-editor-block-list__layout.is-root-container
> .wp-block:where(.alignwide, .alignfull) {
position: relative;
Expand All @@ -33,7 +37,7 @@ body {
max-width: var(--_editor--content--width);
}
.block-editor-block-list__layout.is-root-container
> .wp-block:is(.alignleft, .alignright) {
> .wp-block:where(.alignleft, .alignright) {
float: none;
width: 100%;
max-width: calc(100% - (var(--_editor--content--gutter) * 2));
Expand All @@ -46,19 +50,109 @@ body {
text-align: left;
}

.block-editor-block-list__layout.is-root-container > .wp-block figcaption {
display: block;
.block-editor-block-list__layout.is-root-container
> .wp-block
> :where(.wp-block-embed),
.block-editor-block-list__layout.is-root-container
> .wp-block:where(.wp-block-image) {
isolation: isolate;
display: grid;
grid-template-columns:
[full-width-start] 0 [content-start] var(--_editor--embed--width, 1fr)
[content-end] 0 [full-width-end];
grid-template-rows: [content-start] 1fr [content-end];
row-gap: 0.5rem;
justify-content: space-between;
margin: 0;
}
.block-editor-block-list__layout.is-root-container
> .wp-block
> :where(.wp-block-embed):has(.wp-element-caption),
.block-editor-block-list__layout.is-root-container
> .wp-block:where(.wp-block-image):has(.wp-element-caption) {
grid-template-rows: [content-start] 1fr [content-end caption-start] min-content [caption-end];
}
.block-editor-block-list__layout.is-root-container
> .wp-block
> :where(.wp-block-embed)
> *,
.block-editor-block-list__layout.is-root-container
> .wp-block:where(.wp-block-image)
> * {
grid-column: content;
}

.block-editor-block-list__layout.is-root-container
> .wp-block:not(.alignleft, .alignright)
> :where(.wp-block-embed)::after {
--_dot--size: var(--_editor--embed--backdrop--dot--size, 2px);
--_dot--spacing: var(--_editor--embed--backdrop--dot--spacing, 32px);
--_dot--color: var(--_editor--embed--backdrop--dot--color, #e0e0e0);
--_background-color: var(
--_editor--embed--backdrop--background-color,
#fafafa
);
--_border-color: var(
--_editor--embed--backdrop--border-color,
var(--_dot--color)
);

content: "";
align-self: center;
grid-column: full-width;
grid-row: content;
height: calc(100% - 2rem);
z-index: -1;
border: 1px solid var(--_border-color);
background-color: var(--_background-color);
background-image: radial-gradient(
#e0e0e0 var(--_dot--size),
transparent var(--_dot--size)
),
radial-gradient(#e0e0e0 var(--_dot--size), transparent var(--_dot--size));
background-size: var(--_dot--spacing) var(--_dot--spacing);
background-position: 0 0,
calc(var(--_dot--spacing) / 2) calc(var(--_dot--spacing) / 2);
}
.block-editor-block-list__layout.is-root-container
> .wp-block:not(.alignfull)
> :where(.wp-block-embed)::after {
border-radius: 1ch;
}

.block-editor-block-list__layout.is-root-container
> .wp-block:where(.wp-block-embed)
:where(.wp-block-embed__wrapper),
.block-editor-block-list__layout.is-root-container
> .wp-block:where(.wp-block-image)
> :first-child {
grid-row: content;
width: 100%;
line-height: 0;
}

.block-editor-block-list__layout.is-root-container
> .wp-block:where(.wp-block-embed, .wp-block-image)
:where(.wp-element-caption) {
grid-column: full-width;
grid-row: caption;
justify-self: center;
color: var(--_editor--color--muted);
font-size: 0.9rem;
margin: 0;
padding-inline: 1ch;
}
.block-editor-block-list__layout.is-root-container
> .wp-block:is(.alignwide, .alignfull)
figcaption {
box-sizing: border-box;
> .wp-block:where(.alignwide, .alignfull)
:where(.wp-element-caption) {
max-width: var(--_editor--content--width);
margin-inline: auto;
padding-inline: var(--_editor--content--gutter);
}
.block-editor-block-list__layout.is-root-container
> .wp-block-image
> :where(.wp-element-caption) {
width: 100%;
}

.block-editor-block-list__layout.is-root-container
> :where(.wp-block-pullquote) {
Expand Down Expand Up @@ -97,22 +191,57 @@ body {
}

.block-editor-block-list__layout.is-root-container
> .wp-block-embed[data-title="Twitter"]:is(.alignwide, .alignfull):not(
.alignleft,
.alignright
) {
left: unset;
translate: unset;
width: auto;
max-width: 550px;
margin-inline: auto;
> .wp-block-embed[data-title="Twitter"]:where(.alignleft, .alignright) {
min-width: 300px;
}

.block-editor-block-list__layout.is-root-container
> .wp-block-embed[data-title="Twitter"]:not(.alignleft, .alignright) {
--_editor--embed--width: 550px;
}

.block-editor-block-list__layout.is-root-container
> .wp-block-embed[data-title="Twitter"]:not(.alignleft, .alignright)
figcaption {
padding-inline: 1rem;
}

.block-editor-block-list__layout.is-root-container
> .wp-block-embed[data-title="TikTok"] {
--_editor--embed--width: 325px;
}

.block-editor-block-list__layout.is-root-container
> .wp-block-embed[data-title="TikTok"]:where(.alignwide, .alignfull)
> .wp-block-embed:not(.components-placeholder) {
--_editor--content--gutter: 0;
}

.block-editor-block-list__layout.is-root-container
> .wp-block-embed[data-title="TikTok"]:is(.alignleft, .alignright) {
width: fit-content;
}

.block-editor-block-list__layout.is-root-container
> .wp-block-embed[data-title="Spotify"]:is(.alignwide, .alignfull) {
--_full-width: calc(100vw - var(--_editor--content--gutter));
}

.block-editor-block-list__layout.is-root-container
> .wp-block-embed:where(.wp-has-aspect-ratio.wp-embed-aspect-9-16)
> .wp-block-embed
> .wp-block-embed__wrapper {
justify-self: center;
max-width: calc(80vh * (9 / 16));
}

.block-editor-block-list__layout.is-root-container
> .wp-block-embed[data-title="YouTube"]
.wp-embed-aspect-9-16
iframe {
border-radius: 1ch;
}

.block-editor-block-list__block.wp-block-separator {
padding: 0;
}
Expand All @@ -130,18 +259,19 @@ body {

.block-editor-block-list__layout.is-root-container
> .wp-block:is(.alignleft, .alignright) {
width: 44%;
margin-block-end: 2rem !important;
margin-inline: 2rem !important;
width: 33%;
margin-block-end: 1rem !important;
}
.block-editor-block-list__layout.is-root-container
> .wp-block:is(.alignleft) {
float: left;
margin-inline-start: calc(var(--_editor--content--gutter) * -1) !important;
margin-inline-end: 2rem !important;
}
.block-editor-block-list__layout.is-root-container
> .wp-block:is(.alignright) {
float: right;
margin-inline-start: 2rem !important;
margin-inline-end: calc(var(--_editor--content--gutter) * -1) !important;
}
}
80 changes: 80 additions & 0 deletions wp-content/themes/the-world/css/embed.tiktok.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
@layer embed;

@layer embed.tiktok {
.tiktok-embed {
--_embed--tiktok--text-color: var(--embed--tiktok--text-color, inherit);
--_embed--tiktok--link-color: var(--embed--tiktok--link-color, inherit);
--_embed--tiktok--border-color: var(--embed--tiktok--border-color, #cdcdcd);
--_embed--tiktok--border-radius: var(--embed--tiktok--border-radius, 1ch);
--_embed--tiktok--background-color: var(
--embed--tiktok--background-color,
white
);
--_embed--tiktok--background-color--hover: var(
--embed--tiktok--background-color--hover,
#efefef
);

display: grid;
width: 325px;
isolation: isolate;
margin-inline: auto;
color: var(--_embed--tiktok--text-color);
font-family: system-ui, sans-serif;
font-size: 1rem;
font-weight: normal;
line-height: 1.3;
}
.tiktok-embed > a {
position: absolute;
inset: 0;
}
.tiktok-embed :where(.thumbnail) {
display: grid;
overflow: hidden;
margin: 0;
border-radius: var(--_embed--tiktok--border-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.tiktok-embed :where(.thumbnail img) {
object-fit: cover;
scale: 1.1;
}
.tiktok-embed :where(section) {
display: grid;
padding: 0.75rem;
border: 1px solid var(--_embed--tiktok--border-color);
border-radius: var(--_embed--tiktok--border-radius);
background-color: var(--_embed--tiktok--background-color);
}
.tiktok-embed:where(:hover, :focus-within) :where(section) {
background-color: var(--_embed--tiktok--background-color--hover);
}
.tiktok-embed :where(.thumbnail + section) {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.tiktok-embed :where(section > *) {
margin-block: 0;
}
.tiktok-embed :where(section > * + *) {
margin-block-start: 0.75em;
}
.tiktok-embed :where(section a) {
position: relative;
color: var(--_embed--tiktok--link-color);
text-decoration: none;
}
.tiktok-embed :where(section > a:where(:hover, :focus-within)) {
text-decoration: underline;
}
.tiktok-embed :where(section > a:where(:first-of-type)) {
font-size: 1.3em;
font-weight: 700;
}
.tiktok-embed :where(section > a:where(:last-of-type)) {
font-size: 0.8em;
}
}
Loading

0 comments on commit aa5994c

Please sign in to comment.