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] <>
gambitph · Nov 5, 2024 · 75f2801 · 75f2801
1 parent afd519e
commit 75f2801
Show file tree

Hide file tree

Showing 14 changed files with 48 additions and 98 deletions.
diff --git a/src/block/button/edit.js b/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>

diff --git a/src/block/button/index.js b/src/block/button/index.js
@@ -28,6 +28,7 @@ export const settings = {
 	attributes: schema,
 	supports: {
 		anchor: true,
+		splitting: true,
 	},
 	transforms,
 

diff --git a/src/block/icon-list-item/edit.js b/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

diff --git a/src/block/icon-list-item/index.js b/src/block/icon-list-item/index.js
@@ -22,6 +22,7 @@ export const settings = {
 		__experimentalSelector: 'li',
 		reusable: false,
 		stkSaveBlockStyle: false,
+		splitting: true,
 	},
 	example,
 	edit,

diff --git a/src/block/icon-list-item/util.js b/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,

diff --git a/src/block/subtitle/edit.js b/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 /> }

diff --git a/src/block/subtitle/index.js b/src/block/subtitle/index.js
@@ -24,6 +24,7 @@ export const settings = {
 	supports: {
 		anchor: true,
 		spacing: true,
+		splitting: true,
 	},
 	example,
 	deprecated,

diff --git a/src/deprecated/v2/block/columns/edit.js b/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,

diff --git a/src/hooks/use-device-type.js b/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 }

diff --git a/src/plugins/design-library-button/design-library-button.js b/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>
 	)
 }
 

diff --git a/src/plugins/global-settings/index.js b/src/plugins/global-settings/index.js
@@ -30,30 +30,18 @@ addAction( 'stackable.global-settings.toggle-sidebar', 'toggle', () => {
 } )
 
 const GlobalSettings = () => {
-	// We need to to this for both, because one might be disabled. E.g. in
-	// WooCommerce, editSite is loaded and stops the sidebar from showing up.
-	const SideEditorPluginSidebar = window.wp.editSite?.PluginSidebar
-	const PostEditorPluginSidebar = window.wp.editPost?.PluginSidebar
+	const PluginSidebar = window.wp.editor.PluginSidebar
 
 	return (
 		<>
-			{ SideEditorPluginSidebar &&
-				<SideEditorPluginSidebar
+			{ PluginSidebar &&
+				<PluginSidebar
 					name="sidebar"
 					title={ __( 'Stackable Settings', i18n ) }
 					className="ugb-global-settings__inspector"
 					icon={ <SVGStackableIcon /> } >
 					{ applyFilters( 'stackable.global-settings.inspector', null ) }
-				</SideEditorPluginSidebar>
-			}
-			{ PostEditorPluginSidebar &&
-				<PostEditorPluginSidebar
-					name="sidebar"
-					title={ __( 'Stackable Settings', i18n ) }
-					className="ugb-global-settings__inspector"
-					icon={ <SVGStackableIcon /> } >
-					{ applyFilters( 'stackable.global-settings.inspector', null ) }
-				</PostEditorPluginSidebar>
+				</PluginSidebar>
 			}
 		</>
 	)

diff --git a/src/plugins/global-settings/typography/editor-loader.js b/src/plugins/global-settings/typography/editor-loader.js
@@ -35,14 +35,12 @@ export const GlobalTypographyStyles = () => {
 	const [ styleTimeout, setStyleTimeout ] = useState( null )
 
 	const { device } = useSelect(
-		select => {
-			const device = select( 'core/edit-site' )?.__experimentalGetPreviewDeviceType() ||
-				select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType() ||
-				'Desktop'
-			return {
-				device,
-			}
-		},
+		select => ( {
+			device: select( 'core/editor' )?.getDeviceType?.() ||
+				select( 'core/edit-site' )?.__experimentalGetPreviewDeviceType?.() ||
+				select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType?.() ||
+				'Desktop',
+		} ),
 		[]
 	)
 

diff --git a/src/plugins/global-settings/typography/typography-picker.js b/src/plugins/global-settings/typography/typography-picker.js
@@ -161,9 +161,10 @@ const TypographyPreview = props => {
 	} )
 	const { device } = useSelect(
 		select => ( {
-			device: select( 'core/edit-site' )?.__experimentalGetPreviewDeviceType()?.toLowerCase() ||
-				select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType()?.toLowerCase() ||
-				'Desktop',
+			device: select( 'core/editor' )?.getDeviceType?.()?.toLowerCase() ||
+				select( 'core/edit-site' )?.__experimentalGetPreviewDeviceType?.()?.toLowerCase() ||
+				select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType?.()?.toLowerCase() ||
+				'desktop',
 		} ),
 		[]
 	)

diff --git a/src/plugins/theme-block-size/index.js b/src/plugins/theme-block-size/index.js
@@ -5,14 +5,20 @@
  */
 import { useDeviceType } from '~stackable/hooks'
 import { createRoot } from '~stackable/util'
-import { useSetting } from '@wordpress/block-editor'
+import { useSettings as _useSettings, useSetting as deprecatedUseSetting } from '@wordpress/block-editor'
 import domReady from '@wordpress/dom-ready'
 import { useEffect } from '@wordpress/element'
 import { useSelect } from '@wordpress/data'
 
+// This is a custom hook for the deprecated useSetting since WP 6.3 & 6.4 doesn't have useSettings yet.
+const useSettings = _useSettings || ( () => {
+	const contentSize = deprecatedUseSetting( 'layout.contentSize' )
+	const wideSize = deprecatedUseSetting( 'layout.wideSize' )
+	return [ contentSize, wideSize ]
+} )
+
 export const ThemeBlockSize = () => {
-	const contentSize = useSetting( 'layout.contentSize' )
-	const wideSize = useSetting( 'layout.wideSize' )
+	const [ contentSize, wideSize ] = useSettings( 'layout.contentSize', 'layout.wideSize' )
 
 	const deviceType = useDeviceType()
 	const editorDom = useSelect( select => {