Feature/video popup migration

.eslintrc.js

@@ -59,6 +59,9 @@ const eslintConfig = {
 		IntersectionObserver: 'readable',
 		getComputedStyle: 'readable',
 		ScrollMagic: 'readable',
+		kadence_pro_video_pop: 'readable',
+		kadence_blocks_params_ico: 'readable',
+		kadence_blocks_params_fa: 'readable',
 	},
 	rules: {
 		'@wordpress/i18n-text-domain': [

includes/blocks/class-kadence-blocks-abstract-block.php

@@ -81,6 +81,7 @@ class Kadence_Blocks_Abstract_Block {
 		'identity',
 		'table',
 	];
+
 	/**
 	 * Allow us to enable merged defaults on blocks individually.
 	 * Considered setting this as a property within each block, but it's easier to see an exhaustive list here.
@@ -106,14 +107,16 @@ public function __construct() {
 	 * On init startup register the block.
 	 */
 	public function on_init() {
-		register_block_type(
-			KADENCE_BLOCKS_PATH . 'dist/blocks/' . $this->block_name . '/block.json',
-			array(
-				'render_callback' => array( $this, 'render_css' ),
-				'editor_script'   => 'kadence-blocks-' . $this->block_name,
-				'editor_style'    => 'kadence-blocks-' . $this->block_name,
-			)
-		);
+		if ( $this->should_register() ) {
+			register_block_type(
+				KADENCE_BLOCKS_PATH . 'dist/blocks/' . $this->block_name . '/block.json',
+				array(
+					'render_callback' => array( $this, 'render_css' ),
+					'editor_script'   => 'kadence-blocks-' . $this->block_name,
+					'editor_style'    => 'kadence-blocks-' . $this->block_name,
+				)
+			);
+		}
 	}
 
 	/**
@@ -122,8 +125,10 @@ public function on_init() {
 	 * @param array $block_class_array the blocks that are registered to be rendered.
 	 */
 	public function add_block_to_post_generate_css( $block_class_array ) {
-		if ( ! isset( $block_class_array[ $this->namespace . '/' . $this->block_name ] ) ) {
-			$block_class_array[ $this->namespace . '/' . $this->block_name ] = 'Kadence_Blocks_' . str_replace( ' ', '_', ucwords( str_replace( '-', ' ', $this->block_name ) ) ) . '_Block';
+		if ( $this->should_register() ) {
+			if ( ! isset( $block_class_array[ $this->namespace . '/' . $this->block_name ] ) ) {
+				$block_class_array[ $this->namespace . '/' . $this->block_name ] = 'Kadence_Blocks_' . str_replace( ' ', '_', ucwords( str_replace( '-', ' ', $this->block_name ) ) ) . '_Block';
+			}
 		}
 
 		return $block_class_array;
@@ -507,4 +512,22 @@ protected function get_cpt_default_attributes( $cpt_name, $meta_prefix ) {
 
 		return $this->default_attributes_cache[ $cache_key ];
 	}
+
+	/**
+	 * Retuurn if this block should register itself. (can override for things like blocks in two plugins)
+	 * 
+	 * @return boolean
+	 */
+	public function should_register() {
+		return true;
+	}
+
+	/**
+	 * Get the current blocks pro version. Useful for mocking in tests that rely the on KBP_VERSION constant.
+	 *
+	 * @return string|null
+	 */
+	protected function get_pro_version() {
+		return defined('KBP_VERSION') ? KBP_VERSION : null;
+	}
 }

includes/blocks/class-kadence-blocks-videopopup-block.php

@@ -0,0 +1,240 @@
+<?php
+/**
+ * Class to Build the Video Popup Block.
+ *
+ * @package Kadence Blocks
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Class to Build the Video Popup Block.
+ *
+ * @category class
+ */
+class Kadence_Blocks_Videopopup_Block extends Kadence_Blocks_Abstract_Block {
+
+	/**
+	 * Instance of this class
+	 *
+	 * @var null
+	 */
+	private static $instance = null;
+
+	/**
+	 * Block name within this namespace.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'videopopup';
+
+	/**
+	 * Block determines in scripts need to be loaded for block.
+	 *
+	 * @var string
+	 */
+	protected $has_script = true;
+
+	/**
+	 * Instance Control
+	 */
+	public static function get_instance() {
+		if ( is_null( self::$instance ) ) {
+			self::$instance = new self();
+		}
+
+		return self::$instance;
+	}
+
+	/**
+	 * Builds CSS for block.
+	 *
+	 * @param array $attributes the blocks attributes.
+	 * @param Kadence_Blocks_CSS $css the css class for blocks.
+	 * @param string $unique_id the blocks attr ID.
+	 * @param string $unique_style_id the blocks alternate ID for queries.
+	 */
+	public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
+
+		$this->enqueue_script( 'kadence-blocks-pro-glight-video-init' );
+		$this->enqueue_script( 'kadence-glightbox' );
+		$this->enqueue_style( 'kadence-glightbox' );
+
+		$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
+
+		// Render pro styles
+		if( class_exists( 'Kadence_Blocks_Pro' ) && class_exists( 'Kadence_Blocks_Pro_Video_Popup_Block' ) ) {
+			$pro_videopopup = new Kadence_Blocks_Pro_Video_Popup_Block();
+			$pro_videopopup->build_css( $attributes, $css, $unique_id, $unique_style_id );
+		}
+
+		if ( ! empty( $attributes['maxWidth'] ) ) {
+			$css->set_selector('.kadence-video-popup' . $unique_id . ' .kadence-video-popup-wrap' );
+			$css->add_property('max-width', $attributes['maxWidth'] . ( ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) . ';');
+		}
+		if ( isset( $attributes['kadenceDynamic'] ) && is_array( $attributes['kadenceDynamic'] ) ) {
+			if ( isset( $attributes['ratio'] ) && 'custom' === $attributes['ratio'] ) {
+				if ( isset( $attributes['background'] ) && is_array( $attributes['background'] ) && is_array( $attributes['background'][0] ) ) {
+					$background = $attributes['background'][0];
+					if ( ! empty( $background['imageHeight'] ) && ! empty( $background['imgWidth'] ) ) {
+						$css->set_selector( '.kadence-video-popup' . $unique_id . ' .kadence-video-popup-wrap .kadence-video-intrinsic.kadence-video-set-ratio-custom' );
+						$css->add_property( 'padding-bottom', floor( $background['imageHeight'] / $background['imgWidth'] * 100 ) . '% !important' );
+					}
+				}
+			}
+		}
+		$css->set_selector( '.kadence-video-popup' . $unique_id . ' .kadence-video-popup-wrap' );
+		if ( ! empty( $attributes['maxWidth'] ) ) {
+			$css->set_selector('.kb-section-dir-horizontal > .kt-inside-inner-col > .kadence-video-popup' . $unique_id);
+			$css->add_property('max-width', $attributes['maxWidth'] . 'px');
+			$css->add_property('width', '100%');
+		}
+
+		$css->set_selector('.kadence-video-popup' . $unique_id);
+
+		if ( isset( $attributes['padding'] ) && is_array( $attributes['padding'] ) ){
+			$padding = $attributes['padding'][0];
+			$padding_attr = array(
+				'padding'       => ( isset( $padding['desk'] ) && is_array( $padding['desk'] ) ) ? $padding['desk'] : array(),
+				'paddingTablet' => ( isset( $padding['tablet'] ) && is_array( $padding['tablet'] ) ) ? $padding['tablet'] : array(),
+				'paddingMobile' => ( isset( $padding['mobile'] ) && is_array( $padding['mobile'] ) ) ? $padding['mobile'] : array(),
+				'paddingType'   => ( ! empty( $attributes['paddingUnit'] ) ) ? $attributes['paddingUnit'] : 'px',
+			);
+
+			$css->render_measure_output( $padding_attr, 'padding', 'padding' );
+		}
+
+		if ( isset( $attributes['margin'] ) && is_array( $attributes['margin'] ) ){
+			$margin = $attributes['margin'][0];
+			$margin_attr = array(
+				'margin'       => ( isset( $margin['desk'] ) && is_array( $margin['desk'] ) ) ? $margin['desk'] : array(),
+				'marginTablet' => ( isset( $margin['tablet'] ) && is_array( $margin['tablet'] ) ) ? $margin['tablet'] : array(),
+				'marginMobile' => ( isset( $margin['mobile'] ) && is_array( $margin['mobile'] ) ) ? $margin['mobile'] : array(),
+				'marginType'   => ( ! empty( $attributes['marginUnit'] ) ) ? $attributes['marginUnit'] : 'px',
+			);
+
+			$css->render_measure_output( $margin_attr, 'margin', 'margin' );
+		}
+
+		if ( isset( $attributes['background'] ) && is_array( $attributes['background'] ) && is_array( $attributes['background'][0] ) ) {
+			$background = $attributes['background'][0];
+			if ( isset( $background['color'] ) && ! empty( $background['color'] ) ) {
+				$css->set_selector( '.kadence-video-popup' . $unique_id . ' .kadence-video-popup-wrap .kadence-video-intrinsic' );
+				$css->add_property( 'background-color', $css->render_color( $background['color'], ( isset( $background['colorOpacity'] ) ? $background['colorOpacity'] : 1 ) ) );
+			}
+		}
+
+		//popup styles
+		if ( isset( $attributes['popup'] ) && is_array( $attributes['popup'] ) && is_array( $attributes['popup'][0] ) ) {
+			$popup = $attributes['popup'][0];
+			if ( ( isset( $popup['background'] ) && ! empty( $popup['background'] ) ) || isset( $popup['backgroundOpacity'] ) && ! empty( $popup['backgroundOpacity'] ) ) {
+				$css->set_selector('.glightbox-kadence-dark.kadence-popup-' . $unique_id . ' .goverlay');
+				if ( isset( $popup['background'] ) && ! empty( $popup['background'] ) ) {
+					$css->add_property('background', $css->render_color( $popup['background'] ) );
+				}
+				if ( isset( $popup['backgroundOpacity'] ) && ! empty( $popup['backgroundOpacity'] ) ) {
+					$css->add_property('opacity', $popup['backgroundOpacity'] );
+				}
+
+				$css->set_selector( '.glightbox-container.kadence-popup-' . $unique_id . ' .gclose, .glightbox-container.kadence-popup-' . $unique_id . ' .gnext, .glightbox-container.kadence-popup-' . $unique_id . ' .gprev' );
+				if ( isset( $popup['closeBackground'] ) && ! empty( $popup['closeBackground'] ) ) {
+					$css->add_property( 'background', $css->render_color( $popup['closeBackground'] ) );
+				}
+			}
+			if ( isset( $popup['closeColor'] ) && ! empty( $popup['closeColor'] ) ) {
+				$css->set_selector( '.glightbox-container.kadence-popup-' . $unique_id . ' .gclose path, .glightbox-container.kadence-popup-' . $unique_id . ' .gnext path, .glightbox-container.kadence-popup-' . $unique_id . ' .gprev path' );
+				$css->add_property( 'fill', $css->render_color( $popup['closeColor'] ) );
+			}
+			if ( isset( $popup['maxWidth'] ) && ! empty( $popup['maxWidth'] ) ) {
+				$css->set_selector( '.glightbox-container.kadence-popup-' . $unique_id . ' .gslide-video, .glightbox-container.kadence-popup-' . $unique_id . ' .gvideo-local' );
+				$css->add_property( 'max-width', $popup['maxWidth'] . ( $popup['maxWidthUnit'] ? $popup['maxWidthUnit'] : 'px' ) . ' !important' );
+			}
+			if ( isset( $popup['maxWidthTablet'] ) && ! empty( $popup['maxWidthTablet'] ) ) {
+				$css->set_media_state( 'tablet' );
+				$css->set_selector( '.glightbox-container.kadence-popup-' . $unique_id . ' .gslide-video, .glightbox-container.kadence-popup-' . $unique_id . ' .gvideo-local' );
+				$css->add_property( 'max-width', $popup['maxWidthTablet'] . ( $popup['maxWidthUnit'] ? $popup['maxWidthUnit'] : 'px' ) . ' !important' );
+			}
+			if ( isset( $popup['maxWidthMobile'] ) && ! empty( $popup['maxWidthMobile'] ) ) {
+				$css->set_media_state( 'mobile' );
+				$css->set_selector( '.glightbox-container.kadence-popup-' . $unique_id . ' .gslide-video, .glightbox-container.kadence-popup-' . $unique_id . ' .gvideo-local' );
+				$css->add_property( 'max-width', $popup['maxWidthMobile'] . ( $popup['maxWidthUnit'] ? $popup['maxWidthUnit'] : 'px' ), 'important' );
+			}
+		}
+
+		$css->set_media_state( 'desktop' );
+
+		if( isset( $attributes['url'], $attributes['isVimeoPrivate'] ) && strpos( $attributes['url'], 'vimeo.com/') !== false && $attributes['isVimeoPrivate'] ) {
+			$css->set_selector( '.kadence-popup-' . $unique_id . ' .vimeo-video .plyr__control--overlaid, .kadence-popup-' . $unique_id . ' .vimeo-video .plyr__poster' );
+			$css->add_property( 'display', 'none !important');
+		}
+
+		return $css->css_output();
+	}
+
+	/**
+	 * Build HTML for dynamic blocks
+	 *
+	 * @param $attributes
+	 * @param $unique_id
+	 * @param $content
+	 * @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
+	 *
+	 * @return mixed
+	 */
+	public function build_html( $attributes, $unique_id, $content, $block_instance ) {
+
+		if( !empty( $attributes['url'] ) && !empty( $attributes['type'] ) && $attributes['type'] === 'iframe' ) {
+			$shorts_prefix_www = 'https://www.youtube.com/shorts/';
+			$shorts_prefix = 'https://youtube.com/shorts/';
+
+			if( substr($attributes['url'], 0, strlen($shorts_prefix_www)) === $shorts_prefix_www || substr($attributes['url'], 0, strlen($shorts_prefix)) === $shorts_prefix ) {
+				$content = str_replace( $shorts_prefix, 'https://www.youtube.com/watch?v=', $content );
+			}
+		}
+
+		return $content;
+	}
+
+	/**
+	 * Registers scripts and styles.
+	 */
+	public function register_scripts() {
+
+		// Skip calling parent because this block does not have a dedicated CSS file.
+		 parent::register_scripts();
+
+		// If in the backend, bail out.
+		if ( is_admin() ) {
+			return;
+		}
+		if ( apply_filters( 'kadence_blocks_check_if_rest', false ) && kadence_blocks_is_rest() ) {
+			return;
+		}
+
+		wp_register_style( 'kadence-glightbox', KADENCE_BLOCKS_URL . 'includes/assets/css/kb-glightbox.min.css', array(), KADENCE_BLOCKS_VERSION );
+		wp_register_script( 'kadence-glightbox', KADENCE_BLOCKS_URL . 'includes/assets/js/glightbox.min.js', array(), KADENCE_BLOCKS_VERSION, true );
+		wp_register_script( 'kadence-blocks-pro-glight-video-init', KADENCE_BLOCKS_URL . 'includes/assets/js/kb-glight-video-pop-init.min.js', array( 'kadence-glightbox' ), KADENCE_BLOCKS_VERSION, true );
+
+		$pop_video_array = array(
+			'plyr_js'          => KADENCE_BLOCKS_URL . 'includes/assets/js/plyr.min.js',
+			'plyr_css'         => KADENCE_BLOCKS_URL . 'includes/assets/css/plyr.min.css',
+		);
+		wp_localize_script( 'kadence-blocks-pro-glight-video-init', 'kadence_pro_video_pop', $pop_video_array );
+	}
+
+	/**
+	 * Returns if this block should register or not.
+	 */
+	public function should_register() {
+		//this block was moved to here from pro after this version
+		if ( $this->get_pro_version() === null || ( version_compare( $this->get_pro_version(), '2.6.0', '>' ) ) ) {
+			return true;
+		}
+		return false;
+	}
+}
+
+Kadence_Blocks_Videopopup_Block::get_instance();

includes/class-kadence-blocks-editor-assets.php

@@ -145,6 +145,12 @@ public function on_init_editor_assets() {
 			'navigation',
 			'navigation-link',
 		);
+
+		//for blocks moved from pro to free
+		if ( ! defined( 'KBP_VERSION' ) || ( defined( 'KBP_VERSION' ) && version_compare( KBP_VERSION, '2.6.0', '>' ) ) ) {
+			$blocks[] = 'videopopup';
+		}
+
 		foreach ( $blocks as $block ) {
 			$meta   = kadence_blocks_get_asset_file( sprintf( 'dist/blocks-%s', $block ) );
 			$handle = sprintf( 'kadence-blocks-%s', $block );

includes/settings/class-kadence-blocks-settings.php

@@ -1455,6 +1455,17 @@ public function blocks_array() {
 				'desc'  => __( 'Create confidence in your brand or product by showing off beautiful unique testimonials, add as a carousel or a grid.', 'kadence-blocks' ),
 			),
 		);
+
+		//for blocks moved from pro to free
+		if ( ! defined( 'KBP_VERSION' ) || ( defined( 'KBP_VERSION' ) && version_compare( KBP_VERSION, '2.6.0', '>' ) ) ) {
+			$blocks['kadence/videopopup'] = array(
+				'slug'  => 'kadence/videopopup',
+				'name'  => __( 'Video Popup', 'kadence-blocks' ),
+				'desc'  => __( 'Beautifully display a thumbnail with overlay and hover effect that links to a video popup on click. Works with local or external videos!', 'kadence-blocks' ),
+				'image' => KADENCE_BLOCKS_URL . 'includes/settings/img/block-video-pop.jpg',
+			);
+		}
+
 		return apply_filters( 'kadence_blocks_enable_disable_array', $blocks );
 	}
 	/**

kadence-blocks.php

@@ -5,7 +5,7 @@
  * Description: Advanced Page Building Blocks for Gutenberg. Create custom column layouts, backgrounds, dual buttons, icons etc.
  * Author: Kadence WP
  * Author URI: https://www.kadencewp.com
- * Version: 3.4.3
+ * Version: 3.4.4
  * Requires PHP: 7.4
  * Text Domain: kadence-blocks
  * License: GPL2+
@@ -20,7 +20,7 @@
 }
 define( 'KADENCE_BLOCKS_PATH', realpath( plugin_dir_path( __FILE__ ) ) . DIRECTORY_SEPARATOR );
 define( 'KADENCE_BLOCKS_URL', plugin_dir_url( __FILE__ ) );
-define( 'KADENCE_BLOCKS_VERSION', '3.4.3' );
+define( 'KADENCE_BLOCKS_VERSION', '3.4.4' );
 
 require_once plugin_dir_path( __FILE__ ) . 'vendor/vendor-prefixed/autoload.php';
 require_once plugin_dir_path( __FILE__ ) . 'vendor/autoload.php';
@@ -99,6 +99,7 @@ function kadence_blocks_init(): void {
 	require_once KADENCE_BLOCKS_PATH . 'includes/blocks/class-kadence-blocks-navigation-block.php';
 	require_once KADENCE_BLOCKS_PATH . 'includes/blocks/class-kadence-blocks-navigation-link-block.php';
 	require_once KADENCE_BLOCKS_PATH . 'includes/blocks/class-kadence-blocks-header-block.php';
+	require_once KADENCE_BLOCKS_PATH . 'includes/blocks/class-kadence-blocks-videopopup-block.php';
 
 	require_once KADENCE_BLOCKS_PATH . 'includes/settings/class-kadence-blocks-settings.php';
 	require_once KADENCE_BLOCKS_PATH . 'includes/class-kadence-blocks-posts-rest-api.php';

readme.txt

@@ -4,7 +4,7 @@ Tags: gutenberg, blocks, page builder, editor, gutenberg blocks
 Donate link: https://www.kadencewp.com/about-us/
 Requires at least: 6.4
 Tested up to: 6.7.1
-Stable tag: 3.4.3
+Stable tag: 3.4.4
 Requires PHP: 7.4
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -174,6 +174,10 @@ Please report security bugs found in the Kadence Blocks plugin's source code thr
 
 == Changelog ==
 
+= 3.4.4 =
+Release Date: tba
+* Add: Video Popup block, migrated from Kadence Blocks Pro.
+
 = 3.4.3 =
 Release Date: December 23rd 2024
 * Fix: Possible issue with accordion showing broken in editor.