Search: Button only: Button position jumps on transition

[hanneslsm]

Description

The Input field of the search block does not animate in from right to left which makes the button jump.

Step-by-step reproduction instructions

<!-- wp:group {"style":{"border":{"bottom":{"color":"var:preset|color|neutral-60","width":"1px"}}},"backgroundColor":"light","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-light-background-color has-background" style="border-bottom-color:var(--wp--preset--color--neutral-60);border-bottom-width:1px"><!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide"><!-- wp:site-logo {"width":200} /-->

<!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group alignwide"><!-- wp:group {"align":"wide","layout":{"type":"flex","orientation":"vertical","justifyContent":"right"}} -->
<div class="wp-block-group alignwide"><!-- wp:navigation {"ref":126,"icon":"menu","align":"wide","className":"is-style-default","layout":{"type":"flex","justifyContent":"left","flexWrap":"wrap"},"style":{"spacing":{"blockGap":"var:preset|spacing|static-16"}}} /-->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","buttonPosition":"button-only","buttonUseIcon":true,"isSearchFieldHidden":true} /-->

<!-- wp:buttons {"className":"hide-on-mobile"} -->
<div class="wp-block-buttons hide-on-mobile"><!-- wp:button {"className":"is-style-fill nowrap"} -->
<div class="wp-block-button is-style-fill nowrap"><a class="wp-block-button__link wp-element-button">Action</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Screenshots, screen recording, code snippet

https://github.com/WordPress/gutenberg/assets/17861443/be8ed5f5-4089-4810-81ae-aab53601936f

Environment info

all current

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

No

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

Yes

[skorasaurus]

Hi, Thanks for reporting but I'm unsure what exact behavior are you proposing instead; Could you provide an example ?

[hanneslsm]

Thanks for reporting but I'm unsure what exact behavior are you proposing instead;

It currently looks like the width of the whole block is expanding from the middle after clicking the search icon button. Instead, the button should stay fixed and the inout field expands from right to left (in this case, because it's right aligned)

Could you provide an example ?

A quick pen that shows the animation: https://codepen.io/Hannes-Login/pen/NWELaEV

[github-actions[bot]]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[hanneslsm]

@skorasaurus any more info needed as the label says?

[skorasaurus]

Sorry for the delay, I've been consumed with other work projects; the search buttons in the codepen link are not interactive at all.

To make sure I understand you, are you referring to the quick blinking of the search button that takes place between 0:01 and 0:02 in the video ?

[hanneslsm]

the search buttons in the codepen link are not interactive at all.

The codepen was only to visualize the animation.

To make sure I understand you, are you referring to the quick blinking of the search button that takes place between 0:01 and 0:02 in the video ?

Correct. If the element is right aligned, the buttons should stay right and the input fields appears from right to left. Currently the animation starts from left to right