[Support request] content of one block bleeding up into space of previous block

[Laura Stella]

Lines of text are getting squished into spaces between photographs, splitting words. I want to be able to begin a section with the content starting on a fresh line, for a nice square ‘new paragraph’ look, whether I want a fresh line across the whole page, or simply want to keep text after a group of photos to stay in its own quadrant.
I’ve looked up the problem using the phrase “content of one block bleeding up into space of previous block”, but apparently I’m speaking Greek. Certainly there’s something simple I just haven’t figured out yet, or there’s some css that will allow me to create a barrier at the bottom or top of paragraphs or groups that make it impermeable to invasion from outside. I used to put lines of single periods to get to where a fresh line would fit, but you can’t do that anymore with small screens.
I’m sending you a link to a page that illustrates my problem. There’s no visual barrier between sections.

I asked you this once before and didn’t get an answer. But I keep reading replies that say to ask the theme author. If you can’t answer, please let me know that. If there’s a link that directly accesses WordPress.org (not the forums to ask about Gutenberg blocks, would you give it to me? And if there is some technical support service for Gutenberg that is available for a monthly fee, would you let me know that as well?
Thank you
Signed Frustrated as Hell with Gutenberg Blocks (aka Laura Stella Sitges)

[Elvin]

Hi,

This particular issue seems like an overflow issue among contents that are too big for their containers.

But to confirm this, can you provide a working link to the page in question so we could check?

The link doesn’t seem to be working anymore as this is what we see on our end.
https://share.getcloudapp.com/7KubZWGN

As for Gutenberg support, you’ll have to try your luck here:
https://wordpress.org/support/plugin/gutenberg/

Or raise the issue here:
https://github.com/WordPress/gutenberg/issues

And if there is some technical support service for Gutenberg that is available for a monthly fee, would you let me know that as well?

I’m not exactly sure if the official developer/s offer this particular kind of service, I’m afraid you’ll have to ask it on their support forum as well.

[Laura Stella]

I sent a link for you to see my problem a few days ago that didn’t work right. Below you’ll find another try. Hope it works. A page or so after the title, you will see a group of 4 photos followed by a paragraph… at least that’s what it’s supposed to look like. But the words are squished up between the photos. There must be a way to accomplish this simple thing.
Another way to look at it – You will see little groupings of hyphens that are supposed to be centered on lines alone as dividers between sections. How do I control how my lines are laid out?

[David]

Hi there,

the link you provided is to a draft/preview – we cannot open that link without being logged in to your site. If you can provide a login we can then take a look.

[Laura Stella]

I can’t tell what I sent you before since it was in the private box. Here it is again, but this time checked to see that it is published and isn’t a preview. I don’t know if my screenshots will get through, but I know you already know the problem I’m describing.
Thanks again.

[Ying]

Hi Laura,

I had a look at your site, we can’t really do anything about it since the structure is made with WP blocks.
You could try these places to raise the issue.
https://generatepress.com/forums/topic/content-of-one-block-bleeding-up-into-space-of-previous-block/#post-1607332

Or try to switch to other more responsive block editors instead.

[Laura Stella]

Please, this can’t be such an unusual problem, and I’ve read other people complaining of the same thing, text squeezing up between photos, but I seem to not be able to word it in a way that finds a topic in a forum. It’s maddening. And to add to the frustration, the forum post you recommended to me was my own question, which was also left unsolved. Please, please, just tell me the right words to use for this. I simply want paragraphs to LOOK like separate paragraphs, real VISUAL paragraphs, where the space at the end stays a VISUAL space and the new paragraph starts on a fresh line, a fresh VISUAL line, not in the big space beside the last photo of the previous, or any other space from a previous photo. I simply don’t believe that switching to Gutenberg blocks meant there were no paragraph separations if photos were part of a paragraph.

If a photo is at the end of a paragraph, how do I prevent the space beside it from filling up with the next paragraph. I know you, as Generatepress, don’t want to answer this. But please, tell me the words that identify this issue so I can go to WordPress and find the appropriate forum.
Thank you, a forgive me for my frustration.

[Ying]

You could give this CSS a try:

.wp-block-group__inner-container {
    display: flex;
    flex-flow: row wrap;
}

[Laura Stella]

What will it do exactly?
Still, would you tell me the words used to describe the problem I have? I’d like to feel sure that you understand the issue I’m trying to describe.
Thank you, Ying!

[David]

Hi there,

so the issue comes from using the Alignment Left/Right options in the Blocks.
This uses Floats ( some boring info here: https://css-tricks.com/all-about-floats/ )

So to the problem – when an item is floated any content that comes after it will float up to fill any space available. And currently WP has not implemented a ‘clearfix’ option to stop items from floating into the space.

So the solution:

1. Add this CSS to your site:

.blockclearfix::after {
  content: "";
  clear: both;
  display: table;
}

2. Then you can select a Block and in the settings sidebar > Advanced > Additional CSS Class(es) you can add: blockclearfix

This will stop that block and any block after it from floating up to fill the space.

Now where you want to add the blockclearfix will be up to your design.

In some instances you may want to add a Spacer Block after some content simply to apply a Clearfix. But Floats are a complicated concept to grasp let alone control

Alternatives:
When you want an Image aside of some text then you may be better using the Columns Block.

[Laura Stella]

I was so excited at first, David, when I added your css. I even thought I grasped the float article. But then I noticed things were going wonky, different things I can’t remember, so I got rid of the individual blockclearfix’es so I could start over, but they didn’t seem to go away; I couldn’t get text to wrap around the old incorrect places, or the things too high, the original problem of squishing up between other things, but couldn’t get it to go beside the photo I wanted it to, either. It continued to start on its own line, though I’d erased the blockclearfix command. So I tried your other suggestion of columns, but there are only a few layouts, 50/50, 33/66, which rarely fit correctly, and adjusting the size of the photo doesn’t take the caption with it, making it off center and taking up space that no longer belongs to it. I’d do a regular media/text block, but I lose my caption that way.
Another wonkiness is the width adjustment. If I click what makes it the full width of the screen, then try to put it back to just the blog page width, it won’t go. Now I’ve tried group blocks, column blocks and the Classic block, and I can’t get the text to go beside a photo anymore, and I can’t adjust photo size anymore and have its caption adjust with it.
What have I done, David? I’ve messed up somehow. I just want things to fit where I put them, which is what I thought the Classic block would do if I put a dotted line divider on blockclearfix in front of it.

[Laura Stella]

So weird. One of the corrections your css did correctly, putting a dotted line divider on its own line between two sections, stayed corrected, though that’s one of the blocks whose new blockclearfix command I deleted. And one of the places where the text rode up higher than the photo it was supposed to be next to, didn’t fix with the blockclearfix, and doesn’t change at all whether I add it again, deliete it again, etc. Higgledy-piggledy should be a legitimate technical term.

[David]

Multiple floats on the same page can cause absolute chaos. If you want real control of keeping text / image aside then you would be best using the Columns Block.

[Laura Stella]

Let me make sure I understand. When you say multiple floats, you’re talking about my photos, right?… not anything related to your css and my subsequent blockclearfix commands, right? It just sounds wrong that, in essence, this means that my wanting to have several photos on a page, things are going to be, and have become, chaos. Or maybe I still don’t understand floats.
I know I have to stop asking you to help me out of problems with WP/Gutenberg, but I humbly ask you to help me get out of where I am now.
1) How do I delete (really delete, get the machine to delete) all the blockclearfix commands whose deletions the machine seems to be ignoring. Did I enter your recommended css incorrectly? Do I have to delete the css?
2) Might deleting the css, then re-entering it, maybe with a blank between it and the previous css, help?
3) With column blocks, how do I get a photo caption to follow the change to its photo when I adjust its size?, or is size adjustment not supposed to be done in Columns?
4) Can you give me a piece of css that allows me to use the media/text block and puts the caption of a photo back in?
5) Since I do have to stop asking you to solve WP/Gutenberg block problems, can you tell me if WP.org has a pay service that offers the kind of person-to-person tech support you and I are having now? I have gotten no help from their support forums, which only makes their customers angrier and feeling more abandoned.
Seriously, David, Tom, all of you, y’all have been super. I hope you don’t get ‘beaten down’ by all the frustrated non-professionals like me and stop providing this kind of support.

[David]

Floats are a CSS property used in many places. When you add Align Left / Align Right to an image for example ( and in this case ) its adding a Float property to them. And don’t worry Floats are a bit mystical – theirs lots if articles on the web for CSS Floats and i am not sure any of them demystify how they work usage….

I think it maybe best to start with a blank page and test out floats.
The main problem i see is where you have blocks set in this order:

1.Image Block – Align Left
2.Image Block – Align Right
3.Text Block.

on large screens there will be space between the images, and the text will flow up between the images. And on smaller screens when there isn’t enough room for the images to be side by side, the text will flow up over the Align Right image. To Top that from happening the simplest fix would be this layout:

1.Image Block – Align Left
2.Image Block – Align Right
3.Spacer Block.
4.Text Block

The spacer block occupies 100% width so it blocks anything below it from floating up to fill the space. So you can do the same when you have just this layout – this will keep text to the right of the image but nothing below it will float up.

1.Image Block – Align Left
2.Text Block
3.Spacer Block.

Give that method a try first to see if you can achieve the layout your require – the we can take a look at any other issues.

And thanks for the great feedback – we’re happy to try and help we’re we can.

[Author]

Posts