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