Gutenbergブロックエディタから設定値をカスタムストア経由で変更する

add_action('admin_init', 'vk_custom_store_test_settings');

function vk_custom_store_test_settings() {
    register_setting('vk-custom-store-test-settings-group', 'vk_custom_store_test_settings',
	array(
		'type'              => 'object',
		'sanitize_callback' => 'vk_sanitaize_options',
		'show_in_rest'      => array(
			'schema' => array(
				'type'       => 'object',
				'properties' => array(
					'vk_option_text_1'        => array(
						'type' => 'string',
					),
					'vk_option_text_2'        => array(
						'type' => 'string',
					),		
					'vk_option_text_3'        => array(
						'type' => 'string',
					),	
					'vk_option_text_4'        => array(
						'type' => 'string',
					)												
			)
		)
	)));
}

add_action( 'rest_api_init', 'vk_custom_store_test_rest_api_init' );

function vk_custom_store_test_rest_api_init() {
	register_rest_route(
		'vk-custom-store-test/v2',
		'/settings',
		array(
			array(
				'methods'             => 'GET',
				'callback'            => 'get_vk_option_tests',
				'permission_callback' => function () {
					return current_user_can( 'edit_theme_options' );
				}				
			),
			array(
				'methods'             => 'POST',
				'callback'            => 'update_vk_option_tests',
				'permission_callback' => function () {
					return current_user_can( 'edit_theme_options' );
				}
			)
		)
	);
}

function get_vk_option_tests() {
	$options = get_option('vk_custom_store_test_settings');
	return rest_ensure_response( $options );
}

function update_vk_option_tests( $request ) {
	$json_params = $request->get_json_params();
	update_option( 'vk_custom_store_test_settings', $json_params );
	return rest_ensure_response(
		array(
			'success' => true,
		)
	);
}

await apiFetch({
    path: 'vk-custom-store-test/v2/settings',
    method: 'POST',
    data: {
       vk_option_text_1: "あああ",
       vk_option_text_2: "あああ",
       vk_option_text_3: "あああ",
       vk_option_text_4: "あああ",
   }
});

	const taxonomies = useSelect((select) => {
		return select('core').getTaxonomies({ per_page: -1 }) || [];
	}, []);

// 設定値の読み込み
const options = select('vk-custom-store-test/options').getOptions();

// 設定値の更新
dispatch('vk-custom-store-test/options').saveOptions(options);

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

// デフォルトのステートを定義
const DEFAULT_STATE = {
    options: {}
};

// アクションタイプを定義
const HYDRATE_OPTIONS = 'HYDRATE_OPTIONS';

// Reduxストアを作成
const store = createReduxStore('vk-custom-store-test/options', {
    // リデューサー
    reducer(state = DEFAULT_STATE, action) {
        switch (action.type) {
            // オプションの更新
            case HYDRATE_OPTIONS:
                return {
                    ...state,
                    options: action.value
                }
        }
        return state;
    },

    // アクション
    actions: {
        // オプションを更新するアクション
        hydrateOptions(values) {
            return {
                type: HYDRATE_OPTIONS,
                value: values,
            };            
        },
        // オプションを保存し、その後更新するアクション
        saveOptions(options) {
            return async ({ dispatch }) => {
                await apiFetch({
                    path: 'vk-custom-store-test/v2/settings',
                    method: 'POST',
                    data: options

                });
                dispatch.hydrateOptions(options);
            }
        },        
    },

    // セレクター
    selectors: {
        // ステートからオプションを取得
        getOptions(state) {
            return state.options;
        },
    },
    // リゾルバー
    resolvers: {
        // オプションを非同期で取得し、その後更新する
        getOptions() {
            return async ({ dispatch }) => {
                try {
                    const options = await apiFetch({
                        path: 'vk-custom-store-test/v2/settings',
                        method: 'GET'
                    });
                    dispatch.hydrateOptions(options);
                } catch (error) {
                    // エラー処理が必要な場合はここに記述
                }
            }
        }       
    }

});

// ストアを登録
register(store);

import { useState, useEffect } from '@wordpress/element';
import { useSelect } from '@wordpress/data';

const useOptionsData = () => {
    // ローカルステートの設定
    const [options, setOptions] = useState({}); // 現在の編集状態を保持するステート
    const [isLoading, setIsLoading] = useState(true); // ローディング状態を管理するステート

    // ストアからのデータを取得する
    const storeData = useSelect((select) => {
        const store = select('vk-custom-store-test/options'); // 特定のストアを選択
        return {
            options: store.getOptions(), // オプションデータを取得
            isLoading: store.isResolving('getOptions'), // データ取得の解決状態を取得
        };
    });

    // ストアからのデータをローカルステートにセット（初期読み込み）
    useEffect(() => {
        // ストアデータのローディングが終了し、ローカルのオプションが空の場合に実行
        if (!storeData.isLoading && storeData.options && Object.keys(options).length === 0) {
            setOptions(storeData.options); // オプションデータをローカルステートに設定
            setIsLoading(false); // ローディング状態を終了
        }
    }, [storeData]);

    // フックからオプションデータとローディング状態を返す
    return { options, setOptions, isLoading };
};

export default useOptionsData;

import { __ } from '@wordpress/i18n';
import { useState, useCallback } from '@wordpress/element';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { TextControl, PanelBody, Modal, Button } from '@wordpress/components';
import { useDispatch } from '@wordpress/data';
import useOptionsData from './use-options-data';
import './editor.scss';

export default function Edit() {
    const [ isOpen, setOpen ] = useState( false );
    const openModal = () => setOpen( true );
    const closeModal = () => setOpen( false );

    // 設定値のstateを取得
    const { options, setOptions, isLoading } = useOptionsData();

    // 設定値をAPIをとおして更新するアクションのディスパッチ
    const { saveOptions } = useDispatch('vk-custom-store-test/options');
    const handleSave = useCallback(() => {
        saveOptions(options).then(() => {
            alert('Settings saved');
        });
    }, [options, saveOptions]);

    return (
        <>
			{ isOpen && 
			<Modal onRequestClose={ closeModal } title="Edit options">
				{isLoading ? <p>Loading...</p> : (
                        <>
                            {Object.keys(options).map((key, index) => (
                                <TextControl
                                    key={index}
                                    label={`Option Text ${index + 1}`}
                                    value={options[key]}
                                    onChange={(nextValue) => {
                                        setOptions({
                                            ...options,
                                            [key]: nextValue,
                                        });
                                    }}
                                />
                            ))}
                            <Button
                                variant="primary"
                                onClick={handleSave}
                                isBusy={isLoading}
                            >
                                Save setting
                            </Button>
							<Button onClick={ closeModal } variant="tertiary">
								Cancel
							</Button>
                        </>
                    )}
            </Modal>
			}
            <InspectorControls>
                <PanelBody title={__('Global Settings')}>
				<Button
                onClick={ openModal }
                variant="primary"
            >Options</Button>
                </PanelBody>
            </InspectorControls>
            <p {...useBlockProps()}>
                {__(
                    'Vk Option Text – hello from the editor!',
                    'vk-option-text'
                )}
            </p>
        </>
    );
}