How do I add spacing to a grid using the block editor?

  • senseivita

    (@senseivita)


    1 year, 3 months ago

    I’m trying to find the right combination of group blocks to create a layout where I have a central column divided in three sub-columns for object (text, image, etc) placement, plus another two columns on each side that are part of the central 3, so objects can be placed on the side orbiting something in the main columns so they go up and down with it. I knew I wouldn’t know how to explain, ✓ (check,) so I made a quick rough sketch of it. It’s linked below.

    I managed to get it using Columns but it wasn’t pretty, much less efficient since whenever I’d need a “satellite” I would need a new Columns block—which of course I cheated by simply duplicating it and deleting the Paragraph blocks or whatever it had in it.

    ▽ Columns
        ▽ Column
              Paragraph
              Paragraph
        ▽ Column
              Image

    This ended off-center, thought I could disguise it with the images I’m creating as I go— It’s a lot of custom work that would make no sense the moment I change themes, color scheme or something (I’m using Twenty Twenty-Five, BTW. No plugins.)

    Then, I tried the Grid block, and I’m okay making adjustments to each contained block to set the its column/row span within the grid, but, since I want two side columns to flank the main three, they would be empty for the most part and the grid automatically tries to fill them. They need some empty calories. I tried filling the leftmost column with a spacer block set to span enough, and it worked, except when an object filling all 5 columns (edge-to-edge) interrupted it. I couldn’t make it, or rather another continue down. The rightmost side is even more confusing, both sides because grid spaces fill voids so it gets even more complicated in mobile.

    If two or more multi-column blocks don’t fit perfectly in the gird, blanks are indeed left in it, I don’t know if Spacer blocks spanning >10 rows would be inserted in there since column-wise they fit. Specially after a five-column break.

    It occurred to me making the central column using a given type of containers blocks, wrapped into another type of container blocks, with yet another type of container blocks on each side, that’s more or less:

    ▽ Container
        ▽ Container (left padding, sat space)
          ▽ Container (horizontal distribution)
              Media asset
        ▽ Container (central)
          ▽ Container (possibly columns parent)
            ▽ Container (then each column…)
              Paragraph column 1 of 2
            ▽ Container
              Paragraph column 2 of 2          
            ▽ Container 
              Media asset
        ▽ Container (right padding, sat space)
          ▽ Container (horizontal distribution)
              Media asset

    But then I realized they would be disconnected from the center, how would they track the content to move up and down with it?

    A little help, please?? See the picture, it will make more sense than I do.

    Thanks!

    View post on imgur.com

    • This topic was modified 1 year, 3 months ago by senseivita. Reason: Screwed up the title
    • This topic was modified 1 year, 3 months ago by senseivita.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    1 year, 3 months ago

    I appreciate your effort to adequately explain the issue. I’m sorry but I’m still not sure I fully understand. I think the principle issue is that you want these “sidebar” elements to be anchored to elements within the central columns? So when the central content reflows the sidebar elements move with their anchors so they remain vertically related to a particular central element?

    If that’s the case, the sidebar elements should actually be within the central content. For example, an inline image which has text wrapping around it. Then such an image can be moved off to the side so that it appears to be within the sidebar, even though it’s logically within the central columns. If text wrapping is in effect, the text will reflow into the space the image consumed before it was moved off to the side.

    I don’t think the usual block style settings will let you do something like this, such as specifying a large negative left margin, but it could be accomplished with custom CSS added to the Additional CSS section of the style book. Use the Additional CSS Classes block setting field (in the Advanced meta box) to specify a custom class attribute that your custom CSS styling can use to identify the correct elements. You’ll also need media queries to deal with what should happen when there’s not enough room for the sidebars.

    You may also need to specify that overflow be visible, otherwise such satellite elements will disappear when they are moved outside of their anchor’s container.

    Thread Starter senseivita

    (@senseivita)

    1 year, 3 months ago

    First, thank you for your patience, and for answering, I didn’t expect to see an email from WordPress, let alone so soon.

    I think I got it. I’ve been trying to learn CSS actually, but even without knowing anything about it I kinda knew it wouldn’t be possible. I’m basically asking for a broken off content block — well, query loop, I guess — and from what I gather, the most it can be is offset, which would encompass two or more sources, not the same.

    For what it’s worth, I have added some custom classes, only basic stuff though, such as blurred gradient backgrounds for instance, and though I don’t quite have figured it out yet, you did make help me see things differently by not considering the outer columns their own, plus anchors, overflow, queries, margins; all noted. I have an idea of where and where not focus learning.

    This is just for fun thankfully, no pressure, though even if silly, the site is shaping up sort of low key gorgeous with only two finished templates (and one of them doesn’t count because it’s the 404 page,) I’m loving this new WordPress since Gutenberg that needs no plugins.

    Anyway, thanks again!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘How do I add spacing to a grid using the block editor?’ is closed to new replies.

Tags