Get 'wp_template_part'

šŸ™‹Get Help
12

Yes, thatā€™s problably the root of the problem. In the action you define beforeSSR youā€™re trying to map state.theme.templates but, as you havenā€™t defined it yet, it returns an error. Let us know if it works once you add some of them!

13

@SantosGuillamot I do have them in my WordPress installation, if thatā€™s what you mean. Iā€™m seeing them here:
https://gatsby-wp.noesteprojecten.nl/wp-json/wp/v2/template-parts/

So to recap, Iā€™ve got template-parts posts in my WordPress install.

This is in my frontity.settings.js file:

...
postTypes: [
            ...
            {
              type: "wp_template_part",
              endpoint: "template-parts",
            },
          ]
...

And this as my beforeSSR:

beforeSSR: async ({ state, actions }) => {
        // getNameAndDescription,
        await Promise.all(
          [
            actions.source.fetch("acf/options"),
            actions.source.fetch("acf/identity"),
            actions.source.fetch("getWPConfig"),
            // actions.source.fetch("/contact"),

            state.theme.templates.map((slug) =>
              actions.source.fetch(`wp_template_part/${slug}`)
            ),
          ]
        );
      },

But Iā€™m still getting the Cannot read property 'map' of undefined error.

14

You still would have to defined all the template-parts slugs you want to fetch in the index.js of your theme. It could look similar to this:

import Theme from "./components";
import image from "@frontity/html2react/processors/image";
import iframe from "@frontity/html2react/processors/iframe";

...

const marsTheme = {
  ...
  state: {
    theme: {
      ...
      templates: [ "tekst-beeld", "versje-tabel", "gewoon-wat-tekst", "formulier" ]
    },
  },
  actions: {
    theme: {
      // beforeSSR: getNameAndDescription,
      beforeSSR: async ({ state, actions }) => {
        // getNameAndDescription,
        await Promise.all(
          [
            actions.source.fetch("acf/options"),
            actions.source.fetch("acf/identity"),
            actions.source.fetch("getWPConfig"),
            // actions.source.fetch("/contact"),

            state.theme.templates.map((slug) =>
              actions.source.fetch(`wp_template_part/${slug}`)
            ),
          ]
        );
      },
      ...
    },
  },
  ...
};

export default marsTheme;

Once you define them in your Frontity code, you shouldnā€™t get that error.

15

Right, now I understand. Thanks for that clarification, itā€™s working well now.

2 Likes
16

Hi, I am quite new to the Frontity/React/Wordpress development. Seing this thread I wanted to give it a go to create a footer using template-parts.

Hereā€™s the template parts: http://web2020.hei-schule.ch/wordpress/wp-json/wp/v2/template-parts/

the frontity.setting.js looks the following:

...
{
  "name": "@frontity/wp-source",
  "state": {
    "source": {
      "api": "http://web2020.hei-schule.ch/wordpress/wp-json",
      postTypes: [
        {
          type: "wp_template_part",
          endpoint: "template-parts",
        },
      ],
    }
  }
},
...

the index.js of my theme:

const marsTheme = {
  ...
  state: {
    theme: {
      ...
      templates: [ "footer" ],
      ...
      },
    },
  },
  ...
  actions: {
    theme: {
      ....
      beforeSSR: async ({ state, actions }) => {
        // getNameAndDescription,
        await Promise.all(
          [
            state.theme.templates.map((slug) =>
              actions.source.fetch(`wp_template_part/${slug}`)
            ),
          ]
        );
      },
    },
  },
  ...

and in the footer.js of my theme I am trying something like that:

const FooterContent = ({ state, actions, libraries }) => {
   const data = state.source.get("/wp_template_part/footer");
   const post = state.source["wp_template_part"][data.id];
   ...

Now in the frontity.state.source.data I can see ā€œwp_template_part/footer/ā€ but itā€™s on isFetching == true, and getting the post in the footer. js obviously is not working.

Somebody got an idea on where to look? The WP Site is on /wordpress/ may this have some effect?

17

I might very well be wrong but I think you might have to use actions.source.fetch(/wp_template_part/${slug}), with a slash before wp_template_part.

18

Oh, you were right :blush: I added the leading slashes (as well as in footer.js) and now the data can be queried

Thanks for your answer

19

No problem, Iā€™m trial & errorring my way throught Frontity and React as well and sometimes it can become very hard to see things like these. In those cases I turn to the Frontity Community as well, in hope for answers. :wink:

3 Likes
20

Hi @dominique, I following your step above and quite new at WP REST API.
My API are not working correctly here and showing 401. What is the problem here?

Do you use additional WP REST API plugin for that? If so, can you share WP plugin that you use to activate the API for template and template-parts?

I installed WordPress 5.6.2 and Gutenberg 10.1.1
Thanks!

21

Hi Briyadi,

Lately I havenā€™t had the time to play around with Frontity any more. But I noticed that the template and template-parts endpoint didnā€™t work any more, I donā€™t know why and hope someone else can shed some light on thisā€¦

My endpoint is dead as well:
https://frontity.noesteprojecten.nl/wp-json/wp/v2/template-parts/

22

I am on 5.5.3 and using WP REST API Controller to enable template_parts: WP REST API Controller ā€“ WordPress plugin | WordPress.org

23

I donā€™t know why but I keep getting:

{
  "code": "rest_cannot_manage_templates",
  "message": "Sorry, you are not allowed to access the templates on this site.",
  "data": {
    "status": 401
  }
}

I tried changing some WordPress versions and also enabled the endpoints in the WP REST API Controller plugin (also cleared out the cache in that plugin), but none of it helps.

24

Hi @phn
How do you using it?
I already installed the plugin, but seems no options to enable it.

image
image854Ɨ709 96 KB

25

Hi @dominique, same issue here.

26

thatā€™s somehow strange - mine looks similar :slightly_frowning_face:

did you guys upgrade the wordpress site lately? I googled a bit, and found some articles about a similar issue and theyā€™re suggesting that some upgrades, or installations of plugins/themes might cause an issue with the WP permissions:

27

I had a similar issue. On the WordPress side, I believe you need to add a theme that supports block-template parts.

ie: theme-experiments/emptytheme/block-template-parts at master Ā· WordPress/theme-experiments Ā· GitHub

28

Pretty much spent all day trying to get template parts up and running but sadly to no avail.

Tried using Wordpress 5.6 and Gutenburg 10.1.1 as per @phn 's example (although Guberg wanted 5.6 so updated there)

Problem for me is the 401 error. Have used WP REST API Controller to enable wp_template_parts but itā€™s been 401s and tears all day.

Could someone on the Frontity side perhaps give us a demo? Or screenshots of the Wordpress.org installation so we can see how the template parts are configured?

@dominique did you get yours working again?

29

Hi @dawson.custonscole

I didnā€™t look any further into this any more. I stopped using Frontity, because I had no time to get up to speed with it anymore. I needed to invest time in our regular projects. For adopting headless I am now looking in other directions then Frontity, to be honest.

30

Thanks for the quick reply @dominique

Do you remember if you did any JWT Auth config to get the template_parts working?

Also, If you donā€™t mind sharing, what other options do you think you might use, and why?

32

@SantosGuillamot Could someone on the Frontity side perhaps give us a demo? Or screenshots of the Wordpress.org installation so we can see how the template parts are configured? because I canā€™t access the template part endpoints thank you