Footer with Social Links and WordPress Link

[iamtakashi]

Category: Footer

Tag: Pattern

Pattern Meta: is_web

Screenshot:

Markup:

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:site-title {"fontSize":"small"} /-->

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

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

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

cc @alaczek @onuro

[onuro]

LGTM except this pattern also doesn't have left/right spacings and I wonder if those should be added.

I continue to check with themes that might cause the need for those spacings applied and so far I know TT3(and BC3) is one, and I see the upcoming loudness theme(maybe irrelevant for now though) in the repo also shows no left/right space on full width blocks.

[iamtakashi]

@onuro, where do you see the problem with left/right spacings? Was it in the post/page editor or the site editor, or the front of the site?

I assume that's an issue with the post/page editor that lacks the root paddings. I don't see the issue in the site editor or the front of the site.

[onuro]

I haven't checked in the site editor but yes this happens with pages/posts with those themes.

Will check with site editor as well. But it's the very same thing that's been happening with PA.

[iamtakashi]

Yes, it’s the same. Let me know if you see the issue on the front of site and the site editor. If this is only happening in the post/page editor, I have a feeling that this is a bug in the post/ page editor, and it was probably wrong to edit the patterns.

[onuro]

Interesting: I'm also not seeing this issue in site editor or front page/home because somehow the following margin zeroing out that's happening every other page/post isn't being applied by the editor styles in the site homepage.

And yes I agree, it may be risky to continue adding those spacings if this is a bug.

Looks like this issue wouldn't occur if the full/wide width aligned blocks are the top level blocks in a layout but not inner blocks of a parent container that's already full width.

And if this is not a bug but a regular behavior of the useRootPaddingAwareAlignments: true, then all themes including BC3 would need to be updated to properly make use of these spacings. I'm not sure for either yet.

[iamtakashi]

I've updated the markup to move forward. In the newer themes with "useRootPaddingAwareAlignments": true (e.g. TT3), the content still bumps to the edge of the screen, but that's only happening in the post/page editor, not on the front of the site. I think the issue should be corrected in the post editor, not in patterns.

[iamtakashi]

I spoke too soon. I removed the outer group block, and it's getting closer. The global padding kicks in for the paragraph on the right, but for some reason, not for the row block on the left. This is definitely an editor-specific issue, not the pattern.

[onuro]

Fair enough! :) also having a response from the theme team, this issue seems to be needed to be addressed within the theme territory and going forward it might be best we don't try to add those spacings unless it'd be necessary to work with all themes.

[iamtakashi]

Published