Editor API Endpoint or Data Store That Provides a List of Meta Fields for Post Types

Question

I'm building a custom block that allows an editor to choose a Meta Key from a dropdown menu:

However, I am unable to find a data store or API endpoint available (out of the box) that will provide a list of meta keys available for a particular post type -- or even just a list of all registered meta keys.

I could, of course, create my own endpoint to output this data -- and that may be the best route and will likely be my next approach -- however, I wanted to make sure there wasn't a native data store or API endpoint that I am missing.

Here is what I have tried:

/wp-json/wp/v2/types/MY_CUSTOM_POST_TYPE?context=edit&_wpnonce=NONCE

This is very close as it provides a plethora of information about the registered post type, but it does not provide information about meta fields registered with this associated endpoint.

Similarly, I have tried:

wp.data.select('core').getPostType('MY_CUSTOM_POST_TYPE'), which again, while close, does not provide registered meta fields.

To confirm, I have registered the meta data with my post type and this data appears correctly when using the API to query a collection or single "ordinance" (the name of my custom post type in this case).

/**
 * Registers Ordinance Meta Fields.
 */
function pan_ordinance_register_meta() {
    register_post_meta(
        'ordinance',
        'bill_author',
        [
            'type'         => 'string',
            'description'  => __( 'Bill Author', 'pan' ),
            'single'       => true,
            'show_in_rest' => true,
        ]
    );
    register_post_meta(
        'ordinance',
        'bill_location',
        [
            'type'         => 'string',
            'description'  => __( 'Bill Location', 'pan' ),
            'single'       => true,
            'show_in_rest' => true,
        ]
    );
    ...
);

Answer 1

In order to accomplish this, I created a custom data store and extracted the available meta keys from the routes object returned when hitting the wp-json/wp/v2/ endpoint in the editor. This approach decreased the number of API requests compared to that with which I started. The initial approach in the question would have made one call per block vs one per page when editing.

Disclaimer: There is probably a cleaner way than using the RegEx below to extract the meta fields from the routes, but it is a start.

Usage with Custom Data Store:

    const metaFields = useSelect(
        (select) => select('example-meta/data').getMetaFields(),
        []
    );

Custom Data Store Example:

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

const STORE_NAME = 'example-meta/data';

const DEFAULT_STATE = {
    metaFields: null,
};

const actions = {
    fetchFromAPI() {
        return {
            type: 'FETCH_META_FROM_API',
        };
    },
    setMetaFields(metaFields) {
        return {
            type: 'SET_META_FIELDS',
            data: metaFields,
        };
    },
};

const getMetaFieldsFromRoutes = (routes) => {
    const metaFields = {};

    const routePaths = Object.keys(routes);

    const pathRegEx = new RegExp(/\/wp\/v2\/([A-Za-z0-9-_]+)$/);
    const pathsToCheck = routePaths.filter((path) => pathRegEx.test(path));

    pathsToCheck.forEach((path) => {
        const { endpoints } = routes[path];

        if (endpoints) {
            endpoints.forEach((endpoint) => {
                if (endpoint?.args?.meta?.properties) {
                    const endpointMetaKeys = Object.keys(
                        endpoint.args.meta.properties
                    );
                    endpointMetaKeys.forEach((metaKey) => {
                        if (!metaFields.hasOwnProperty(metaKey)) {
                            metaFields[metaKey] =
                                endpoint.args.meta.properties[metaKey];
                        }
                    });
                }
            });
        }
    });
    return metaFields;
};

const store = createReduxStore(STORE_NAME, {
    reducer(state = DEFAULT_STATE, action) {
        switch (action.type) {
            case 'SET_META_FIELDS':
                return {
                    ...state,
                    metaFields: action.data,
                };
        }
        return state;
    },
    actions,
    selectors: {
        getMetaFields(state) {
            const { metaFields } = state;
            return metaFields;
        },
    },
    controls: {
        FETCH_META_FROM_API() {
            return apiFetch({
                path: addQueryArgs(`/`, {
                    _fields: 'routes',
                }),
                parse: true,
            });
        },
    },
    resolvers: {
        *getMetaFields() {
            const result = yield actions.fetchFromAPI();
            const { routes } = result;
            const metaFields = getMetaFieldsFromRoutes(routes);
            return actions.setMetaFields(metaFields);
        },
    },
});

register(store);