Query pagination: Styles from theme.json are being overwritten by default block styles

[carolinan]

Is there an existing issue for this?

• I have searched the existing issues

Have you tried deactivating all plugins except Gutenberg?

• I have tested with all plugins deactivated.

Have you tried replicating the bug using a default theme e.g. Twenty Twenty?

• I have tested with a default theme.

Description

I can't change the margin of the query pagination links using theme.json.
If I add the following code to theme.json:

"core/query-pagination": {
			"elements": {
					"link": {
						"spacing": {
							"margin":{
								"bottom": "0px"
							}
						}
					}
				}
			}

It is being overwritten by the block style, and margin-bottom: .5em; is applied instead:

.wp-block-query-pagination>.wp-block-query-pagination-next, .wp-block-query-pagination>.wp-block-query-pagination-numbers, .wp-block-query-pagination>.wp-block-query-pagination-previous {
    display: inline-block;
    margin-right: .5em;
    margin-bottom: .5em;
}

.wp-block-query-pagination a {
    margin-bottom: 0px;
}

Step-by-step reproduction instructions

1. Adjust the margin of the query pagination block using theme.json.
2. In the editor, add a query with query pagination.
3. Confirm that the CSS is being overwritten.

Expected Behavior

I expect styles from theme.json to take precedence.

Current Behavior

Styles from theme.json are being overwritten by default block styles

Screenshots or screen recording (optional)

No response

Code snippet (optional)

No response

WordPress Information

5.8

Gutenberg Information

Version 11.1, 11.2

What browsers are you seeing the problem on?

Chrome

Device Information

Desktop

Operating System Information

Windows 10

[jasmussen]

For anyone looking at potentially picking this up, one thing I've been leveraging to fix similar issues in the navigation block (too high specificity of block styles, higher than those output by global styles), is to use :where to lower the specificity of the block styles. This codepen outlines the principle: https://codepen.io/joen/pen/abJVrGX

[fklein-lu]

One could, and for now should, make the CSS better.

I'm not in favor of using a complex method as outlined above. If Gutenberg were to target the class of the child blocks, instead of unnecessarily target using the parent class, then the bug wouldn't exist.

In the end though blocks should use the same styling mechanism as themes do: the theme.json file.

This would not only be a great opportunity for dogfooding. But it also would bring block styles closer to what they are: defaults that theme authors can override.

And for that the default and the override need to be provided through the same means.

[carolinan]

I tried using

:where(.wp-block-query-pagination-next),
:where(.wp-block-query-pagination-previous),
:where(.wp-block-query-pagination-numbers)

The style from theme.json was applied.
When there was no style in theme.json, the block default of 0px margin was used instead of the block specific styles.

I think that both the bottom and right margins should be removed from the block style?
In the editor, this margin is already overridden. The parent has a gap style which already separates the next/previous and the numbers.

[carolinan]

I am no longer able to reproduce this, closing as fixed.

[badg0003]

I was able to reproduce the margin issue. Overall this is one block that struggles within theme.json ... it's far easier to define within the global style.css as some items, such as the current page number, cannot be styled. Furthermore, it's odd having to replicate styles for the next and previous elements when they will almost always be the same, right? Might make more sense just to have this as a single selector.

[carolinan]

Wouldn't that single selector be the parent query pagination block?

[graylaurenm]

@carolinan I can also reproduce this still. Was the margin supposed to be removed, as mentioned in this comment? I am testing with the same code you used above, well as with the more specific core/query-pagination.

What I'm seeing: https://ocl.ink/i/AVxQqv

Snippet (shortened for readability) where I'm applying margin to just about anything that could possibly work, to try and verify what you said about this working...

            "core/query-pagination": {
                "elements": {
                    "link": {
                        "spacing": {
                            "margin": {
                                "right": "0px",
                                "bottom": "0"
            "core/query-pagination-previous": {
                "spacing": {
                    "margin": {
                        "right": "0px",
                        "bottom": "0"
                "elements": {
                    "link": {
                        "spacing": {
                            "margin": {
                                "right": "0px",
                                "bottom": "0"

Any chance this issue is worth re-opening?

[carolinan]

I have not been able to look into it, but I can re-open it.