removing the extra padding in background settings in site tittle block

[Smit2808]

What?

This PR will solve the issue of extra padding added when the background color is selected in the site title block.

Why?

In FSE editor when we give the background color to the site title block then extra padding is added. And it is not correct. On the front side, this issue is not happening only on the editor side this is happening. I found the extra CSS due to which the issue is happening.

How?

So right now I have made PR of removal of that CSS but any suggestion for improvement in CSS will be a great help.

Testing Instructions

1. Open FSE.
2. Select the site title block in the nav menu.
3. Add the background color and you can see some padding will be added with background-color

Screenshots or screencast

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Smit2808! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[ntsekouras]

Thanks for the PR @Smit2808 !

Unfortunately this is something that cannot be handled simply by removing the styles. I do agree that we shouldn't have introduced styles in the first place, but we have, and by removing them it will 'break' the existing sites that have this class.

I'm pretty sure there were related discussions in GH about this and how to move forward, but couldn't find them right now. I'll just ping @scruffian (in order to ping other designers if he wants 😄 ) to share some thoughts, if they have any, on this issue.

Also it's very interesting that your intention was to remove the style from site title block but the styles are applied from heading block.. That means that it would break all heading blocks with that css class, and that other blocks that use an h${level} element and use background are implicitly affected.

Finally, you couldn't not see them in the front end probably because you use a block theme and hadn't a heading block, as block styles are added only if they exist in the content. If in your testing page you also add a heading block, you'll see the padding there as well.

[Smit2808]

Hi @ntsekouras, thanks for replying to me and reviewing my PR. I know removing the styles is not the best solution but is there any other way to solve this? If there is then tell me I will make PR of it also. I am a core and meta contributor, Now I want to contribute to Gutenberg also. So I will be happy to create PR for this issue.

[HILAYTRIVEDI]

Hi @Smit2808, I think insted of just doing the style changes there are some classes that will affect the styles. so try to modify those classes along with the options which are responsible for that. Like suppose for the center align there will be a class that contains CSS for that but along with that it will also break stylings so, insted of changing the CSS of the class try to add or remove that class or to modify that class under certain case's hat are responsible for this errors.

[scruffian]

In some cases you might actually want this padding, so it's not a simple fix. There's more discussion here: #36586

I think the way forward is to set the padding in the block settings, so that users can easily modify it.