Issue with Master Pages in a WordPress project using the Pinegrow plugin

Maybe I’m totally misinformed here and more than happy to be corrected but…

I’m using Pinegrow Wordpress Plugin. I have a page (styleguide.html) which contains my header/footer and a few other reusable components (including my contact us component). These components are used in masterpage.html as well as a few other master pages but they all reference the component on styleguide.html.

I’m not sure when or where it happens but I find that any updates I’ve made on these components disappear. It’ll stick around for a bit and then my site will suddenly break and it’s because updates no longer exist.

Am i doing components correctly and are they intended for use in Wordpress projects?

I’ve created a repo of the project - GitHub - jupiterandthegiraffe/website at v-4

Hey @fakesamgregory ,

Before I try to answer, let me ask you this: I think this project was created using Pinegrow Desktop and that you imported it into the plugin, correct?

Also, can you please elaborate that part : “…I find that any updates I’ve made on these components disappear. It’ll stick around for a bit and then my site will suddenly break and it’s because updates no longer exist.” ?

I find that any updates I’ve made on these components disappear

Disappear from the project? From the styleguide document?

It’ll stick around for a bit and then my site will suddenly break and it’s because updates no longer exist.

Do you mean, the changes are visible for some time, then suddenly no more?

And also, other details that might be needed such as hosting, WordPress version, local or remote, etc… basically, everything necessary to better think about a completely new issue :slight_smile:

No, 100% Wordpress plugin.

Also, can you please elaborate that part : “…I find that any updates I’ve made on these components disappear. It’ll stick around for a bit and then my site will suddenly break and it’s because updates no longer exist.” ?

I can (and have) re-made the updates just now. It works on my site and will continue to work (check out the contact us component at the bottom of the page and click “send message”. it opens a newly added dialog) and then randomly will stop working and i’ll go to find all the updates to the component have been deleted.

Disappear from the project? From the styleguide document?

Yes, disappear from styleguide but as that is a component across the site, the entire project loses that newly added html.

Do you mean, the changes are visible for some time, then suddenly no more?

Yes

Hosting is Hostinger, WP Version 6.6.1, Online/plugin only.

Also worth mentioning it’s not just the contact us component that reverts. Changes to the footer and the header also revert.

@fakesamgregory

Listen, this is some new feedback, so I’ve got your project, I’m going to work on it & tweak the components defined in the styleguide page in the coming hours and see how it turns out, if the issue reoccurs on a local instance.

How long does the disappearance happen? Is it variable?

I really appreciate that. and once again, happy to be corrected. Maybe I’m misusing components and masterpages, I don’t know.

I really can’t tell you but it’s disappeared after each day roughly the last week or so (my patience!)

Do you want the latest WITH the newly added dialog code that disappears or without? I’ll need to push new code up if you want it.

@fakesamgregory

Nope, I’m going to tinker with the version available on Github. By the way, are we talking about structural changes in the HTML code (adding elements, etc.) or style changes?

Note: There is no normal reason for the plugin to revert code changes that were working after they were implemented from the interface. Personally, since this is also new feedback, I suspect - but I could be wrong - an external reason that I cannot explain at the moment.

CSS updates remain the same. It’s just HTML seem to ‘revert’. For instance in the contact us component you’ll see that the contact us button is using a component (also available on the styleguide.html page). I’ve removed that reference so it’s no longer using the component but when everything reverts, that’s back.

@fakesamgregory

I made some big changes to the header and footer on the styleguide page, and I’ll wait a bit to see how it looks.

Honestly, I don’t have high hopes that the content will change or revert, but we’ll see how it goes …

You’ve improved the design significantly. Are there HTML updates in this too though?

Ignore me, I was so starstruck by the colours, didn’t notice the text

Yes, I’m a true artist :slight_smile:

@fakesamgregory

Found a few things, let’s investigate further, can you tell me, in your project. :

  1. Do you want/need to have several different master pages ?
  2. Which one is the real master page according to you (knowing that index.html is defined as the main master page in the project settings)
  3. Are you aware that almost all the pages are defined as specific master pages (the case where one want to have several different headers & footers in a project for example).

UPDATE
Oh, I found something interesting in your project!

The concept of Master pages in WordPress is completely different from that of components. We actually mention in the documentation that you shouldn’t mix the two, kind of like getting a gremlin wet after midnight.

So, in a WordPress project, we can use components BUT when we want to use master pages, we use the dedicated WordPress feature.

So, first off, to start fresh and avoid any potential issues, you’ll need to make significant changes to the project to remove ALL traces of using project master pages and focus on WordPress master pages.

@Emmanuel

  1. Do you want/need to have several different master pages ?

Thanks for looking into it.Yes and no. I only wanted a base page to copy from and then to update the content as I see fit. The only way i could think to do this was to create that master page and set these as their own master pages to overwrite some values like export name. Happy to learn the “correct” way.

  1. Which one is the real master page according to you (knowing that index.html is defined as the main master page in the project settings)

I actually don’t know at this point. Most of the pages are taken from page.html as a template and built upon so maybe even that.

  1. Are you aware that almost all the pages are defined as specific master pages (the case where one want to have several different headers & footers in a project for example).

Seems i answered this in Q1?

I’ll look into master page usage correctly for sure. Do you think this has something to do with components though?

@fakesamgregory

If something isn’t working, it’s probably because you’re not using it the right way. But don’t stress or feel bad :slight_smile: The options are limitless, and Pinegrow won’t specifically point out these mistakes.

In your WordPress theme, your style guide page (for other readers, the file name is not important, it is similar to a custom components library) can contain elements that you can reuse in other templates.
The master page defined in the project settings (index.html in your case) should include the header/footer elements that will be consistent across all pages (you can use components in a WordPress master page).
Then, these elements will automatically appear on all templates that use the main master page as their base master page.

And if you need CUSTOM master pages (for example, if you want/need to have a different header/footer for some templates, you will have to define a specific template as a master page as well.

I think I got stuck doing something similar. It did take me a while to think it through and realise how it worked with the header / footer and defining the master for WP. :joy:

I am new to WP though.

Especially because we are at a crucial moment where the opportunities are limitless. Themes, Gutenberg blocks, blocks plugins, WordPress template parts that are always valid and were previously an ideal solution for your needs (Reusable Template Part | Pinegrow Web Editor), Pinegrow components, and more.

It’s normal to feel a little confused because there isn’t just one right way to go.
And that’s actually what makes it difficult for us to explain things!

1 Like

Thanks for the info and taking the time to look into my project.

I’ll take a deeper look into master pages and update my design to the fabulous suggestions you’ve made. Hopefully I can replicate :crossed_fingers:

1 Like

You’re not far from the right solution, there are no “major” changes to be made in your theme.