Blue note: add pattern media text

[MaggieCabrera]

Adds the following pattern:

[scruffian]

I wonder if it would be better to just use columns for this?

[MaggieCabrera]

I wonder if it would be better to just use columns for this?

With columns you can't make the image adapt to the height of the other column sadly

[jeryj]

Will the frontend content area width get increased? This template looks great in the editor but is really squished on the frontend.

And at smaller sizes, can it break to a top/bottom image sooner?

[MaggieCabrera]

The pattern was designed to work better on wide width with the amount of content that it has. The user can adapt it with their own content. It will look ok if used on a page template or a post with the single no sidebar template, but it will look bad on a post that shows a sidebar if left as it is.

The breakpoint for the block is not something we can control, and something I hesitate to change via CSS since it's specific to this pattern in particular. I'm happy to not include this one in the theme if we don't see that we can make it work with what we have at the moment.

[jeryj]

That makes a lot of sense. I think it's a good pattern to preserve to demo to people what's possible. How about reducing the content to one or two shorter paragraphs and removing the left padding on the text? That would allow it to look better at most screen sizes, and at mobile view, not have a large left side padding on the text.

Admittedly, it does look really good in the editor as is, but reducing the content and removing the left padding will make it look better on the frontend and at the other screen sizes.

[kafleg]

@MaggieCabrera Tested this pattern when there is no sidebar as well, the image is cropped. But, if we disable, Crop image to fill entire column the image is fine.

the below screenshot when it is disabled,

[MaggieCabrera]

Let's bring this one in as is, and let the users adapt it depending on how they wanna use it