feature: added aspect ration & scale option to video block

[up1512001]

What?

Added Aspect ratio & Scale controls to video block.

Why?

Closes #66933
Closes #60911

How?

• using existing DimensionsTool added aspect ratio & scale control to video block.

Testing Instructions

1. open editor, insert video block and upload video
2. into inspector control check aspect ratio & scale controls to change video dimensions
3. save post/page and same will reflect on front end

Screenshots or screencast

Screen.Recording.2024-11-13.at.01.04.27.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: up1512001 <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: Drivingralle <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[jasmussen]

Nice, thank you, this was exactly what I was looking for yesterday. This is before:

This is after:

This one is close to landing, though there's one visual piece. This separator:

Compare here with the Image block:

In this case, the aspect ratio control is a part of the "Settings" panel. So should it should also be part of that panel, in the Video block. It's okay that it remains at the end.

[up1512001]

@jasmussen removed extra spacer from aspect ratio controls.

[jasmussen]

Is there a way we can actually make the aspect ratio control part of the settings group, rather than add this CSS to override?

[jasmussen]

I.e. instead of adding a toolspanel here, just add the DimensionsTool to the existing PanelBody right above.

[up1512001]

Initially, I attempted that; however, adding DimensionsTool within PanelBody doesn't display in the controls.🤔

[up1512001]

That's why I need to overrider top border with CSS.

[aaronrobertshaw]

The DimensionsTool is intended for use within the context of a ToolsPanel. You can see the aspect ratio, scale, and width/height controls using the ToolsPanelItem in their respective files.

The ToolsPanel component manages the context and state for the panel determining when controls should be displayed or not. Attempting to use the DimensionsTool outside of a ToolsPanel means nothing is telling the DimensionsTool to render its controls.

[jasmussen]

@WordPress/gutenberg-components I wonder if there's a different way to accomplish this. Adding the inline CSS just for this case would add CSS drift.

[t-hamano]

Thanks for the PR!

To move forward with this PR, I think we need to consider two important points:

• This feature should probably be implemented as a block support, similar to the Cover block. That would eliminate a lot of custom code. However, the aspectRatio block support doesn't include the Scale control.
• Is the Scale control necessary? To me, the video should always fill the container, i.e. object-fit:cover is expected.

cc @aaronrobertshaw @ajlende for visibility

[up1512001]

@t-hamano if we only add aspect ratio from dimentions then it is going into styles instead of settings like this.

Screen.Recording.2024-11-13.at.17.57.12.mov

Let me know is this desired place for aspect ratio controls 🙇‍♂️

[mirka]

@WordPress/gutenberg-components I wonder if there's a different way to accomplish this. Adding the inline CSS just for this case would add CSS drift.

I agree that this is a hacky use of ToolsPanel and should be avoided. Something like @t-hamano's suggestion sounds better to me.

[aaronrobertshaw]

Thanks for the ping 👍

I agree that this is a hacky use of ToolsPanel and should be avoided. Something like @t-hamano's #66946 (review) sounds better to me.

💯 Agreed.

Extending the block support to cover all the desired functionality sounds like the long-term best option. The down side is that will delay enhancing the Video block for a while.

There's a compromise in the short term though.

Recently, image resolution options were added to the Cover block and faced a similar issue. That being, the ResolutionTool was not intended for non-ToolsPanel use either.

A quick refactor of the Cover block's settings panel to be a ToolsPanel made adopting the ResolutionTool straightforward.

Both the Cover and Image blocks already do this for their settings panel, could we not adopt the same approach here?

[t-hamano]

@aaronrobertshaw Thanks for the feedback!

Both the Cover and Image blocks already do this for their settings panel, could we not adopt the same approach here?

Aspect ratio support is implemented as block support in the Cover block, and as a block attribute in the Image block. Which implementation are you referring to?

Personally, I think it might be a good idea to first explore whether it's possible with block support 🤔

[aaronrobertshaw]

Aspect ratio support is implemented as block support in the Cover block, and as a block attribute in the Image block.

I was referring to the Settings panel being a ToolsPanel in both the Cover and Image blocks already.

I'm not against exploring the block support angle. History has shown, though, that developing block supports takes additional time.

So if the block support needs to be extended to support the desired options here, do we want to block this feature until we can work through the potential kinks there? Can we not implement this interim solution in a way that can be smoothly switched over to the block support when it is ready?

I'm not very familiar with the aspect ratio block support, so these are genuine questions as I haven't had the chance to dig into code here yet.

[youknowriad]

From my perspective, aspect ratio is generic enough that it deserves to be a block support. Any block with height and width support (most of the blocks ultimately) can benefit from aspect ratio.

While I'm not against adding this adhoc if we want to ship this quickly, we should pay attention to the detail and only added in a way that can be moved later to a block support.

Also, I would say that it should be our goal to make adding style block supports as simple and consistent as possible.

[t-hamano]

I tried the following branch to see if we could apply the aspectRatio block support:

https://github.com/WordPress/gutenberg/compare/try/video-dimensions-props?expand=1

Presumably the aspectRatio style should be applied to the video element, not the figure element, i.e. skipping serialization.

It seems that the current functionality is mostly possible to implement, but I had to add a utility method (getDimensionsClassesAndStyles) to manually add inline styles and classes instead of skipping serialization, but it seems to work mostly as expected.

d4f05b992a5c6493f6e9049f000cfbd0.mp4

[up1512001]

@aaronrobertshaw I have created PR to refactor the settings panel, could you please check. 🙇‍♂️
#67044
cc: @t-hamano

[t-hamano]

@up1512001 Before considering refactoring the panel, I think we should consider whether it can be implemented as a block support. I've submitted #67047.

[t-hamano]

I left a comment here to discuss what approach would be ideal to resolve #60911.