Blog Posts block: gap/height issue affecting several elements

[cecilearkay]

There's a gap/height issue affecting several elements when the Blog Posts block is used on a page.

This has been mentioned a number of times for different elements:

Automattic/themes#1988
Automattic/themes#1803
Automattic/themes#1774
Automattic/themes#1707

But I don't think it's specific to a theme and is actually more widespread to the block and more specifically the .wpnbha element. In my case, it's the sharing buttons that were affected.

Steps to reproduce

1. Add the theme Aquene
2. Make your site public/hidden
3. Create and publish a couple of posts
4. Add the Blog Posts block to a page
5. Add sharing buttons such as LinkedIn, Facebook, Twitter etc. to your page
6. Notice the gap added by the extra top padding

What I expected

No height issue, things to be aligned.

What happened instead

There's some extra padding pushing things down. I used the following CSS code to fix things:

.wpnbha button {
    margin-top: 0;
}

[zdenys]

I'll transfer this one to https://github.com/Automattic/newspack-blocks/ where all of the Block Posts Block issues belong.

[laurelfulford]

Thanks for reporting this, @cecilearkay!

Just to close the loop on some of the above issues:

Automattic/themes#1988 has also been reported in this repo, and a fix has been queued up, it just needs to be synced with WP.com - I've added a comment to the theme issue and closed it.

Automattic/themes#1803 and Automattic/themes#1774 look to be clashes between the theme and the block; theme-specific styles are overriding what the block is doing. The block uses some common classes for different elements (the excerpt, title, post meta and featured image); the original hope was that it would help it pick up the theme styles easier, though in some cases where themes are really pushing those styles, it doesn't play nicely.

For this issue, my best guess is that the 'Load More' styles are applied to other buttons incorrectly, but I haven't been able to replicate the same set up. It looks like the Share buttons are showing up for the posts in the block in your screenshot, but they only show up at the bottom of the page for me.

When you have a moment, could you share a screenshot of your Sharing settings? So far I've tried enabling them for everything, or specially posts or pages, and adding the block to the front page, a subpage, and a post, but no dice! (I did manage to get Ratings showing up for the posts in the block though ¯_(ツ)_/¯ )

Also if I've misunderstood the screenshot and the buttons are not appearing in the block, please let me know!

[cecilearkay]

I'm sorry, I realize I didn't mention you need an AT site. You can see the issue live here on my test site:

https://crkatomicsite.wpcomstaging.com/test-blog-posts-block/

The settings I have are:

• Likes & Sharing activated in each posts
• Likes & Sharing deactivated on that specific page

And in Marketing > Sharing Buttons, I have these:

[laurelfulford]

Thanks @cecilearkay!

I can confirm that it is the styles for the load more button getting picked up by the LinkedIn button -- right now it doesn't specify a class, just the block container.

Updating those styles to use the Load More button class should fix it.

[matticbot]

🎉 This issue has been resolved in version 1.9.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀