Query Pagination: Remove unwanted bottom margins from links

[iamtakashi]

Description

It's minor, but I remove it in every theme I work on. The bottom margins 0.5em on the block's links seem unnecessary, creating misalignment. Can we remove them?

Step-by-step reproduction instructions

1. Go to Editor
2. Add a query pagination block
3. See the bottom margin added to the elements in the block.

Screenshots, screen recording, code snippet

No response

Environment info

• WP 6.2.2
• Gutenberg trunk
• Chrome, Mac

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[aurooba]

Good note, @iamtakashi! I believe the margin is there to deal with the scenario where those different elements are get really close to one another. Perhaps instead of an arbitrary 0.5em, we could take advantage of the blockGap property instead? 🤔

[iamtakashi]

@aurooba Thanks for sharing your thought.

Whatever comes after the pagination block already has the top margin equivalent to the blockGap. But because of the unwanted bottom margin, the gap is bigger than how it should be. (Notice the gap between the orange(top margin on the image block) and the link in the pagination block.)

It feels safe to remove the bottom margin though I wonder if anyone knows the intention.

[aurooba]

Ah yes, I see what you're saying. For some reason I thought that the blockGap wasn't set to apply on the inner pagination blocks, but upon looking at it again, I can see that it is. I agree with you, the bottom margin can likely be removed from the inner pagination blocks.

Since blockGap didn't always exist, it's possible that the this margin was added before and then just got missed when blockGap was introduced.

For those folks who have blockGap disabled, do you think it would be a reasonable assumption that there would be no margin at all or in those cases should this margin still exist?

[iamtakashi]

Since blockGap didn't always exist, it's possible that the this margin was added before and then just got missed when blockGap was introduced.

That's what I guess too.

For those folks who have blockGap disabled, do you think it would be a reasonable assumption that there would be no margin at all or in those cases should this margin still exist?

That's a good question. Unlike a p or figure elements, it doesn't have margins from the user agent stylesheet, and it could bump to other blocks in some cases when the blockGap is disabled.

If Global Styles allows controlling the margins for the block, it'd be easier to remove it. Would that be a better solution?

[iamtakashi]

The bottom margins are still there, and it's getting harder to get rid of it. See the screenshot; they are not vertically in the middle.

There is no margin control for the block in Global Styles.

I can't get rid of it in the theme.json. For example, this doesn't work.

"core/query-pagination-previous": {
	"spacing": {
		"margin": {
			"bottom": "0"
		}
	}
}

Adding a custom CSS doesn't work either.

I don't know why the blocks need the bottom margin. Can we just remove it from the previous page, the page numbers, and the next page blocks?

[tellthemachines]

Those .5em margins are coming from the block library styles and they're way too specific. I'm not sure what "blocks default margin" the comment is referring to or it it's still an issue, but would be worth reducing the specificity of those rules in any case.

[t-hamano]

Because the Query Pagination block is flex, the 0.5em gap will be applied even if the theme doesn't support blockGap. Therefore, even if we delete the margins, there will always be 0.5em of space between blocks within the Query Pagination block.

I simply removed all of these margins (here and here) and tested it with a theme that doesn't support blockGap, and there didn't seem to be any problems:

[tjcafferkey]

I have a draft PR for this here #64874 but there remains a specificity issue which I've commented here if anyone's any suggestions.