Space between file-blocks

  • Resolved itspetrus

    (@itspetrus)


    3 years ago

    Hi,

    Our posts sometimes have PDF-files attached. Therefor we use the file-block in the Gutenberg editor (wp-block-file). However, there is a lot of space between those blocks. That doesn’t look pretty. Is there anything I can do about?

    When I use the classic editor, I do not have those extra space. I always used a soft return there but I don’t see anything similar in the Gutenberg editor. See the screenshots for the difference. It seems not to be theme specific.

    I did find some solution based on CSS here: https://wordpress.org/support/topic/reduce-space-between-blocks/ but to do this every time for each block, that’s some work.

    It would be nice if somebody knows a more definitive solution. How to prevent these extra white space between blocks?

    Best regards,
    Peter.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Kathryn Presner

    (@zoonini)

    3 years ago

    Hi @itspetrus – there isn’t a built-in way to change the spacing around the File block, but you can try some custom CSS:

    /* File block spacing */
body .is-layout-constrained > * + .wp-block-file { 
  margin-block-start: 0;
}

    While the Customizer is not exposed by default when using Site Editing, you can still access it manually by adding /wp-admin/customize.php after your URL. You can then add custom CSS in the Additional CSS area.

    You don’t have to repeat this for every block, just adding it once should take care of any File block on your site.

    If this doesn’t work as expected, could you please provide a link to a post or page with file blocks on your site so I can have a look directly? Thanks!

    Thread Starter itspetrus

    (@itspetrus)

    3 years ago

    Hi,

    Thanks for your help. It’s not working right away but we are getting closer. You can find an example via https://tst.afdeling8gou.nl/nieuws/dit-is-een-test/ (It’s my testsite, password protected against search engines, no big deal, password = bl0ck).

    I noticed that when I remove “margin-bottom: 1.5 em” from “.wp-block-file” using the browser inspector, the extra whitespace indeed disappears. I just don’t know enough about css to understand where I have to set such permanent. Perhaps this leads you to the final solution?

    Thanks in advance!

    • This reply was modified 3 years ago by itspetrus.
    Moderator Kathryn Presner

    (@zoonini)

    3 years ago

    Thanks for sharing the page link, it’s helpful to have a look directly. Could you try this revised CSS and let me know how it goes?

    /* File block spacing */
.wp-block-file { 
  margin-bottom: 10px;
}

    You can adjust that margin value to your liking.

    Moderator Kathryn Presner

    (@zoonini)

    3 years ago

    p.s. you can also remove the earlier version of the CSS that I gave you.

    Thread Starter itspetrus

    (@itspetrus)

    3 years ago

    Yes, that does the trick! I lowered it to 5px. It’s looking good now. Thank you very much! I even start to understand what I’m doing. 😉

    Moderator Kathryn Presner

    (@zoonini)

    3 years ago

    I’m very glad! I’ll mark this as resolved but feel free to start a new thread if you have more questions.

    Thread Starter itspetrus

    (@itspetrus)

    3 years ago

    I noticed before that the fontsize of linked files based on the block-file is rather small. To correct that I added to the custom CSS:

    .wp-block-file a.wp-block-file__button {font-size: 1em;}

    Perhaps it helps somebody else. Thanks again!

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

The topic ‘Space between file-blocks’ is closed to new replies.