Link in Bio (Ose Maiko)

[alaczek]

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/08/pawel-czerwinski-asgx9dgqeng-unsplash-2.jpg","id":5835,"dimRatio":0,"minHeight":100,"minHeightUnit":"vh","isDark":false,"align":"full"} -->
<div class="wp-block-cover alignfull is-light" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-5835" alt="" src="https://dotcompatterns.files.wordpress.com/2022/08/pawel-czerwinski-asgx9dgqeng-unsplash-2.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"84px","fontStyle":"normal","fontWeight":"700","lineHeight":0.9}}} -->
<h2 class="has-text-align-center" style="font-size:84px;font-style:normal;font-weight:700;line-height:0.9">Ose <br>Maiko</h2>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"border":{"radius":"10px"}},"backgroundColor":"black"} -->
<div class="wp-block-group has-black-background-color has-background" style="border-radius:10px"><!-- wp:embed /--></div>
<!-- /wp:group -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><strong>Listen to my new album</strong></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"black","textColor":"white","width":50,"style":{"border":{"radius":"10px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button" style="border-radius:10px">iTunes</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"black","textColor":"white","width":50,"style":{"border":{"radius":"10px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button" style="border-radius:10px">Soundcloud</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"black","textColor":"white","width":50,"style":{"border":{"radius":"10px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button" style="border-radius:10px">Spotify</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"black","textColor":"white","width":50,"style":{"border":{"radius":"10px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button" style="border-radius:10px">Stitcher</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:social-links {"iconColor":"black","iconColorValue":"#000000","iconBackgroundColor":"background","iconBackgroundColorValue":"#ffffff","layout":{"type":"flex","justifyContent":"center"}} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"#","service":"wordpress"} /-->

<!-- wp:social-link {"url":"#","service":"tiktok"} /-->

<!-- wp:social-link {"url":"#","service":"spotify"} /-->

<!-- wp:social-link {"url":"#","service":"soundcloud"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Preview: https://dotcompatterns.wordpress.com/?p=5833&preview=true

[alaczek]

This one has a bit of an identity crisis. It was supposed to be a musician's pattern, and I had a nice album artwork in the design, but I'm struggling to find good content to use as the embed. I'm also unsure if using content from someone unaffiliated with us would be ok. For now, the content is Matt's podcast, but it's not a musician and doesn't go with the title. Or maybe we include the embed in the pattern, but don't supply a specific URL and leave it in an empty state? Any help with the content would be much appreciated! cc @that-mike-bal

[that-mike-bal]

@alaczek you can use this https://open.spotify.com/track/2vNw3NLCwUc0Qe9Q4fs8vE?si=de5efa7c0e384cb6 which is one of @eeeeevon13 's songs or you can use one of these that are bands/albums I play on https://open.spotify.com/album/79PCWtOG7EcbMtsSKEoCU2?si=lPb7VpAQSYSGe5M-y3W0_g or https://open.spotify.com/track/0LaT1L3kAZHYL6mXXX6lqy?si=f865d8b79a904d43

[alaczek]

I've been playing with this, and came to the conclusion, that putting in an empty embed would be the most user-friendly in this case - this way we're removing the friction of customers having to figure out how to swap out the media. I also swapped Spotify embed for a generic one - that way whatever link is thrown at it should work.

This is how it will look like in the inserter:

---

The buttons in the original design had icons on them, and I figured I could achieve it via row block, the same way as in #251 BUT that means we'd run into the same issue in the editor. Using row block instead of buttons makes it also look a bit better on mobile, so I'm on the fence.

[alaczek]

@iamtakashi what do you think about this?

[iamtakashi]

Sorry for being late on responce after being AFK.

I sort of leaning towards embeding Spotify here so it adds a context and exhibits a usecase. If this was a boilerplate pattern, my opinion would be totally different, but in my mind, the patterns in the inserter is more about showing a specific usecase. than providing a "shell or boilerplate".

In terms of icon, although the icons make it the charactalistic of Link in bio site, but Gutenberg doesn't seem to be ready for it, and I personally don't like the workaround using a group block for the reason that have been said already.