Merge branch 'develop' into feat/size-control-steps

Author: [email protected]

plugin.php

@@ -230,6 +230,7 @@ function is_frontend() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/dynamic-breakpoints.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/design-library/init.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/styles/block-design-system.php' );
+require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/theme-block-style-inheritance/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/global-settings.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/spacing-and-borders/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/buttons-and-icons/index.php' );

src/block/carousel/frontend-carousel.js

@@ -320,6 +320,14 @@ class _StackableCarousel {
 		this.setDotActive( slide )
 		this.currentSlide = slide
 
+		// Dispatch an event when the carousel change slide
+		this.el.dispatchEvent( new CustomEvent( 'stackable-carousel-slide-change', {
+			detail: {
+				element: this.el,
+				currentSlide: slide,
+			},
+		} ) )
+
 		try {
 			this.liveregion.textContent = this.sliderEl.dataset.labelSlideOf.replace( /%+d/, slide ).replace( /%+d/, this.maxSlides() )
 		} catch ( err ) {

src/block/columns/style.scss

@@ -15,6 +15,13 @@
 	margin-right: auto;
 }
 
+// These are styles added from the block style inheritance.
+:where(.stk-has-block-style-inheritance) {
+	.stk-block-columns > .stk-block-content {
+		--stk-column-gap: var(--stk-columns-column-gap, 0px); // For nested columns, this takes precedence.
+	}
+}
+
 // These are styles added from the global spacing and borders.
 :where(.stk-has-design-system-spacing-and-borders) {
 	.stk-block-columns > .stk-block-content {

src/block/count-up/frontend-count-up.js

@@ -9,7 +9,11 @@ import counterUp from 'counterup2'
 import domReady from '@wordpress/dom-ready'
 
 const ACTIVE = 'stk--count-up-active'
-class StackableCountUp {
+class _StackableCountUp {
+	constructor( el ) {
+		this.el = el
+	}
+
 	callback = entries => {
 		entries.forEach( entry => {
 			const el = entry.target
@@ -25,15 +29,12 @@ class StackableCountUp {
 	}
 
 	init = () => {
-		const els = document.querySelectorAll( '.stk-block-count-up__text' )
-
+		this.el.classList.remove( ACTIVE )
 		// If reduce motion is on, don't animate.
 		const reduceMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches
 		// If IntersectionObserver is not supported, just show the blocks.
 		if ( ! ( 'IntersectionObserver' in window ) || reduceMotion ) {
-			els.forEach( el => {
-				el.classList.add( ACTIVE )
-			} )
+			this.el.classList.add( ACTIVE )
 			return
 		}
 
@@ -43,8 +44,20 @@ class StackableCountUp {
 		// Don't use threshold 1 because if a small part of the text is hidden,
 		// the IO won't trigger.
 		this.io = new IntersectionObserver( this.callback, { threshold: 0.25 } ) // eslint-disable-line compat/compat
+		this.io.observe( this.el )
+	}
+}
+
+class StackableCountUp {
+	init = () => {
+		const els = document.querySelectorAll( '.stk-block-count-up__text' )
 		els.forEach( el => {
-			this.io.observe( el )
+			if ( ! el._StackableHasInitCountUp ) {
+				const countUp = new _StackableCountUp( el )
+				el.countUp = countUp
+				countUp.init()
+				el.StackableHasInitCountUp = true
+			}
 		} )
 	}
 }

src/block/tabs/frontend-tabs.js

@@ -127,6 +127,14 @@ class _StackableTabs {
 		} )
 
 		this.activeTab = tabIndex
+
+		// Dispatch an event when the tab is changed
+		this.parentEl.dispatchEvent( new CustomEvent( 'stackable-tabs-change', {
+			detail: {
+				element: this.parentEl,
+				activeTab: tabIndex,
+			},
+		} ) )
 	}
 
 	initWindowEventListeners = () => {
@@ -157,7 +165,8 @@ class StackableTabs {
 		document.querySelectorAll( '.stk-block-tabs' )
 			.forEach( el => {
 				if ( ! el._StackableHasInitTabs ) {
-					new _StackableTabs( el )
+					const tabs = new _StackableTabs( el )
+					el.tabs = tabs
 					el._StackableHasInitTabs = true
 				}
 			} )

src/compatibility/twenty-twenty-five/style.scss

@@ -0,0 +1,3 @@
+:where(.stk-has-block-style-inheritance.stk--is-twentytwentyfive-theme) :where(.stk-block-button .stk-button) {
+	border-radius: 9999px;
+}

src/dynamic-breakpoints.php

@@ -246,6 +246,7 @@ public function enqueue_adjusted_responsive_css() {
 		 */
 		public function adjust_block_styles( $block_content, $block ) {
 			if ( ! $this->has_custom_breakpoints() ) {
+				remove_filter( 'render_block', array( $this, 'adjust_block_styles' ), 11 );
 				return $block_content;
 			}
 

src/init.php

@@ -51,6 +51,11 @@ function __construct() {
 			}
 			add_action( 'enqueue_block_editor_assets', array( $this, 'register_block_editor_assets_admin' ) );
 
+			if ( is_admin() ) {
+				// Use enqueue_block_assets so it gets loaded in the editor's iframe <head> tag
+				add_action( 'enqueue_block_assets', array( $this, 'enqueue_style_in_editor' ), 50 );
+			}
+
 			add_action( 'plugins_loaded', array( $this, 'load_plugin_textdomain' ) );
 
 			add_action( 'wp_footer', array( $this, 'init_stackable_vars' ) );
@@ -125,6 +130,13 @@ public function register_frontend_assets() {
 				wp_add_inline_style( 'ugb-style-css-nodep', $inline_css );
 			}
 
+			// Register inline frontend styles for theme.json block style inheritance
+			wp_register_style( 'ugb-block-style-inheritance-nodep', false );
+			$block_style_inline_css = apply_filters( 'stackable_block_style_inheritance_inline_styles_nodep', '' );
+			if ( ! empty( $block_style_inline_css ) ) {
+				wp_add_inline_style( 'ugb-block-style-inheritance-nodep', $block_style_inline_css );
+			}
+
 			// This is needed for the translation strings in our UI.
 			if ( is_admin() ) {
 				stackable_load_js_translations();
@@ -246,6 +258,9 @@ public function load_frontend_scripts_conditionally( $block_content, $block ) {
 		public function block_enqueue_frontend_assets() {
 			$this->register_frontend_assets();
 			wp_enqueue_style( 'ugb-style-css' );
+			if ( is_frontend() ) {
+				wp_enqueue_style( 'ugb-block-style-inheritance-nodep' );
+			}
 			wp_enqueue_style( 'ugb-style-css-nodep' );
 			wp_enqueue_script( 'ugb-block-frontend-js' );
 			do_action( 'stackable_block_enqueue_frontend_assets' );
@@ -358,6 +373,12 @@ public function register_block_editor_assets() {
 			wp_localize_script( 'wp-blocks', 'stackable', $args );
 		}
 
+		// Ensure that block style inheritance styles comes after the editor block styles.
+		function enqueue_style_in_editor() {
+			wp_enqueue_style( 'ugb-block-editor-css' );
+			wp_enqueue_style( 'ugb-block-style-inheritance-nodep' );
+		}
+
 		/**
 		 * Gets the default/center and wide block widths from the theme if
 		 * possible. We need this so our "Content Width" option can be
@@ -437,6 +458,8 @@ public function add_body_class_theme_compatibility( $classes ) {
 				$classes[] = 'stk--is-twentytwentyone-theme';
 			} else if ( function_exists( 'twentytwentytwo_support' ) ) {
 				$classes[] = 'stk--is-twentytwentytwo-theme';
+			} else if ( function_exists( 'twentytwentyfive_post_format_setup' ) ) {
+				$classes[] = 'stk--is-twentytwentyfive-theme';
 			} else if ( function_exists( 'hello_elementor_setup' ) ) { // Taken from https://github.com/elementor/hello-theme/blob/master/functions.php
 				$classes[] = 'stk--is-helloelementor-theme';
 			}

src/plugins/index.js

@@ -8,6 +8,7 @@ import './layout-picker-reset'
 // import './v2-migration-popup' // Probably 1.5yrs of checking for backward compatibility is enough.
 import './save-block'
 import './editor-device-preview-class'
+import './theme-block-style-inheritance'
 import { BlockLinking } from './block-linking'
 import { BlockHoverState } from './block-hover-state'
 import { ContentAlign } from './content-align'

src/plugins/theme-block-style-inheritance/index.js

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { fetchSettings } from '~stackable/util'
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element'
+import { useSelect } from '@wordpress/data'
+import { registerPlugin } from '@wordpress/plugins'
+
+// Adds a body class for block style inheritance
+const ThemeBlockStyleInheritanceClass = () => {
+	const [ disableBlockStyleInheritance, setDisableBlockStyleInheritance ] = useState( true )
+	const editorEl = useSelect( select => {
+		return select( 'stackable/editor-dom' ).getEditorDom()
+	}, [] )
+
+	useEffect( () => {
+		fetchSettings().then( response => {
+			setDisableBlockStyleInheritance( response.stackable_disable_block_style_inheritance )
+		} )
+	}, [] )
+
+	// Update the editor class
+	useEffect( () => {
+		if ( editorEl ) {
+			// Add block style inheritance class
+			if ( ! disableBlockStyleInheritance && editorEl.classList.contains( `stk-has-block-style-inheritance` ) === false ) {
+				editorEl.classList.add( `stk-has-block-style-inheritance` )
+			}
+
+			if ( disableBlockStyleInheritance ) {
+				editorEl.classList.remove( `stk-has-block-style-inheritance` )
+			}
+
+			// At first load of the editor, the block style inheritance class is removed, so we have to re-add it.
+			const mo = onClassChange( editorEl, () => {
+				if ( ! disableBlockStyleInheritance && editorEl.classList.contains( `stk-has-block-style-inheritance` ) === false ) {
+					editorEl.classList.add( `stk-has-block-style-inheritance` )
+				}
+
+				if ( disableBlockStyleInheritance ) {
+					editorEl.classList.remove( `stk-has-block-style-inheritance` )
+				}
+			} )
+
+			return () => mo.disconnect()
+		}
+	}, [ editorEl, disableBlockStyleInheritance ] )
+
+	return null
+}
+
+registerPlugin( 'stackable-theme-block-style-inheritance-class', {
+	render: ThemeBlockStyleInheritanceClass,
+} )
+
+// Listener when a class is changed on an element.
+const onClassChange = ( node, callback ) => {
+	let lastClassString = node.classList.toString()
+
+	const mutationObserver = new MutationObserver( mutationList => {
+		for ( const item of mutationList ) {
+			if ( item.attributeName === 'class' ) {
+				const classString = node.classList.toString()
+				if ( classString !== lastClassString ) {
+					callback( mutationObserver )
+					lastClassString = classString
+					break
+				}
+			}
+	  }
+	} )
+
+	mutationObserver.observe( node, { attributes: true } )
+
+	return mutationObserver
+}