WordPress gutenberg editor plugin get categories

• 

  elask12 · Member · Dec 26, 2020 at 11:32 am

  • Copy link
  • Add topic to favorites

  I don’t have any experience developing wordpress plugins and I want to create a slider plugin in gutenberg editor which should display blog posts based on the chosen category. Therefore I have to create a select box or something like this in gutenberg editor which provides a list of all categories. I tried multiple ideas to get this done but unfortunately I failed. I think my problem is the async request of the apiFetch function. For example I tried the following:

  const getPosts = function ()
      {
          console.log('sadsadsadsad'); //todo remove debug
          let options = [];
          return wp.apiFetch( { path: '/wp/v2/posts' } ).then( function( posts ){
              for (let i = 0; i < posts.length; i++) {
                  option = el(
                      'option',
                      { value: posts[i].id },
                      posts[i].title.raw
                  );
                  options.push(option);
              }
              return options;
          })
      }

  Inside

  edit: (props) => {

  return [
          el(
              SelectControl,
              {
                  options: getPosts(),
              }
          )
      ]
  

  This can’t work because of async loading. As I googled for another solution I came up trying the following snippet:

  function cheat() {
      this.cheat = this;
      this.types = [];
      let that = this;
      this.get_posts = function () {
          return new Promise(
              function ( resolve ) {
                  wp.apiFetch( { path : '/wp/v2/types' } ).then(
                      function ( types ) {
                          that.types = types;
                      },
                      wp.apiFetch( { path: '/wp/v2/posts' } ).then(
                          function ( res ) {
                              resolve( res )
                          }
                      )
                  )
              }
          )
      };
      this.post_selector_opts = function () {
          let cheat = this.cheat;
          return new Promise(
              function ( resolve ) {
                  cheat.get_posts()
                      .then(
                          function ( posts ) {
                              let opts = [{ key: 'none', label: 'Select Post', value: 0 }];
                              for ( const P of posts ) {
                                  opts.push( { key: P.slug, label: P.title, value: P.id } );
                              }
                              resolve( opts );
                          }
                      )
              }
          )
      };
      this.init = function () {
          this.post_selector_opts().then( opts => {
              cheater.posts = opts;
          } )
      }
  }
  
  const cheater = { posts: [] };
  
  let shared = new cheat();
  shared.init();

  Inside

  edit: (props) => {

  return [
          el(
              SelectControl,
              {
                  options: cheater.posts,
              }
          )
      ]
  

  For this reason I get the error

  Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args%5B%5D=object%20with%20keys%20%7Brendered%7D&args%5B%5D= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

  But if I try to build a development build with

  npm run build –dev –configuration=dev

  it still genereates a minified production build. Can you help me coding a selectbox which contains my categories? Do u have any sugestions?

• 

  staff-blorbo · Staff · Dec 26, 2020 at 10:55 pm

  • Copy link

  Since using plugins here requires a paid Business Plan, you’re not likely to find many folks who can offer a recommendation.

  Because of this, I recommend asking over at https://wordpress.org/support/forum/wp-advanced/ instead.