Fit Text fails if the block has calc() for the line height

[iamtakashi]

Description

I often use calc() for line height in the paragraph block because Gutenberg doesn't let me set different line heights for different preset sizes. But let's put that issue aside for another day :) Anyway, the stretch text doesn't work if the block has the calc() as the line-height. It might be unconventional, but it's still valid CSS, and it shouldn't stop the stretchy text from working. Both heading and paragraph blocks share this issue.

Step-by-step reproduction instructions

• Set the line height for the paragraph or/and the heading element block, like this, for example.

"styles": {
  "blocks": {
    "core/paragraph": {
      "typography": {
        "lineHeight": "calc(1em + 0.5rem)"
      }
    }
  },
  "elements": {
    "heading": {
      "typography": {
        "lineHeight": "calc(1em + 0.5rem)"
      }
    }
  }
}

• Add a paragraph and/or a heading with stretchy text style.
• Notice the text isn't stretched.

Screenshots, screen recording, code snippet

Feel Free to use this test markup

<!-- wp:group {"align":"full","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull">
  
  <!-- wp:heading {"fitText":true} -->
  <h2 class="wp-block-heading has-fit-text">Heading</h2>
  <!-- /wp:heading -->

  <!-- wp:paragraph {"fitText":true} -->
  <p class="has-fit-text">Paragraph</p>
  <!-- /wp:paragraph -->

</div>
<!-- /wp:group -->

Environment info

WP 6.9
Gutenberg Trunk
Chrome

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

• Yes

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

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[jorgefilipecosta]

Thank you for reporting this @iamtakashi I will try to propose a fix.

[jorgefilipecosta]

Hi @iamtakashi I proposed a fix for this at #74041, let me know if it works for you.