0

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 the register_meta() function call in case it might have been a permissions issue.
  • Changed the meta field name back, while leaving the auth_callback attribute in register_meta() call.
  • Moved the register_meta() function call to RegisterSidebar constructor, so that it runs when plugin is being loaded. Returned it back to registerScript() method, when that did not work.
2
  • When you change the value, the post needs to be updated (clicking the update button). Could you confirm this? Is the control working correctly when using it (updating its value correctly and not throwing errors in the browser console)?
    – Alvaro
    Feb 26, 2019 at 1:39
  • @Alvaro yes it is indeed updating within the browser. I have not seen any issues with that, when verifying it is changed using 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 in wp_postmeta Feb 26, 2019 at 12:14

1 Answer 1

1

So, after some more testing, I figured out why it was not saving like it should. I was including the meta during init when it was in the admin panel, but not for anywhere else. Thus when it was being saved (assuming that it was saving as not admin) the meta field was not there to be saved to. I fixed it by making sure that it was taken out of the admin specific code and was being loaded during the pre-admin specific code is.

Side Note: If you are having a similar issue and it's not a code issue, as far as you can tell, make sure that you have the custom fields panel toggled off in the editor preferences! I just discovered that it actually overrides any changes to meta you have done via Plugin Sidebar. Once I removed that panel, everything started working again.

2
  • Would you be able to share this with some code example? Mar 7, 2022 at 11:23
  • 1
    I had a function that was being called on init in an AdminBootstrap.php that was instantiating RegisterSidebar() which itself tries to hook onto init but failed due to it already being called. All I did was move it out of AdminBoostrap.php into the Plugin.php so that it was called regardless of admin panel or not. Mar 8, 2022 at 12:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.