From c69219e4b332930c936aa16f0fde9f9ef22139a2 Mon Sep 17 00:00:00 2001 From: Tim Stone Date: Mon, 14 Oct 2024 16:03:45 -0500 Subject: [PATCH 1/9] feat(blocks): Install video cover block extension --- .../block-extensions/video-cover/editor.scss | 7 ++ assets/block-extensions/video-cover/index.js | 63 +++++++++++++++ assets/block-extensions/video-cover/index.php | 78 +++++++++++++++++++ .../block-extensions/video-cover/style.scss | 55 +++++++++++++ functions.php | 15 ++++ 5 files changed, 218 insertions(+) create mode 100644 assets/block-extensions/video-cover/editor.scss create mode 100644 assets/block-extensions/video-cover/index.js create mode 100644 assets/block-extensions/video-cover/index.php create mode 100644 assets/block-extensions/video-cover/style.scss diff --git a/assets/block-extensions/video-cover/editor.scss b/assets/block-extensions/video-cover/editor.scss new file mode 100644 index 0000000..126e234 --- /dev/null +++ b/assets/block-extensions/video-cover/editor.scss @@ -0,0 +1,7 @@ +.video-cover { + video { + width: 100%; + height: 100%; + object-fit: cover; + } +} 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..086d52e --- /dev/null +++ b/assets/block-extensions/video-cover/index.php @@ -0,0 +1,78 @@ +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) +{ + // Check if this is a 'core/cover' block + if ($block['blockName'] !== 'core/cover') { + return $block_content; + } + + // Get the attributes + $attributes = $block['attrs']; + + // Check if 'videoUrl' attribute is set and not empty + if (empty($attributes['videoUrl'])) { + return $block_content; + } + + // Extract the YouTube video ID + $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'; + + // Construct the iframe element + $video_element = sprintf( + '', + esc_url($embed_url) + ); + + // Insert the video element before the closing tag of the cover block + $block_content = preg_replace( + '/<\/div>\s*$/', + $video_element . '', + $block_content, + 1 + ); + } + + return $block_content; +} + +// Hook your function into the render_block filter +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..71e6377 --- /dev/null +++ b/assets/block-extensions/video-cover/style.scss @@ -0,0 +1,55 @@ +.wp-block-cover__video-background { + width: 300%; + height: 300%; + object-fit: cover; + position: absolute; + top: -100%; + left: 0; +} + +@media screen and (min-width: 375px) { + .wp-block-cover__video-background { + top: -80%; + width: 260%; + height: 260%; + } +} + +@media screen and (min-width: 425px) { + .wp-block-cover__video-background { + top: -75%; + width: 250%; + height: 250%; + } +} + +@media screen and (min-width: 768px) { + .wp-block-cover__video-background { + top: -25%; + left: -10%; + width: 150%; + height: 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 { + left: -88%; + width: 275%; + height: 275%; + } +} + +@media screen and (min-width: 2560px) { + .wp-block-cover__video-background { + left: -125%; + width: 350%; + height: 350%; + } +} diff --git a/functions.php b/functions.php index 81fecdf..3eee8b9 100644 --- a/functions.php +++ b/functions.php @@ -125,6 +125,21 @@ function kindling_editor_assets() } add_action('enqueue_block_editor_assets', 'kindling_editor_assets'); +// 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' ); + // Helpers. require_once get_theme_file_path('inc/helpers.php'); From efd260259b533eb83c1b61d81b77548aba2725da Mon Sep 17 00:00:00 2001 From: Tim Stone Date: Mon, 14 Oct 2024 16:33:03 -0500 Subject: [PATCH 2/9] update(block): Move enqueue to block extension folder --- functions.php | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/functions.php b/functions.php index 3eee8b9..81fecdf 100644 --- a/functions.php +++ b/functions.php @@ -125,21 +125,6 @@ function kindling_editor_assets() } add_action('enqueue_block_editor_assets', 'kindling_editor_assets'); -// 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' ); - // Helpers. require_once get_theme_file_path('inc/helpers.php'); From c1be2a82abff6974c5540dbc3242d535ef648002 Mon Sep 17 00:00:00 2001 From: Tim Stone Date: Mon, 14 Oct 2024 16:33:24 -0500 Subject: [PATCH 3/9] update(block): Import the editor.js --- assets/scripts/editor.js | 6 ++++++ 1 file changed, 6 insertions(+) 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. */ From 25dab530f1daf0861918c0b8f15b302c62b5a6d9 Mon Sep 17 00:00:00 2001 From: Tim Stone Date: Mon, 14 Oct 2024 16:33:41 -0500 Subject: [PATCH 4/9] udpate(block): Add the enqueue to the block extension folder --- assets/block-extensions/block-extensions.php | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 assets/block-extensions/block-extensions.php diff --git a/assets/block-extensions/block-extensions.php b/assets/block-extensions/block-extensions.php new file mode 100644 index 0000000..3caf62b --- /dev/null +++ b/assets/block-extensions/block-extensions.php @@ -0,0 +1,16 @@ + From 48a59574551edc9e69a977df274ca6093abf415f Mon Sep 17 00:00:00 2001 From: Steve Struemph Date: Mon, 14 Oct 2024 16:51:59 -0500 Subject: [PATCH 5/9] fix(build): Update to slightly better syntax --- webpack.config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 667f655..8dd6f0f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -21,9 +21,9 @@ module.exports = { }, entry: { ...defaultConfig.entry, - front: path.resolve(process.cwd(), `${entryPath}/scripts/front.js`), - editor: path.resolve(process.cwd(), `${entryPath}/scripts/editor.js`), - blockVariations: path.resolve(process.cwd(), `${entryPath}/scripts/blockVariations.js`), + front: path.resolve(process.cwd(), `${entryPath}/scripts`, 'front.js'), + editor: path.resolve(process.cwd(), `${entryPath}/scripts`, 'editor.js'), + blockVariations: path.resolve(process.cwd(), `${entryPath}/scripts`, 'blockVariations.js'), // Define block extension entries with a specific naming convention 'block-extensions/mobile-site-logo': path.resolve(process.cwd(), `${entryPath}/block-extensions/mobile-site-logo/index.js`), }, From a8087bd783b1be4349d4856e8b1691d2bb382ee5 Mon Sep 17 00:00:00 2001 From: Steve Struemph Date: Mon, 14 Oct 2024 16:52:32 -0500 Subject: [PATCH 6/9] fix: Remove dynamic filename and path output --- webpack.config.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 8dd6f0f..861cc68 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -29,18 +29,8 @@ module.exports = { }, output: { ...defaultConfig.output, - // Dynamically set the filename and path based on the entry name - filename: (pathData) => { - const name = pathData.chunk.name; - - // Send files to the block-extensions folder if they start with 'block-extensions/' - if (name.startsWith('block-extensions/')) { - return `${name}.js`; - } - - // Default to placing in the scripts directory - return `scripts/${name}.js`; - }, + // [name] is an alias for the entry point + filename: '[name].js', path: path.resolve(process.cwd(), outputPath), }, resolve: { From 9a7711b2c5759289dc50cfd314b13955a79f31ee Mon Sep 17 00:00:00 2001 From: Steve Struemph Date: Mon, 14 Oct 2024 16:52:53 -0500 Subject: [PATCH 7/9] fix(build): Use new path to built files --- functions.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/functions.php b/functions.php index 81fecdf..81e219d 100644 --- a/functions.php +++ b/functions.php @@ -75,9 +75,9 @@ function kindling_scripts() { wp_enqueue_script( 'front', - get_theme_file_uri('build/scripts/front.js'), + get_theme_file_uri('build/front.js'), [], - filemtime(get_template_directory() . '/build/scripts/front.js') + filemtime(get_template_directory() . '/build/front.js') ); } add_action('wp_enqueue_scripts', 'kindling_scripts'); @@ -94,9 +94,9 @@ function kindling_editor_assets() // There are additional dependencies that can be added. For example `wp-data` but we want to keep this as lean as possible in the base theme. You may add more if needed in your project. wp_enqueue_script( 'editor-js', - get_theme_file_uri('build/scripts/editor.js'), + get_theme_file_uri('build/editor.js'), ['wp-blocks', 'wp-i18n', 'wp-element', 'wp-components', 'wp-editor', 'wp-dom-ready', 'wp-edit-post', 'wp-block-editor'], - filemtime(get_template_directory() . '/build/scripts/editor.js') + filemtime(get_template_directory() . '/build/editor.js') ); wp_enqueue_style( 'editor', @@ -108,9 +108,9 @@ function kindling_editor_assets() // Block Variations wp_enqueue_script( 'kindling-block-variations', - get_theme_file_uri('build/scripts/blockVariations.js'), + get_theme_file_uri('build/blockVariations.js'), array('wp-blocks', 'wp-i18n', 'wp-dom-ready'), - filemtime(get_template_directory() . '/build/scripts/blockVariations.js'), // Version for cache busting. + filemtime(get_template_directory() . '/build/blockVariations.js'), // Version for cache busting. true // In footer. ); From 622beca11a5a8e356537175e7998c04609fa4573 Mon Sep 17 00:00:00 2001 From: Tim Stone Date: Wed, 27 Nov 2024 13:24:07 -0600 Subject: [PATCH 8/9] update(blocks): Clean up coding standards --- assets/block-extensions/block-extensions.php | 3 + .../block-extensions/video-cover/editor.scss | 2 +- assets/block-extensions/video-cover/index.php | 56 +++++++++---------- .../block-extensions/video-cover/style.scss | 28 +++++++--- assets/styles/editor.scss | 3 +- assets/styles/front.scss | 3 +- functions.php | 3 + 7 files changed, 57 insertions(+), 41 deletions(-) diff --git a/assets/block-extensions/block-extensions.php b/assets/block-extensions/block-extensions.php index 3caf62b..7b59a92 100644 --- a/assets/block-extensions/block-extensions.php +++ b/assets/block-extensions/block-extensions.php @@ -13,4 +13,7 @@ function kindling_extend_core_cover_block() { 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'; + ?> diff --git a/assets/block-extensions/video-cover/editor.scss b/assets/block-extensions/video-cover/editor.scss index 126e234..70eb623 100644 --- a/assets/block-extensions/video-cover/editor.scss +++ b/assets/block-extensions/video-cover/editor.scss @@ -1,7 +1,7 @@ .video-cover { video { - width: 100%; height: 100%; object-fit: cover; + width: 100%; } } diff --git a/assets/block-extensions/video-cover/index.php b/assets/block-extensions/video-cover/index.php index 086d52e..1cbafc8 100644 --- a/assets/block-extensions/video-cover/index.php +++ b/assets/block-extensions/video-cover/index.php @@ -17,48 +17,44 @@ function kindling_register_cover_block_attributes() } add_action('init', 'kindling_register_cover_block_attributes'); -function kindling_modify_cover_block_output($block_content, $block) -{ - // Check if this is a 'core/cover' block - if ($block['blockName'] !== 'core/cover') { - return $block_content; +function kindling_modify_cover_block_output($block_content, $block) { + if (!is_array($block) || !isset($block['blockName'])) { + return $block_content; } - // Get the attributes - $attributes = $block['attrs']; - - // Check if 'videoUrl' attribute is set and not empty - if (empty($attributes['videoUrl'])) { - return $block_content; + if ($block['blockName'] !== 'core/cover') { + return $block_content; } - // Extract the YouTube video ID - $video_url = esc_url_raw($attributes['videoUrl']); - $youtube_id = kindling_get_youtube_id($video_url); + $attributes = $block['attrs'] ?? []; - 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'; + if (!empty($attributes['videoUrl'])) { + $video_url = esc_url_raw($attributes['videoUrl']); + $youtube_id = kindling_get_youtube_id($video_url); - // Construct the iframe element - $video_element = sprintf( - '', - esc_url($embed_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'; - // Insert the video element before the closing tag of the cover block - $block_content = preg_replace( - '/<\/div>\s*$/', - $video_element . '', - $block_content, - 1 - ); + // 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; } -// Hook your function into the render_block filter add_filter('render_block', 'kindling_modify_cover_block_output', 10, 2); diff --git a/assets/block-extensions/video-cover/style.scss b/assets/block-extensions/video-cover/style.scss index 71e6377..37c8560 100644 --- a/assets/block-extensions/video-cover/style.scss +++ b/assets/block-extensions/video-cover/style.scss @@ -1,34 +1,46 @@ +.wp-block-cover { + background-color: rgba(0, 0, 0, 0.5); + overflow: hidden; + position: relative; +} + .wp-block-cover__video-background { - width: 300%; height: 300%; + left: 0; object-fit: cover; position: absolute; top: -100%; - left: 0; + 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%; - height: 260%; } } @media screen and (min-width: 425px) { .wp-block-cover__video-background { + height: 250%; top: -75%; width: 250%; - height: 250%; } } @media screen and (min-width: 768px) { .wp-block-cover__video-background { - top: -25%; + height: 150%; left: -10%; + top: -25%; width: 150%; - height: 150%; } } @@ -40,16 +52,16 @@ @media screen and (min-width: 1440px) { .wp-block-cover__video-background { + height: 275%; left: -88%; width: 275%; - height: 275%; } } @media screen and (min-width: 2560px) { .wp-block-cover__video-background { + height: 350%; left: -125%; width: 350%; - height: 350%; } } 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 81e219d..7c4c099 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'); From 3b7c43c39793f04ee873f9d07688f0a0d105cb37 Mon Sep 17 00:00:00 2001 From: Tim Stone Date: Fri, 21 Feb 2025 13:12:38 -0600 Subject: [PATCH 9/9] Update(blocks): Make block DRY --- .../block-extensions/video-cover/style.scss | 49 ++++--------------- 1 file changed, 9 insertions(+), 40 deletions(-) diff --git a/assets/block-extensions/video-cover/style.scss b/assets/block-extensions/video-cover/style.scss index 37c8560..32b1846 100644 --- a/assets/block-extensions/video-cover/style.scss +++ b/assets/block-extensions/video-cover/style.scss @@ -9,7 +9,9 @@ left: 0; object-fit: cover; position: absolute; - top: -100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); width: 300%; z-index: 0; } @@ -19,49 +21,16 @@ z-index: 1; } -@media screen and (min-width: 375px) { +@media screen and (min-width: 1441px) { .wp-block-cover__video-background { - height: 260%; - top: -80%; - width: 260%; + height: 400%; + width: 400%; } } -@media screen and (min-width: 425px) { +@media screen and (min-width: 2000px) { .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%; + height: 500%; + width: 500%; } }