Include button margins in width calculations

[stacimc]

Description

#25999 added a width selector for the button block, allowing a Button to be set to 25%, 50%, 75%, or 100% width. Margins were not included in the width calculation in the initial iteration, meaning that for example two 50% buttons will not fit on the same line.

This PR includes margins in the width calculation.

How has this been tested?

Manually with the Buttons block, testing with left/center/right alignments. Tested using Seedlet and Twenty Twenty.

Testing Instructions

Add a Buttons block with several buttons and change their width using the width selector in the Inspector Controls.

• Test that expected widths fit together in a row (four 25%, two 50%, a 50% and two 25%, a 75% and a 25%...)
• Test that multiple buttons with width 100% are correctly aligned
• Create a grid of buttons by creating multiple rows with widths adding up to 100%, and verify that the edges of the grid are flush (see screenshots)
• Test button grids when the Buttons block is set to different alignments (right aligned, center aligned...)

Screenshots

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

Fixes #26702

[glendaviesnz]

This mostly works for me except for some weird wrapping of text with longer button labels, eg. with 4 x 25% buttons:

I am not sure what the preferred behaviour should be in a situation like this.

[stacimc]

This mostly works for me except for some weird wrapping of text with longer button labels, eg. with 4 x 25% buttons:

I agree this looks strange, but I'm not sure how we could handle this in the UI either. Since the width options are explicit user selections, I would not expect the button itself to resize to fit content. I would expect a 25% width selection to be exactly 25%.

The word wrapping within the buttons is consistent with what we already see, for example if you add a button inside a small container like a column:

Allowing explicit selection of small button widths definitely makes it a lot easier to create these kinds of issues. I'm not sure the UI should prevent the user from doing it.

[apeatling]

Tested and confirmed working. Buttons now sit on the same line as shown in the description images.

I don't think the text wrapping should be considered as part of this, it would need further consideration on how to expose this in the UI or let themes set the way this wraps.