React hook to retrieve the schema data for a set of meta keys in a WordPress post API request. Ideal for integrating libraries like React JSON Schema Form into a Gutenberg experience.

useMetaSchema.js

import apiFetch from '@wordpress/api-fetch';
import { useSelect } from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element';
import { getPath } from '@wordpress/url';
import { pick } from 'lodash';

function useMetaSchema( metaKeys ) {
	const { _links } = useSelect( ( select ) => {
		return select( 'core/editor' ).getCurrentPost();
	} );

	const [ schema, setSchema ] = useState( {} );

	const { self = [] } = _links;

	if ( self.length < 1 ) {
		return {};
	}

	const path = getPath( self[ 0 ].href ).split( '/wp-json/' ).pop();

	useEffect( () => {
		apiFetch( {
			path,
			method: 'OPTIONS',
		} ).then( ( res ) => {
			const metaSchema = res?.schema ?? {};
			const meta = metaSchema?.properties?.meta?.properties ?? {};

			metaSchema.properties = pick( meta, metaKeys );

			delete metaSchema.title;

			setSchema( metaSchema );
		} );
	}, [ path ] );

	return {
		schema,
	};
}

export default useMetaSchema;

Example usage:

import useMetaSchema from './useMetaSchema.js';
import SchemaForm from '@rjsf/core';
import { useEntityProp } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { pick } from 'lodash';

function Form() {
	const KEYS = [
		'metaKey1',
		'metaKey2',
		'metaKey3',
	];

	const { type } = useSelect( ( select ) => {
		return select( 'core/editor' ).getCurrentPost();
	} );

	const [ meta, setMeta ] = useEntityProp( 'postType', type, 'meta' );

	const { schema, uiSchema } = useMetaSchema( KEYS );

	return (
		<SchemaForm
			formData={ pick( meta, KEYS ) }
			onChange={ ( { formData = {} } ) => {
				const newMeta = {
					...meta,
					...formData,
				};

				setMeta( newMeta );
			} }
			schema={ schema }
			uiSchema={ uiSchema }
			{ /* Additional props here */ }
		/>
	);
}

export default Form;