Update alignment of template label on FSE

[bangank36]

What?

Centering the template label in top bar of FSE

Why?

Originated from this issue: #29673
Fixes #29673

How?

1. Set flex: 1 to the edit-site-header-edit-mode__start and edit-site-header-edit-mode__end, making them grow equally to fill the remaining space left by edit-site-header-edit-mode__center
2. Thus, the label will tend to be centered.

Testing Instructions

• Open FSE
• Edit a template
• Confirm that the template label on the top bar is centered aligned

Screenshots or screencast

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[github-actions]

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

[glendaviesnz]

Thanks @bangank36. For me it is still showing as slightly more aligned to the left:

centre2.mp4

[glendaviesnz]

For me it is still showing as slightly more aligned to the left

have discussed this with @scruffian, and this may be worth overlooking for the flexibility this approach gives.

[bangank36]

For me it is still showing as slightly more aligned to the left

have discussed this with @scruffian, and this may be worth overlooking for the flexibility this approach gives.

I think the left mis-alignment can be solved in follow-up PR, as it may be caused by the children of the center item 

[jameskoster]

Just leaving a note to clarify the title isn't correctly aligned:

[mikachan]

With this PR, the title looks less-centered to me compared to what we currently have on trunk. The title moves further to the right with these changes.

I believe this is because the width of the WordPress logo isn't taken into account (60px) in the overall width of the flex container. In order to do this we can apply set widths to the left and right columns, which I have attempted here: #45682

[jameskoster]

Oh yes, good spot. Maybe we should just offset the title position by 60px?

[bangank36]

Just leaving a note to clarify the title isn't correctly aligned:

I think you are right, this PR did not include the logo width in account as @mikachan mentioned WordPress logo isn't taken into account (60px), can we fix it like take the logo width into account?

Oh yes, good spot. Maybe we should just offset the title position by 60px?

[mikachan]

Maybe we should just offset the title position by 60px?

Yeah! Looks like setting margin-left: -60px; on .edit-site-header-edit-mode__center works well at all resolutions ✨

[scruffian]

It would be nice if the 60px was in a variable for future proofing.

[mikachan]

I've gone ahead and offset the center column by the width of the WordPress logo. I've also added a variable for the logo width. I think this is working well, it's ready for another review!