Link in Bio (Purple)

[alaczek]

<!-- wp:cover {"customOverlayColor":"#7749f9","minHeight":100,"minHeightUnit":"vh","align":"full","style":{"spacing":{"padding":{"top":"64px","right":"64px","bottom":"64px","left":"64px"}}}} -->
<div class="wp-block-cover alignfull" style="padding-top:64px;padding-right:64px;padding-bottom:64px;padding-left:64px;min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#7749f9"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"64px"}},"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:image {"id":197,"width":128,"height":128,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image size-large is-resized is-style-rounded"><img src="https://libthemeexperiment.files.wordpress.com/2022/08/image-64-1.jpg?w=512" alt="" class="wp-image-197" width="128" height="128"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"4rem"}},"fontFamily":"poppins"} -->
<h2 class="has-text-align-center has-poppins-font-family has-custom-font" style="font-size:4rem;font-style:normal;font-weight:700;font-family:poppins">Howdy!</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ffffffcc"}}} -->
<p class="has-text-align-center has-text-color" style="color:#ffffffcc">Amirah Smith is an artist living in New York City who has a passion for generative art in the 3D space. Currently accepting new clients.</p>
<!-- /wp:paragraph -->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:group {"style":{"color":{"background":"#ffffffe6","text":"#111111"},"border":{"radius":"100px"},"spacing":{"blockGap":"0px","padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"},"margin":{"top":"10px","bottom":"10px"}},"elements":{"link":{"color":{"text":"#111111"}}}}} -->
<div class="wp-block-group has-text-color has-background has-link-color" style="border-radius:100px;color:#111111;background-color:#ffffffe6;margin-top:10px;margin-bottom:10px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:social-links {"className":"is-style-default"} -->
<ul class="wp-block-social-links is-style-default"><!-- wp:social-link {"url":"#","service":"instagram"} /--></ul>
<!-- /wp:social-links -->

<!-- wp:paragraph -->
<p><a href="#">Instagram</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"color":{"background":"#ffffffe6","text":"#111111"},"border":{"radius":"100px"},"spacing":{"blockGap":"0px","padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"},"margin":{"top":"10px","bottom":"10px"}},"elements":{"link":{"color":{"text":"#111111"}}}}} -->
<div class="wp-block-group has-text-color has-background has-link-color" style="border-radius:100px;color:#111111;background-color:#ffffffe6;margin-top:10px;margin-bottom:10px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:social-links {"customIconColor":"#111111","iconColorValue":"#111111","className":"is-style-logos-only"} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"wordpress"} /--></ul>
<!-- /wp:social-links -->

<!-- wp:paragraph -->
<p><a href="#">Blog</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"color":{"background":"#ffffffe6","text":"#111111"},"border":{"radius":"100px"},"spacing":{"blockGap":"0px","padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"},"margin":{"top":"10px","bottom":"10px"}},"elements":{"link":{"color":{"text":"#111111"}}}}} -->
<div class="wp-block-group has-text-color has-background has-link-color" style="border-radius:100px;color:#111111;background-color:#ffffffe6;margin-top:10px;margin-bottom:10px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:social-links {"className":"is-style-default"} -->
<ul class="wp-block-social-links is-style-default"><!-- wp:social-link {"url":"#","service":"tumblr"} /--></ul>
<!-- /wp:social-links -->

<!-- wp:paragraph -->
<p><a href="#">Tumblr</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"color":{"background":"#ffffffe6","text":"#111111"},"border":{"radius":"100px"},"spacing":{"blockGap":"0px","padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"},"margin":{"top":"10px","bottom":"10px"}},"elements":{"link":{"color":{"text":"#111111"}}}}} -->
<div class="wp-block-group has-text-color has-background has-link-color" style="border-radius:100px;color:#111111;background-color:#ffffffe6;margin-top:10px;margin-bottom:10px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:social-links {"className":"is-style-logos-only"} -->
<ul class="wp-block-social-links is-style-logos-only"><!-- wp:social-link {"url":"#","service":"twitter"} /--></ul>
<!-- /wp:social-links -->

<!-- wp:paragraph -->
<p><a href="#">Twitter</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"color":{"background":"#ffffffe6","text":"#111111"},"border":{"radius":"100px"},"spacing":{"blockGap":"0px","padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"},"margin":{"top":"10px","bottom":"10px"}},"elements":{"link":{"color":{"text":"#111111"}}}}} -->
<div class="wp-block-group has-text-color has-background has-link-color" style="border-radius:100px;color:#111111;background-color:#ffffffe6;margin-top:10px;margin-bottom:10px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:social-links {"className":"is-style-logos-only"} -->
<ul class="wp-block-social-links is-style-logos-only"><!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links -->

<!-- wp:paragraph -->
<p><a href="#">LinkedIn</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

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

[onuro]

Lgtm. But somehow in the editor the row block doesn't seem to respect the horizontal alignment. Is it fine on your end or would this be an editor issue?

[alaczek]

Yeah, I'm seeing the same in the editor. Feels like an issue with the block, but I haven't looked too deeply into this yet.

[alaczek]

I found an editor issue, that sounds just like this one: WordPress/gutenberg#34909

[alaczek]

@simison brought up really good points about the ease of use of this pattern (or lack thereof) in a Slack convo:

Group is a bit odd choice both semantically and functionally:

• Replicating the look is harder for customers compared to buttons that follow previous button’s styles automatically
• “Button” isn’t clickable, only link is
• Social links button is disconnected from the link, which can be confusing
• The bug you highlight is present

There are two possible alternate solutions here, both with some drawbacks:

1. Use Button's block inline image option.
   a. Customers would be forced to go on a hunt for social icons on their own (if they wanted to use anything other than included with the pattern).
   a. This does not re-create the original design (the text + icon won't be left aligned)
   

2. Use the social icons block with the label.
   a. This is still not semantically correct as the appearance of a button is created with a group block and therefore only a small portion of it is actually clickable.
   b. The social icon's labels are not editable, so for example it’s not possible to use WordPress icon and “Blog” as a label.

Because of this, I'm leaning towards not including this pattern in the initial lineup.

[onuro]

That's very interesting! I guess we'll need to wait till we get icons within buttons.