Merge branch 'develop' into feat/icon-library

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "stackable",
-	"version": "3.13.8",
+	"version": "3.13.10",
 	"private": true,
 	"description": "Blocks for everyone",
 	"author": "Benjamin Intal of Gambit",

plugin.php

@@ -6,7 +6,7 @@
  * Author: Gambit Technologies, Inc
  * Author URI: http://gambit.ph
  * Text Domain: stackable-ultimate-gutenberg-blocks
- * Version: 3.13.8
+ * Version: 3.13.10
  *
  * @package Stackable
  */
@@ -24,7 +24,7 @@
 
 defined( 'STACKABLE_SHOW_PRO_NOTICES' ) || define( 'STACKABLE_SHOW_PRO_NOTICES', true );
 defined( 'STACKABLE_BUILD' ) || define( 'STACKABLE_BUILD', 'free' );
-defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.13.8' );
+defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.13.10' );
 defined( 'STACKABLE_FILE' ) || define( 'STACKABLE_FILE', __FILE__ );
 defined( 'STACKABLE_I18N' ) || define( 'STACKABLE_I18N', 'stackable-ultimate-gutenberg-blocks' ); // Plugin slug.
 defined( 'STACKABLE_DESIGN_LIBRARY_URL' ) || define( 'STACKABLE_DESIGN_LIBRARY_URL', 'https://storage.googleapis.com/stackable-plugin-assets' ); // Design Library CDN URL

readme.txt

@@ -1,10 +1,10 @@
 === Stackable - Page Builder Gutenberg Blocks ===
 Contributors: bfintal, gambitph, freemius
 Tags: blocks, gutenberg, gutenberg blocks, page builder, WordPress blocks
-Requires at least: 6.3
+Requires at least: 6.4
 Tested up to: 6.6.2
 Requires PHP: 7.3
-Stable tag: 3.13.8
+Stable tag: 3.13.10
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 
@@ -295,6 +295,20 @@ Nope. Stackable only works with Gutenberg, the new WordPress editor.
 
 == Changelog ==
 
+= 3.13.10 =
+* Fixed: Compatibility with WordPress 6.7 #3336
+* Fixed: Better support for custom SVGs in the icon picker #3265
+* Fixed: Cleanup of some code related to the previous performance update #3320
+* Fixed: Accordion block: text can become unselectable #3350
+* Fixed: Save default blocks: saving can be called multiple times and can cause the browser to hang #3355
+* Fixed: Map block: prevent error when using a custom map marker #3362
+
+= 3.13.9 =
+* Fixed: Text blocks: text gradient color doesn't show for misspelled words #3305
+* Fixed: Button block: adding a button block now places the cursor inside the button ##3324
+* Fixed: Conditional display: inspector options do not re-render when changing values #3342
+* Fixed: Optimized CSS: mobile styles can overwrite tablet styles sometimes (to fix, please re-save the page) #3345
+
 = 3.13.8 =
 * Fixed: Possible editor freezing when using deprecated icon lists inside patterns #3332
 * Fixed: Timeline block: last timeline doesn't cut off in mobile view (part 2 of fix) #3292

src/block-components/column/use-column.js

@@ -10,7 +10,8 @@ export const useColumn = () => {
 	const { clientId } = useBlockEditContext()
 
 	const onChangeDesktop = widths => {
-		const { parentBlock } = select( 'stackable/block-context' ).getBlockContext( clientId )
+		const parentBlockId = select( 'core/block-editor' ).getBlockRootClientId( clientId )
+		const parentBlock = select( 'core/block-editor' ).getBlock( parentBlockId )
 		const adjacentBlocks = parentBlock?.innerBlocks || []
 
 		if ( adjacentBlocks.length ) {
@@ -36,7 +37,8 @@ export const useColumn = () => {
 			[ clientId ]: { columnWidth: width },
 		}
 
-		const { parentBlock } = select( 'stackable/block-context' ).getBlockContext( clientId )
+		const parentBlockId = select( 'core/block-editor' ).getBlockRootClientId( clientId )
+		const parentBlock = select( 'core/block-editor' ).getBlock( parentBlockId )
 		const adjacentBlocks = parentBlock?.innerBlocks || []
 
 		if ( adjacentBlocks.length ) {
@@ -63,7 +65,8 @@ export const useColumn = () => {
 			[ clientId ]: { columnWidthTablet: width },
 		}
 
-		const { parentBlock } = select( 'stackable/block-context' ).getBlockContext( clientId )
+		const parentBlockId = select( 'core/block-editor' ).getBlockRootClientId( clientId )
+		const parentBlock = select( 'core/block-editor' ).getBlock( parentBlockId )
 		const adjacentBlocks = parentBlock?.innerBlocks || []
 
 		if ( adjacentBlocks.length ) {
@@ -89,7 +92,8 @@ export const useColumn = () => {
 			[ clientId ]: { columnWidthMobile: width },
 		}
 
-		const { parentBlock } = select( 'stackable/block-context' ).getBlockContext( clientId )
+		const parentBlockId = select( 'core/block-editor' ).getBlockRootClientId( clientId )
+		const parentBlock = select( 'core/block-editor' ).getBlock( parentBlockId )
 		const adjacentBlocks = parentBlock?.innerBlocks || []
 
 		if ( adjacentBlocks.length ) {
@@ -110,7 +114,8 @@ export const useColumn = () => {
 	}
 
 	const onResetDesktop = () => {
-		const { parentBlock } = select( 'stackable/block-context' ).getBlockContext( clientId )
+		const parentBlockId = select( 'core/block-editor' ).getBlockRootClientId( clientId )
+		const parentBlock = select( 'core/block-editor' ).getBlock( parentBlockId )
 		const adjacentBlocks = parentBlock?.innerBlocks || []
 
 		if ( adjacentBlocks.length ) {
@@ -120,7 +125,8 @@ export const useColumn = () => {
 	}
 
 	const onResetTabletMobile = () => {
-		const { parentBlock } = select( 'stackable/block-context' ).getBlockContext( clientId )
+		const parentBlockId = select( 'core/block-editor' ).getBlockRootClientId( clientId )
+		const parentBlock = select( 'core/block-editor' ).getBlock( parentBlockId )
 		const adjacentBlocks = parentBlock?.innerBlocks || []
 
 		if ( adjacentBlocks.length ) {

src/block-components/columns/column-settings-button.js

@@ -54,7 +54,8 @@ export const ColumnsControl = props => {
 		}
 
 		multiClientIds.forEach( clientId => {
-			const { numInnerBlocks, innerBlocks } = select( 'stackable/block-context' ).getBlockContext( clientId )
+			const innerBlocks = select( 'core/block-editor' ).getBlock( clientId )?.innerBlocks
+			const numInnerBlocks = innerBlocks.length
 			multiInnerBlocks[ clientId ] = innerBlocks
 			multiNumInnerBlocks[ clientId ] = numInnerBlocks
 		} )

src/block-components/columns/edit.js

@@ -61,7 +61,7 @@ export const Controls = props => {
 		const multiInnerBlocks = {}
 
 		multiClientIds.forEach( clientId => {
-			const { innerBlocks } = select( 'stackable/block-context' ).getBlockContext( clientId )
+			const innerBlocks = select( 'core/block-editor' ).getBlock( clientId )?.innerBlocks
 			multiInnerBlocks[ clientId ] = innerBlocks
 		} )
 

src/block-components/image/index.js

@@ -10,14 +10,15 @@ import Image_ from './image'
 /**
  * External dependencies
  */
-import { useBlockAttributesContext, useBlockContext } from '~stackable/hooks'
+import { useBlockAttributesContext } from '~stackable/hooks'
 import { pickBy } from 'lodash'
 
 /**
  * WordPress dependencies
  */
 import { useBlockEditContext } from '@wordpress/block-editor'
 import { applyFilters } from '@wordpress/hooks'
+import { useSelect } from '@wordpress/data'
 
 export { deprecationImageOverlayOpacity } from './deprecated'
 
@@ -28,7 +29,7 @@ export const Image = props => {
 		...propsToPass
 	} = props
 
-	const { isSelected } = useBlockEditContext()
+	const { isSelected, clientId } = useBlockEditContext()
 	const attributes = useBlockAttributesContext( attributes => {
 		return {
 			imageOverlayColorType: attributes.imageOverlayColorType,
@@ -64,7 +65,13 @@ export const Image = props => {
 			figcaptionShow: attributes.figcaptionShow,
 		}
 	} )
-	const { parentBlock } = useBlockContext()
+	const { parentBlock } = useSelect( select => {
+		const { getBlockRootClientId, getBlock } = select( 'core/block-editor' )
+		const parentClientId = getBlockRootClientId( clientId )
+		return {
+			parentBlock: getBlock( parentClientId ),
+		}
+	}, [ clientId ] )
 
 	const { setImage } = useImage()
 

src/block-components/linking/index.js

@@ -1,13 +1,14 @@
 import classnames from 'classnames'
 import { i18n } from 'stackable'
-import { useBlockContext, useLinking } from '~stackable/hooks'
+import { useLinking } from '~stackable/hooks'
 import { useClosestLinkableBlock } from '~stackable/plugins/block-linking'
 import { Tooltip } from '~stackable/components'
 
 import { Dashicon } from '@wordpress/components'
 import { useBlockEditContext } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
 import { getPlugin } from '@wordpress/plugins'
+import { useSelect } from '@wordpress/data'
 
 // We split this off because we use hooks that won't allow conditional rendering
 // for the Linking component.
@@ -19,8 +20,14 @@ export const Linking = props => {
 export const _Linking = () => {
 	const [ isLinked, setIsLinked ] = useLinking()
 
-	const { isOnlyBlock } = useBlockContext()
 	const { clientId } = useBlockEditContext()
+	const { isOnlyBlock } = useSelect( select => {
+		const { getBlockRootClientId, getBlock } = select( 'core/block-editor' )
+		const parentClientId = getBlockRootClientId( clientId )
+		return {
+			isOnlyBlock: getBlock( parentClientId ).innerBlocks.length === 1,
+		}
+	}, [ clientId ] )
 
 	const closestLinkableBlock = useClosestLinkableBlock( clientId )
 

src/block-components/style/index.js

@@ -389,4 +389,3 @@ export const mergeStyles = ( styles, important = true ) => {
 
 Style.addAttributes = addAttributes
 
-export * from './use-generated-css'

src/block/accordion/edit.js

@@ -32,7 +32,7 @@ import {
 	Transform,
 } from '~stackable/block-components'
 import {
-	useBlockAttributesContext, useBlockContext, useBlockSetAttributesContext,
+	useBlockAttributesContext, useBlockSetAttributesContext,
 } from '~stackable/hooks'
 import {
 	withBlockAttributeContext, withBlockWrapperIsHovered, withQueryLoopContext,
@@ -46,7 +46,7 @@ import variations, { defaultIcon } from './variations'
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor'
+import { InnerBlocks, useBlockEditContext } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
 import { compose } from '@wordpress/compose'
 import { useSelect } from '@wordpress/data'
@@ -64,7 +64,12 @@ const Edit = props => {
 	} = props
 
 	const [ isOpen, setIsOpen ] = useState( props.attributes.startOpen )
-	const { hasInnerBlocks } = useBlockContext()
+	const { hasInnerBlocks } = useSelect( select => {
+		const { getBlockOrder } = select( 'core/block-editor' )
+		return {
+			hasInnerBlocks: getBlockOrder( clientId ).length > 0,
+		}
+	}, [ clientId ] )
 	const [ hasInitClickHandler, setHasInitClickHandler ] = useState( false )
 	const { getEditorDom } = useSelect( 'stackable/editor-dom' )
 
@@ -215,8 +220,15 @@ addFilter( 'stackable.block-component.icon.after', 'stackable/blockquote', outpu
 	const icon2 = useBlockAttributesContext( attributes => attributes.icon2 )
 	const setAttributes = useBlockSetAttributesContext()
 
-	const { parentTree } = useBlockContext()
-	const { getBlock } = useSelect( 'core/block-editor' )
+	const { clientId } = useBlockEditContext()
+	const { parentTree, getBlock } = useSelect( select => {
+		const { getBlock, getBlockParents } = select( 'core/block-editor' )
+		const parentTree = getBlockParents( clientId ).map( parentClientId => ( { clientId: parentClientId, name: getBlock( parentClientId ).name } ) )
+		return {
+			getBlock,
+			parentTree,
+		}
+	}, [ clientId ] )
 	const { getActiveBlockVariation } = useSelect( 'core/blocks' )
 
 	const accordionBlock = findLast( parentTree, pt => pt.name === 'stackable/accordion' )
@@ -259,8 +271,15 @@ addFilter( 'stackable.block-default-styles.use-saved-style', 'stackable/icon-lab
 
 // Return default icon for accordion
 addFilter( 'stackable.block-component.icon.default', 'stackable/accordion', starIcon => {
-	const { parentTree } = useBlockContext()
-	const { getBlock } = useSelect( 'core/block-editor' )
+	const { clientId } = useBlockEditContext()
+	const { parentTree, getBlock } = useSelect( select => {
+		const { getBlock, getBlockParents } = select( 'core/block-editor' )
+		const parentTree = getBlockParents( clientId ).map( parentClientId => ( { clientId: parentClientId, name: getBlock( parentClientId ).name } ) )
+		return {
+			getBlock,
+			parentTree,
+		}
+	}, [ clientId ] )
 	const { getActiveBlockVariation } = useSelect( 'core/blocks' )
 
 	const accordionBlock = findLast( parentTree, pt => pt.name === 'stackable/accordion' )

src/block/accordion/frontend-accordion.js

@@ -33,6 +33,8 @@ class StackableAccordion {
 					// Prevent text selection while animating
 					el.style.userSelect = 'none'
 
+					clearTimeout( el.textSelectTimeout )
+
 					// When inside columns, flex prevents the accordion closing animation, this hack fixes it.
 					const doWrapHack = !! el.closest( '.stk-block-columns' )
 					let wrapper = null
@@ -54,14 +56,18 @@ class StackableAccordion {
 						}, ANIM_OPTS )
 					}
 
-					// When the animation is done, allow text selection again.
+					// When the animation is done, remove wrapper and allow text selection again.
 					el.anim.onfinish = el.anim.oncancel = () => {
+						if ( doWrapHack ) {
+							removeWrapperHack( el, wrapper )
+						}
 						el.style.userSelect = 'auto'
 					}
 
-					if ( doWrapHack ) {
-						removeWrapperHack( el, wrapper )
-					}
+					// Fallback to make sure accordion text is selectable just incase the onfinish or oncancel doesn't fire.
+					el.textSelectTimeout = setTimeout( () => {
+						el.style.userSelect = 'auto'
+					}, 700 )
 				}
 			} )
 		} )
@@ -197,11 +203,9 @@ class StackableAccordion {
 		}
 
 		const removeWrapperHack = ( el, wrapper ) => {
-			el.anim.onfinish = el.anim.oncancel = () => {
-				// Unwrap el from the div
-				wrapper.parentNode?.insertBefore( el, wrapper )
-				wrapper?.remove()
-			}
+			// Unwrap el from the div
+			wrapper.parentNode?.insertBefore( el, wrapper )
+			wrapper?.remove()
 		}
 	}
 }