Video: Add aspectRatio block support and utilties

docs/reference-guides/core-blocks.md

@@ -957,7 +957,7 @@ 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)
+-	**Supports:** align, anchor, dimensions (aspectRatio), interactivity (clientNavigation), spacing (margin, padding)
 -	**Attributes:** autoplay, blob, caption, controls, id, loop, muted, playsInline, poster, preload, src, tracks
 
 <!-- END TOKEN Autogenerated - DO NOT EDIT -->

packages/block-editor/src/hooks/index.js

@@ -85,6 +85,7 @@ export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getShadowClassesAndStyles } from './use-shadow-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
+export { getDimensionsClassesAndStyles } from './use-dimensions-props';
 export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';

packages/block-editor/src/hooks/use-dimensions-props.js

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import { getInlineStyles } from './style';
+
+// This utility is intended to assist where the serialization of the Dimensions
+// block support is being skipped for a block but the dimensions related CSS
+// styles still need to be generated so they can be applied to inner elements.
+
+/**
+ * Provides the CSS class names and inline styles for a block's dimensions support
+ * attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ *
+ * @return {Object} Dimensions block support derived CSS classes & styles.
+ */
+export function getDimensionsClassesAndStyles( attributes ) {
+	const { style } = attributes;
+
+	// Collect inline styles for dimensions.
+	const dimensionsStyles = style?.dimensions || {};
+	const styleProp = getInlineStyles( { dimensions: dimensionsStyles } );
+
+	return {
+		className: dimensionsStyles.aspectRatio
+			? 'has-aspect-ratio'
+			: undefined,
+		style: styleProp,
+	};
+}

packages/block-editor/src/index.js

@@ -12,6 +12,7 @@ export {
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
 	getGapCSSValue as __experimentalGetGapCSSValue,
 	getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
+	getDimensionsClassesAndStyles as __experimentalGetDimensionsClassesAndStyles,
 	useCachedTruthy,
 	useStyleOverride,
 } from './hooks';

packages/block-library/src/video/block.json

@@ -93,10 +93,17 @@
 				"padding": false
 			}
 		},
+		"dimensions": {
+			"__experimentalSkipSerialization": true,
+			"aspectRatio": true
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}
 	},
+	"selectors": {
+		"dimensions": ".wp-block-video video"
+	},
 	"editorStyle": "wp-block-video-editor",
 	"style": "wp-block-video"
 }

packages/block-library/src/video/edit.js

@@ -24,6 +24,7 @@ import {
 	MediaUploadCheck,
 	MediaReplaceFlow,
 	useBlockProps,
+	__experimentalGetDimensionsClassesAndStyles as useDimensionsProps,
 } from '@wordpress/block-editor';
 import { useRef, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -59,6 +60,8 @@ function VideoEdit( {
 	const { id, controls, poster, src, tracks } = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
+	const dimensionsProps = useDimensionsProps( attributes );
+
 	useUploadMediaFromBlobURL( {
 		url: temporaryURL,
 		allowedTypes: ALLOWED_MEDIA_TYPES,
@@ -284,6 +287,8 @@ function VideoEdit( {
 						poster={ poster }
 						src={ src || temporaryURL }
 						ref={ videoPlayer }
+						className={ dimensionsProps.className }
+						style={ dimensionsProps.style }
 					>
 						<Tracks tracks={ tracks } />
 					</video>

packages/block-library/src/video/save.js

@@ -5,6 +5,7 @@ import {
 	RichText,
 	useBlockProps,
 	__experimentalGetElementClassName,
+	__experimentalGetDimensionsClassesAndStyles as getDimensionsClassesAndStyles,
 } from '@wordpress/block-editor';
 
 /**
@@ -25,6 +26,9 @@ export default function save( { attributes } ) {
 		playsInline,
 		tracks,
 	} = attributes;
+
+	const dimensionsProps = getDimensionsClassesAndStyles( attributes );
+
 	return (
 		<figure { ...useBlockProps.save() }>
 			{ src && (
@@ -37,6 +41,8 @@ export default function save( { attributes } ) {
 					preload={ preload !== 'metadata' ? preload : undefined }
 					src={ src }
 					playsInline={ playsInline }
+					className={ dimensionsProps.className }
+					style={ dimensionsProps.style }
 				>
 					<Tracks tracks={ tracks } />
 				</video>

packages/block-library/src/video/style.scss

@@ -4,6 +4,7 @@
 	video {
 		width: 100%;
 		vertical-align: middle;
+		object-fit: cover;
 	}
 
 	@supports (position: sticky) {