Skip to content
This repository was archived by the owner on Nov 18, 2024. It is now read-only.

Add: Link in bio with tight margins pattern #205

Merged
juanfra merged 15 commits into from
Sep 11, 2024
Merged

Add: Link in bio with tight margins pattern #205

juanfra merged 15 commits into from
Sep 11, 2024

Conversation

@beafialho
Copy link
Contributor

@beafialho beafialho commented Sep 3, 2024

Description

Adds link in bio with tight margins #189

Screenshots

linkbio.mp4

@beafialho
Add: Link in bio with tight margins pattern
aea59f8 
Adds link in bio with tight margins #189
@github-actions
Copy link

github-actions bot commented Sep 3, 2024 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: beafialho <[email protected]>
Co-authored-by: juanfra <[email protected]>
Co-authored-by: carolinan <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

juanfra
juanfra reviewed Sep 4, 2024
View reviewed changes
Copy link
Member

@juanfra juanfra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks really nice, thanks Bea!

The one thing I noticed is that the social links at the bottom look a bit off in the front-end:

Screenshot 2024-09-04 at 14 49 41

@beafialho
Copy link
Contributor Author

beafialho commented Sep 4, 2024

The one thing I noticed is that the social links at the bottom look a bit off in the front-end:

That's weird. What size is your screen when that shows up? It's looking fine in my front-end.

@juanfra
Copy link
Member

juanfra commented Sep 4, 2024

It's showing like that on all screen sizes. I just checked, and it's happening when viewing the site in Firefox. It's not happening in Chrome.

Screen.Recording.2024-09-04.at.15.29.39.mov

@juanfra juanfra linked an issue Sep 4, 2024 that may be closed by this pull request
Block Patterns - Landing page - Link in bio: Image and heading with tight margins #189
Closed
@beafialho
Copy link
Contributor Author

beafialho commented Sep 4, 2024

That's right, I see it on Firefox too. Any suggestions? Could it be an editor bug with Firefox?

@juanfra
Copy link
Member

juanfra commented Sep 5, 2024

That's right, I see it on Firefox too. Any suggestions? Could it be an editor bug with Firefox?

I've been taking a quick look and it's only happening in Firefox. I found that if I remove the word-break: break-word; from the following styles, it works fine.

.wp-block-column {
  overflow-wrap: break-word;
  word-break: break-word;
}

I believe this issue could use some further investigation. We may want to merge the pattern, so that we have them all merged and then open a new issue to investigate this?

@beafialho
Copy link
Contributor Author

beafialho commented Sep 5, 2024

If you think that's the best solution, it works for me, thanks

@carolinan
Copy link
Contributor

carolinan commented Sep 6, 2024

I looked through the open issues in the Gutenberg repository that has either the columns block, social links label, or the "browser issues" label and I could not find an existing report for this problem.

@carolinan
Copy link
Contributor

carolinan commented Sep 6, 2024

What about replacing the row with a grid set to manual, with 3 columns? The X has too much spacing on the right, but the order could be changed, or it could be centered.

Firefox on Windows, with the grid used and X centered:
image

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}},"layout":{"type":"grid","columnCount":3,"minimumColumnWidth":null}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p><a href="#">Instagram</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><a href="#">X</a></p>
<!-- /wp:paragraph -->

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

@beafialho
Copy link
Contributor Author

beafialho commented Sep 6, 2024

Thank you for the suggestion, there's too much spacing between the links in your screenshot

@carolinan
Copy link
Contributor

carolinan commented Sep 7, 2024

How about this?
(I copied directly from the editor, so it is not cleaned up, the image needs to be replaced)

<!-- wp:group {"metadata":{"categories":["twentytwentyfive_page","banner","about","featured"],"patternName":"twentytwentyfive/page-link-in-bio-with-tight-margins","name":"Link in bio with tight margins"},"align":"full","className":"is-style-section-4","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"},"margin":{"top":"0","bottom":"0"}},"dimensions":{"minHeight":"100vh"}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull is-style-section-4" style="min-height:100vh;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"38rem"}} -->
<div class="wp-block-group"><!-- wp:cover {"url":"http://66.local/wp-content/themes/twentytwentyfive/assets/images/link-in-bio-image.webp","alt":"Black and white photo focusing on a woman and a child from afar.","dimRatio":0,"customOverlayColor":"#818181","isUserOverlayColor":true,"minHeight":100,"minHeightUnit":"vh","isDark":false,"style":{"layout":{"selfStretch":"fixed","flexSize":"50%"}},"layout":{"type":"default"}} -->
<div class="wp-block-cover is-light" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#818181"></span><img class="wp-block-cover__image-background" alt="Black and white photo focusing on a woman and a child from afar." src="http://66.local/wp-content/themes/twentytwentyfive/assets/images/link-in-bio-image.webp" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:group {"style":{"dimensions":{"minHeight":"100%"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between"}} -->
<div class="wp-block-group" style="min-height:100%"><!-- wp:paragraph {"align":"left","style":{"typography":{"lineHeight":"1.2"}},"fontSize":"x-large"} -->
<p class="has-text-align-left has-x-large-font-size" style="line-height:1.2">I’m Asahachi Kōno, a Japanese&nbsp;photographer, a member of&nbsp;Los Angeles's Japanese Camera Pictorialists of California. Before returning to Japan, I worked as a photo retoucher.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p><a href="#">Instagram</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">X</a></p>
<!-- /wp:paragraph -->

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

@beafialho
Copy link
Contributor Author

beafialho commented Sep 10, 2024

How about this?

Yes, this one looks good to me!

@juanfra
Copy link
Member

juanfra commented Sep 10, 2024

The issue with the social links is working for me now ✨

With the grid, the pattern is looking a bit off on big screens. I could solve it by setting the grid to have two columns, which makes it look off on small screens. So now we have a new different problem.

Screen.Recording.2024-09-10.at.13.45.56.mov

@beafialho
Copy link
Contributor Author

beafialho commented Sep 10, 2024

Could you both take a look now? I believe I was able to fix it.

@juanfra
Copy link
Member

juanfra commented Sep 10, 2024

I still see the two columns on mobile that I share in this comment.

@carolinan
Copy link
Contributor

carolinan commented Sep 11, 2024

Does it need to be a cover block?

@juanfra
Copy link
Member

juanfra commented Sep 11, 2024 •
edited
Loading

I just pushed some changes, to go back using columns, and with a few adjustments, it works now for me in Firefox and Chrome.

Screen.Recording.2024-09-11.at.16.00.30.mov

@beafialho, can you please confirm it looks good to you?

@beafialho
Copy link
Contributor Author

beafialho commented Sep 11, 2024

Thank you @juanfra it looks good to me!

@juanfra
Copy link
Member

juanfra commented Sep 11, 2024

Fantastic, thanks! ✨

@juanfra juanfra merged commit cae0adb into trunk Sep 11, 2024
@juanfra juanfra deleted the link-in-bio-with-tight-margins branch September 11, 2024 14:24
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

1 more reviewer

@juanfra juanfra juanfra left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

[Component] Block Patterns

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Block Patterns - Landing page - Link in bio: Image and heading with tight margins

4 participants

@beafialho @juanfra @carolinan