Bug Description

Text block jumps when changing normal to huge font size.

Expected Behaviour

Text block should not change its position

Steps to reproduce

1. Add a Text block and turn off Automatically fitting the text (amp-fit-text)
2. Add some text inside.
3. Rotate the block.
4. Change the font to "huge", without resizing the block larger before.
5. Observe results.

Screenshots

Additional context

N/A

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• AC1: When a block is placed on a page, regardless of size or rotational orientation, it should have a centered focal point, so when the block is rotated, or resized, it does not "jump" visually on the page.

Related to #3444

Implementation brief

Cause of the bug and possible fix

The issue here is that when the text size is changed to "huge" then the block is resized, it's resized not considering the rotation.

We should adjust the logic so that if block size is increased, the rotation angle should be considered as well and the positionTop and positionLeft values adjusted accordingly.

The logic needs updating within the maybeUpdateBlockDimensions function.

The resizable-box component is already doing similar calculations, the relevant helpers are in the helpers.js file of that component. We can reuse the helpers and move the shared ones to the helper's folder instead, where applicable.

QA testing instructions

1. Add a Text block and turn off Automatically fitting the text (amp-fit-text)
2. Add some text inside.
3. Rotate the block.
4. Change the font to "huge", without resizing the block larger before.
5. Verify that the block's size changes to match the text size but without "jumping" as seen in the Screenshots section above.

Demo

• https://cloudup.com/c_nQUc5xnuz

Changelog entry

• Fixed an issue where font size changes erroneously affected a block's position