[gatsby-source-wordpress] I can't query widgets for specific sidebar

[mwardew]

Hello,

I use wordpress, gatsby-source-wordpress and I want to query widgets for specific sidebar. In my case I want to create dynamic footer content - text + social links.

I have sidebar called "footer" inside WP Dashboard and 2 widgets inside.

Plugin that I use: wp-rest-api-sidebars

I have these two endpoints:

/wp-json/wp-rest-api-sidebars/v1/sidebars

/wp-json/wp-rest-api-sidebars/v1/sidebars/sidebar

In browser I can access this url and I have EXACLTY what I want:

http://localhost:8888/project2/wp-json/wp-rest-api-sidebars/v1/sidebars/footer

But it doesn't work with Gatsby. I can access via GraphQL only /wp-json/wp-rest-api-sidebars/v1/sidebars endpoint. Not the one with sidebar id.

I thought that solution is to whitelist routes in gatsby-source-wordpress something like this.

includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/tags",
          "**/taxonomies",
          "**/users",
          "**/menus",
          "**/sidebars",
          "**/sidebars/**",
],

I tried combinations of "...sidebars..." but it doesn't work. I still can access only endpoint - /wp-json/wp-rest-api-sidebars/v1/sidebars

Goal: get widgets and their content for specific sidebar(footer)

Could you please help me?

Thank you

[marcysutton]

@jasonbahl this one would be good for you to review!

[arturhenryy]

i dont use sidebars but if i get this right you only need to whitelist **/sidebars" and this should return all sidebars and then you could filter for the right sidebar in your page or component

[mwardew]

Unfortunately this doesn't work. As you can see I already have sidebars whitelisted. It seems that it's impossible to get what I want with gatsby-source-wordpress.

I tried gatsby-source-custom-api and it works but I'm not fan of this solution because it would be better to just use gatsby-source-wordpress.

{
    resolve: "gatsby-source-custom-api",
    options: {
    url:
        "https://yourwebsite.com/wp-json/wp-rest-api-sidebars/v1/sidebars/footer",
    rootKey: "footerWidgets",
    schemas: {
        widgets: `
            name: String
            rendered: String
        `,
    },
    },
},

But what if I want multiple sidebars and not only footer?

I have footer sidebar but what if I want.. let's say.. "sidebar2"? Another { resolve: ?...}

It's very confusing for me. It would be great to use gatsby-source-wordpress and use id to create this endpoint: "**/sidebars/footer". But it doesn't work..

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[Digital-Odyssey]

Hi, just came across this post and not sure if it still matters to anyone but i have a custom rest api script in my WordPress starter theme that fetches widgets assigned to a specific sidebar...and it works in GraphQL.

You can download the theme here: https://github.com/PulsarMedia/Gatsby-WordPress-Starter-Theme

or if you just want the rest api class then the file you would need is here: https://github.com/PulsarMedia/Gatsby-WordPress-Starter-Theme/tree/master/includes/classes/rest_api

Just load up the class and you should see "allWordpressWpSidebarsSidebars" in GraphiQL. You can use the "parent_sidebar" parameter to filter for a specific sidebar.

Cheers!

[kylegillen]

Anyone found a workaround for this using gatsby-source-wordpress?

I'm using this version of the API: WP Rest API V2 and having the same issue - no way to pass ID and return the rendered prop.

[giorgioriccardi]

Following @nextriot suggestion, leveraging this old WordPress plugin WP Rest API V2, I was able to list all my sidebars with this endpoint: https://local-api.test/wp-json/wp-rest-api-sidebars/v2/sidebars. Which led me to https://local-api.test/wp-json/wp-rest-api-sidebars/v2/sidebars/footer-col-one which is the id of the default footer widget area for the theme I'm using Minimal Lite. This is the json output, which has all I need to build the Gatsby query:

{

    "name": "Footer Column One",
    "id": "footer-col-one",
    "rendered": "<div id=\"calendar-2\" class=\"widget widget_calendar\"><div id=\"calendar_wrap\" class=\"calendar_wrap\"><table id=\"wp-calendar\">\n\t<caption>March 2020</caption>\n\t<thead>\n\t<tr>\n\t\t<th scope=\"col\" title=\"Monday\">M</th></td>\n\t\t<td class=\"pad\">&nbsp;</td>\n\t\t<td colspan=\"3\" id=\"next\" class=\"pad\"></tr>\n\t</tbody>\n\t</table></div></div>",
    "widgets": [
        {
            "name": "Calendar",
            "id": "calendar-2",
            "rendered": "<div id=\"calendar-2\" class=\"widget widget_calendar\"><div class=\"calendar_wrap\"><table id=\"wp-calendar\">\n\t<caption>March 2020</caption>\n\t<thead>\n\t<tr>\n\t\t<th scope=\"col\" title=\"Monday\">M</th>\n\t\t<th scope=\"col\" title=\"Tuesday\">T</th></td>\n\t</tr>\n\t</tbody>\n\t</table></div></div>"
        }
    ]

}

This is in gatsby-config.js

{
      resolve: "gatsby-source-custom-api",
      options: {
        url: `https://${process.env.WORDPRESS_BASE_URL}/wp-json/wp-rest-api-sidebars/v2/sidebars/footer-col-one`,
        rootKey: "footerCol1",
        schemas: {
          widgets: `
            name: String
            rendered: String
          `,
        },
      },
    }

This is the graphql query

footerCol1 {
    widgets {
      name
      rendered
    }
  }

[giorgioriccardi]

and just in case this is the json collection of all the sidebars and ids:

[

    {
        "name": "Sidebar",
        "id": "sidebar-1"
    },
    {
        "name": "Offcanvas Sidebar",
        "id": "offcanvas-sidebar"
    },
    {
        "name": "Footer Column One",
        "id": "footer-col-one"
    },
    {
        "name": "Footer Column Two",
        "id": "footer-col-two"
    },
    {
        "name": "Footer Column Three",
        "id": "footer-col-three"
    }

]

I hope this helps!