fix (performance): Performance Cleanup (#3320)

* update timelineIsLast attribute

* remove useBlockContext

* remove useBlockContext

* remove useGeneratedCss

* do not use stackable/block-context

* remove hook

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/blockquote/edit.js

@@ -32,7 +32,6 @@ import {
 	MarginBottom,
 	Transform,
 } from '~stackable/block-components'
-import { useBlockContext } from '~stackable/hooks'
 import {
 	withBlockAttributeContext,
 	withBlockWrapperIsHovered,
@@ -42,11 +41,12 @@ import {
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor'
+import { InnerBlocks, useBlockEditContext } from '@wordpress/block-editor'
 import { compose } from '@wordpress/compose'
 import { renderToString, memo } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
+import { useSelect } from '@wordpress/data'
 
 export const defaultIcon = renderToString( <SVGDefaultQuote /> )
 
@@ -58,7 +58,12 @@ const Edit = props => {
 	} = props
 
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
-	const { hasInnerBlocks } = useBlockContext()
+	const { hasInnerBlocks } = useSelect( select => {
+		const { getBlockOrder } = select( 'core/block-editor' )
+		return {
+			hasInnerBlocks: getBlockOrder( props.clientId ).length > 0,
+		}
+	}, [ props.clientId ] )
 
 	const blockClassNames = classnames( [
 		className,
@@ -146,7 +151,14 @@ addFilter( 'stackable.edit.margin-bottom.enable-handlers', 'stackable/blockquote
 
 // Add more quotation mark icons in the Icon Block if it's inside the blockquote block.
 addFilter( 'stackable.block-component.icon.after', 'stackable/blockquote', output => {
-	const { parentBlock } = useBlockContext()
+	const { clientId } = useBlockEditContext()
+	const { parentBlock } = useSelect( select => {
+		const { getBlockRootClientId, getBlock } = select( 'core/block-editor' )
+		const parentClientId = getBlockRootClientId( clientId )
+		return {
+			parentBlock: getBlock( parentClientId ),
+		}
+	}, [ clientId ] )
 	if ( parentBlock?.name === 'stackable/blockquote' ) {
 		return (
 			<>
@@ -165,7 +177,14 @@ addFilter( 'stackable.block-component.icon.after', 'stackable/blockquote', outpu
 
 // Change the icon picker label for the Icon Block if it's inside the blockquote block.
 addFilter( 'stackable.block-component.icon.label', 'stackable/blockquote', label => {
-	const { parentBlock } = useBlockContext()
+	const { clientId } = useBlockEditContext()
+	const { parentBlock } = useSelect( select => {
+		const { getBlockRootClientId, getBlock } = select( 'core/block-editor' )
+		const parentClientId = getBlockRootClientId( clientId )
+		return {
+			parentBlock: getBlock( parentClientId ),
+		}
+	}, [ clientId ] )
 	if ( parentBlock?.name === 'stackable/blockquote' ) {
 		return __( 'Pick another icon', i18n )
 	}

src/block/call-to-action/edit.js

@@ -35,7 +35,6 @@ import {
 	ContentAlign,
 	getContentAlignmentClasses,
 } from '~stackable/block-components'
-import { useBlockContext } from '~stackable/hooks'
 import {
 	withBlockAttributeContext, withBlockWrapperIsHovered, withQueryLoopContext,
 } from '~stackable/higher-order'
@@ -47,6 +46,7 @@ import { InnerBlocks } from '@wordpress/block-editor'
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
 import { memo } from '@wordpress/element'
+import { useSelect } from '@wordpress/data'
 
 const TEMPLATE = variations[ 0 ].innerBlocks
 
@@ -55,7 +55,14 @@ const Edit = props => {
 		className,
 	} = props
 
-	const { hasInnerBlocks, innerBlocks } = useBlockContext()
+	const { hasInnerBlocks, innerBlocks } = useSelect( select => {
+		const { getBlock } = select( 'core/block-editor' )
+		const innerBlocks = getBlock( props.clientId ).innerBlocks
+		return {
+			hasInnerBlocks: innerBlocks.length > 0,
+			innerBlocks,
+		}
+	}, [ props.clientId ] )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 	const separatorClass = getSeparatorClasses( props.attributes )
 

src/block/card/edit.js

@@ -16,9 +16,7 @@ import {
 	InspectorTabs,
 	useBlockCssGenerator,
 } from '~stackable/components'
-import {
-	useBlockContext, useBlockStyle, useDeviceType,
-} from '~stackable/hooks'
+import { useBlockStyle, useDeviceType } from '~stackable/hooks'
 import {
 	withBlockAttributeContext,
 	withBlockWrapperIsHovered,
@@ -49,17 +47,14 @@ import { InnerBlocks } from '@wordpress/block-editor'
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
 import { memo } from '@wordpress/element'
+import { useSelect } from '@wordpress/data'
 
 const TEMPLATE = variations[ 0 ].innerBlocks
 
 const widthUnit = [ 'px', 'vw' ]
 const heightUnit = [ 'px', 'vh' ]
 
 const Edit = props => {
-	const {
-		hasInnerBlocks, innerBlocks,
-	} = useBlockContext()
-
 	const {
 		hasContainer,
 	} = props.attributes
@@ -68,6 +63,15 @@ const Edit = props => {
 		className, //isHovered,
 	} = props
 
+	const { hasInnerBlocks, innerBlocks } = useSelect( select => {
+		const { getBlock } = select( 'core/block-editor' )
+		const innerBlocks = getBlock( props.clientId ).innerBlocks
+		return {
+			hasInnerBlocks: innerBlocks.length > 0,
+			innerBlocks,
+		}
+	}, [ props.clientId ] )
+
 	const blockOrientation = getBlockOrientation( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 	const blockStyle = useBlockStyle( variations )