Video block: Add aspect ratio control

[Drivingralle]

What problem does this address?

By adding a portrait video natively within a video block it can happen that the video gets very big and leads to very ugly layouts. Fixing the aspect ratio makes layouts stable and predictable.

What is your proposed solution?

Port the size controls from image block to videos.

[up1512001]

@Drivingralle @jasmussen raised PR for this, can you please review 🙇‍♂
#66946

[t-hamano]

In order to move this issue forward, I would like to summarize my current understanding and opinions.

Two PRs have been filed for this issue:

• feature: added aspect ration & scale option to video block #66946:
  • Add aspectRatio and scale as block attributes via the DimensionsTool component.
  • Related to this PR, #67044 has also been submitted to refactor the inspector control into a ToolsPanel component, since the DimensionsTool component needs to be used inside a ToolsPanel component.
• Video: Add aspectRatio block support and utilties #67047:
  • Adds dimensions.aspectRatio block support. This support does not yet have a scale(object-fit) option, and applies object-fit:cover to the video element.

I think there are two points that need to be discussed here:

• In this block, should it be possible to change scale(object:fit) in addition to aspectRatio?
• Do we need to add Scale as a block support? My understanding is that the Scale option should not be part of aspectRatio, but a separate block support. There are cases where aspectRatio is required, but scale support is not. In fact, the Cover block supports aspectRatio, but the child is composed of inner blocks, so scale support should not be applicable.

cc @aaronrobertshaw @ramonjd @up1512001

[ramonjd]

I think some sort of aspect ratio control would be useful for videos, especially for folks who want to preserve the aspect ratio of the video across devices without quality degradation.

Improving tools for video content can only be a good thing in my opinion.

I'm not sure exactly what the right way to implement would be, but off the top of my head I think a modern content management system should be able to:

• offer common aspect ratios as presets (e.g., 16:9, 4:3, 1:1, 21:9)
• allow custom aspect ratios using width-to-height inputs (e.g., 3:2)
• aspect ratios should adapt to different screen sizes (responsive). Here's where object-fit could come in handy
• commonsense fallbacks, e.g., centering the video with letterboxing
• a bonus would be to automatically detect the video's native aspect ratio from metadata and apply default settings

[aaronrobertshaw]

I don't think there's any argument that aspect ratio support shouldn't be added to the Video block. The question of approach boils down to the desired use cases and priority.

@up1512001 noted on his PR a desire for control over object-fit, at least more options than simply object-fit: cover. I agree that support for aspect ratio does not mean the block would also blindly support scale options, so a separate block support would be preferred.

Given the expressed desire for scale options on the Video block alongside aspect ratio control, I think it deserves to be considered fully, as an independent block support or not.

I'm not familiar with the desired use case for #66946 but it doesn't take much to come up with one. Perhaps a theme wants to have a grid of video blocks on a page, with all those blocks represented in the same aspect ratio. The videos to be displayed in those blocks could be in different orientations etc. and the theme author doesn't want to say clip a portrait video due to object-fit: cover but still wants a consistent aspect ratio for the blocks within the grid 🤷

My view is our options haven't really changed during the discussion:

1. If we're going to take a while to settle on the ideal block support implementation, we could proceed with the ad hoc solution from the original PR if it is done in a way to be forward compatible with the block supports
2. Land Video: Add aspectRatio block support and utilties #67047. Either as a temporary first step to addressing the intent of the original PR, or because there's been a decision that object-fit support is a "won't do".
3. Decide between either an object-fit block support or ad hoc control if it is only useful on Video block. Then implement that alongside adopting Video: Add aspectRatio block support and utilties #67047.

So to me the only real questions are;

• Do we want object-fit options or not?
• If so, should we deliver them at the same time as the aspect ratio support or incrementally?

I don't have strong opinions other than to make sure we are supporting how contributors and extenders wish to leverage core blocks.

[ramonjd]

Apologies, I didn't read up on the context and answered pretty generically.

Decide between either an object-fit block support or ad hoc control if it is only useful on Video block.

object-fit might be handy for making media responsive in grid layouts. Are there downsides to constraining it to the video block, and deciding later? Deprecation nightmares, perhaps?

Did folks add text columns only for the columns block? I'm fishing for precedents 😄

If so, should we deliver them at the same time as the aspect ratio support or incrementally?

I'd vote incrementally. Which is more useful to the user is all I'd ask.

[aaronrobertshaw]

Did folks add text columns only for the columns block?

There were plans to include it for Post Excerpt and Paragraph blocks. It was also something extenders had designs on for third party blocks. So it was supposed to be more than a single-block block support. The adoption there though stalled as priorities shifted.

If you're looking for a precedent for a block support that has no, or only planned, adoption in core blocks you found it 😅