Add block button overlap fixed #39304

[HILAYTRIVEDI]

What?

This PR will fix the overlapping issue of the add button.

Why?

It will add a few lines of new CSS which sets the proper alignment of the add button of the header menu.

How?

When the alignment is set the add button is positioned according to the text and alignment.

Testing Instructions

To test this follow the below steps:

1. Go to the page editor
2. Selecting mobile view using the preview button
3. On a mobile device click on the hamburger button and slide-out navigation
4. Click on menus to add a new menu and also same time selection navigation block alignment in the center and right end at the time add block button will not overlap.

Screenshots or screencast

Here is the video showing solution.

https://www.loom.com/share/d68b687267a74b47840364d578467415

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @HILAYTRIVEDI! 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.

[jasmussen]

Thank you for the PR!

I took it for a spin, but it's a little hard for me to understand the problem it's meant to solve. Best I can tell, it's that the black plus overlaps right aligned menu items in the open overlay:

I understand this isn't ideal, but it's an intentional tradeoff to have the button be fixed position, even if it ends up overlapping. Ticket #39076 deals with the problem and #39076 (comment) offers some ideas for how we can improve this in the future. In the meantime, I'm not sure we should add CSS to tackle edgecases in the appender component, as the goal is to make those edgecases redundant in the future.

Alternately, we could add some edgecases temporarily in this part of the code. What do you think?

[HILAYTRIVEDI]

Hello @jasmussen

Thanks for your reply!

I took it for a spin, but it's a little hard for me to understand the problem it's meant to solve. The best I can tell, it's that the black plus overlaps right-aligned menu items in the open overlay:

It addresses the overlapping issue of the add block button on the text. To resolve this I added the CSS so that the button will align with the text according to its with i.e 25px width + 5px spacing.

I understand this isn't ideal, but it's an intentional tradeoff to have the button be fixed position, even if it ends up overlapping.

I think it becomes wierd for the user as it appears to be a design issue instead of a trade-off.