Twitter Clone using WordPress' Full Site Editor

home.html

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"253px"} -->
<div class="wp-block-column" style="flex-basis:253px"><!-- wp:social-links {"size":"has-large-icon-size","className":"is-style-logos-only"} -->
<ul class="wp-block-social-links has-large-icon-size is-style-logos-only"><!-- wp:social-link {"url":"#","service":"twitter"} /--></ul>
<!-- /wp:social-links -->

<!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"},"style":{"typography":{"fontSize":"20px"}}} --><!-- wp:navigation-link {"label":"Home","url":"#","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Explore","url":"#","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Notifications","url":"#","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Messages","url":"#","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Bookmarks","url":"#","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Lists","url":"#","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Profile","url":"#","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"More","url":"#","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

<!-- wp:spacer {"height":32} -->
<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"background","width":100,"style":{"color":{"background":"#4999e9"},"border":{"radius":"100px"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-background-color has-text-color has-background" style="border-radius:100px;background-color:#4999e9">Tweet</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex"}} -->
<div class="wp-block-group"><!-- wp:site-logo {"width":54,"className":"is-style-rounded"} /-->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:site-title {"isLink":false,"style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"15px","lineHeight":"0"}}} /-->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px","lineHeight":"0"},"color":{"text":"#566470"}}} -->
<p class="has-text-color" style="color:#566470;font-size:15px;line-height:0">@kjellr</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"600px"} -->
<div class="wp-block-column" style="flex-basis:600px"><!-- wp:group {"style":{"border":{"style":"solid","width":"1px","color":"#d6d6d6"},"spacing":{"padding":{"top":"0px","right":"0px","bottom":"16px","left":"0px"}}}} -->
<div class="wp-block-group has-border-color" style="border-color:#d6d6d6;border-style:solid;border-width:1px;padding-top:0px;padding-right:0px;padding-bottom:16px;padding-left:0px"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"right":"16px","left":"16px"}}}} -->
<div class="wp-block-group alignwide" style="padding-right:16px;padding-left:16px"><!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:site-logo {"width":134,"shouldSyncIcon":true,"className":"is-style-rounded"} /-->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"black","style":{"border":{"radius":"100px"},"typography":{"fontSize":"15px"}},"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-font-size is-style-outline" style="font-size:15px"><a class="wp-block-button__link has-black-color has-text-color" style="border-radius:100px"><strong>Edit profile</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":1} -->
<div style="height:1px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:site-title {"isLink":false,"style":{"typography":{"fontSize":"20px","fontStyle":"normal","fontWeight":"700","lineHeight":"0"}}} /-->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px","lineHeight":"0"},"color":{"text":"#566470"}}} -->
<p class="has-text-color" id="wordpress-com" style="color:#566470;font-size:15px;line-height:0">@kjellr</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px"},"elements":{"link":{"color":{"text":"#4999e9"}}}}} -->
<p class="has-link-color" style="font-size:15px"><a href="https://kjellr.com" data-type="URL" data-id="https://kjellr.com">Kjell Reigstad</a> / Design Director / <a href="https://automattic.com" data-type="URL" data-id="https://automattic.com">@Automattic</a></p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"blockGap":"10px","padding":{"top":"24px","right":"24px","bottom":"0px","left":"24px"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group" style="padding-top:24px;padding-right:24px;padding-bottom:0px;padding-left:24px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"15px"}},"textColor":"black"} -->
<p class="has-black-color has-text-color" style="font-size:15px"><strong>Tweets</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px"},"color":{"text":"#566470"}}} -->
<p class="has-text-color" style="color:#566470;font-size:15px">Tweets &amp; replies</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px"},"color":{"text":"#566470"}}} -->
<p class="has-text-color" style="color:#566470;font-size:15px">Media</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"15px"},"color":{"text":"#566470"}}} -->
<p class="has-text-color" style="color:#566470;font-size:15px">Likes</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:separator {"customColor":"#d6d6d6","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background is-style-wide" style="background-color:#d6d6d6;color:#d6d6d6"/>
<!-- /wp:separator -->

<!-- wp:query {"queryId":28,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":""},"align":"wide","layout":{"inherit":true}} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"48px"} -->
<div class="wp-block-column" style="flex-basis:48px"><!-- wp:site-logo {"width":54,"className":"is-style-rounded"} /--></div>
<!-- /wp:column -->

<!-- wp:column {"width":"","style":{"spacing":{"padding":{"right":"16px"}}}} -->
<div class="wp-block-column" style="padding-right:16px"><!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex"}} -->
<div class="wp-block-group"><!-- wp:site-title {"isLink":false,"style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"15px"}}} /-->

<!-- wp:post-date {"textAlign":"left","format":"g:i a","isLink":true,"style":{"typography":{"fontStyle":"italic","fontWeight":"400","fontSize":"13px"},"color":{"text":"#566470"},"elements":{"link":{"color":{"text":"#566470"}}}}} /--></div>
<!-- /wp:group -->

<!-- wp:post-content /-->

<!-- wp:post-featured-image {"isLink":true,"align":"wide","style":{"spacing":{"margin":{"top":"24px","bottom":"0px"}}}} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator {"customColor":"#d6d6d6","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background is-style-wide" style="background-color:#d6d6d6;color:#d6d6d6"/>
<!-- /wp:separator --></div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:query-pagination-previous {"fontSize":"small"} /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next {"fontSize":"small"} /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:query --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Details over in this blog post:

https://kjellr.com/2022/01/28/building-twitter-with-wordpress-5-9/