Last active
September 9, 2022 00:37
-
-
Save KevinBatdorf/b043fba52919dfcdfdff1da1f00cd059 to your computer and use it in GitHub Desktop.
Zustand with WordPress Gutenberg apiFetch using TypeScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
defined('ABSPATH') or die; | |
add_action('admin_init', 'my_namespace_register_settings'); | |
add_action('rest_api_init', 'my_namespace_register_settings'); | |
function my_namespace_register_settings() { | |
register_setting('my_namespace_settings', 'my_namespace_settings', [ | |
'type' => 'object', | |
'show_in_rest' => [ | |
'schema' => [ | |
'type' => 'object', | |
'properties' => [ | |
"version" => [ 'type' => ['string', 'number'] ], | |
'myProperty' => [ 'type' => ['string', 'null']], | |
], | |
], | |
], | |
]); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import apiFetch from '@wordpress/api-fetch'; | |
import create from 'zustand'; | |
import { devtools, persist } from 'zustand/middleware'; | |
type MyType = { | |
myProperty: string; | |
}; | |
const path = '/wp/v2/settings'; | |
const getSettings = async (name: string) => { | |
const allSettings = await apiFetch({ path }); | |
// eslint-disable-next-line @typescript-eslint/ban-ts-comment | |
// @ts-ignore-next-line | |
return allSettings?.[name]; | |
}; | |
export const useThemeStore = create<MyType>()( | |
persist( | |
devtools( | |
() => ({ | |
myProperty: 'Something Default', | |
}), | |
{ name: 'Label that shows in Redux DevTools' }, | |
), | |
{ | |
name: 'my_namespace_settings', | |
getStorage: () => ({ | |
getItem: async (name: string) => { | |
const settings = await getSettings(name); | |
return JSON.stringify({ | |
version: settings.version, | |
state: settings, | |
}); | |
}, | |
setItem: async (name: string, value: string) => { | |
const { state, version } = JSON.parse(value); | |
const data = { | |
[name]: Object.assign( | |
(await getSettings(name)) ?? {}, | |
state, | |
version, | |
), | |
}; | |
await apiFetch({ path, method: 'POST', data }); | |
}, | |
removeItem: async (name: string) => { | |
const data = { [name]: null }; | |
return await apiFetch({ path, method: 'POST', data }); | |
}, | |
}), | |
}, | |
), | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment