Skip to content

Instantly share code, notes, and snippets.

@HardeepAsrani
Last active December 15, 2023 22:00
Show Gist options
  • Save HardeepAsrani/950f4796759a5c7a29fb537837e3a47d to your computer and use it in GitHub Desktop.
Save HardeepAsrani/950f4796759a5c7a29fb537837e3a47d to your computer and use it in GitHub Desktop.
useSettings.js
/**
* WordPress dependencies.
*/
import api from '@wordpress/api';
import { __ } from '@wordpress/i18n';
import { dispatch } from '@wordpress/data';
import {
useEffect,
useState
} from '@wordpress/element';
/**
* useSettings Hook.
*
* useSettings hook to get/update WordPress' settings database.
*
* Setting field needs to be registered to REST for this function to work.
*
* This hook works similar to get_option and update_option in PHP just without the option for a default value.
* For notificiations to work, you need to add a Snackbar section to your React codebase if it isn't being
* used inside the block editor.
*
* @see https://github.com/WordPress/gutenberg/blob/trunk/packages/editor/src/components/editor-snackbars/index.js
* @author Hardeep Asrani <[email protected]>
* @version 1.1
*
*/
const useSettings = () => {
const { createNotice } = dispatch( 'core/notices' );
const [ settings, setSettings ] = useState({});
const [ status, setStatus ] = useState( 'loading' );
const getSettings = () => {
api.loadPromise.then( async() => {
try {
const settings = new api.models.Settings();
const response = await settings.fetch();
setSettings( response );
} catch ( error ) {
setStatus( 'error' );
} finally {
setStatus( 'loaded' );
}
});
};
useEffect( () => {
getSettings();
}, []);
const getOption = option => {
return settings?.[option];
};
const updateOption = ( option, value, success = __( 'Settings saved.', 'textdomain' ) ) => {
setStatus( 'saving' );
const save = new api.models.Settings({ [option]: value }).save();
save.success( ( response, status ) => {
if ( 'success' === status ) {
setStatus( 'loaded' );
createNotice(
'success',
success,
{
isDismissible: true,
type: 'snackbar'
}
);
}
if ( 'error' === status ) {
setStatus( 'error' );
createNotice(
'error',
__( 'An unknown error occurred.', 'textdomain' ),
{
isDismissible: true,
type: 'snackbar'
}
);
}
getSettings();
});
save.error( ( response ) => {
setStatus( 'error' );
createNotice(
'error',
response.responseJSON.message ? response.responseJSON.message : __( 'An unknown error occurred.', 'textdomain' ),
{
isDismissible: true,
type: 'snackbar'
}
);
});
};
return [ getOption, updateOption, status ];
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment