Skip Navigation

[Closed] Columns in block editor displaying as stacked after update

This support ticket is created 4 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 18 replies, has 2 voices.

Last updated by Christian Cox 4 years ago.

Assisted by: Christian Cox.

Author
Posts
#1846387

I just updated the Toolset plugins.
I have a WordPress archive with columns, inserted with the block editor.
These no longer display as columns; they instead are stacked.
When I edit the WordPress archive, the columns are shown correctly. But in the front-end, they are stacked.
This appears to be because the container wp-block-columns is not display:flex;

#1846391

Please add the ability for me to give further private information so I can point you to the page with the issue, as well as a test page where columns are working correctly.

#1846417

I managed a temporary fix by adding:
.tax-line-card .wp-block-columns {
    display: flex;
}
to my CSS. So you will see them in columns now. But this still needs to be resolved.

#1846605

Hi, thanks for the further information. I've activated more private fields so you can share securely. You may add any dummy info necessary to be able to submit the form. I'll review your site and give you some feedback.

#1846609
#1846663

Okay I'm running a quick test and commenting out your workaround temporarily, please stand by.

#1846679

I have restored the workaround but I was unable to find an obvious cause for this issue. I will have to run some additional tests locally and give you an update tomorrow with additional feedback, as my day is closing here shortly. Thanks for your patience, I will be in touch early tomorrow.

#1846715

Sounds good, thanks for your help!

#1847457
Screen Shot 2020-11-17 at 9.14.57 AM.png

In my local test, the display:flex style for .wp-block-columns is included in the file /wp-includes/css/dist/block-library/style.min.css, part of WP core files, and is loaded on the front-end when I display a 3-column block in a WP Archive. Screenshot attached. It seems that the same file is not being loaded on your site for some reason I am not fully aware of. To further troubleshoot, we should attempt to isolate the issue to being Toolset-specific or not. I'd like to try these troubleshooting steps first:
- Temporarily deactivate Toolset and create a test Post or Page designed in the Block Editor. Add a 3-column block to the design and add some content inside the blocks. Preview the post on the front-end and see if the blocks appear stacked.
-- If stacked in this case, this issue is not Toolset-related and must be the result of some other combination of your theme, any custom code snippets you have applied, and other plugins. You can try deactivating all plugins and activating a custom theme, then reactivating them one by one until the problem returns.
-- If not stacked, reactivate Toolset and test again.
---- If stacked again, the issue would seem to be Toolset-related somehow. I will need to do more in-depth investigation here.
---- If not stacked, the issue may be related to some combination of blocks on the page, and I will need to do more in-depth investigation.

Please let me know the steps you take and the results you achieve. If you'd prefer not to try these steps on the live site, I can try to make a clone of the site using the Duplicator plugin and run more tests locally without affecting the live site.

#1847733

Thanks so much for your help. The theme I am using recently changed to using a concatenated CSS file that contains all CSS from header to footer in a single file to increase site speeds – that's why the wp-includes/css/dist/block-library/style.min.css isn't being loaded directly. In theory everything from that file should be loaded into the concatenated CSS file... maybe that's where things are going wrong.

Did you see my test page (link included in previous private message) – I added a 3-column block to a blank page and put paragraph blocks in each column, and it displays correctly. Does this give you the info you need for troubleshooting?

At this point I'm guessing it's one of two things: A. the theme not concatenating the CSS correctly or B. some combination of blocks on the page, as you said. In either case, finding the source of the issue would involve a lot of work, so I think that my CSS workaround is probably the easiest way to resolve the issue. Let me know if you agree that it is an acceptable solution.

P.S. The vertical alignment of columns is also not working. This leads me to lean toward the theme concatenated CSS being the issue here; probably a conflict between the theme and Toolset.

#1847807

I think the CSS solution you have is fine as a workaround, but it would be nice to be able to determine the real source of the problem. I could install a copy of your theme and try a similar setup to see if I can reproduce the problem easily. If you can upload a copy of the theme to Drive or Dropbox and provide a link here in the forum, I can download it and run some additional tests.

Any URL you share here in the forum will be hidden from public view for your security.

#1848821

Let me check with the theme developers first to see if there is a way to disable the concatenated CSS. I'll get back to you as soon as I hear from them.

#1848827

Never mind, the way they told me to disable the concatenated CSS broke the styling on my site 🙁 I've turned it back on.
Here's a link to the theme: hidden link
Thank you for your help.

#1848961

Got it, thanks. You can delete from Drobox now. I will continue investigating and give you an update shortly.

#1848991

I was able to replicate this easily with Themify Ultra active in a test site with Types and Blocks, but only in a WP Archive. The columns block seems to work well in a standard Post and also in a Views loop, so the issue seems specific to WP Archives. I'm escalating this to my 2nd tier support team and will keep you posted here as I receive additional information.

The topic ‘[Closed] Columns in block editor displaying as stacked after update’ is closed to new replies.