diff --git a/src/hooks/use-device-type.js b/src/hooks/use-device-type.js
index 422a22c96..7a45fdb43 100644
--- a/src/hooks/use-device-type.js
+++ b/src/hooks/use-device-type.js
@@ -6,7 +6,9 @@ export const useDeviceType = () => {
 	const { deviceType } = useSelect( select => {
 		let deviceType = 'Desktop'
 
-		deviceType = select( 'core/editor' ).getDeviceType() ||
+		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/global-settings/typography/editor-loader.js b/src/plugins/global-settings/typography/editor-loader.js
index 6e0d4ed98..6c7f39da5 100644
--- a/src/plugins/global-settings/typography/editor-loader.js
+++ b/src/plugins/global-settings/typography/editor-loader.js
@@ -36,7 +36,10 @@ export const GlobalTypographyStyles = () => {
 
 	const { device } = useSelect(
 		select => ( {
-			device: select( 'core/editor' ).getDeviceType() || 'Desktop',
+			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
index acf44e73a..34953fdf7 100644
--- a/src/plugins/global-settings/typography/typography-picker.js
+++ b/src/plugins/global-settings/typography/typography-picker.js
@@ -161,7 +161,10 @@ const TypographyPreview = props => {
 	} )
 	const { device } = useSelect(
 		select => ( {
-			device: select( 'core/editor' ).getDeviceType().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
index 80b2801c1..0d19b8b8d 100644
--- a/src/plugins/theme-block-size/index.js
+++ b/src/plugins/theme-block-size/index.js
@@ -5,11 +5,18 @@
  */
 import { useDeviceType } from '~stackable/hooks'
 import { createRoot } from '~stackable/util'
-import { useSettings } 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, wideSize ] = useSettings( 'layout.contentSize', 'layout.wideSize' )