Single block in editor but separate on front-end

  • Resolved OsakaWebbie

    (@osakawebbie)


    5 years, 4 months ago

    I’m just starting to try to use Gutenberg – I’m trying to give it a fair chance, but so far it’s making me crazy.

    Current wrestling match: I want a large block with a background color that contains multiple paragraphs. I already figured out that I can’t have multiple <p> tags, because they become separate blocks, which includes a non-colored region between them (plus gobs of padding on each one). If I press Shift-Enter twice, it makes two <br> tags, which looks good enough (more control of the space would be better, but I can live with it) and remains a single block in the editor. But on the resulting page, it becomes two blocks, with a background color only on the first one! Suggestions?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Jorge Costa

    (@jorgefilipecosta)

    Hi @osakawebbie,

    In WordPress 5.3 you should have a group block available that supports a background color.
    You can add multiple paragraphs inside the group block, so the background color is applied without spaces.

    I hope you find my answer useful, feel free to comment if you need additional clarification.

    Thread Starter OsakaWebbie

    (@osakawebbie)

    Thanks for responding even though the question was four months old. It’s still relevant, because I haven’t worked on that site since I wrote the question. Now development of that site is becoming a high priority, so your response is timely.

    I highlighted my two test paragraphs and put them in a group, coloring the background of the group blue so I can see what’s happening. But now the controls on the left edge are semi-hidden – is that supposed to happen? See a screenshot at: https://imgur.com/a/SpRUuRu

    And the paragraphs are still really far apart – if I remove the background of the paragraph blocks, there will be about three text lines of space between the text of the two paragraphs. I don’t want that either. Additional guidance is welcome.

    (P.S. Did you mark my question “resolved”? I would have assumed that only the OP could do that.)

    Thread Starter OsakaWebbie

    (@osakawebbie)

    Never mind about the paragraph spacing – if I change the background of the paragraph blocks to Clear, the spacing gets better.

    And I’ve figured out that the control is only obscured when the currently selected block is the group block. If I select a paragraph, or the cover block that contains the group (I think – the block nesting is getting confusing), the control is on top. But if I select the group, the control goes half-behind the green again. Perhaps it has something to do with a group in a cover? I’m not married to the idea of using a cover block, and it has some characteristics I don’t like in the theme I’m trying out, but it’s the only way I have found to have a background image not move the same as the text when you scroll. [Parallax scrolling would be extra cool, but this fixed-background cover is the closest I’ve been able to come without hacking the theme or adding a plugin.] I’m trying to keep the design as out-of-the-box as I can and just see what a given theme can do by itself (currently Astra, but I might try other themes also). So far I’m just frustrated, and I can’t tell how much of my difficulty is with Gutenberg vs. Astra. Perhaps that’s why I put this project aside for several months and did things I feel more confident about…

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Single block in editor but separate on front-end’ is closed to new replies.