Component used in Masterpage not propogating to rest of the pages

Hey Team!

I have a strange issue that occurs with a header component that I’ve defined in a styleguide.html page then subsequently used in a masterfile.html page which as you can guess is defined as a “Master”. My pages then use this master.

I have given the header component some editable classes. I noticed on pages using the masterfile kept getting removed on project update. Now I’ve noticed that updating the HTML within the component is not even propogating through to the masterpage let alone into the child pages.

One hint as to how this has gone a bit awry is that the component was originally defined in the masterfile but I moved it to the styleguide page (and then removed the header from the masterfile and re-added the new header component).

A similar, maybe not related, issue is that I’ve updated the HTML in the masterfile and this HTML is not being seen on all the other pages which I would expect it to.

Hi Sam,
Could you share the project with us? Are the editable area set on the styleguide.html page, or the masterfile.html page?
Cheers,
Bob

it’s private on Bitbucket. Have shared with your email. Have also sent via WeTransfer.

Generally having a hard time with components updating across pages! Right now having trouble updating the horizontal scrolling text banner on styleguide and seeing it update correctly on index.html. Hopefully, this’ll make sense once you see the code.

Got it, thanks. Likely take a look a little later today.
Sorry,
Bob

No worries. Thanks a bunch Bob!

Had a few moments while the wife was getting ready for work. Can you describe a little more what the expected behaviour should be/problem being experienced?
I’m able to change the HTML in the styleguide.html and have it change throughout the project. If I change the color in the master, this transmits to all the child pages. This is expected behaviour, but I can see that users might think this isn’t correct. Note that the updates to HTML required an “Update whole project” from either the menu or from the hotkeys.
Cheers,
Bob

Let me play around with this in mind as I could be quick updating.

Regarding the header the color of the header is changed from the pages, not the master. Currently, only the index page should have a yellow header. I change the class on the header and after the project updates, it returns back to black.

Any updates?

With regards to the component losing styling edits on sub pages. The problem is that the master page is enforcing any changes. Even though the component is editable, the master page “locks” any changes made on sub pages and reverts them back to match the master page.
Two choices:

  1. redefine the component on the master page
  2. wrap the component in another outer div (not really semantic) on the master page and make it editable. That way the inner component can be edited.

Cheers,
Bob

Hey Rob,

The “CMD + Shift + U” (update entire project) seems to be working well but still have my eye on any issues however the masterfile/styleguide cycle is still an issue and unfortunately I think your suggestion will be the one I go with however ideally I’d have everything in the styleguide. No worries though. Thank you for checking in.

Hey Bob,

I moved my Header component definition to the masterpage like you suggested and I’m still unable to maintain the yellow color that I select on the index page. Maybe this is something you can try on your end? You can see from this gif i change the color from index, do an update and it reverts back to black.

Hi Sam,
Sometimes mixing components and master pages (hate that term) makes my head spin a bit. Had to ask for a little clarification from Matjaž and mess about with the code.
So, the header element can be defined on the styleguide page, as you originally wanted. But, when using the component on the Masterpage, you need to place it inside a wrapper. Then that wrapper has to have the inner content editable. That way the header color can be edited on any child pages. However, the component aspect will limit the editing to just the header color. So, if other areas get edited, the update whole project will revert them to what is shown on the master except for the header color. Any edits to the component will have to be done on the styleguide page.
Gah, sometimes a mind-bender of hierarchy. Hope this makes sense. As for semantics, I guess you could give the master page wrapper the header tag instead of the component.
Hope this helps,
Bob

1 Like

Hey Rob,

Unfortunately this still isn’t working. I have a div.header component in my styleguide with nothing editable then in my masterfile i have a header component with the color classes defined as editable. This didn’t work. I then had my div.header in my styleguide with the color class editable and the a header in my masterfile with ‘allow content’ checked. Again, this didn’t work. Maybe you and I are both getting in a twist with nested dependencies. Either way I think I’ll just wrap the header with the class on the single page that it’s used on. I just like things being clean and scalable :slight_smile:

I have an update on the ‘Update all components’ issue where I’ve seen it not update and pinpointed the issue. In trialling everything we’ve been talking about I updated the HTML of my component from a header to a div and updated the whole project. My changes weren’t reflected on the masterpage. It wasn’t until I closed the masterpage, updated the whole project did i then see the header updated to a div. Is it expected that updating the whole project doesn’t update open pages?

Best

Hi Sam,
So to clarify. The component is defined in the styleguide with the header color editable.


The header component is then used on the masterpage.

This component is placed inside a div wrapper. This wrapper has a “Define Editable” action. I added an id of “header_wrapper”, but this doesn’t really matter. Plus I checked the “Inner content” box.

With this I’m able to make header color changes on the child pages, but no other changes. HTML changes to the component alter both the master or children, and the header color on the children can be altered independently of the master.

With regards to your second issue. The “Update whole project” should impact all pages - even ones that are open. Here is what is happening on my system.


Not sure if it is a system software issue, or just an odd hiccup. Maybe after a restart, if this continues, you can take a look at the DevTools and see if it reports an error?
Sorry for the trouble,
Bob

Yeah this is exactly what I did. I’ll give it another go after a restart as it is quite strange that so much is failing on me right now. Will report my findings.