-
Notifications
You must be signed in to change notification settings - Fork 111
Conversation
patterns/footer.php
Outdated
<div class="wp-block-group alignfull"> | ||
<!-- wp:site-title {"level":0,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"small"} /--> | ||
<!-- wp:paragraph {"fontSize":"small"} --> | ||
<p class="has-small-font-size">Designed with <strong>WordPress</strong></p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Translations will be added later when the markup changes are completed.
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Facebook', 'twentytwentyfive' ); ?>","url":"#"} /--> | ||
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Instagram', 'twentytwentyfive' ); ?>","url":"#"} /--> | ||
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'X', 'twentytwentyfive' ); ?>","url":"#"} /--> | ||
<!-- /wp:navigation --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did not use the social icon block because, well, the design does not use icons.
*/ | ||
?> | ||
<!-- 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)"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have not changed the background and text color on this footer because I think those colors should be applied by a section style, which has not been created yet.
<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:site-title {"level":0,"style":{"typography":{"fontSize":"10vw"}}} /--> | ||
|
||
<!-- wp:group {"style":{"spacing":{"padding":{"right":"0","left":"0"}}},"layout":{"type":"constrained","justifyContent":"left"}} --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This whole section should be a separate pattern, which still needs to be created.
*/ | ||
|
||
?> | ||
<!-- 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"}} --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The bottom padding in Figma is 73px, but I was not sure if it was intentional, so I kept it at spacing preset 50.
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
…side the inner row Default footer: Replace "nowrap" with "wrap" to improve the look on small screen widths. Move the site logo outside the inner row. This vertically aligns the title with the navigation.
…le and credit aligns better
This video is of the default footer. default-footer.mp4Centered footer: centered-footer.mp4 |
Footer with columns: footer-with-columns.mp4 |
Footer with social links:
social-footer.mp4 |
Footer with newsletter:
footer-with-newsletter-signup.mp4 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the PR! I left a few comments and suggestions.
<!-- 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":{"type":"constrained"}} --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we want to limit the width of this group to make it more in line with the designs?
<!-- 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 {"level":2,"fontSize":"xx-large"} /--> | ||
<!-- wp:site-tagline /--> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure if we want to limit the width to make it closer to the design.
Co-authored-by: Juan Aldasoro <[email protected]>
Co-authored-by: Juan Aldasoro <[email protected]>
Co-authored-by: Juan Aldasoro <[email protected]>
Co-authored-by: Juan Aldasoro <[email protected]>
Co-authored-by: Juan Aldasoro <[email protected]>
Co-authored-by: Juan Aldasoro <[email protected]>
Co-authored-by: Juan Aldasoro <[email protected]>
Co-authored-by: Juan Aldasoro <[email protected]>
Co-authored-by: Juan Aldasoro <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks so much Carolina! 🏅
Looks great, we can iterate on the spacing during a round of DQA.
Description
This PR adds footer patterns.
Closes #38
Testing Instructions
Since the font sizes and font family is not in yet, the main thing to test in this PR is that:
Apply the PR.
Confirm that the default footer is used and displays correctly in the editor and front.
Test with different screen widths.
Confirm that the two navigation blocks in the default header has aria-labels. You can do that by viewing the source.
Replace the content in the template part with the other footer patterns from the theme, and test those as well.
(-You will see that the yellow footer is not yellow, the black footer is not black: I added a comment about that)