diff --git a/assets/block-extensions/block-extensions.php b/assets/block-extensions/block-extensions.php
new file mode 100644
index 0000000..7b59a92
--- /dev/null
+++ b/assets/block-extensions/block-extensions.php
@@ -0,0 +1,19 @@
+
diff --git a/assets/block-extensions/video-cover/editor.scss b/assets/block-extensions/video-cover/editor.scss
new file mode 100644
index 0000000..70eb623
--- /dev/null
+++ b/assets/block-extensions/video-cover/editor.scss
@@ -0,0 +1,7 @@
+.video-cover {
+ video {
+ height: 100%;
+ object-fit: cover;
+ width: 100%;
+ }
+}
diff --git a/assets/block-extensions/video-cover/index.js b/assets/block-extensions/video-cover/index.js
new file mode 100644
index 0000000..0fe2918
--- /dev/null
+++ b/assets/block-extensions/video-cover/index.js
@@ -0,0 +1,63 @@
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, TextControl } from '@wordpress/components';
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+// Add custom attributes to the core Cover block
+const addVideoCoverAttributes = (settings, name) => {
+ if (name !== 'core/cover') {
+ return settings;
+ }
+
+ // Extend attributes to include video URL
+ settings.attributes = {
+ ...settings.attributes,
+ videoUrl: {
+ type: 'string',
+ default: ''
+ }
+ };
+
+ return settings;
+};
+
+addFilter(
+ 'blocks.registerBlockType',
+ 'kindling/extend-cover-block',
+ addVideoCoverAttributes
+);
+
+// Add custom controls to the Inspector for the core Cover block
+const withVideoCoverControls = createHigherOrderComponent((BlockEdit) => {
+ return (props) => {
+ const { attributes, setAttributes, name } = props;
+ const { videoUrl = '' } = attributes;
+
+ if (name !== 'core/cover') {
+ return ;
+ }
+
+ return (
+
+
+
+
+ setAttributes({ videoUrl: newUrl })}
+ />
+
+
+
+ );
+ };
+}, 'withVideoCoverControls');
+
+addFilter(
+ 'editor.BlockEdit',
+ 'kindling/with-video-cover-controls',
+ withVideoCoverControls
+);
diff --git a/assets/block-extensions/video-cover/index.php b/assets/block-extensions/video-cover/index.php
new file mode 100644
index 0000000..1cbafc8
--- /dev/null
+++ b/assets/block-extensions/video-cover/index.php
@@ -0,0 +1,74 @@
+get_registered('core/cover');
+ if (! $block_type) {
+ return;
+ }
+
+ // Add the 'videoUrl' attribute if it doesn't already exist
+ if (! isset($block_type->attributes['videoUrl'])) {
+ $block_type->attributes['videoUrl'] = array(
+ 'type' => 'string',
+ 'default' => '',
+ );
+ }
+}
+add_action('init', 'kindling_register_cover_block_attributes');
+
+function kindling_modify_cover_block_output($block_content, $block) {
+ if (!is_array($block) || !isset($block['blockName'])) {
+ return $block_content;
+ }
+
+ if ($block['blockName'] !== 'core/cover') {
+ return $block_content;
+ }
+
+ $attributes = $block['attrs'] ?? [];
+
+ if (!empty($attributes['videoUrl'])) {
+ $video_url = esc_url_raw($attributes['videoUrl']);
+ $youtube_id = kindling_get_youtube_id($video_url);
+
+ if ($youtube_id) {
+ // Construct the YouTube embed URL.
+ $embed_url = 'https://www.youtube.com/embed/' . $youtube_id . '?autoplay=1&loop=1&mute=1&playlist=' . $youtube_id . '&controls=0&showinfo=0&modestbranding=1&rel=0';
+
+ // Create the iframe.
+ $video_element = sprintf(
+ '',
+ esc_url($embed_url)
+ );
+
+ // Move the video element to be directly inside the wp-block-cover.
+ $block_content = preg_replace(
+ '/(
)/',
+ '$1' . $video_element,
+ $block_content,
+ 1
+ );
+ }
+ }
+
+ return $block_content;
+}
+
+add_filter('render_block', 'kindling_modify_cover_block_output', 10, 2);
+
+
+// Helper function to extract YouTube video ID from URL
+function kindling_get_youtube_id($url)
+{
+ if (preg_match('/youtu\.be\/([^\?\/]+)/', $url, $matches)) {
+ return $matches[1];
+ } elseif (preg_match('/youtube\.com.*v=([^\&]+)/', $url, $matches)) {
+ return $matches[1];
+ } elseif (preg_match('/youtube\.com\/embed\/([^\?\/]+)/', $url, $matches)) {
+ return $matches[1];
+ } elseif (preg_match('/youtube\.com\/v\/([^\?\/]+)/', $url, $matches)) {
+ return $matches[1];
+ }
+ return false;
+}
diff --git a/assets/block-extensions/video-cover/style.scss b/assets/block-extensions/video-cover/style.scss
new file mode 100644
index 0000000..32b1846
--- /dev/null
+++ b/assets/block-extensions/video-cover/style.scss
@@ -0,0 +1,36 @@
+.wp-block-cover {
+ background-color: rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ position: relative;
+}
+
+.wp-block-cover__video-background {
+ height: 300%;
+ left: 0;
+ object-fit: cover;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 300%;
+ z-index: 0;
+}
+
+.wp-block-cover__inner-container {
+ position: relative;
+ z-index: 1;
+}
+
+@media screen and (min-width: 1441px) {
+ .wp-block-cover__video-background {
+ height: 400%;
+ width: 400%;
+ }
+}
+
+@media screen and (min-width: 2000px) {
+ .wp-block-cover__video-background {
+ height: 500%;
+ width: 500%;
+ }
+}
diff --git a/assets/scripts/editor.js b/assets/scripts/editor.js
index 1a33165..08f2390 100644
--- a/assets/scripts/editor.js
+++ b/assets/scripts/editor.js
@@ -43,6 +43,12 @@ import '../block-extensions/safe-svg';
*/
import '../block-extensions/block-toolbar/block-links';
+/**
+ * Video Cover Block Extension.
+ * Adds video URL field to the cover block.
+ */
+import '../block-extensions/video-cover';
+
/**
* Custom Theme Blocks.
*/
diff --git a/assets/styles/editor.scss b/assets/styles/editor.scss
index a2e44a0..fb8a565 100644
--- a/assets/styles/editor.scss
+++ b/assets/styles/editor.scss
@@ -26,6 +26,7 @@
@import '../block-extensions/box-shadow/style.scss';
@import '../block-extensions/mobile-site-logo/style.scss';
@import '../block-extensions/safe-svg/style.scss';
+@import '../block-extensions/video-cover/editor.scss';
/**
* Editor page title field
@@ -90,4 +91,4 @@ a.link-url {
a.acf-icon {
@apply no-underline;
-}
\ No newline at end of file
+}
diff --git a/assets/styles/front.scss b/assets/styles/front.scss
index 59c736e..c9b9922 100644
--- a/assets/styles/front.scss
+++ b/assets/styles/front.scss
@@ -25,4 +25,5 @@
@import '../block-extensions/block-toolbar/block-links/style.scss';
@import '../block-extensions/box-shadow/style.scss';
@import '../block-extensions/mobile-site-logo/style.scss';
-@import '../block-extensions/safe-svg/style.scss';
\ No newline at end of file
+@import '../block-extensions/safe-svg/style.scss';
+@import '../block-extensions/video-cover/style.scss';
diff --git a/functions.php b/functions.php
index 603a03f..1febf56 100644
--- a/functions.php
+++ b/functions.php
@@ -141,6 +141,9 @@ function kindling_editor_assets()
// Block variations.
//require_once get_theme_file_path( 'inc/register-block-variations.php' );
+//Block Extensions
+require_once get_template_directory() . '/assets/block-extensions/block-extensions.php';
+
// Block patterns.
require_once get_theme_file_path('inc/block-patterns.php');