• My team and I have built a commercial website for a client, who needs to be able to use the back end editor on their own for the foreseeable future. Their site is 120+ pages, and the page editors worked fine at first, but some WordPress update has changed the way they display that is making it impossible for the client to use, and I don’t know exactly which update. Our theme is by Astra, and we use blocks made by Astra and Stackable.

    This public Google Drive folder contains screencaps illustrating the situation, but I’ll try to describe things enough so that depending on your familiarity maybe you don’t need them.

    Fig.1 and Fig. 2 show the front end of one of the pages. It displays my client’s sponsor logos in grid rows and columns, and it ends at the “Become a Sponsor” button in Fig. 2.

    Fig. 3 shows the back end editor for that page. The blue dotted line is a Section block, by Astra, which basically creates a simple CSS div. We use that block, or div if you prefer, to control the page’s content width, so it contains all of the page’s grid containers (via a block called Advanced Column, by Stackable) which in turn contain the jpegs of the logos in standard Gutenberg Image blocks. In other words, the whole page is inside of that blue dotted line; note the heading, and the “Become a Sponsor” button.
    This toolkit was a pretty sweet approach at first, because it works similar enough to CSS for me and actually allows me to give blocks their own CSS classes, and most importantly it gave our client an easy interface for changing things around as admin after launch. I have no idea what changed, but now it looks like this, where you can’t see the content. I’ve tried moving the Advanced Columns to the outside of the Section block, and this does not cause them to become visible.

    Anyway, what’s weird is the block navigation tree in Fig. 4, which proves that the content is indeed still in there.

    Fig. 5 is what you see if you click the fourth “Image” block, which adds up with what you see on the front end, and Fig. 6 shows the fifth image block, which also adds up.

    The problem is this is super inconvenient for my layman client to work with; being tiny, and seemingly way outside of its container. We have a mixed toolkit, so it’s hard to ask a specific question about this, and maybe it seems like my case is fundamentally problematic, but we’re not actually breaking convention here. CSS grids inside of divs are all over the internet, and I would expect WordPress’s in-house block builder to at least be able to display that properly, regardless of who designed the blocks, heck, it used to look fine! When I first built the page, the editor looked more or less like the front end. So, shot in the dark, is anyone who actually read all of this familiar with this kind of problem? What do you know about it? What did/would you do?

  • The topic ‘Page editor display problem, Astra, Stackable’ is closed to new replies.