fix (browser compatibility): add has polyfill for alignment :has() se…

…lector (#2814) * added has polyfill * fix: by default do not load the polyfill * changed names and added comments * rename classes, revert specificity * minor fix * update detection for Safari * change detection for Safari * Update src/block-components/alignment/index.php --------- Co-authored-by: Benjamin Intal <[email protected]> Co-authored-by: Benjamin Intal <[email protected]>
gambitph · Aug 8, 2023 · f3bb0bd · f3bb0bd
1 parent 77340bc
commit f3bb0bd
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 0 deletions.
diff --git a/.config/webpack.config.dev.js b/.config/webpack.config.dev.js
@@ -181,6 +181,7 @@ module.exports = [
 		'frontend_block_progress_bar': path.resolve( __dirname, '../src/block/progress-bar/frontend-progress-bar.js' ),
 		'frontend_block_horizontal_scroller': path.resolve( __dirname, '../src/block/horizontal-scroller/frontend-horizontal-scroller.js' ),
 		'frontend_block_tabs': path.resolve( __dirname, '../src/block/tabs/frontend-tabs.js' ),
+		'frontend_block_components_alignment_has_polyfill': path.resolve( __dirname, '../src/block-components/alignment/frontend-has-polyfill.js' ),
 	},
 
 	output: {

diff --git a/.config/webpack.config.prod.js b/.config/webpack.config.prod.js
@@ -166,6 +166,7 @@ module.exports = [
 		'frontend_block_progress_bar': path.resolve( __dirname, '../src/block/progress-bar/frontend-progress-bar.js' ),
 		'frontend_block_horizontal_scroller': path.resolve( __dirname, '../src/block/horizontal-scroller/frontend-horizontal-scroller.js' ),
 		'frontend_block_tabs': path.resolve( __dirname, '../src/block/tabs/frontend-tabs.js' ),
+		'frontend_block_components_alignment_has_polyfill': path.resolve( __dirname, '../src/block-components/alignment/frontend-has-polyfill.js' ),
 	},
 
 	output: {

diff --git a/plugin.php b/plugin.php
@@ -221,6 +221,7 @@ function stackable_deactivation_cleanup() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/block/progress-circle/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/block/horizontal-scroller/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/block/tabs/index.php' );
+require_once( plugin_dir_path( __FILE__ ) . 'src/block-components/alignment/index.php' );
 
 /**
  * Welcome screen.

diff --git a/src/block-components/alignment/frontend-has-polyfill.js b/src/block-components/alignment/frontend-has-polyfill.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready'
+
+class StackableAlignmentPolyfill {
+	init = () => {
+		const modifyCSS = () => {
+			const containers = document.querySelectorAll( '.stk-container' )
+			containers.forEach( container => {
+				const columnFlex = container.querySelector( ':scope > .stk--column-flex' )
+				if ( columnFlex ) {
+					container.classList.add( 'stk-container--has-child-column-flex-polyfill' )
+				}
+			} )
+
+			const blocks = document.querySelectorAll( ':is(.stk-block-content, .stk-inner-blocks):not(.stk--column-flex)' )
+			blocks.forEach( block => {
+				const hasMargin = block.querySelector( ':scope > .stk--block-margin-top-auto, :scope > .stk--block-margin-bottom-auto' )
+				if ( hasMargin ) {
+					block.classList.add( 'stk--height-100-polyfill' )
+				}
+			} )
+		}
+
+		modifyCSS()
+		const observerOptions = {
+			childList: true,
+			subtree: true,
+		}
+
+		const observer = new MutationObserver( modifyCSS )
+		observer.observe( document, observerOptions )
+	}
+}
+
+window.stackableAlignmentPolyfill = new StackableAlignmentPolyfill()
+domReady( window.stackableAlignmentPolyfill.init )
diff --git a/src/block-components/alignment/index.php b/src/block-components/alignment/index.php
@@ -0,0 +1,59 @@
+<?php
+/**
+ * In charge of loading the frontend polyfill for alignment :has() selector
+ * support
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! function_exists( 'stackable_load_alignment_frontend_polyfill_script' ) ) {
+	function stackable_load_alignment_frontend_polyfill_script() {
+
+		$user_agent = ! empty( $_SERVER['HTTP_USER_AGENT'] ) ? $_SERVER['HTTP_USER_AGENT'] : '';
+
+		if ( ! $user_agent ) {
+			return;
+		}
+
+		$load_polyfill = false;
+
+		// Safari <= 15.3
+		if ( stripos( $user_agent, 'Version/' ) !== false && stripos( $user_agent, 'Safari/' ) !== false ) {
+			$start = stripos( $user_agent, 'Version/' ) + 8;
+			$end = strpos( $user_agent, ' ', $start );
+			$safari_version = substr( $user_agent, $start, $end - $start );
+
+			// Convert version string to an array of parts
+			$version_parts = explode( '.', $safari_version );
+
+			if (
+				// Safari < 15
+				( isset( $version_parts[ 0 ] ) && intval( $version_parts[ 0 ] ) < 15 ) ||
+				// Safari <= 15.3
+				( isset( $version_parts[ 0 ] ) && intval( $version_parts[ 0 ] ) == 15 &&
+					(
+						( isset( $version_parts[ 1 ] ) && intval( $version_parts[ 1 ] ) <= 3 ) ||
+						! isset( $version_parts[ 1 ] )
+					)
+				)
+			) {
+				$load_polyfill = true;
+			}
+		} else if ( stripos( $user_agent, 'Firefox/' ) !== false ) {
+			$load_polyfill = true;
+		}
+
+		if ( $load_polyfill ) {
+			wp_enqueue_script(
+				'stk-frontend-alginment-has-polyfill',
+				plugins_url( 'dist/frontend_block_components_alignment_has_polyfill.js', STACKABLE_FILE ),
+				array(),
+				STACKABLE_VERSION
+			);
+		}
+	}
+	add_action( 'wp_footer', 'stackable_load_alignment_frontend_polyfill_script' );
+}
diff --git a/src/block-components/alignment/style.scss b/src/block-components/alignment/style.scss
@@ -12,3 +12,14 @@
 	display: flex;
 	flex-direction: column;
 }
+
+/**
+ * Polyfill for browsers which do not support the `:has()` selector.
+ */
+:is(.stk-block-content, .stk-inner-blocks):not(.stk--column-flex).stk--height-100-polyfill {
+	height: 100%;
+}
+.stk-container.stk-container--has-child-column-flex-polyfill {
+	display: flex;
+	flex-direction: column;
+}