Footer with recent posts, follow me links, and subscription block

[iamtakashi]

Category: Footer

Tag: Pattern

Screenshot:

Markup:

<!-- wp:separator {"align":"full","className":"is-style-wide"} -->
<hr class="wp-block-separator alignfull has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}}} -->
<div class="wp-block-columns alignwide" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"500","textTransform":"uppercase","letterSpacing":"0.2em"}},"className":"wp-block-heading","fontSize":"small"} -->
<h3 class="wp-block-heading has-small-font-size" style="font-style:normal;font-weight:500;letter-spacing:0.2em;text-transform:uppercase">Popular Posts</h3>
<!-- /wp:heading -->

<!-- wp:latest-posts {"postsToShow":3,"fontSize":"small"} /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"500","textTransform":"uppercase","letterSpacing":"0.2em"}},"className":"wp-block-heading","fontSize":"small"} -->
<h3 class="wp-block-heading has-small-font-size" style="font-style:normal;font-weight:500;letter-spacing:0.2em;text-transform:uppercase">Follow Me</h3>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><a href="#">Tumblr</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><a href="#">WordPress</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><a href="#">Instagram</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"500","textTransform":"uppercase","letterSpacing":"0.2em"}},"className":"wp-block-heading","fontSize":"small"} -->
<h3 class="wp-block-heading has-small-font-size" style="font-style:normal;font-weight:500;letter-spacing:0.2em;text-transform:uppercase">Newsletter</h3>
<!-- /wp:heading -->

<!-- wp:jetpack/subscriptions {"submitButtonText":"subscribe","fontSize":"0.781rem","customFontSize":"0.781rem","borderRadius":2,"padding":9,"spacing":7} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide"><!-- wp:group {"style":{"spacing":{"blockGap":"4px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">©</p>
<!-- /wp:paragraph -->

<!-- wp:site-title {"style":{"typography":{"letterSpacing":"0px","textTransform":"none","fontStyle":"normal","fontWeight":"400"}},"fontSize":"small"} /-->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">2022, All Rights Reserved.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"align":"left","className":"has-small-font-size","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size">
			Designed with <a href="https://wordpress.org" rel="nofollow">WordPress</a>		</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--70)"></div>
<!-- /wp:group -->

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

cc @alaczek @onuro

[onuro]

Same thing to discuss with #309

[iamtakashi]

Similar to #309, I've updated the markup to move forward. In this case, removing the outer group is the correct solution. The pattern looks good with useRootPaddingAwareAlignments: true in both the post editor and the front of the site. This should be good to ship.