store-post-meta-gutenberg

store-post-meta-gutenberg.js

const { domReady } = wp;
const { useMemo } = wp.element;
const { TextControl } = wp.components;
const { select, useSelect, useDispatch } = wp.data;
const { PluginDocumentSettingPanel } = wp.editPost;
const { registerPlugin } = wp.plugins;
const { __ } = wp.i18n;

/**
 * Output the Meta panel for Report pages.
 */
function ReportPageMeta() {
	const { editPost } = useDispatch( 'core/editor' );

	const meta = useSelect( ( select ) =>
		select( 'core/editor' ).getEditedPostAttribute( 'meta' ) || {}
	);

	const downloadPDFKey = 'download_pdf_link';

	const downloadPDFValue = useMemo(
		() => {
			if ( meta != null ) {
				return meta[ downloadPDFKey ] || '';
			}
		},
		[ meta ]
	);

	return (
		<PluginDocumentSettingPanel
			name="blackstone-byline-panel"
			title={ __( 'Report page settings', 'fbs' ) }
		>
			<TextControl
				value={ downloadPDFValue }
				onChange={ ( newValue ) => {
					editPost( {
						meta: {...meta, [downloadPDFKey]: newValue },
					} );
				} }
				label={
					__( 'Enter the full download PDF URL', 'fbs' )
				}
			/>
		</PluginDocumentSettingPanel>
	);
}

domReady( () => {
	if ( select( 'core/editor' ).getCurrentPostType() !== 'fb_report' ) {
		return;
	}

	registerPlugin( 'plugin-report-page-meta', { render: ReportPageMeta, icon: null } );
} );