Footers: Adjustments to match the design

[beafialho]

I tested the footers and made some modifications accordingly. Pasted the code to each below and before/after pictures.

Default footer

Before	After

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:site-logo /-->

<!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20","padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"layout":{"selfStretch":"fit","flexSize":null}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:site-title {"level":2} /-->

<!-- wp:site-tagline /-->

<!-- wp:spacer {"height":"var:preset|spacing|40","width":"0px","style":{"layout":{}}} -->
<div style="height:var(--wp--preset--spacing--40);width:0px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|80"}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"top","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"never","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->

<!-- wp:navigation-link {"label":"About","url":"#"} /-->

<!-- wp:navigation-link {"label":"FAQs","url":"#"} /-->

<!-- wp:navigation-link {"label":"Authors","url":"#"} /-->
<!-- /wp:navigation -->

<!-- wp:navigation {"ref":27,"overlayMenu":"never","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical"}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"var:preset|spacing|70"} -->
<div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"primary","fontSize":"x-small"} -->
<p class="has-primary-color has-text-color has-link-color has-x-small-font-size">Twenty Twenty-Five</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"primary","fontSize":"x-small"} -->
<p class="has-primary-color has-text-color has-link-color has-x-small-font-size">Designed with <a href="https://wordpress.org">WordPress</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Footer with newsletter signup

Before	After

<!-- wp:group {"metadata":{"categories":["footer"],"patternName":"twentytwentyfive/footer-newsletter","name":"Footer with newsletter signup"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"backgroundColor":"accent-1","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-accent-1-background-color has-background" style="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 {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:site-title {"level":2,"style":{"typography":{"fontSize":"20vw","letterSpacing":"-0.04em"}}} /-->

<!-- wp:group {"style":{"spacing":{"padding":{"right":"0","left":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="padding-right:0;padding-left:0"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"x-large"} -->
<p class="has-x-large-font-size">Receive our articles in your inbox.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Subscribe</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"var:preset|spacing|50"} -->
<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignfull"><!-- wp:paragraph {"fontSize":"x-small"} -->
<p class="has-x-small-font-size">Twenty Twenty-Five</p>
<!-- /wp:paragraph -->

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

Footer with columns

Before	After

<!-- wp:group {"metadata":{"categories":["footer"],"patternName":"twentytwentyfive/footer-columns","name":"Footer with columns"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="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 {"align":"full","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20","padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:site-title {"style":{"typography":{"fontSize":"70px"}}} /-->

<!-- wp:site-tagline /--></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|80"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"right":"0","left":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-right:0;padding-left:0"><!-- wp:heading {"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"small"} -->
<h3 class="wp-block-heading has-small-font-size" style="font-style:normal;font-weight:700">Stories</h3>
<!-- /wp:heading -->

<!-- wp:navigation {"overlayMenu":"never","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"small","layout":{"type":"flex","orientation":"vertical"}} -->
<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->

<!-- wp:navigation-link {"label":"About","url":"#"} /-->

<!-- wp:navigation-link {"label":"FAQs","url":"#"} /-->

<!-- wp:navigation-link {"label":"Authors","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"right":"0","left":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-right:0;padding-left:0"><!-- wp:heading {"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"small"} -->
<h3 class="wp-block-heading has-small-font-size" style="font-style:normal;font-weight:700">Fleurs</h3>
<!-- /wp:heading -->

<!-- wp:navigation {"ref":26,"overlayMenu":"never","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"small","layout":{"type":"flex","orientation":"vertical"}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"var:preset|spacing|60"} -->
<div style="height:var(--wp--preset--spacing--60)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|primary"}}}},"textColor":"primary","fontSize":"x-small"} -->
<p class="has-primary-color has-text-color has-link-color has-x-small-font-size">Twenty Twenty-Five</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"primary","fontSize":"x-small"} -->
<p class="has-primary-color has-text-color has-link-color has-x-small-font-size">Designed with <a href="https://wordpress.org">WordPress</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Centered footer with social links

Before	After

<!-- wp:group {"metadata":{"categories":["footer"],"patternName":"twentytwentyfive/footer-social","name":"Centered Footer with social links"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}},"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"backgroundColor":"contrast","textColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-color has-contrast-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--preset--spacing--60);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|10"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group"><!-- wp:site-title {"level":2,"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"}},"fontSize":"large"} /-->

<!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"large","layout":{"type":"flex","justifyContent":"center"}} -->
<!-- wp:navigation-link {"label":"Facebook","url":"#"} /-->

<!-- wp:navigation-link {"label":"Instagram","url":"#"} /-->

<!-- wp:navigation-link {"label":"X","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:group -->

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

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

Centered footer

Before	After

<!-- wp:group {"metadata":{"categories":["footer"],"patternName":"twentytwentyfive/footer-centered","name":"Centered Footer"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--70);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|10"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group"><!-- wp:site-title {"level":0,"textAlign":"center"} /-->

<!-- wp:site-tagline {"textAlign":"center"} /--></div>
<!-- /wp:group -->

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

<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"primary","fontSize":"x-small"} -->
<p class="has-text-align-center has-primary-color has-text-color has-link-color has-x-small-font-size">Designed with <a href="https://wordpress.org">WordPress</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

[beafialho]

Perhaps there's a better way for me to submit these modifications, with WordPress Playground and exporting as a PR? What do you think @carolinan and @juanfra?

[carolinan]

The theme must not use domains or brands that can belong to existing businesses and trademarks. Even if you personally, or for example automattic, owns fleurs.co, it can not be used.

[beafialho]

Ok got it, in that case let's replace "Fleurs.co" with "Events".

[carolinan]

I wrote the reason for why the footers do not have background colors in the previous PR. I suggested that these colors should be added with the section styles, but there was no response or feedback on that suggestion.

They would still be the default colors for these footers, but would be applied with the class name from the section style, which has not been created.

[jasmussen]

@carolinan Is a proper solution dependant on #3 being decided on first? Just trying to figure out how @beafialho can best spend her time moving the work forward. Connecting dots with this comment, @MaggieCabrera do you think this feature can meaningfully land in CBT in a reasonable timeframe for Bea to use it to create these? Or should we make the section styles more manually for now?

Either way, happy to try and spin up a PR that uses section styles for this if that's a way to unblock the work. Let me know if that would be helpful!

[carolinan]

A PR for the section styles would be good, the only blocker has been time. I would suggest:

• Starting with the yellow accent and contrast in one PR
• Follow Brian Gardners method: https://fullsiteediting.com/lessons/global-style-variations/#h-section-styles

[carolinan]

Perhaps there's a better way for me to submit these modifications, with WordPress Playground and exporting as a PR? What do you think @carolinan and @juanfra?

IF create block theme can not keep the pattern intact but updated, I think copying from here may be easier.

[carolinan]

I will continue on this tomorrow, Monday

[carolinan]

In the newsletter footer, perhaps the site title should be replaced with a single word? It is difficult to read this size text:

[carolinan]

@beafialho when testing the Footer with columns, I see that the footer is full width, not wide, is that accurate?

This screenshot shows the full page with both the before and after "footer with columns" footer:

[beafialho]

In the newsletter footer, perhaps the site title should be replaced with a single word? It is difficult to read this size text:

The ideal scenario would be the site title would stretch to fill the page's edges, but since that isn't possible, I think we could replace it with Stories®. I wonder if it'd be more confusing for users to see the word there, instead of their site title, whose size they could replace instead of adding the site title block there.

@beafialho when testing the Footer with columns, I see that the footer is full width, not wide, is that accurate? This screenshot shows the full page with both the before and after "footer with columns" footer:

Sorry, I likely missed this detail. That's correct, the Footer with columns should be wide width with two groups, in case people want to add color it reaches the screen's edges.

One more detail, likely due to the recent change in the font sizes. This text in the pattern is using font size preset Large, correct? Let's set it to X-Large. Ideally this text is bigger than the text size.

https://github.com/user-attachments/assets/14a85c45-f128-4bd8-b7ff-889383adba6d

[jasmussen]

One more detail, likely due to the recent change in the font sizes. This text in the pattern is using font size preset Large, correct? Let's set it to X-Large. Ideally this text is bigger than the text size.

In my testing just now, that pattern was set to XL:

However it doesn't default to full-wide, nor does it use the black-background section style. I'm happy to make a PR to update those bits, just let me know!

[carolinan]

There already is a pr :) that is why the PR is linked, the issue is assigned and marked as in progress :p

[jasmussen]

🙈

I clearly have stuff to learn about contributing still :)

[carolinan]

... and now I found a Gutenberg bug. In the newsletter footer, the font size is so large that it is not possible to trigger the block inserter below the block. Trying to click between two blocks selects the text. The indicator that is meant to show where you will start typing, the vertical line, is so large it extends outside the blocks boundary, it goes past the border around the selected block.

[jasmussen]

Sounds like bug territory yes, so definitely file that and we can hopefully improve this in the post-beta 1 period.

[carolinan]

All five footers were updated.