Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video: add spacing block supports #43365

Merged
merged 2 commits into from
Aug 21, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -842,7 +842,7 @@ Embed a video from your media library or upload a new one. ([Source](https://git

- **Name:** core/video
- **Category:** media
- **Supports:** align, anchor
- **Supports:** align, anchor, spacing (margin, padding)
- **Attributes:** autoplay, caption, controls, id, loop, muted, playsInline, poster, preload, src, tracks

<!-- END TOKEN Autogenerated - DO NOT EDIT -->
4 changes: 4 additions & 0 deletions packages/block-library/src/video/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@
"supports": {
"anchor": true,
"align": true,
"spacing": {
"margin": true,
"padding": true
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed a slight issue with padding in TwentyTwentyTwo that I think is caused by the Video block using a width: 100% rule, in that the padding winds up being outside the 100% as opposed to part of it. Here's a Video block with padding next to a Group block with padding:

image

Shall we add a box-sizing: border-box rule as in the Audio block PR (It looks like most blocks with padding have the rule added, I think, along with a comment explaining why the rule was required) #43351 (review)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for finding that. TIL

I'll add the rule and retest. 🙇

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like that did the trick. Thank you!!!!
Screen Shot 2022-08-19 at 12 30 28 pm

},
"__experimentalStyle": {
"spacing": {
"margin": "0 0 1em 0"
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/video/style.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
.wp-block-video {
// This block has customizable padding, border-box makes that more predictable.
box-sizing: border-box;
video {
width: 100%;
}
Expand Down