diff --git a/lib/blocks.php b/lib/blocks.php index 342cd25191e689..75ffd0a6c34a42 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -41,7 +41,6 @@ function gutenberg_reregister_core_block_types() { 'table-of-contents', 'text-columns', 'verse', - 'video', 'embed', ), 'block_names' => array( @@ -120,6 +119,7 @@ function gutenberg_reregister_core_block_types() { 'tag-cloud.php' => 'core/tag-cloud', 'template-part.php' => 'core/template-part', 'term-description.php' => 'core/term-description', + 'video.php' => 'core/video', ), ), __DIR__ . '/../build/edit-widgets/blocks/' => array( diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index 95ecab25f95985..76bb4b7356adcf 100644 --- a/packages/block-library/src/video/edit.js +++ b/packages/block-library/src/video/edit.js @@ -72,6 +72,7 @@ function VideoEdit( { } }, [ poster ] ); + // TODO: Whether the video was obtained from the media library or was provided by URL, obtain the `videoWidth` and `videoHeight` of the video once its metadata has loaded and persist in the block attributes. function onSelectVideo( media ) { if ( ! media || ! media.url ) { // In this case there was an error diff --git a/packages/block-library/src/video/index.php b/packages/block-library/src/video/index.php new file mode 100644 index 00000000000000..40eee1f56dd948 --- /dev/null +++ b/packages/block-library/src/video/index.php @@ -0,0 +1,91 @@ + 0 && $metadata['height'] > 0 ) + ) { + return $content; + } + + // Locate the VIDEO tag to add the dimensions. + $p = new WP_HTML_Tag_Processor( $content ); + if ( ! $p->next_tag( array( 'tag_name' => 'VIDEO' ) ) ) { + return $content; + } + + $p->set_attribute( 'width', (string) $metadata['width'] ); + $p->set_attribute( 'height', (string) $metadata['height'] ); + + /* + * The aspect-ratio style is needed due to an issue with the CSS spec: . + * Note that a style rule using attr() like the following cannot currently be used: + * + * .wp-block-video video[width][height] { + * aspect-ratio: attr(width type()) / attr(height type()); + * } + * + * This is because this attr() is yet only implemented in Chromium: . + */ + $style = $p->get_attribute( 'style' ); + if ( ! is_string( $style ) ) { + $style = ''; + } + $aspect_ratio_style = sprintf( 'aspect-ratio: %d / %d;', $metadata['width'], $metadata['height'] ); + $p->set_attribute( 'style', $aspect_ratio_style . $style ); + + return $p->get_updated_html(); +} + +/** + * Registers the `core/video` block on server. + * + * @since 0.0.1 + */ +function register_block_core_video(): void { + register_block_type_from_metadata( + __DIR__ . '/video', + array( + 'render_callback' => 'render_block_core_video', + ) + ); +} +add_action( 'init', 'register_block_core_video' ); diff --git a/packages/block-library/src/video/style.native.scss b/packages/block-library/src/video/style.native.scss index 153e2799f36ad8..af01113b3cf8e2 100644 --- a/packages/block-library/src/video/style.native.scss +++ b/packages/block-library/src/video/style.native.scss @@ -2,6 +2,7 @@ .video { width: 100%; + height: auto; } .videoContainer { diff --git a/packages/block-library/src/video/style.scss b/packages/block-library/src/video/style.scss index 06c0dfd9cdd469..5c91d92a993a62 100644 --- a/packages/block-library/src/video/style.scss +++ b/packages/block-library/src/video/style.scss @@ -3,6 +3,7 @@ box-sizing: border-box; video { width: 100%; + height: auto; vertical-align: middle; }