Pullquote: Unable to style the pullquote block

[hanneslsm]

Description

This is the same issue as for the Code block: #54540
The settings from the theme.json are overwritten by the default styles

Step-by-step reproduction instructions

1. Create a new theme
2. Try to style the Pullquote block

Screenshots, screen recording, code snippet

      "core/pullquote": {
        "border": {
          "bottom": {
            "style": "none",
            "width": "0px"
          },
          "left": {
            "style": "none",
            "width": "0px"
          },
          "right": {
            "style": "none",
            "width": "0px"
          },
          "top": {
            "style": "none",
            "width": "0px"
          }
        }

Environment info

No response

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

No

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

No

[hanneslsm]

The cite element gets also overwritten in the pullquote (works in the block quote block)
Scratch that. It's possible to style the cite when not using the global one but the one within the pullquote.

[hanneslsm]

I managed to remove the top and bottom border in the theme.json by adding

        "border": {
          "style": "none !important"
        },

Would be nice, if the !important wasn't needed in a theme.json, especially because it removes the possibility to add later custom borders via the UI.

[ramonjd]

Is this related to

• Pullquote block overrides global theme.json settings for borders #56628?

[t-hamano]

@hanneslsm

Sorry for the late reply.

This problem does not seem to be reproducible in WP6.5 or the latest Gutenberg.

WP6.5:

Latest Gutenberg:

The theme.json I used for testing is below.

{
	"$schema": "../../schemas/json/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	},
	"styles": {
		"blocks": {
			"core/pullquote": {
				"border": {
					"bottom": {
						"style": "none",
						"width": "0px"
					},
					"left": {
						"style": "none",
						"width": "0px"
					},
					"right": {
						"style": "none",
						"width": "0px"
					},
					"top": {
						"style": "none",
						"width": "0px"
					}
				}
			}
		}
	}
}

I would like to close this issue, but if the problem still exists, please feel free to comment.