changed use context

src/block/columns/edit.js

@@ -35,7 +35,6 @@ import {
 	getContentAlignmentClasses,
 	Columns,
 } from '~stackable/block-components'
-import { useBlockContext } from '~stackable/hooks'
 import {
 	withBlockAttributeContext,
 	withBlockWrapperIsHovered,
@@ -48,20 +47,32 @@ import {
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
 import { addFilter, applyFilters } from '@wordpress/hooks'
+import { useSelect } from '@wordpress/data'
 
 const ALLOWED_INNER_BLOCKS = [ 'stackable/column' ]
 
 const Edit = props => {
 	const {
+		clientId,
 		className,
 	} = props
 
 	const rowClass = getRowClasses( props.attributes )
 	const separatorClass = getSeparatorClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
-	const { hasInnerBlocks } = useBlockContext()
 	const [ columnProviderValue, columnTooltipClass ] = ColumnInnerBlocks.useContext()
 
+	const { hasInnerBlocks } = useSelect(
+		select => {
+			const { getBlockOrder } = select( 'core/block-editor' )
+
+			return {
+				hasInnerBlocks: getBlockOrder( clientId ).length > 0,
+			}
+		},
+		[ clientId ]
+	)
+
 	const blockClassNames = classnames( applyFilters( 'stackable.columns.edit.blockClassNames',
 		[
 			className,
@@ -153,8 +164,17 @@ const Edit = props => {
 // Load the polyfill for columns block :has() selector for Firefox
 const userAgent = navigator?.userAgent
 if ( userAgent && userAgent.indexOf( 'Firefox' ) !== -1 ) {
-	addFilter( 'stackable.columns.edit.blockClassNames', 'stackable/columns-has-single-block-polyfill', classes => {
-		const { numInnerBlocks } = useBlockContext()
+	addFilter( 'stackable.columns.edit.blockClassNames', 'stackable/columns-has-single-block-polyfill', ( classes, props ) => {
+		const { numInnerBlocks } = useSelect(
+			select => {
+				const { getBlockOrder } = select( 'core/block-editor' )
+
+				return {
+					numInnerBlocks: getBlockOrder( props.clientId ).length,
+				}
+			},
+			[ props.clientId ]
+		)
 
 		if ( numInnerBlocks === 1 ) {
 			classes.push( 'stk-block-columns--has-single-block-polyfill' )

src/block/text/edit.js

@@ -29,7 +29,6 @@ import {
 	InspectorLayoutControls,
 	useBlockCssGenerator,
 } from '~stackable/components'
-import { useBlockContext } from '~stackable/hooks'
 import {
 	withBlockAttributeContext,
 	withBlockWrapperIsHovered,
@@ -43,6 +42,7 @@ import { createBlockCompleter } from '~stackable/util'
 import { sprintf, __ } from '@wordpress/i18n'
 import { addFilter, applyFilters } from '@wordpress/hooks'
 import { compose } from '@wordpress/compose'
+import { useSelect } from '@wordpress/data'
 
 /**
  * Add `autocompleters` support for stackable/text
@@ -62,14 +62,32 @@ const Edit = props => {
 		onReplace,
 		onRemove,
 		mergeBlocks,
-		// clientId,
+		clientId,
 	} = props
 
 	const textClasses = getTypographyClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
+
 	const {
 		parentBlock, isFirstBlock, isLastBlock,
-	} = useBlockContext()
+	} = useSelect(
+		select => {
+			const {
+				getBlockOrder, getBlockRootClientId, getBlock,
+			} =
+				select( 'core/block-editor' )
+
+			const rootClientId = getBlockRootClientId( clientId )
+			const parentInnerBlocks = getBlockOrder( rootClientId )
+
+			return {
+				parentBlock: getBlock( rootClientId ),
+				isFirstBlock: parentInnerBlocks.indexOf( clientId ) === 0,
+				isLastBlock: parentInnerBlocks.indexOf( clientId ) === parentInnerBlocks.length - 1,
+			}
+		},
+		[ clientId ]
+	)
 
 	const enableColumns = applyFilters( 'stackable.text.edit.enable-column', true, parentBlock )