diff --git a/jest.config.js b/jest.config.js
index 77751a3b34..7606dd2eab 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -13,7 +13,6 @@ module.exports = {
 		'.*\\.svg$': '<rootDir>/src/test/svgr-mock.js',
 		'\\.(mp4|webm|png|jpg|jpeg|gif)$': '<rootDir>/src/test/file-stub.js',
 		'^stackable$': '<rootDir>/src/test/stackable-mock.js',
-		'@wordpress/api$': '<rootDir>/src/test/wp-api-stub.js',
 		'@wordpress/ajax$': '<rootDir>/src/test/wp-admin-stub.js',
 		'@wordpress/codeEditor$': '<rootDir>/src/test/wp-admin-stub.js',
 		'@wordpress/plugins$': '<rootDir>/src/test/wp-admin-stub.js',
diff --git a/src/components/base-control2/label-tooltip.js b/src/components/base-control2/label-tooltip.js
index 939bbba4ef..4c7a5ffa0f 100644
--- a/src/components/base-control2/label-tooltip.js
+++ b/src/components/base-control2/label-tooltip.js
@@ -7,7 +7,7 @@
  * Internal dependencies
  */
 import HelpTooltip from '../help-tooltip'
-import { fetchSettings } from '~stackable/util'
+import { fetchSettings, saveSettings } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -15,7 +15,6 @@ import { fetchSettings } from '~stackable/util'
 import {
 	useRef, useState, useEffect,
 } from '@wordpress/element'
-import { models } from '@wordpress/api'
 import domReady from '@wordpress/dom-ready'
 
 const LabelTooltip = props => {
@@ -138,10 +137,9 @@ function useHelpTooltipEnabled() {
 	const updateHelpTooltipEnabled = newValue => {
 		helpTooltipEnabled = newValue
 
-		const model = new models.Settings( {
+		saveSettings( {
 			stackable_help_tooltip_disabled: newValue ? '' : '1', // eslint-disable-line
 		} )
-		model.save()
 
 		// Let the other components know that the value has changed.
 		window.dispatchEvent( new CustomEvent( '_stkHelpTooltipEnabledChanged', { detail: newValue } ) )
diff --git a/src/components/guided-modal-tour/index.js b/src/components/guided-modal-tour/index.js
index b410dd676e..4be23a9f99 100644
--- a/src/components/guided-modal-tour/index.js
+++ b/src/components/guided-modal-tour/index.js
@@ -14,11 +14,11 @@ import {
  * External dependencies
  */
 import { guidedTourStates } from 'stackable'
+import { saveSettings } from '~stackable/util'
 
 /**
  * WordPress dependencies
  */
-import { models } from '@wordpress/api'
 import {
 	useEffect, useState, lazy, Suspense, memo,
 } from '@wordpress/element'
@@ -92,9 +92,10 @@ const GuidedModalTour = memo( props => {
 
 					// Update the stackable_guided_tour_states setting
 					if ( ! guidedTourStates.includes( tourId ) ) {
-						// eslint-disable-next-line camelcase
-						const settings = new models.Settings( { stackable_guided_tour_states: [ ...guidedTourStates, tourId ] } )
-						settings.save()
+						saveSettings( {
+							// eslint-disable-next-line camelcase
+							stackable_guided_tour_states: [ ...guidedTourStates, tourId ],
+						} )
 					}
 
 					// Soft update the global variable to prevent the tour from being shown again.
diff --git a/src/deprecated/v2/init.php b/src/deprecated/v2/init.php
index 8ede3bd3da..2b1e74dee7 100644
--- a/src/deprecated/v2/init.php
+++ b/src/deprecated/v2/init.php
@@ -232,7 +232,7 @@ function stackable_block_editor_assets_v2() {
 		}
 
 		// Backend editor scripts: blocks.
-		$dependencies = array( 'ugb-block-js', 'code-editor', 'wp-blocks', 'wp-element', 'wp-components', 'wp-util', 'wp-plugins', 'wp-i18n', 'wp-api' );
+		$dependencies = array( 'ugb-block-js', 'code-editor', 'wp-blocks', 'wp-element', 'wp-components', 'wp-util', 'wp-plugins', 'wp-i18n', 'wp-api-fetch' );
 		wp_register_script(
 			'ugb-block-js-v2',
 			plugins_url( 'dist/deprecated/editor_blocks_deprecated_v2.js', STACKABLE_FILE ),
diff --git a/src/deprecated/v2/welcome/admin.js b/src/deprecated/v2/welcome/admin.js
index 495efef943..42df1cc52e 100644
--- a/src/deprecated/v2/welcome/admin.js
+++ b/src/deprecated/v2/welcome/admin.js
@@ -7,7 +7,6 @@ import {
 } from '@wordpress/element'
 import { send as ajaxSend } from '@wordpress/ajax'
 import { Spinner } from '@wordpress/components'
-import { models } from '@wordpress/api'
 
 /**
  * External dependencies
@@ -16,7 +15,7 @@ import {
 	i18n,
 	v2nonce as nonce,
 } from 'stackable'
-import { fetchSettings } from '~stackable/util/admin'
+import { fetchSettings, saveSettings } from '~stackable/util/admin'
 import AdminToggleSetting from '~stackable/components/admin-toggle-setting'
 
 export class BlockToggler extends Component {
@@ -123,8 +122,7 @@ export const OptimizationSettings = ( { searchSettings } ) => {
 	}, [] )
 
 	const updateOptimizeScriptLoad = value => {
-		const model = new models.Settings( { stackable_optimize_script_load: value } ) // eslint-disable-line camelcase
-		model.save()
+		saveSettings( { stackable_optimize_script_load: value } ) // eslint-disable-line camelcase
 		setOptimizeScriptLoad( value )
 	}
 
diff --git a/src/init.php b/src/init.php
index 3b7613b37a..1dfd880c25 100644
--- a/src/init.php
+++ b/src/init.php
@@ -337,7 +337,7 @@ public function register_block_editor_assets() {
 				plugins_url( 'dist/stk.js', STACKABLE_FILE ),
 				// wp-util for wp.ajax.
 				// wp-plugins & wp-edit-post for Gutenberg plugins.
-				array( 'code-editor', 'wp-blocks', 'wp-element', 'wp-block-editor', 'wp-components', 'wp-api-fetch', 'wp-util', 'wp-plugins', 'wp-i18n', 'wp-api', 'lodash' ),
+				array( 'code-editor', 'wp-blocks', 'wp-element', 'wp-block-editor', 'wp-components', 'wp-api-fetch', 'wp-util', 'wp-plugins', 'wp-i18n', 'lodash' ),
 				STACKABLE_VERSION
 			);
 
diff --git a/src/lazy-components/cimo/index.js b/src/lazy-components/cimo/index.js
index b0ef01f3a0..a33e242014 100644
--- a/src/lazy-components/cimo/index.js
+++ b/src/lazy-components/cimo/index.js
@@ -1,7 +1,7 @@
 import {
 	cimo, i18n, ajaxUrl,
 } from 'stackable'
-import { createRoot } from '~stackable/util'
+import { createRoot, saveSettings } from '~stackable/util'
 
 import { __ } from '@wordpress/i18n'
 import { Dashicon } from '@wordpress/components'
@@ -9,7 +9,6 @@ import domReady from '@wordpress/dom-ready'
 import {
 	useState, useRef, useEffect,
 } from '@wordpress/element'
-import { models } from '@wordpress/api'
 
 let isPolling = false
 let cimoData = { status: cimo?.status, action: cimo?.action }
@@ -20,8 +19,7 @@ const CimoDownloadNotice = props => {
 	const pollCountRef = useRef( 0 )
 
 	const onDismiss = () => {
-		const settings = new models.Settings( { stackable_hide_cimo_notice: true } ) // eslint-disable-line camelcase
-		settings.save()
+		saveSettings( { stackable_hide_cimo_notice: true } ) // eslint-disable-line camelcase
 
 		if ( cimo ) {
 			cimo.hideNotice = true
diff --git a/src/plugins/global-settings/block-styles/store.js b/src/plugins/global-settings/block-styles/store.js
index 51de7dba9c..0a626b64f2 100644
--- a/src/plugins/global-settings/block-styles/store.js
+++ b/src/plugins/global-settings/block-styles/store.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fetchSettings } from '~stackable/util'
+import { fetchSettings, saveSettings } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -11,7 +11,6 @@ import {
 } from '@wordpress/data'
 import domReady from '@wordpress/dom-ready'
 import { __ } from '@wordpress/i18n'
-import { models } from '@wordpress/api'
 import { cloneDeep } from 'lodash'
 
 // Include all the stored state.
@@ -45,9 +44,10 @@ const STORE_REDUCER = ( state = DEFAULT_STATE, action ) => {
 				delete newBlockStyles[ action.blockName ]
 			}
 
-			// eslint-disable-next-line camelcase
-			const settings = new models.Settings( { stackable_global_block_styles: newBlockStyles } )
-			settings.save()
+			saveSettings( {
+				// eslint-disable-next-line camelcase
+				stackable_global_block_styles: newBlockStyles,
+			} ).catch( () => {} )
 
 			return newBlockStyles
 		}
diff --git a/src/plugins/global-settings/color-schemes/color-scheme-picker.js b/src/plugins/global-settings/color-schemes/color-scheme-picker.js
index 453f94f35a..3a011ee1d6 100644
--- a/src/plugins/global-settings/color-schemes/color-scheme-picker.js
+++ b/src/plugins/global-settings/color-schemes/color-scheme-picker.js
@@ -24,14 +24,13 @@ import {
 	ControlSeparator,
 } from '~stackable/components'
 import { useBlockHoverState } from '~stackable/hooks'
-import { extractColor } from '~stackable/util'
+import { extractColor, saveSettings } from '~stackable/util'
 import { cloneDeep, isEqual } from 'lodash'
 
 import {
 	useRef, useState, useEffect,
 } from '@wordpress/element'
 import { useSelect, dispatch } from '@wordpress/data'
-import { models } from '@wordpress/api'
 import { __, sprintf } from '@wordpress/i18n'
 import { applyFilters, doAction } from '@wordpress/hooks'
 
@@ -146,15 +145,14 @@ const ColorSchemePicker = props => {
 	const saveColorSchemeSettings = updatedColorSchemes => {
 		clearTimeout( saveTimeout )
 		saveTimeout = setTimeout( () => {
-			const settings = new models.Settings( {
+			saveSettings( {
 				// Store an empty array if all color schemes have no values,
 				// which optimizes the frontend by skipping unnecessary color scheme calculations.
 				// Otherwise, save the provided updatedColorSchemes array.
 				stackable_global_color_schemes: hasNoColorSchemes( updatedColorSchemes ) ? [] : updatedColorSchemes, // eslint-disable-line camelcase
 				// Clear the cached CSS when the color scheme is updated
 				stackable_global_color_scheme_generated_css: '', // eslint-disable-line camelcase
-			} )
-			settings.save()
+			} ).catch( () => {} )
 		}, 300 )
 
 		// Update our store.
diff --git a/src/plugins/global-settings/color-schemes/index.js b/src/plugins/global-settings/color-schemes/index.js
index 10a1165f5f..c703e98015 100644
--- a/src/plugins/global-settings/color-schemes/index.js
+++ b/src/plugins/global-settings/color-schemes/index.js
@@ -18,6 +18,7 @@ import {
 	SectionSettings,
 } from '~stackable/components'
 import { useBlockColorSchemes } from '~stackable/hooks'
+import { saveSettings } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -26,7 +27,6 @@ import { addFilter } from '@wordpress/hooks'
 import { Fragment, useState } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { useSelect, dispatch } from '@wordpress/data'
-import { models } from '@wordpress/api'
 
 export { GlobalColorSchemeStyles } from './editor-loader'
 
@@ -53,11 +53,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-color-scheme
 	const onChangeDefaultColorScheme = ( mode, colorSchemeKey ) => {
 		clearTimeout( saveTimeout )
 		saveTimeout = setTimeout( () => {
-			const settings = new models.Settings( {
+			saveSettings( {
 				[ COLOR_SCHEME_OPTION_NAMES[ mode ] ]: colorSchemeKey, // eslint-disable-line camelcase
 				stackable_global_color_scheme_generated_css: '', // eslint-disable-line camelcase
-			} )
-			settings.save()
+			} ).catch( () => {} )
 		}, 300 )
 
 		// Update our store.
@@ -141,8 +140,7 @@ addFilter( 'stackable.global-settings.inspector.global-colors.toggle-controls',
 			hideColorSchemeColors: value,
 		} )
 
-		const settings = new models.Settings( { stackable_global_hide_color_scheme_colors: value } ) // eslint-disable-line camelcase
-		settings.save()
+		saveSettings( { stackable_global_hide_color_scheme_colors: value } ).catch( () => {} ) // eslint-disable-line camelcase
 	}
 
 	return <>
diff --git a/src/plugins/global-settings/colors/color-picker.js b/src/plugins/global-settings/colors/color-picker.js
index 2f7dbfc075..2366919039 100644
--- a/src/plugins/global-settings/colors/color-picker.js
+++ b/src/plugins/global-settings/colors/color-picker.js
@@ -13,12 +13,12 @@ import {
 import { cloneDeep } from 'lodash'
 import { i18n } from 'stackable'
 import { SortablePicker } from '~stackable/components'
+import { saveSettings } from '~stackable/util'
 
 import { useRef } from '@wordpress/element'
 import {
 	select, dispatch, useSelect,
 } from '@wordpress/data'
-import { models } from '@wordpress/api'
 import { __, sprintf } from '@wordpress/i18n'
 import { ColorIndicator, ColorPicker } from '@wordpress/components'
 
@@ -61,8 +61,7 @@ const ColorPickers = props => {
 		// Save settings.
 		clearTimeout( saveTimeout )
 		saveTimeout = setTimeout( () => {
-			const settings = new models.Settings( { stackable_global_colors: [ newColors ] } ) // eslint-disable-line camelcase
-			settings.save()
+			saveSettings( { stackable_global_colors: [ newColors ] } ).catch( () => {} ) // eslint-disable-line camelcase
 		}, 300 )
 
 		// Update our store.
diff --git a/src/plugins/global-settings/colors/index.js b/src/plugins/global-settings/colors/index.js
index 05a1c603d8..c1db045e9f 100644
--- a/src/plugins/global-settings/colors/index.js
+++ b/src/plugins/global-settings/colors/index.js
@@ -11,6 +11,7 @@ import { GlobalColorStyles } from './editor-loader'
  */
 import { i18n } from 'stackable'
 import { AdvancedToggleControl, PanelAdvancedSettings } from '~stackable/components'
+import { saveSettings } from '~stackable/util'
 import rgba from 'color-rgba'
 
 /**
@@ -20,7 +21,6 @@ import { addFilter, applyFilters } from '@wordpress/hooks'
 import { Fragment } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { dispatch, useSelect } from '@wordpress/data'
-import { models } from '@wordpress/api'
 
 export { GlobalColorStyles }
 
@@ -80,8 +80,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-colors', out
 			hideThemeColors: value,
 		} )
 
-		const settings = new models.Settings( { stackable_global_hide_theme_colors: value } ) // eslint-disable-line camelcase
-		settings.save()
+		saveSettings( { stackable_global_hide_theme_colors: value } ).catch( () => {} ) // eslint-disable-line camelcase
 	}
 
 	const onChangeHideDefaultColors = value => {
@@ -89,8 +88,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-colors', out
 			hideDefaultColors: value,
 		} )
 
-		const settings = new models.Settings( { stackable_global_hide_default_colors: value } ) // eslint-disable-line camelcase
-		settings.save()
+		saveSettings( { stackable_global_hide_default_colors: value } ).catch( () => {} ) // eslint-disable-line camelcase
 	}
 
 	const onChangeHideSiteEditorColors = value => {
@@ -98,8 +96,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-colors', out
 			hideSiteEditorColors: value,
 		} )
 
-		const settings = new models.Settings( { stackable_global_hide_site_editor_colors: value } ) // eslint-disable-line camelcase
-		settings.save()
+		saveSettings( { stackable_global_hide_site_editor_colors: value } ).catch( () => {} ) // eslint-disable-line camelcase
 	}
 
 	const ColorToggleControls = applyFilters( 'stackable.global-settings.inspector.global-colors.toggle-controls', Fragment )
diff --git a/src/plugins/global-settings/typography/editor-loader.js b/src/plugins/global-settings/typography/editor-loader.js
index 934a2a1c29..e6d7ada0e8 100644
--- a/src/plugins/global-settings/typography/editor-loader.js
+++ b/src/plugins/global-settings/typography/editor-loader.js
@@ -11,6 +11,7 @@
 import {
 	createTypographyStyles,
 	fetchSettings,
+	saveSettings,
 	loadGoogleFont,
 	getDefaultFontSize,
 } from '~stackable/util'
@@ -29,7 +30,6 @@ import {
 	addAction, removeAction, applyFilters, doAction, addFilter,
 } from '@wordpress/hooks'
 import { useSelect, dispatch } from '@wordpress/data'
-import { models } from '@wordpress/api'
 
 let saveTypographyAsPresetsThrottle = null
 
@@ -101,8 +101,7 @@ export const GlobalTypographyStyles = () => {
 
 			clearTimeout( saveTypographyAsPresetsThrottle )
 			saveTypographyAsPresetsThrottle = setTimeout( () => {
-				const settings = new models.Settings( { stackable_global_custom_preset_controls: newSettings } ) // eslint-disable-line camelcase
-				settings.save()
+				saveSettings( { stackable_global_custom_preset_controls: newSettings } ).catch( () => {} ) // eslint-disable-line camelcase
 			}, 300 )
 
 			dispatch( 'stackable/global-preset-controls.custom' ).updateCustomPresetControls( newSettings )
diff --git a/src/plugins/global-settings/typography/index.js b/src/plugins/global-settings/typography/index.js
index 26afdfc055..6b8b79aacc 100644
--- a/src/plugins/global-settings/typography/index.js
+++ b/src/plugins/global-settings/typography/index.js
@@ -24,7 +24,7 @@ import {
 	ProControlButton,
 	AdvancedToggleControl,
 } from '~stackable/components'
-import { fetchSettings } from '~stackable/util'
+import { fetchSettings, saveSettings } from '~stackable/util'
 import { useDeviceType } from '~stackable/hooks'
 import {
 	i18n, isPro, showProNotice,
@@ -39,7 +39,6 @@ import {
 import {
 	Fragment, useEffect, useRef, useState,
 } from '@wordpress/element'
-import { models } from '@wordpress/api'
 import {
 	addFilter, applyFilters, doAction,
 } from '@wordpress/hooks'
@@ -240,10 +239,9 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 
 		clearTimeout( saveTypographyThrottle )
 		saveTypographyThrottle = setTimeout( () => {
-			const model = new models.Settings( {
+			saveSettings( {
 				stackable_global_typography: [ newSettings ], // eslint-disable-line
-			} )
-			model.save()
+			} ).catch( () => {} )
 		}, 500 )
 
 		dispatch( 'stackable/global-typography' ).updateSettings( newSettings )
@@ -254,10 +252,9 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 
 		clearTimeout( saveSelectedFontPairThrottle )
 		saveSelectedFontPairThrottle = setTimeout( () => {
-			const model = new models.Settings( {
+			saveSettings( {
 				stackable_selected_font_pair: name, // eslint-disable-line
-			} )
-			model.save()
+			} ).catch( () => {} )
 		}, 500 )
 	}
 
@@ -266,27 +263,24 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 
 		clearTimeout( saveCustomFontPairsThrottle )
 		saveCustomFontPairsThrottle = setTimeout( () => {
-			const model = new models.Settings( {
+			saveSettings( {
 				stackable_custom_font_pairs: [ ...fontPairs ] , // eslint-disable-line
-			} )
-			model.save()
+			} ).catch( () => {} )
 		}, 500 )
 	}
 
 	const changeApplySettingsTo = value => {
 		setApplySettingsTo( value )
-		const model = new models.Settings( {
+		saveSettings( {
 			stackable_global_typography_apply_to: value, // eslint-disable-line
-		} )
-		model.save()
+		} ).catch( () => {} )
 	}
 
 	const changeIsApplyBodyToHTML = value => {
 		setIsApplyBodyToHTML( value )
-		const model = new models.Settings( {
+		saveSettings( {
 			stackable_is_apply_body_to_html: value, // eslint-disable-line
-		} )
-		model.save()
+		} ).catch( () => {} )
 	}
 
 	const updateTypeScale = value => {
diff --git a/src/plugins/global-settings/utils/use-block-layout-inspector-utils.js b/src/plugins/global-settings/utils/use-block-layout-inspector-utils.js
index 17adaa9033..5084573ef5 100644
--- a/src/plugins/global-settings/utils/use-block-layout-inspector-utils.js
+++ b/src/plugins/global-settings/utils/use-block-layout-inspector-utils.js
@@ -9,12 +9,12 @@ import { hoverState } from './block-layout-utils'
 import { getShadows } from '~stackable/components'
 import { IMAGE_SHADOWS } from '~stackable/block-components'
 import { useDeviceType, useBlockHoverState } from '~stackable/hooks'
+import { saveSettings as saveWPSettings } from '~stackable/util'
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n'
-import { models } from '@wordpress/api'
 import { useSelect, dispatch } from '@wordpress/data'
 
 export const useBlockLayoutInspectorUtils = ( storeName, optionName, setDisplayHoverNotice, saveTimeout ) => {
@@ -52,8 +52,7 @@ export const useBlockLayoutInspectorUtils = ( storeName, optionName, setDisplayH
 	const saveSettings = newSettings => {
 		clearTimeout( saveTimeout )
 		saveTimeout = setTimeout( () => {
-			const settings = new models.Settings( { [ optionName ]: newSettings } ) // eslint-disable-line camelcase
-			settings.save()
+			saveWPSettings( { [ optionName ]: newSettings } )
 		}, 300 )
 
 		// Update our store.
diff --git a/src/plugins/v2-migration-popup/index.js b/src/plugins/v2-migration-popup/index.js
index dc9cef361b..f9179e0e99 100644
--- a/src/plugins/v2-migration-popup/index.js
+++ b/src/plugins/v2-migration-popup/index.js
@@ -7,24 +7,23 @@ import MigrationModal from './migration-popover'
 /**
  * WordPress dependencies
  */
+import apiFetch from '@wordpress/api-fetch'
 import { registerPlugin } from '@wordpress/plugins'
-import { loadPromise, models } from '@wordpress/api'
 
-loadPromise.then( () => {
-	const settings = new models.Settings()
-	settings.fetch().then( response => {
-		// If the detector is already dismissed, don't show it any more.
-		if ( response.stackable_v2_block_detector_disabled ) {
-			return
-		}
+apiFetch( {
+	path: '/wp/v2/settings',
+} ).then( response => {
+	// If the detector is already dismissed, don't show it any more.
+	if ( response.stackable_v2_block_detector_disabled ) {
+		return
+	}
 
-		// Only do this when the v2 compatibility is not enabled at all.
-		if ( ! response.stackable_v2_editor_compatibility && ! response.stackable_v2_editor_compatibility_usage ) {
-			detectV2Blocks().then( hasV2Blocks => {
-				if ( hasV2Blocks ) {
-					registerPlugin( 'stackable-v2-migration-popup', { render: MigrationModal } )
-				}
-			} )
-		}
-	} )
-} )
+	// Only do this when the v2 compatibility is not enabled at all.
+	if ( ! response.stackable_v2_editor_compatibility && ! response.stackable_v2_editor_compatibility_usage ) {
+		detectV2Blocks().then( hasV2Blocks => {
+			if ( hasV2Blocks ) {
+				registerPlugin( 'stackable-v2-migration-popup', { render: MigrationModal } )
+			}
+		} )
+	}
+} ).catch( () => {} )
diff --git a/src/plugins/v2-migration-popup/migration-popover.js b/src/plugins/v2-migration-popup/migration-popover.js
index d7a668671e..1f27516204 100644
--- a/src/plugins/v2-migration-popup/migration-popover.js
+++ b/src/plugins/v2-migration-popup/migration-popover.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { i18n } from 'stackable'
+import { saveSettings } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -11,7 +12,6 @@ import {
 } from '@wordpress/components'
 import { useState } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
-import { models } from '@wordpress/api'
 
 const MigrationModal = () => {
 	const [ isOpen, setIsOpen ] = useState( true )
@@ -23,8 +23,7 @@ const MigrationModal = () => {
 
 	const save = ( settings, refresh = false ) => {
 		setIsBusy( true )
-		const model = new models.Settings( settings )
-		model.save().then( () => {
+		saveSettings( settings ).then( () => {
 			setIsBusy( false )
 			setIsOpen( false )
 			// Reload the page.
@@ -32,6 +31,8 @@ const MigrationModal = () => {
 				window.alert( __( 'The page will now reload for the old blocks to load. Please reload it if it does not refresh automatically.', i18n ) ) // eslint-disable-line no-alert
 				window.location.href = window.location.href
 			}
+		} ).catch( () => {
+			setIsBusy( false )
 		} )
 	}
 
diff --git a/src/test/wp-api-stub.js b/src/test/wp-api-stub.js
deleted file mode 100644
index 1f5ea94f12..0000000000
--- a/src/test/wp-api-stub.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * This stub is needed for wp.api calls.
- */
-module.exports = {
-	loadPromise: Promise.resolve(),
-	models: {
-		Settings: () => {
-			return {
-				save: () => {},
-				fetch: () => Promise.resolve( {} ),
-			}
-		},
-	},
-}
diff --git a/src/util/admin.js b/src/util/admin.js
index f10afd2a9a..c3c50135e1 100644
--- a/src/util/admin.js
+++ b/src/util/admin.js
@@ -6,7 +6,6 @@ import { sortBy } from 'lodash'
 /**
  * WordPress dependencies
  */
-import { loadPromise } from '@wordpress/api'
 import apiFetch from '@wordpress/api-fetch'
 
 // Collect all the blocks and their variations for enabling/disabling and sort
@@ -59,11 +58,12 @@ let fetchingPromise = null
  */
 export const fetchSettings = () => {
 	if ( ! fetchingPromise ) {
-		fetchingPromise = loadPromise.then( async () => {
-			const response = await apiFetch( {
-				path: '/stackable/v3/settings/',
-				method: 'GET',
-			} )
+		// apiFetch can call a known REST path directly, so it does not need
+		// @wordpress/api's loadPromise.
+		fetchingPromise = apiFetch( {
+			path: '/stackable/v3/settings/',
+			method: 'GET',
+		} ).then( response => {
 			fetchingPromise = null
 			return response
 		} )
@@ -71,3 +71,16 @@ export const fetchSettings = () => {
 
 	return fetchingPromise
 }
+
+/**
+ * Saves settings.
+ *
+ * @param {Object} data Settings to save.
+ *
+ * @return {Promise} Save settings promise.
+ */
+export const saveSettings = data => apiFetch( {
+	path: '/wp/v2/settings',
+	method: 'POST',
+	data,
+} )
diff --git a/src/welcome/admin.js b/src/welcome/admin.js
index b621d886b6..23a03382e3 100644
--- a/src/welcome/admin.js
+++ b/src/welcome/admin.js
@@ -18,7 +18,6 @@ import domReady from '@wordpress/dom-ready'
 import {
 	Button, Flex, FlexItem, Spinner, CheckboxControl, Modal,
 } from '@wordpress/components'
-import { models } from '@wordpress/api'
 import { applyFilters } from '@wordpress/hooks'
 
 /**
@@ -33,7 +32,9 @@ import {
 	editorRoles,
 } from 'stackable'
 import classnames from 'classnames'
-import { fetchSettings, importBlocks } from '~stackable/util/admin'
+import {
+	fetchSettings, importBlocks, saveSettings,
+} from '~stackable/util/admin'
 import { createRoot } from '~stackable/util/element'
 import AdminSelectSetting from '~stackable/components/admin-select-setting'
 import AdminToggleSetting from '~stackable/components/admin-toggle-setting'
@@ -546,8 +547,7 @@ const Settings = () => {
 		}
 		setIsSaving( true )
 		setIsRecentlySaved( true )
-		const model = new models.Settings( unsavedChanges )
-		model.save().then( () => {
+		saveSettings( unsavedChanges ).then( () => {
 			// Add a little more time for the spinner for better feedback
 			setTimeout( () => {
 				setIsSaving( false )
diff --git a/src/welcome/import-export/index.js b/src/welcome/import-export/index.js
index fcea5c2352..ca952de9ac 100644
--- a/src/welcome/import-export/index.js
+++ b/src/welcome/import-export/index.js
@@ -11,12 +11,12 @@ import {
 import {
 	useState, useMemo, Fragment,
 } from '@wordpress/element'
-import { models } from '@wordpress/api'
 
 /**
  * External dependencies
  */
 import { i18n } from 'stackable'
+import { saveSettings } from '~stackable/util/admin'
 import { applyFilters } from '@wordpress/hooks'
 
 export const ImportExportModal = props => {
@@ -90,8 +90,7 @@ const ImportSettings = ( {
 			}
 
 			if ( Object.keys( settingsToSave ).length > 0 ) {
-				const model = new models.Settings( settingsToSave )
-				await model.save()
+				await saveSettings( settingsToSave )
 			}
 
 			setNotice( __( 'Settings imported successfully.', i18n ) )
diff --git a/src/welcome/index.php b/src/welcome/index.php
index dda4588a6f..12040ecfc3 100644
--- a/src/welcome/index.php
+++ b/src/welcome/index.php
@@ -112,7 +112,7 @@ public function enqueue_dashboard_script( $hook ) {
 
 				do_action( 'stackable_settings_admin_enqueue_scripts' );
 
-				wp_enqueue_script( 'stackable-welcome', plugins_url( 'dist/admin_welcome.js', STACKABLE_FILE ), array( 'wp-i18n', 'wp-element', 'wp-hooks', 'wp-util', 'wp-components', 'wp-api', 'wp-editor', 'lodash' ), STACKABLE_VERSION );
+				wp_enqueue_script( 'stackable-welcome', plugins_url( 'dist/admin_welcome.js', STACKABLE_FILE ), array( 'wp-i18n', 'wp-element', 'wp-hooks', 'wp-util', 'wp-components', 'wp-api-fetch', 'wp-editor', 'lodash' ), STACKABLE_VERSION );
 
 				// Add translations.
 				wp_set_script_translations( 'stackable-welcome', STACKABLE_I18N );