Skip to content
This repository has been archived by the owner on Nov 18, 2024. It is now read-only.

Footers: Adjustments to match the design #130

Closed
beafialho opened this issue Aug 27, 2024 · 17 comments
Closed

Footers: Adjustments to match the design #130

beafialho opened this issue Aug 27, 2024 · 17 comments
Assignees
@carolinan
Labels
[Status] In Progress Tracking issues with work in progress

Comments

@beafialho
Copy link
Contributor

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

Default footer

Before After
Captura de ecrã 2024-08-27, às 11 59 57 Captura de ecrã 2024-08-27, às 12 04 25 
<!-- 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
Captura de ecrã 2024-08-27, às 12 05 07 Captura de ecrã 2024-08-27, às 12 16 27 
<!-- 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
Captura de ecrã 2024-08-27, às 12 06 14 Captura de ecrã 2024-08-27, às 12 08 43 
<!-- 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
Captura de ecrã 2024-08-27, às 11 54 25 Captura de ecrã 2024-08-27, às 11 56 22 
<!-- 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
Captura de ecrã 2024-08-27, às 12 10 15 Captura de ecrã 2024-08-27, às 12 11 12 
<!-- 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
Copy link
Contributor Author

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?

@beafialho beafialho changed the title Footers: Improvements to match the design Footers: Adjustments to match the design Aug 27, 2024
@carolinan
Copy link
Contributor

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
Copy link
Contributor Author

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

Captura de ecrã 2024-08-27, às 12 26 15

@carolinan
Copy link
Contributor

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
Copy link
Contributor

@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
Copy link
Contributor

carolinan commented Aug 27, 2024 •
edited
Loading

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

@carolinan
Copy link
Contributor

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 carolinan self-assigned this Aug 28, 2024
This was referenced Aug 28, 2024
Closed
Merged
@carolinan
Copy link
Contributor

I will continue on this tomorrow, Monday

@carolinan carolinan added the [Status] In Progress Tracking issues with work in progress label Sep 1, 2024
@carolinan carolinan mentioned this issue Sep 2, 2024
Merged
@carolinan
Copy link
Contributor

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

@carolinan
Copy link
Contributor

@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:
footer with columns

@beafialho
Copy link
Contributor Author

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.

Captura de ecrã 2024-09-02, às 15 28 09

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.

footer-fontsizes.mp4

@jasmussen
Copy link
Contributor

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:

Screenshot 2024-09-03 at 09 13 27

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
Copy link
Contributor

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

@jasmussen
Copy link
Contributor

🙈

I clearly have stuff to learn about contributing still :)

@carolinan
Copy link
Contributor

... 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
Copy link
Contributor

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

@carolinan
Copy link
Contributor

All five footers were updated.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@carolinan carolinan

Labels
[Status] In Progress Tracking issues with work in progress
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jasmussen @carolinan @beafialho