I have modified the tutorial at https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/plugin-sidebar-0/ to meet ES6+ but I am having trouble getting it to actually save to the post. Whenever I refresh the page the value is gone.
Addendum: When using wp.data.select('core/editor').getEditedPostAttribute('meta')['library_plugin_alternate_title'];
to verify the contents of the meta in the console, I get a successful return of "test"
back which tells me that it is indeed updating the meta in the editor as expected. However, for some reason that value is not actually be saved to the database. I would assume it would create an entry in wp_postmeta
for that post but I have not seen it do so.
Following is the current code I have in PHP that is being called when my plugin is loaded during the plugins_loaded
action call:
class RegisterSidebar
{
/**
* RegisterSidebar constructor.
*/
public function __construct()
{
add_action('init', [__CLASS__, 'registerScript']);
add_action('enqueue_block_editor_assets', [__CLASS__, 'loadScriptsToEditor']);
add_action('enqueue_block_assets', [__CLASS__, 'loadStylesToEditor']);
}
/**
* Load the files into the editor.
*/
public static function loadScriptsToEditor(): void
{
wp_enqueue_script('plugin-sidebar');
}
/**
* Load the files into the editor.
*/
public static function loadStylesToEditor(): void
{
wp_enqueue_style('plugin-sidebar');
}
/**
* Adding the script so that the plugin sidebar loads.
*/
public static function registerScript(): void
{
wp_register_script(
'plugin-sidebar',
LIBRARY_PLUGIN_URI . '/assets/js/sidebar.js',
['wp-plugins', 'wp-edit-post', 'wp-element', 'wp-components', 'wp-compose']
);
wp_register_style(
'plugin-sidebar',
LIBRARY_PLUGIN_URI . '/assets/css/sidebar.css'
);
register_meta('post', 'library_plugin_alternate_title', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]);
}
}
And the JavaScript that is run through webpack with react:
import PluginIcon from './plugin-icon';
const { registerPlugin } = window.wp.plugins;
const { PluginSidebar } = window.wp.editPost;
const { TextControl } = window.wp.components;
const { withDispatch, withSelect } = window.wp.data;
const { compose } = window.wp.compose;
let MetaBlockField = compose(
withDispatch((dispatch, props) => {
return {
setMetaFieldValue: (value) => {
dispatch('core/editor').editPost({meta: {[props.fieldName]: value}});
}
};
}),
withSelect((select, props) => {
return {
metaFieldValue: select('core/editor')
.getEditedPostAttribute('meta')
[props.fieldName]
};
})
)(({ metaFieldValue, setMetaFieldValue }) => {
return (
<TextControl
label="Alternate Display Title"
value={ metaFieldValue }
onChange={(content) => setMetaFieldValue(content)}
/>
);
});
registerPlugin('plugin-sidebar', {
render() {
return (
<PluginSidebar
name="plugin-sidebar"
icon={ PluginIcon }
title="Library Plugin Sidebar"
>
<div className="plugin-sidebar-content">
<MetaBlockField fieldName="library_plugin_alternate_title"/>
</div>
</PluginSidebar>
);
}
});
Please let me know if you see that I have missed something. Thank you much for the help in advance!
Tests Done After Initial Post:
- Changed the meta field name to
_library_plugin_alternate_title
and added'auth_callback' => function () { return current_user_can('edit_posts'); }
to theregister_meta()
function call in case it might have been a permissions issue. - Changed the meta field name back, while leaving the
auth_callback
attribute inregister_meta()
call. - Moved the
register_meta()
function call toRegisterSidebar
constructor, so that it runs when plugin is being loaded. Returned it back toregisterScript()
method, when that did not work.
wp.data.select('core/editor').getEditedPostAttribute('meta')['library_plugin_alternate_title'];
which returns"test"
. The issue is that it is not being saved to meta data. I have verified the contents of the database and not found any new meta fields inwp_postmeta