diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index a27de8211c824a..d219851ecc03ad 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/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
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 66ff60b691b66f..5c7bc2854cbefc 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/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';
diff --git a/packages/block-editor/src/hooks/use-dimensions-props.js b/packages/block-editor/src/hooks/use-dimensions-props.js
new file mode 100644
index 00000000000000..65c992ca61d3f3
--- /dev/null
+++ b/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,
+ };
+}
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
index d81f23a702b04e..85d7150e57d579 100644
--- a/packages/block-editor/src/index.js
+++ b/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';
diff --git a/packages/block-library/src/video/block.json b/packages/block-library/src/video/block.json
index d2dcd95365c3b5..fe445d8043e5cb 100644
--- a/packages/block-library/src/video/block.json
+++ b/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"
}
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 32221919c7ea20..3e2f2d1cb19036 100644
--- a/packages/block-library/src/video/edit.js
+++ b/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 }
>
diff --git a/packages/block-library/src/video/save.js b/packages/block-library/src/video/save.js
index 834ba3e84ac867..0221fc82970783 100644
--- a/packages/block-library/src/video/save.js
+++ b/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 (