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.

Sign up for GitHub

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

feature: added aspect ration & scale option to video block #66946

Open
wants to merge 4 commits into
base: trunk
Choose a base branch
from
+66 −3
Open

feature: added aspect ration & scale option to video block #66946

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7495736
feature: added aspect ration & scale option to video block
up1512001 Nov 12, 2024
2070ba6
update: blocks docs
up1512001 Nov 12, 2024
be4ac62
update: description & remove extra spacer from settings
up1512001 Nov 13, 2024
b5d581a
Fix: linting issue
up1512001 Nov 13, 2024
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -958,6 +958,6 @@ Embed a video from your media library or upload a new one. ([Source](https://git
- **Name:** core/video
- **Category:** media
- **Supports:** align, anchor, interactivity (clientNavigation), spacing (margin, padding)
- **Attributes:** autoplay, blob, caption, controls, id, loop, muted, playsInline, poster, preload, src, tracks
- **Attributes:** aspectRatio, autoplay, blob, caption, controls, id, loop, muted, playsInline, poster, preload, scale, src, tracks

<!-- END TOKEN Autogenerated - DO NOT EDIT -->
7 changes: 7 additions & 0 deletions packages/block-library/src/video/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,13 @@
"type": "object"
},
"default": []
},
"aspectRatio": {
"type": "string"
},
"scale": {
"type": "string",
"default": "cover"
}
},
"supports": {
Expand Down
47 changes: 45 additions & 2 deletions packages/block-library/src/video/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
PanelBody,
Spinner,
Placeholder,
__experimentalToolsPanel as ToolsPanel,
} from '@wordpress/components';
import {
BlockControls,
Expand All @@ -24,9 +25,10 @@ import {
MediaUploadCheck,
MediaReplaceFlow,
useBlockProps,
privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
import { useRef, useEffect, useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { __, sprintf, _x } from '@wordpress/i18n';
import { useInstanceId } from '@wordpress/compose';
import { useDispatch } from '@wordpress/data';
import { video as icon } from '@wordpress/icons';
Expand All @@ -41,6 +43,9 @@ import VideoCommonSettings from './edit-common-settings';
import TracksEditor from './tracks-editor';
import Tracks from './tracks';
import { Caption } from '../utils/caption';
import { unlock } from '../lock-unlock';

const { DimensionsTool } = unlock( blockEditorPrivateApis );

const ALLOWED_MEDIA_TYPES = [ 'video' ];
const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
Expand All @@ -56,7 +61,8 @@ function VideoEdit( {
const instanceId = useInstanceId( VideoEdit );
const videoPlayer = useRef();
const posterImageButton = useRef();
const { id, controls, poster, src, tracks } = attributes;
const { id, controls, poster, src, tracks, aspectRatio, scale } =
attributes;
const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );

useUploadMediaFromBlobURL( {
Expand Down Expand Up @@ -185,6 +191,19 @@ function VideoEdit( {
posterImageButton.current.focus();
}

const scaleOptions = [
{
value: 'cover',
label: _x( 'Cover', 'Scale option for dimensions control' ),
help: __( 'Video covers the space evenly.' ),
},
{
value: 'contain',
label: _x( 'Contain', 'Scale option for dimensions control' ),
help: __( 'Video is contained without distortion.' ),
},
];

const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;

return (
Expand Down Expand Up @@ -271,6 +290,24 @@ function VideoEdit( {
</div>
</MediaUploadCheck>
</PanelBody>
<ToolsPanel>
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Member Author

Choose a reason for hiding this comment

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

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

Copy link
Member Author

Choose a reason for hiding this comment

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

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

Copy link
Contributor

Choose a reason for hiding this comment

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

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.

<DimensionsTool
value={ { scale, aspectRatio } }
onChange={ ( {
scale: newScale,
aspectRatio: newAspectRatio,
} ) => {
setAttributes( {
scale: newScale,
aspectRatio: newAspectRatio,
} );
} }
defaultScale="cover"
defaultAspectRatio="auto"
scaleOptions={ scaleOptions }
tools={ [ 'aspectRatio', 'scale' ] }
/>
</ToolsPanel>
</InspectorControls>
<figure { ...blockProps }>
{ /*
Expand All @@ -284,6 +321,12 @@ function VideoEdit( {
poster={ poster }
src={ src || temporaryURL }
ref={ videoPlayer }
style={ {
aspectRatio: aspectRatio || undefined,
height: '100%',
width: '100%',
objectFit: scale,
} }
>
<Tracks tracks={ tracks } />
</video>
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/video/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,8 @@
padding: 0;
}
}

// remove top border from tools panel from video block inspector controls.
Copy link
Contributor

Choose a reason for hiding this comment

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

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

.block-editor-block-inspector__tabs:has(.editor-video-poster-control) .components-tools-panel{
border-top: none;
}
8 changes: 8 additions & 0 deletions packages/block-library/src/video/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ export default function save( { attributes } ) {
src,
playsInline,
tracks,
aspectRatio,
scale,
} = attributes;
return (
<figure { ...useBlockProps.save() }>
Expand All @@ -37,6 +39,12 @@ export default function save( { attributes } ) {
preload={ preload !== 'metadata' ? preload : undefined }
src={ src }
playsInline={ playsInline }
style={ {
aspectRatio: aspectRatio || undefined,
height: '100%',
width: '100%',
objectFit: scale,
} }
>
<Tracks tracks={ tracks } />
</video>
Expand Down
Loading