diff --git a/src/block/columns/edit.js b/src/block/columns/edit.js index 231b38c4c..ca9b19a71 100644 --- a/src/block/columns/edit.js +++ b/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' ) diff --git a/src/block/text/edit.js b/src/block/text/edit.js index a61dda8f8..e6628870a 100644 --- a/src/block/text/edit.js +++ b/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 )