Feat/video cover block

assets/block-extensions/block-extensions.php

@@ -0,0 +1,19 @@
+<?php
+// Enqueue block extension scripts
+function kindling_extend_core_cover_block() {
+    // Register and enqueue the block's JavaScript (extending the core block)
+    wp_register_script(
+        'kindling-video-cover-extend',
+        get_template_directory_uri() . '/assets/block-extensions/video-cover/index.js',
+        array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' ),
+        filemtime( get_template_directory() . '/assets/block-extensions/video-cover/index.js' )
+    );
+
+    // Enqueue the script in the editor
+    wp_enqueue_script( 'kindling-video-cover-extend' );
+}
+add_action( 'enqueue_block_editor_assets', 'kindling_extend_core_cover_block' );
+
+require_once get_template_directory() . '/assets/block-extensions/video-cover/index.php';
+
+?>

assets/block-extensions/video-cover/editor.scss

@@ -0,0 +1,7 @@
+.video-cover {
+  video {
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+  }
+}

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 <BlockEdit {...props} />;
+        }
+
+        return (
+            <Fragment>
+                <BlockEdit {...props} />
+                <InspectorControls>
+                    <PanelBody title={__('Video Background Settings', 'kindling')}>
+                        <TextControl
+                            label={__('Youtube Video URL', 'kindling')}
+                            value={videoUrl}
+                            onChange={(newUrl) => setAttributes({ videoUrl: newUrl })}
+                        />
+                    </PanelBody>
+                </InspectorControls>
+            </Fragment>
+        );
+    };
+}, 'withVideoCoverControls');
+
+addFilter(
+    'editor.BlockEdit',
+    'kindling/with-video-cover-controls',
+    withVideoCoverControls
+);

assets/block-extensions/video-cover/index.php

@@ -0,0 +1,74 @@
+<?php
+function kindling_register_cover_block_attributes()
+{
+  // Get the existing block type
+  $block_type = WP_Block_Type_Registry::get_instance()->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(
+              '<iframe src="%s" frameborder="0" allow="autoplay; loop; fullscreen" allowfullscreen class="wp-block-cover__video-background" style="pointer-events:none;"></iframe>',
+              esc_url($embed_url)
+          );
+
+          // Move the video element to be directly inside the wp-block-cover.
+          $block_content = preg_replace(
+              '/(<div class="wp-block-cover[^"]*">)/',
+              '$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;
+}

assets/block-extensions/video-cover/style.scss

@@ -0,0 +1,67 @@
+.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: -100%;
+  width: 300%;
+  z-index: 0;
+}
+
+.wp-block-cover__inner-container {
+  position: relative;
+  z-index: 1;
+}
+
+@media screen and (min-width: 375px) {
+  .wp-block-cover__video-background {
+    height: 260%;
+    top: -80%;
+    width: 260%;
+  }
+}
+
+@media screen and (min-width: 425px) {
+  .wp-block-cover__video-background {
+    height: 250%;
+    top: -75%;
+    width: 250%;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .wp-block-cover__video-background {
+    height: 150%;
+    left: -10%;
+    top: -25%;
+    width: 150%;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .wp-block-cover__video-background {
+    left: -25%;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .wp-block-cover__video-background {
+    height: 275%;
+    left: -88%;
+    width: 275%;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .wp-block-cover__video-background {
+    height: 350%;
+    left: -125%;
+    width: 350%;
+  }
+}

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.
  */

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;
-}
+}

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';
+@import '../block-extensions/safe-svg/style.scss';
+@import '../block-extensions/video-cover/style.scss';

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');