Skip to content

Instantly share code, notes, and snippets.

@KevinBatdorf
Last active September 9, 2022 00:37
Show Gist options
  • Save KevinBatdorf/b043fba52919dfcdfdff1da1f00cd059 to your computer and use it in GitHub Desktop.
Save KevinBatdorf/b043fba52919dfcdfdff1da1f00cd059 to your computer and use it in GitHub Desktop.
Zustand with WordPress Gutenberg apiFetch using TypeScript
<?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']],
],
],
],
]);
}
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