How can I add and update custom settings for a plugin

[tresorama]

Which is the canonical way to add a "setting" for a plugin i made , and read/write this setting from a custom Block Editor sidebar ??

I've created a plugin that add some panel in the block editor for every block, and i want to control the presence of these panels from a global setting exposed in the Block Editor UI.
The setting is custom to my plugin, so i need to create it and be able to read and write from the database.

Research pointed me to creating a plugin sidebar in the block editor with wp.hooks.registerPlugin, and so i created the static frontend in React.
Now i need to first register, then read and write from db the "setting".

How can i do that?
Is there an equivalent to get_option / update_option for JS side ?

[talldan]

For the data side of things you'd be using the WordPress REST API.

I'd recommend having a look through this tutorial - https://developer.wordpress.org/block-editor/how-to-guides/data-basics/

It should explain how to use the data module to interact with the REST API.

[tresorama]

For the data side of things you'd be using the WordPress REST API.

I'd recommend having a look through this tutorial - https://developer.wordpress.org/block-editor/how-to-guides/data-basics/

It should explain how to use the data module to interact with the REST API.

Thanks @talldan.

In case i need to fetch a list of "page" the HTTP request is

/wp/v2/pages

and in Gutenberg /React / Redux side this should be used

wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )

---

In case, while creating my plugin, I extend the WP Rest API, by creating a new endpoint, let's say

/my-plugin/v1/my-resource

how is the wp.data... line of code now ???

[talldan]

That's a good question. I think there is a way to add entities (an entity is roughly the same as a REST resource). Something like this as your plugin intializes:

wp.data.dispatch( 'core' ).addEntities( [ {
    name: 'myResource',
    kind: 'root',
    baseURL: '/my-plugin/v1/my-resource',
    baseURLParams: { context: 'edit' },
    plural: 'myResources',
    label: __( 'My Resource' ),
} ] );

And then you'd be able to use:

wp.data.select( 'core' ).getEntityRecords( 'root', 'myResource' );

I haven't tested this though and I'm not sure if this is the recommended way over creating a separate store. You may also be able to use a different kind, it might be possible to use kind: 'myPlugin' to create more of a namespace.

Here's the configuration for the WordPress core REST resources that Gutenberg uses which may be a useful reference:
https://github.com/WordPress/gutenberg/blob/trunk/packages/core-data/src/entities.js

Creating a store is often not too difficult, it's a lot of boilerplate (and maybe some frustration when things don't seem to work!), but it gives the advantage that you can build your own selectors and actions, and also store other types of application data your plugin might use.

[talldan]

It's also worth mentioning that you don't have to do it this way at all, and you can just use the browser's fetch or wp.apiFetch to interact with the REST API. That may be better for simpler use cases.

[tresorama]

It's also worth mentioning that you don't have to do it this way at all, and you can just use the browser's fetch or wp.apiFetch to interact with the REST API. That may be better for simpler use cases.

This was my first attempt, using apiFetch and trigger it on component mount inside useEffect(...., []) for the read part. But my component is mounted-unmounted more than 100+ times, triggering 100+ network request.
Honestly i don't know why.
Can it be due to how <PluginSidebar/> or <PluginSidebarMoreMenuItem/> is designed ???

[tresorama]

So i tried to build a redux store because of theserequirements:

• be able to share state between components rendered in <PluginSidebarMoreMenuItem/> and also in block sidebar settings with wp.hooks.addFilter("editor.BlockEdit", ...)
• perform read/write to database

---

Starting from this

// in store.js

import { useState, useEffect, useRef } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';

const objectsAreEqual = (object1, object2) => JSON.stringify(object1) === JSON.stringify(object2);

export const useMyPluginSettings = () => {
  const [fetchStatus, setFetchStatus] = useState('idle');// idle|pending|success|error
  const [settings, setSettings] = useState({
    enable_setting_1: false,
    enable_setting_2: false,
    enable_setting_3: false,
  });
  const lastFetchedSettings = useRef(settings);
  const isDirty = !objectsAreEqual(settings, lastFetchedSettings.current);

  const querySettingsFromDb = () => {
    setFetchStatus('pending');
    apiFetch({
      method: 'GET',
      path: "/my-plugin/v1/settings",
    }).then(response => {
      setSettings(response);
      lastFetchedSettings.current = response;
      setFetchStatus('success');
    }).catch(error => {
      console.error(error);
      setFetchStatus('error');
    });
  };
  const persistSettingsToDb = () => {
    setFetchStatus('pending');
    apiFetch({
      method: 'PUT',
      path: "/my-plugin/v1/settings",
      body: JSON.stringify(settings),
    }).then(response => {
      console.log({ response });
      lastFetchedSettings.current = settings;
      setFetchStatus('success');
    }).catch(error => {
      console.error(error);
      setFetchStatus('error');
    });
  };

  useEffect(() => {
    querySettingsFromDb();
  }, []);

  return {
    settings,
    setSettings,
    persistSettingsToDb,
    fetchStatus,
    isDirty,
  };
};

// in consumer.js
import { registerPlugin } from '@wordpress/plugins';

registerPlugin("my-plugin-settings", {
    render: () => {
      const { fetchStatus, settings, setSettings, persistSettingsToDb, isDirty } = useMyPluginSettings();
      if (!fetchStatus === 'success') return <></>;

      return (
        <>
          <PluginSidebarMoreMenuItem target="my-plugin-settings--sidebar">
            My Plugin - Settings
          </PluginSidebarMoreMenuItem>
          <PluginSidebar name="my-plugin-settings--sidebar"  title="My Plugin - Settings">
            ...
          </PluginSidebar>
      )
});

I done this

import { createReduxStore, useSelect, useDispatch } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';

// js utils
const objectsAreEqual = (object1, object2) => JSON.stringify(object1) === JSON.stringify(object2);

/* ===================================================
  Functions used to communicate from/to database
=================================================== */
const queryFromDb_myPluginSettings = async () => apiFetch({
  method: 'GET',
  path: "/my-plugin/v1/settings",
});
const mutateToDb_myPluginSettings = async (settings) => apiFetch({
  method: 'PUT',
  path: "/my-plugin/v1/settings",
  body: JSON.stringify(settings),
});

/* ===================================================
  redux store - used to share state between components, like React Context
=================================================== */
const initialState = {
  fetchStatus: 'idle',
  isDirty: false,
  lastFetchedSettings: {
    enable_setting_1: false,
    enable_setting_2: false,
    enable_setting_3: false,
  },
  settings: {
    enable_setting_1: false,
    enable_setting_2: false,
    enable_setting_3: false,
  },
};
const actions = {
  setFetchStatus: (newStatus) => ({
    type: 'SET_FETCH_STATUS',
    payload: newStatus,
  }),
  setSettings: (partialSettings) => ({
    type: 'SET_SETTINGS',
    payload: partialSettings,
  }),
  setLastFetchedSettings: (lastFetchedSettings) => ({
    type: 'SET_LAST_FETCHED_SETTINGS',
    payload: lastFetchedSettings,
  }),
};
export const store = createReduxStore('jachi-bea', {
  initialState,
  actions,
  // eslint-disable-next-line default-param-last
  reducer(state = initialState, action) {
    if (action.type === 'SET_FETCH_STATUS') {
      return { ...state, fetchStatus: action.payload };
    }
    if (action.type === 'SET_SETTINGS') {
      const newSettings = { ...state.settings, ...action.payload };
      const isDirty = !objectsAreEqual(newSettings, state.lastFetchedSettings);
      return { ...state, settings: newSettings, isDirty };
    }
    if (action.type === 'SET_LAST_FETCHED_SETTINGS') {
      return { ...state, lastFetchedSettings: action.payload, isDirty: false };
    }
    return state;
  },
  selectors: {
    getSettings(state) {
      return state.settings;
    },
    getFetchStatus(state) {
      return state.fetchStatus;
    },
    getIsDirty(state) {
      return state.isDirty;
    },
  },
  resolvers: {
    async getSettings() {
      // how can i do this ???
      // setFetchStatus('pending')
      try {
        const editorSettings = await queryFromDb_myPluginSettings();
        return actions.setSettings(editorSettings);
        // how can i do this ???
        // setFetchStatus('success');
      } catch (error) {
        return actions.setFetchStatus('error');
      }
    },
  },
});

/* ===================================================
  React hook - used to interact with this store/state and control side-effect
=================================================== */
export const useEditorSettings = () => {
  const settings = useSelect(select => select(store).getSettings());
  const fetchStatus = useSelect(select => select(store).getFetchStatus());
  const isDirty = useSelect(select => select(store).getIsDirty());
  const { setSettings, setLastFetchedSettings, setFetchStatus } = useDispatch(store);

  const persistSettingsToDB = () => {
    setFetchStatus('pending');
    mutateToDb_myPluginSettings(settings)
      .then(() => {
        setLastFetchedSettings(settings);
        setFetchStatus('success');
      }).catch(error => {
        console.error(error);
        setFetchStatus('error');
      });
  };

  return {
    fetchStatus,
    settings,
    isDirty,
    setSettings,
    persistSettingsToDB,
  };
};

// in consumer.js
import { registerPlugin } from '@wordpress/plugins';

registerPlugin("my-plugin-settings", {
    render: () => {
      const { fetchStatus, settings, setSettings, persistSettingsToDb, isDirty } = useMyPluginSettings();
      if (!fetchStatus === 'success') return <></>;

      return (
        <>
          <PluginSidebarMoreMenuItem target="my-plugin-settings--sidebar">
            My Plugin - Settings
          </PluginSidebarMoreMenuItem>
          <PluginSidebar name="my-plugin-settings--sidebar"  title="My Plugin - Settings">
            ...
          </PluginSidebar>
      )
});

I know it's not ideal under re.render aspect but now i want only to make it works.

I cannot get my head around how to perform the persistSettingsToDB mutation inside the redux store:

• how will i handle success error and loading states ?
• how the generator / yield thing works when i usually use await ?

[tresorama]

Reading some blogpost about this topic:

• Is there a better way to to make async API calls using the @wordpress/data module? #41537 (comment)
• Documentation: Document usage of core entities (getEntityRecords, etc) #12120
• Efficient client data management for WordPress Plugins
• [Draft] Data layer overview #37615
• #3 Redux Crash Course | WordPress Data Module | @wordpress/data | custom store | redux react

seems that the path required is to create a custom redux store and attach it to the redux global instance.

Does anyone knows if exists an alternative method ?
Maybe creating a WP_Rest_API endpoint is such a way that the endpoint is automatically exposed in wp.data.select('core') sub store ?

If someone has resources/examples about creating a redux store with wp-data with error handling and all other production ready requirements and is happy to share them it will be really appreciated.

[bgomes-bacardi]

Your question is a very good one, i've spend hours in the wordpress maze of information and that information is no where to be found.

How to retrieve a wp_option that was saved from a plugin and get the information in the edit.js, because in php it's just get_option('my_plugin_option'). This setting will affect the component colors, images, etc to be shown in the editor

[tresorama]

Did you find a solution?