fix: migrate wp-api to wp-api-fetch

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',

src/components/base-control2/label-tooltip.js

@@ -15,7 +15,7 @@ import { fetchSettings } from '~stackable/util'
 import {
 	useRef, useState, useEffect,
 } from '@wordpress/element'
-import { models } from '@wordpress/api'
+import apiFetch from '@wordpress/api-fetch'
 import domReady from '@wordpress/dom-ready'
 
 const LabelTooltip = props => {
@@ -138,10 +138,13 @@ function useHelpTooltipEnabled() {
 	const updateHelpTooltipEnabled = newValue => {
 		helpTooltipEnabled = newValue
 
-		const model = new models.Settings( {
-			stackable_help_tooltip_disabled: newValue ? '' : '1', // eslint-disable-line
+		apiFetch( {
+			path: '/wp/v2/settings',
+			method: 'POST',
+			data: {
+				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 } ) )

src/components/guided-modal-tour/index.js

@@ -18,7 +18,7 @@ import { guidedTourStates } from 'stackable'
 /**
  * WordPress dependencies
  */
-import { models } from '@wordpress/api'
+import apiFetch from '@wordpress/api-fetch'
 import {
 	useEffect, useState, lazy, Suspense, memo,
 } from '@wordpress/element'
@@ -92,9 +92,12 @@ 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()
+						apiFetch( {
+							path: '/wp/v2/settings',
+							method: 'POST',
+							// eslint-disable-next-line camelcase
+							data: { stackable_guided_tour_states: [ ...guidedTourStates, tourId ] },
+						} )
 					}
 
 					// Soft update the global variable to prevent the tour from being shown again.

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 ),

src/deprecated/v2/welcome/admin.js

@@ -7,7 +7,7 @@ import {
 } from '@wordpress/element'
 import { send as ajaxSend } from '@wordpress/ajax'
 import { Spinner } from '@wordpress/components'
-import { models } from '@wordpress/api'
+import apiFetch from '@wordpress/api-fetch'
 
 /**
  * External dependencies
@@ -123,8 +123,11 @@ export const OptimizationSettings = ( { searchSettings } ) => {
 	}, [] )
 
 	const updateOptimizeScriptLoad = value => {
-		const model = new models.Settings( { stackable_optimize_script_load: value } ) // eslint-disable-line camelcase
-		model.save()
+		apiFetch( {
+			path: '/wp/v2/settings',
+			method: 'POST',
+			data: { stackable_optimize_script_load: value }, // eslint-disable-line camelcase
+		} )
 		setOptimizeScriptLoad( value )
 	}
 

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
 			);
 

src/lazy-components/cimo/index.js

@@ -9,7 +9,7 @@ import domReady from '@wordpress/dom-ready'
 import {
 	useState, useRef, useEffect,
 } from '@wordpress/element'
-import { models } from '@wordpress/api'
+import apiFetch from '@wordpress/api-fetch'
 
 let isPolling = false
 let cimoData = { status: cimo?.status, action: cimo?.action }
@@ -20,8 +20,11 @@ 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()
+		apiFetch( {
+			path: '/wp/v2/settings',
+			method: 'POST',
+			data: { stackable_hide_cimo_notice: true }, // eslint-disable-line camelcase
+		} )
 
 		if ( cimo ) {
 			cimo.hideNotice = true

src/plugins/global-settings/block-styles/store.js

@@ -11,7 +11,7 @@ import {
 } from '@wordpress/data'
 import domReady from '@wordpress/dom-ready'
 import { __ } from '@wordpress/i18n'
-import { models } from '@wordpress/api'
+import apiFetch from '@wordpress/api-fetch'
 import { cloneDeep } from 'lodash'
 
 // Include all the stored state.
@@ -45,9 +45,12 @@ 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()
+			apiFetch( {
+				path: '/wp/v2/settings',
+				method: 'POST',
+				// eslint-disable-next-line camelcase
+				data: { stackable_global_block_styles: newBlockStyles },
+			} )
 
 			return newBlockStyles
 		}

src/plugins/global-settings/color-schemes/color-scheme-picker.js

@@ -31,7 +31,7 @@ import {
 	useRef, useState, useEffect,
 } from '@wordpress/element'
 import { useSelect, dispatch } from '@wordpress/data'
-import { models } from '@wordpress/api'
+import apiFetch from '@wordpress/api-fetch'
 import { __, sprintf } from '@wordpress/i18n'
 import { applyFilters, doAction } from '@wordpress/hooks'
 
@@ -146,15 +146,18 @@ const ColorSchemePicker = props => {
 	const saveColorSchemeSettings = updatedColorSchemes => {
 		clearTimeout( saveTimeout )
 		saveTimeout = setTimeout( () => {
-			const settings = new models.Settings( {
-				// 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
+			apiFetch( {
+				path: '/wp/v2/settings',
+				method: 'POST',
+				data: {
+					// 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()
 		}, 300 )
 
 		// Update our store.

src/plugins/global-settings/color-schemes/index.js

@@ -26,7 +26,7 @@ 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'
+import apiFetch from '@wordpress/api-fetch'
 
 export { GlobalColorSchemeStyles } from './editor-loader'
 
@@ -53,11 +53,14 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-color-scheme
 	const onChangeDefaultColorScheme = ( mode, colorSchemeKey ) => {
 		clearTimeout( saveTimeout )
 		saveTimeout = setTimeout( () => {
-			const settings = new models.Settings( {
-				[ COLOR_SCHEME_OPTION_NAMES[ mode ] ]: colorSchemeKey, // eslint-disable-line camelcase
-				stackable_global_color_scheme_generated_css: '', // eslint-disable-line camelcase
+			apiFetch( {
+				path: '/wp/v2/settings',
+				method: 'POST',
+				data: {
+					[ COLOR_SCHEME_OPTION_NAMES[ mode ] ]: colorSchemeKey, // eslint-disable-line camelcase
+					stackable_global_color_scheme_generated_css: '', // eslint-disable-line camelcase
+				},
 			} )
-			settings.save()
 		}, 300 )
 
 		// Update our store.
@@ -141,8 +144,11 @@ 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()
+		apiFetch( {
+			path: '/wp/v2/settings',
+			method: 'POST',
+			data: { stackable_global_hide_color_scheme_colors: value }, // eslint-disable-line camelcase
+		} )
 	}
 
 	return <>

src/plugins/global-settings/colors/color-picker.js

@@ -18,7 +18,7 @@ import { useRef } from '@wordpress/element'
 import {
 	select, dispatch, useSelect,
 } from '@wordpress/data'
-import { models } from '@wordpress/api'
+import apiFetch from '@wordpress/api-fetch'
 import { __, sprintf } from '@wordpress/i18n'
 import { ColorIndicator, ColorPicker } from '@wordpress/components'
 
@@ -61,8 +61,11 @@ const ColorPickers = props => {
 		// Save settings.
 		clearTimeout( saveTimeout )
 		saveTimeout = setTimeout( () => {
-			const settings = new models.Settings( { stackable_global_colors: [ newColors ] } ) // eslint-disable-line camelcase
-			settings.save()
+			apiFetch( {
+				path: '/wp/v2/settings',
+				method: 'POST',
+				data: { stackable_global_colors: [ newColors ] }, // eslint-disable-line camelcase
+			} )
 		}, 300 )
 
 		// Update our store.

src/plugins/global-settings/colors/index.js

@@ -20,7 +20,7 @@ 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'
+import apiFetch from '@wordpress/api-fetch'
 
 export { GlobalColorStyles }
 
@@ -80,26 +80,35 @@ 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()
+		apiFetch( {
+			path: '/wp/v2/settings',
+			method: 'POST',
+			data: { stackable_global_hide_theme_colors: value }, // eslint-disable-line camelcase
+		} )
 	}
 
 	const onChangeHideDefaultColors = value => {
 		dispatch( 'stackable/global-colors' ).updateSettings( {
 			hideDefaultColors: value,
 		} )
 
-		const settings = new models.Settings( { stackable_global_hide_default_colors: value } ) // eslint-disable-line camelcase
-		settings.save()
+		apiFetch( {
+			path: '/wp/v2/settings',
+			method: 'POST',
+			data: { stackable_global_hide_default_colors: value }, // eslint-disable-line camelcase
+		} )
 	}
 
 	const onChangeHideSiteEditorColors = value => {
 		dispatch( 'stackable/global-colors' ).updateSettings( {
 			hideSiteEditorColors: value,
 		} )
 
-		const settings = new models.Settings( { stackable_global_hide_site_editor_colors: value } ) // eslint-disable-line camelcase
-		settings.save()
+		apiFetch( {
+			path: '/wp/v2/settings',
+			method: 'POST',
+			data: { stackable_global_hide_site_editor_colors: value }, // eslint-disable-line camelcase
+		} )
 	}
 
 	const ColorToggleControls = applyFilters( 'stackable.global-settings.inspector.global-colors.toggle-controls', Fragment )

src/plugins/global-settings/typography/editor-loader.js

@@ -29,7 +29,7 @@ import {
 	addAction, removeAction, applyFilters, doAction, addFilter,
 } from '@wordpress/hooks'
 import { useSelect, dispatch } from '@wordpress/data'
-import { models } from '@wordpress/api'
+import apiFetch from '@wordpress/api-fetch'
 
 let saveTypographyAsPresetsThrottle = null
 
@@ -101,8 +101,11 @@ export const GlobalTypographyStyles = () => {
 
 			clearTimeout( saveTypographyAsPresetsThrottle )
 			saveTypographyAsPresetsThrottle = setTimeout( () => {
-				const settings = new models.Settings( { stackable_global_custom_preset_controls: newSettings } ) // eslint-disable-line camelcase
-				settings.save()
+				apiFetch( {
+					path: '/wp/v2/settings',
+					method: 'POST',
+					data: { stackable_global_custom_preset_controls: newSettings }, // eslint-disable-line camelcase
+				} )
 			}, 300 )
 
 			dispatch( 'stackable/global-preset-controls.custom' ).updateCustomPresetControls( newSettings )