document-settings.js

/**
 * Not a final name, could be `registerDocumentSettingPanel` or `registerDocumentSettingsControl`.
 *
 * Internally this method would be similar to `registerBlockType`:
 *  1. Handles validations.
 *  2. Dispatches and action to the store to register the document settings. Probably the `core/editor` store.
 */
function registerDocumentSetting( name, args ) {}

function unregisterDocumentSetting( name ) {}

/**
 * Registers a document settings panel for Featured Image.
 */
registerDocumentSetting( 'core/featured-image', {
	// Label displayed in Preferences modal.
	label: 'Featured Image',

	// The position in the document settings sidebar. Similar to core's admin menu pages.
	position: 5,

	// Optional. The scope for the document settings. We can also use `site` and `post`.
	scope: [ 'edit-site', 'edit-post' ],

	// A React component to render the settings.
	edit: () => {}
} )

/**
 * An example component that would render the document settings panel for various settings sidebars.
 */
function DocumentSettingPanels( { scope } ) {
	const panelsRaw = useSelect( ( select ) => {
		return select( 'core/editor' ).getDocumentSettingPanels();
	}, [] );

	// Implement actual filtering and sorting here. Probably using `useMemo`.
	const panels = panelsRaw.sort( ( a, b ) => a.order - b.order );

	return panels.map( ( { name, edit: Edit } ) => <Edit key={ name } /> );
}