fix (WP 6.7): fixed deprecated warnings (#3363)

* fix: withState to useState

* fix: select( 'core/edit-site' ).__experimentalGetPreviewDeviceType to select( 'core/editor' ).getDeviceType

* fix: wp.blockEditor.useSetting to wp.blockEditor.useSettings

* fix: wp.editPost.PluginSidebar to  wp.editor.PluginSidebar

* fix: custom components as toolbar controls

* fix: onSplit to splitting

* fixed compatibility with older versions

---------

Co-authored-by: [email protected] <>

Author: Arukuen

src/block/button/edit.js

@@ -31,7 +31,6 @@ import {
  */
 import { __ } from '@wordpress/i18n'
 import { compose } from '@wordpress/compose'
-import { createBlock } from '@wordpress/blocks'
 import { AlignmentToolbar, BlockControls } from '@wordpress/block-editor'
 import { memo } from '@wordpress/element'
 
@@ -113,12 +112,6 @@ const Edit = props => {
 						placeholder={ __( 'Button text', i18n ) }
 						withoutInteractiveFormatting={ true }
 						onReplace={ onReplace }
-						onSplit={ value => createBlock(
-							'stackable/button',
-							{
-								...props.attributes, text: value,
-							}
-						) }
 					/>
 				</Button>
 			</BlockDiv>

src/block/button/index.js

@@ -28,6 +28,7 @@ export const settings = {
 	attributes: schema,
 	supports: {
 		anchor: true,
+		splitting: true,
 	},
 	transforms,
 

src/block/icon-list-item/edit.js

@@ -5,7 +5,6 @@ import blockStyles from './style'
 import { getUseSvgDef } from '../icon-list/util'
 import {
 	convertToListItems,
-	useOnSplit,
 	useOnPaste,
 	useEnter,
 } from './util'
@@ -111,7 +110,6 @@ const Edit = props => {
 	] )
 
 	const useEnterRef = useEnter( text, clientId )
-	const onSplit = useOnSplit( clientId, attributes )
 	const onPaste = useOnPaste( clientId, parentBlock?.clientId, attributes, setAttributes )
 
 	const onMerge = forward => {
@@ -174,7 +172,6 @@ const Edit = props => {
 						ref={ useEnterRef }
 						tagName="span"
 						className={ textClassNames }
-						onSplit={ onSplit }
 						onMerge={ onMerge }
 						onPaste={ onPaste }
 						onReplace={ onReplace

src/block/icon-list-item/index.js

@@ -22,6 +22,7 @@ export const settings = {
 		__experimentalSelector: 'li',
 		reusable: false,
 		stkSaveBlockStyle: false,
+		splitting: true,
 	},
 	example,
 	edit,

src/block/icon-list-item/util.js

@@ -47,33 +47,6 @@ export function convertToListItems( blocks ) {
 	return listItems
 }
 
-export const useOnSplit = ( clientId, attributes ) => {
-	const { getBlock } = useSelect( 'core/block-editor' )
-
-	return useCallback( ( value, isOriginal ) => {
-		const block = getBlock( clientId )
-		let newBlock
-
-		if ( isOriginal || value ) {
-			newBlock = cloneBlock( block, {
-				...attributes,
-				text: value,
-			} )
-		} else {
-			newBlock = cloneBlock( block, {
-				...attributes,
-				text: '',
-			} )
-		}
-
-		if ( isOriginal ) {
-			newBlock.clientId = clientId
-		}
-
-		return newBlock
-	}, [ clientId, attributes ] )
-}
-
 export const useEnter = ( text, clientId ) => {
 	const {
 		removeBlocks, selectionChange, insertBlocks,

src/block/subtitle/edit.js

@@ -35,7 +35,6 @@ import { createBlockCompleter } from '~stackable/util'
  * WordPress dependencies
  */
 import { compose } from '@wordpress/compose'
-import { createBlock } from '@wordpress/blocks'
 import { addFilter } from '@wordpress/hooks'
 import { sprintf, __ } from '@wordpress/i18n'
 import { memo } from '@wordpress/element'
@@ -106,25 +105,6 @@ const Edit = props => {
 					onMerge={ mergeBlocks }
 					onRemove={ onRemove }
 					onReplace={ onReplace }
-					onSplit={ ( value, isOriginal ) => {
-						// @see https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/paragraph/edit.js
-						let newAttributes
-
-						if ( isOriginal || value ) {
-							newAttributes = {
-								...props.attributes,
-								text: value,
-							}
-						}
-
-						const block = createBlock( 'stackable/subtitle', newAttributes )
-
-						if ( isOriginal ) {
-							block.clientId = props.clientId
-						}
-
-						return block
-					} }
 				/>
 			</BlockDiv>
 			{ props.isHovered && <MarginBottom /> }

src/block/subtitle/index.js

@@ -24,6 +24,7 @@ export const settings = {
 	supports: {
 		anchor: true,
 		spacing: true,
+		splitting: true,
 	},
 	example,
 	deprecated,

src/deprecated/v2/block/columns/edit.js

@@ -49,9 +49,9 @@ import {
 	__, sprintf, _x,
 } from '@wordpress/i18n'
 import { addFilter, applyFilters } from '@wordpress/hooks'
-import { Fragment } from '@wordpress/element'
+import { Fragment, useState } from '@wordpress/element'
 import { InnerBlocks } from '@wordpress/block-editor'
-import { compose, withState } from '@wordpress/compose'
+import { compose } from '@wordpress/compose'
 import { select, dispatch } from '@wordpress/data'
 import { createBlock } from '@wordpress/blocks'
 
@@ -538,9 +538,21 @@ addFilter( 'stackable.columns.setAttributes', 'stackable/columns/columns-change'
 	return attributes
 } )
 
+// Higher-Order Component to add state to props since withState is deprecated
+const withSortColumnHighlight = WrappedComponent => props => {
+	const [ sortColumnHighlight, setSortColumnHighlight ] = useState( null )
+
+	return (
+		<WrappedComponent
+			{ ...props }
+			sortColumnHighlight={ sortColumnHighlight }
+			setSortColumnHighlight={ setSortColumnHighlight }
+		/>
+	)
+}
+
 export default compose(
-	// `withState` is needed to allow higher order functions to access the local state.
-	withState( { sortColumnHighlight: null } ),
+	withSortColumnHighlight,
 	withUniqueClass,
 	withSetAttributeHook,
 	withGoogleFont,

src/hooks/use-device-type.js

@@ -6,10 +6,9 @@ export const useDeviceType = () => {
 	const { deviceType } = useSelect( select => {
 		let deviceType = 'Desktop'
 
-		// In some editors, there is no edit-post / preview device type. If that
-		// happens, we just set our own internal device type.
-		deviceType = select( 'core/edit-site' )?.__experimentalGetPreviewDeviceType() ||
-			select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType() ||
+		deviceType = select( 'core/editor' )?.getDeviceType?.() ||
+			select( 'core/edit-site' )?.__experimentalGetPreviewDeviceType?.() ||
+			select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType?.() ||
 			select( 'stackable/device-type' ).getDeviceType()
 
 		return { deviceType }

src/plugins/design-library-button/design-library-button.js

@@ -3,7 +3,6 @@
  */
 import { i18n, settings } from 'stackable'
 import { SVGStackableIcon } from '~stackable/icons'
-import { Button } from '~stackable/components'
 
 /**
  * WordPress dependencies
@@ -12,6 +11,7 @@ import { createBlock } from '@wordpress/blocks'
 import { dispatch, useSelect } from '@wordpress/data'
 import { __ } from '@wordpress/i18n'
 import { useCallback } from '@wordpress/element'
+import { ToolbarButton } from '@wordpress/components'
 
 const DesignLibraryButton = () => {
 	const { getEditorDom } = useSelect( 'stackable/editor-dom' )
@@ -31,11 +31,11 @@ const DesignLibraryButton = () => {
 	}, [ getEditorDom ] )
 
 	return ( settings.stackable_enable_design_library &&
-		<Button
+		<ToolbarButton
 			onClick={ onClick }
 			className="ugb-insert-library-button"
 			icon={ <SVGStackableIcon /> }
-		>{ __( 'Design Library', i18n ) }</Button>
+		>{ __( 'Design Library', i18n ) }</ToolbarButton>
 	)
 }