WordPress / community-themes

A collection of Block Themes built by the WordPress community.
80 stars 33 forks source link

Term: Pattern Social in content #108

Open MaggieCabrera opened 1 year ago

MaggieCabrera commented 1 year ago

Block Pattern_ Social In Content https://www.figma.com/community/file/1263420783737936752

amitbajracharya commented 1 year ago

I like this idea.

tdrayson commented 5 months ago

Pattern for Social in Content (Requires rounded icons style #206 )


<div class="wp-block-group" style="padding-top:0;padding-bottom:0"><!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0","left":"var:preset|spacing|60"},"margin":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-columns" style="margin-top:0;margin-bottom:0"><!-- wp:column {"width":"50px"} -->
<div class="wp-block-column" style="flex-basis:50px"><!-- wp:social-links {"iconColor":"custom-beige","iconColorValue":"#edece8","iconBackgroundColorValue":"#000","style":{"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"},"blockGap":{"top":"var:preset|spacing|40"}}},"className":"is-style-social-rounded-icons","layout":{"type":"flex","orientation":"vertical","justifyContent":"center","flexWrap":"nowrap"}} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color is-style-social-rounded-icons" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><!-- wp:social-link {"url":"#","service":"facebook","label":""} /-->

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

<!-- wp:social-link {"url":"#","service":"twitter"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.7"}}} -->
<p style="line-height:1.7">It was a boring time. Mid-pandemic. I just wanted to know what would happen, you know? How much water was too much water? Turns out, that’s a very easy question to answer. At some point, too much water is definitely too much water. Your plants will die.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.7"}}} -->
<p style="line-height:1.7">You see, <a href="#">too much water ends up rotting your roots</a>. Your plants need their roots in order to live. That’s like... well, anything I’d write here would be a little bit too gruesome. Let’s just say it’s bad.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->```