Add stretchy type block

[jffng]

Description
This PR implements a stretchy type block, as a part of the Cool Tools project.

The remaining to-dos I think can be follow ups.

To-Do

• Add a way to call the text resizing when a style attribute is updated
• Add block update script
• Add a better block icon
• Figure out why rich text block controls are not rendering

[jffng]

I tried this with the interactivity API, but it performed noticeably (visually) worse — the text would show up at the default size, and a split second later would resize — and it took a lot more code to do the same thing.

e4218c5

Maybe it could be optimized somehow.

[Nyiriland]

@jffng Take a look at https://cool-tools.mystagingwebsite.com/2024/06/25/stretchy-type/

I played around a bit, noticed the text is by default set to align-wide, unless nested in a full width group block. When nested in a block with horiztontal padding, the text width does not respect the padding, so we probably want to account for that.

[allancole]

When loading the block, the font resize doesn’t fire as expected, leading to the type sitting off center or breaking out beyond its container. However, when you manually resize the browser window, it fires correctly and resizes the type as expected:

Look at the letter “K” and notice how it initially the K is truncated but after resizing it fits properly.

[SantosGuillamot]

I was taking a look at this to understand the use case better and see if it could land. I have a couple of questions so far:

• When you talk about "stretchy type," is it just a text that fits the max-width, or is there something else? (Sorry, I am unfamiliar with this term)
• If that's the case, I feel we could extend the paragraph block to cover this use case. It would come with some benefits like reusing the block controls, applying styles, etc. Do you think that's worth pursuing?

[allancole]

• When you talk about "stretchy type," is it just a text that fits the max-width, or is there something else? (Sorry, I am unfamiliar with this term)

Almost. The idea is that the font-size for text inside a Stretchy Type block adapts to fit the size of its immediate parent container. Example: https://codepen.io/chriscoyier/pen/gKoVBg

• If that's the case, I feel we could extend the paragraph block to cover this use case. It would come with some benefits like reusing the block controls, applying styles, etc. Do you think that's worth pursuing?

I’m personally okay with this effect extending the paragraph block as long as it can achieve the same thing. But typically, this effect is used on single lines of text. There may be cases where we would want the effect on a text thats more than one line, but we could save that for a second iteration. I also don’t know if there were other reasons for keeping it in a separate block. @Nyiriland may know the reasoning there 🤔

The most important requirements are:

• The text naturally stretches to always fit the width of it’s parent container (like the example above).
• The text never breaks outside of its parent container, regardless of other blocks, or changes to device and/or viewport size.
• Text-block controls like color, font-family, letter-spacing and line-height, etc. remain configurable.

[Nyiriland]

I also don’t know if there were other reasons for keeping it in a separate block. @Nyiriland may know the reasoning there 🤔

I'm guessing it's like what @allancole said: the function is that it's a single line of text (and usually only a word or two), so many of the paragraph options or functions might be unnecessary.

[tommusrhodus]

Closing this in favour of #32 where work is continuing.