Tag: field

I want to show a multiple select element in the sidebar when editing a page in admin, where I can save the selected values in a metakey. Of course also load the selected values upon load of page-edit in admin.

I manage to show the list, but I don’t know how to save it i WP.

PHP

function register_metakey_ac() {
    wp_register_script(
        'plugin-sidebar-js',
        plugins_url( 'plugin-sidebar.js', __FILE__ ),
        array(
            'wp-plugins',
            'wp-edit-post',
            'wp-element',
            'wp-components',
            'wp-compose',
            'wp-data',
        )
    );
    wp_register_style(
        'plugin-sidebar-css',
        plugins_url( 'plugin-sidebar.css', __FILE__ )
    );

    $custom_fields = (
        'somemetakey',
    );

    foreach ( $custom_fields as $custom_field ) {
        register_post_meta( 'page', $custom_field, (
            'show_in_rest'      => FALSE,
            'type'              => 'array',
            'single'            => TRUE,
            'auth_callback'     => function () {
                return current_user_can( 'edit_posts' );
            }
        ) );
    }
}
add_action( 'init', 'register_metakey_ac' );

JS:

( function( wp ) {
  var registerPlugin = wp.plugins.registerPlugin;
  var PluginSidebar = wp.editPost.PluginSidebar;
  var SelectControl = wp.components.SelectControl;
  var el = wp.element.createElement;
  var withSelect = wp.data.withSelect;
  var withDispatch = wp.data.withDispatch;


  const { isResolving } = wp.data.select( 'core/data' );

  var MetaSelectControl = wp.compose.compose(
    withDispatch( function( dispatch, props ) {
      return {
        setMetaValue: function( metaValue ) {
          dispatch( 'core/editor' ).editPost(
            { meta: { ( props.metaKey ): metaValue } }
          );
        }
      }
    }),
    withSelect(
      function( select, props ) {
        const query = { per_page: 99 };

        return {
          metaValue: select( 'core/editor' ).getEditedPostAttribute( 'meta' )( props.metaKey ),
          users: wp.data.select( 'core' ).getEntityRecords( 'root', 'user', query ),
          isRequesting: isResolving( 'core', 'getEntityRecords', ( 'root', 'user', query ) )
        };
      }
    )
  )
  ( function( props ) {
    if ( props.isRequesting ) { // "loading" indicator
      return el( 'div', null, 'Loading data..' );
    }
    var theOptions = ();

    const list = props.users.map( user => {
      let rolesArr = user.roles;
      for (var i = 0; i < rolesArr.length; i++) {
        let singleRole = user.roles(i);
        if (singleRole == "specialrole") {
          theOptions.push({label: user.name, value: user.id})
        }
      };
    } );

    return el( SelectControl, {
      label: 'Access Control',
      multiple: true,
      options: theOptions,
      onChange: ( value ) => {
        props.setMetaValue( value );
      },
      value: props.metaValue
    });
  });

  registerPlugin( 'themeta-sidebar', {
    render: function() {
      return el( PluginSidebar,
        {
          name: 'themeta-sidebar',
          icon: 'admin-post',
          title: 'Meta AC Example',
        },

        el( 'div',
          { className: 'plugin-sidebar-content' },
          el( MetaSelectControl )
        )
      );
    }
  });

} )( window.wp );

I am new to all this Gutenberg React Components thing. I think the learning curve is very steep for beginners, and documentation with examples is close to none. I have found 0 examples using a type=’array’ in a register_post_meta function. Please help anyone.