From 789d746df71a567b4f967212c4cc1f6611d1976a Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Thu, 14 Nov 2024 23:30:13 +0900 Subject: [PATCH] Video: Add aspectRatio block support and utilties --- docs/reference-guides/core-blocks.md | 2 +- packages/block-editor/src/hooks/index.js | 1 + .../src/hooks/use-dimensions-props.js | 31 +++++++++++++++++++ packages/block-editor/src/index.js | 1 + packages/block-library/src/video/block.json | 7 +++++ packages/block-library/src/video/edit.js | 5 +++ packages/block-library/src/video/save.js | 6 ++++ packages/block-library/src/video/style.scss | 1 + 8 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 packages/block-editor/src/hooks/use-dimensions-props.js 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 (
{ 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 } > diff --git a/packages/block-library/src/video/style.scss b/packages/block-library/src/video/style.scss index 06c0dfd9cdd469..98bc89e90a678e 100644 --- a/packages/block-library/src/video/style.scss +++ b/packages/block-library/src/video/style.scss @@ -4,6 +4,7 @@ video { width: 100%; vertical-align: middle; + object-fit: cover; } @supports (position: sticky) {