[SOLVED] hickup, sudden reorder

[joe_g]

Hey,

My client keeps editing and it's been working quite well for a while. We're working our way to a live site.

However, we just run into one kind of serious hickup (but i suspect there must have been som caching involved?).

I made a custom block called 'vertical spacer', the editor/client was adjusting the page and suddenly all elements reordered and all vertical spaces ended up on top, instead of in between. Normally these spacers should be inserted in between each rich text elements.

This is similar to what happened earlier, before i everything was always "auto row". Now, for quite a while, since i set everything to always be auto-row nothing similar has happened for a while. I hope this is because of some browser caching an old version of the site with not updated CSS, perhaps? What happened before was that elements set to "manual" led to unpredictable orders once you move things around, but this is maybe different?

I'm curious if you have any idea of why this could happen, if it could be cached css, or something else. This is the type of error that shouldn't happen once this site goes live.

thanks!

 

Edited Saturday at 10:32 AM by jploch
This issue is solved with the latest update (>= 2.2.70)

[jploch]

Sorry for the trouble. This has not happened to any of my PG sites, so it would be good to find out what is going on.

First I recomend to install the ProcessDatabaseBackups module and the CronjobDatabaseBackup module. These can be setup to trigger a backup when a user logges into the backend, so you always have a backup you can restore if your client changed something. Also consider giving you client only the permissions needed to maintain the site (eg. using the default pagegrid-editor role).

With the information provided it's a bit hard to guess, so let's break down the potential causes and how we can address them.

Possible Causes:

1. Cache: ProcessWire's Cache should not be enabled when you are logged in, so I don't think thats the issue. Are you using any external caching features like template cache or ProCache? If so try to disable them temporarely and see if it changes things (also delete the site/cache folder). Another thing could be that the browser cache is holding onto an older version of your site's CSS file. You can load the css file with a cache busting parameter like appending a version (e.g. mycssfile.css?v=2) and see if that changes things. Perform a hard refresh of the browser (usually Ctrl + Shift + R or Cmd + Shift + R).
2. CSS Specificity or Conflicts: Double-check the code for your 'vertical spacer' custom block. Ensure it doesn't contain any CSS or JavaScript that might inadvertently affect the positioning or order of other elements on the page. What is the CSS display value of the main wrapper (e.g. display: grid; display: block;)? If you are using vertical ordering it might make sense to use "block" instead of "grid" (.pg-main {display: block;}).
3. User error: What kind of permissions does the client have (eg. can the client use the item list to reorder)? Could it be that the client reordered the blocks by accident? What was the last thing the client did before it happened?
4. Two users working on the same page: If two users work on the same page it could cause some unexpected behavior, e.g. if both are reordering. Make sure that there is only one person working on the design of a page.

Consider Creating a Minimal Test Case: If you can consistently reproduce the issue on a simpler page with just a few rich text blocks and vertical spacers, please provide me with the steps to reproduce it. This will greatly help me in identifying the root cause. Also can you please share the markup and CSS code for the vertical-spacer block and any CSS/JS that is loaded on that page.

[joe_g]

Hey thanks for getting back!

I've been trying to recreate (and isolate) the error, so far not managing. I have a vague feeling that this happens to layouts that was made before I set everything to force auto row. I'm not sure if that makes sense. I'll ask the editor to always start with a hard reload to see if that helps in the mean time..

2. I'm not messing with the outer element in my vertical-spacer (no pg-wrapper)
3. could be, i wish i could have a screen recording :) But aha, i didn't know you could reorder in the list! I'll tell them that,
4. probably not this, i've got the simultanious editing warning on

J

[jploch]

  On 4/10/2025 at 1:41 PM, joe_g said:

I've been trying to recreate (and isolate) the error, so far not managing. I have a vague feeling that this happens to layouts that was made before I set everything to force auto row. I'm not sure if that makes sense. I'll ask the editor to always start with a hard reload to see if that helps in the mean time..

Expand  

I don't think it's an issue with the cache, so the hard refresh should not be needed (I never had any cache issues for the sites I created with PAGEGRID). How are you loading your custom css? Make sure you load your custom CSS after you load the styles from pagegrid (e.g. after: $pagegrid->styles($page);) Also make sure you use the right class when setting the items to auto row, this will do it for all exiting/new items:

.pg .pg-item {
   grid-row-start: auto; 
}

If you are not using the grid and only want your client to sort vertically it might make sense to set the main wrapper to display block:

.pg-main {
    display: block;
}

See this for more information.

[joe_g]

Hey, 

— The grid is used to place things in 12 columns, so its not just a vertical list. 

— The glitch has happened twice, so it's not a fluke. However, I've been testing a lot to try and provoke the same thing on my end, and not managing. For me its stable, so far.

— I'm not sure how to add cache busting to the line $pagegrid->styles($page);

— I did load some css before the grid, but that was nothing that affected the order. The auto row override i added in your field:

..Since this is loeaded from your code ($pagegrid->styles($page);) I suppose the order should be fine. Nevertheless, to be sure i moved this first. My decorative styling is now loaded afterwards.

In my css I'm doing things like

and

Do you think this could have affected the order? I suppose not.

By the way, is there a more elegant way to override your styling than this, so i can avoid !important?

I'll keep testing to see if i can reproduce the error!

[jploch]

  On 4/11/2025 at 8:55 AM, joe_g said:

— The grid is used to place things in 12 columns, so its not just a vertical list. 

Expand  

Ok then it makes sense to use the default.

  On 4/11/2025 at 8:55 AM, joe_g said:

— The glitch has happened twice, so it's not a fluke. However, I've been testing a lot to try and provoke the same thing on my end, and not managing. For me its stable, so far.

Expand  

It could also be a user error from your client side. Since I can't reproduce it, I am not considering this to be a bug in PAGEGRID for now. If you can provide a way to reproduce the error I will try to fix it.

  On 4/11/2025 at 8:55 AM, joe_g said:

— I'm not sure how to add cache busting to the line $pagegrid->styles($page);

Expand  

PAGEGRID has cache busting enabled by default, so you just need to call the function. I was talking about adding cache busting to your own custom CSS files. But since you loaded the styles inside the PAGEGRID settings it should just work. This also makes sure the order is correct und your custom code will be loaded after PAGEGRID's default styles automatically. I don't think the probelm is related to caching anyway.
 

  On 4/11/2025 at 8:55 AM, joe_g said:

The auto row override i added in your field:

Expand  

Then it should just work. The order is correct if you do it like this. You don't have to use important. Is there any other CSS code that could affect the blocks?
 

  On 4/11/2025 at 8:55 AM, joe_g said:

By the way, is there a more elegant way to override your styling than this, so i can avoid !important?

Expand  

No need to use important. PAGEGRID styles have low specificity. You can use 1 level classes. Just for overwriting the grid-row-start of the items you have to use two classes (like you did): .pg .pg-item{}

[joe_g]

Yes, of course. Until I can reproduce it there isn't much to discuss, but thanks a lot for your help so far!

I've spent a couple of hours trying to reproduce the issue without luck. I'll get back if I get further.

[joe_g]

Hello again,

So i had a screen-share session with the editor/client to see how things were going on their end. It's very possible something is wrong with my setup and/or my code is messing with yours in some way but at the current state of things this doesn't really work. If you're curious you are very welcome to have a look since my dev setup is online.

— In front of my eyes I saw all elements reorder. All my vertical spacers jumped in one place, all text in another. She had been working on the second-largest size breakpoint, so perhaps switching between second-largest and largest had an impact. This is the one problem that really matters, and I'm not sure how to get to the bottom of it. I should mention that I haven't been able to reproduce this on my own computer. It's possible there is something peculiar with the editors browser but from the look of it it's standard chrome install without even an ad-blocker.

— She tried to move an element back in place, from the bottom to the top (=outside the viewport) and it was painfully slow. ~1 fps dragging, but also scrolling 1cm with 1fps. So she would spend half a minute trying to move the element back into place. Editing on my m2 mac is much faster, I'm guessing she might be on an old intel mac, judging from the difference in performance.

— Maybe this is some "user error", but most elements spanned 8 rows instead of 1. Not sure how she managed to make that happen, but this is a smaller problem compared to the two above.

If you're interested in taking a look you are most welcome, but I think otherwise it's time for me to give up. In either case, thanks for the help so far.

J

 

[joe_g]

I think I'm going a bit nuts with this. I keep testing on my own and I simply cannot recreate the reorder error! 

I might try and physically sit next to the editor and see how she does it exactly to try and see whats up. I'll take this one more spin before I give up, it would be so nice to get this to work.

[jploch]

Lets try to fix this. 

1. Which browser (Chrome version) does your client use?
2. How is the performance when your client is not using screen sharing?
3. Can you login with the user of your client and try to replicate the issue on your computer? 

About performance. Screen sharing is not a very reliable way to measure performance. A low FPS rate could be due to the network.
Also keep in mind that screen sharing usually affects the performance of the client. So if your client is running on an older machine, this could also be an explanation for the low FPS.

[jploch]

  On 4/15/2025 at 10:51 AM, joe_g said:

— Maybe this is some "user error", but most elements spanned 8 rows instead of 1. Not sure how she managed to make that happen, but this is a smaller problem compared to the two above.

Expand  

You have two options if you don't want your client to resize items: 

1. Don't give the permision "pagegrid-resize" and "pagegrid-style-panel" to your use role
2. Force the item size with CSS like this:

/* overwriting the default size of grid items */
.pg .pg-item {
  grid-column-end: span 3;
}

 

[joe_g]

hey, so she's using chrome 134 (second latest, i think)

Tomorrow, I'll head over there to try this out together. Lets see what that brings.

I do want her to have control over the columns. The problem I mentioned is that she often accidentally makes the element span way too many rows (as in, horizontally). This is not a huge deal, what really matters is that things reorders sometimes.

[joe_g]

Hey, one thing I noticed now.

I made a fresh test page, added about 20 elements and it got progressively slower. After adding 20 ish elements it was down to 1fps.

After reloading the page it's back to normal (~15fps, usable). That makes me believe that there might be some event doubling going on? Maybe you register event without unregister them, or something like that?

 

[joe_g]

Update,

So i got the reorder bug to happen to me now. I added a bunch of stuff. A couple of times the element refused to go to the right place but was added one row too low instead. I reloaded (this has become a habit) and tried to drag something into place, and poof, everything is completely reordered.

I think what I'll do now is to see if i can get the same thing to happen on a clean install...

[jploch]

Sorry again for the inconvenience, and thank you for your patience!

  On 4/16/2025 at 9:43 AM, joe_g said:

hey, so she's using chrome 134 (second latest, i think)

Expand  

If this is the case, it's not the browser then. Are you loading any custom javascript code, if so can you remove it and see if it changes something? Can you check if there are any javascript errors in the console?

  On 4/16/2025 at 10:28 AM, joe_g said:

I made a fresh test page, added about 20 elements and it got progressively slower. After adding 20 ish elements it was down to 1fps.

Expand  

There is clearly something wrong here, because I build a lot of PAGEGRID websites with a lot more items then 20 and did not experience these performance issues.

  On 4/16/2025 at 11:28 AM, joe_g said:

I think what I'll do now is to see if i can get the same thing to happen on a clean install...

Expand  

I think thats a good idea. You can also test with the premade blocks to make sure it's not your code that is causing it. I will also test a bit on my end, but so far I could not replicate the issue.

[joe_g]

Hey so, none of my js is loaded in the backend, the only console error i can see now when mucking around a bit is:

which points to this bit

not sure if its related..

[joe_g]

A couple of questions, in the mean time:

Could it be a problem to have id's on my custom blocks?

Use tailwind classes?

Use relative positioning (not on the wrapper element, but on the custom block)?

J

[jploch]

  On 4/16/2025 at 1:09 PM, joe_g said:

Hey so, none of my js is loaded in the backend, the only console error i can see now when mucking around a bit is:

Expand  

When you edit a page with PAGEGRID, it's loading your frontend inside an iframe, thats why I am asking about your JS code.

The JS notice you posted is not related. I also see that notice and it has no affect (it's not an error and happens sometmes when opening the style panel and some inputs don't accept the default placeholders).

[jploch]

  On 4/16/2025 at 1:19 PM, joe_g said:

Could it be a problem to have id's on my custom blocks?

Expand  

I don't think so but can you post the code you have in your custom block template.

[joe_g]

I tried to suffix my id's now to see if that helps... 

here is my simple vertical spacer block:

[joe_g]

Here is an example of a carousel. Only using the html+css in the backend, I'm not loading any custom js in the editor.

the only bit strange thing here is that i set an aspect ratio. Should be fine?

[jploch]

I don't see any problems with your code.

Can you try to replicate the issue on a fresh install using only the premade blocks?
If you can't replicate it, you can add one block at a time and see if/when it happens?
Can you install and enable Tracy Debugger and check if you get any errors there?

I can also take a look at your setup if you don't mind. E.g. You can send me a PM with a link to an installable site profile or create a user for me so I can login and try to replicate the issue on your install.

[joe_g]

So i managed to get this error to happen once in total, in several hours of testing. The editor had it a couple of times. Maybe 3-4?

I tried clean install, no problems after about half an hour of testing. But since it happens so rarely it's hard to be systematic about it. 

One thing i could mention is that there seems to be a bit similar pattern in how the elements are placed whenever this error happens. Things that are not full width seem to be stacked in a staircase pattern, like. Not sure that helps. It reminds me a bit how things can look if you forgot to close a div. So i've been looking around if i had any mismatched divs, but I don't think that's the issue.

I'll send a DM with a test version you can look at

[joe_g]

My latest theory is that it has something to do with dropping large elements. I've got this huge images on the page and if i drop them it can shuffle stuff more than anticipated. At least I suspect the problem is related to that, somehow.

[joe_g]

Hey by the way, i just upgraded from .66 to .68. Last time I upgraded was when you mentioned you had made some performance improvements (couple of weeks ago?) and you made linking possible on groups.