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

Add footers #54

Merged
merged 40 commits into from
Aug 23, 2024
Merged

Add footers #54

Show file tree
Hide file tree
Changes from 29 commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
e01bfe9
Add default footer
carolinan Aug 18, 2024
c4edec6
Add centered footer
carolinan Aug 18, 2024
fbb09d1
Add footer with columns (no site logo)
carolinan Aug 18, 2024
9f8ff57
Create footer-social.php
carolinan Aug 18, 2024
933f639
Add footer with newsletter signup
carolinan Aug 18, 2024
5d80acd
Merge branch 'trunk' into add/footers
carolinan Aug 20, 2024
9b3c193
Update the top padding on the centered footer to 90px.
carolinan Aug 20, 2024
03b1ae8
PHP CS: Adjust packages and spacing
carolinan Aug 20, 2024
6521855
more PHPCS fizxes
carolinan Aug 20, 2024
c95c528
one more try
carolinan Aug 20, 2024
34c9880
Merge branch 'trunk' into add/footers
carolinan Aug 20, 2024
b808090
Override the global right and left padding on the inner group blocks
carolinan Aug 20, 2024
ef05fbf
Merge branch 'trunk' into add/footers
carolinan Aug 21, 2024
dc99444
Correct the pattern slug in Footer with coluimns
carolinan Aug 21, 2024
3d1ab43
Default footer: Allow the content to wrap, and move the site logo out…
carolinan Aug 21, 2024
ae36a31
Merge branch 'trunk' into add/footers
carolinan Aug 21, 2024
6c7d5e5
Merge branch 'trunk' into add/footers
carolinan Aug 21, 2024
5b19a8b
Site title: Set text decoration to none on the default link state.
carolinan Aug 21, 2024
445a480
Default footer: replace the last "nowrap" with "wrap" so that the tit…
carolinan Aug 21, 2024
4eae108
Centered footer: Update font sizes
carolinan Aug 21, 2024
604dbc5
Footer columns: replace nowrap with wrap, update font weight
carolinan Aug 21, 2024
ed3ae41
Footer with social links: Update font sizes
carolinan Aug 21, 2024
35a7d7f
Footer with social links: Change the site title to H2, add uppercase.
carolinan Aug 21, 2024
9077346
Footer with social links: Also set the font weight on the navigation …
carolinan Aug 21, 2024
7d9ca1c
Footer with newsletter: increase spacing between the form at the cred…
carolinan Aug 21, 2024
4944c16
Footer with newsletter: replace "nowrap" with "wrap"
carolinan Aug 21, 2024
e520e10
Footer with newsletter signup: change the site title to an H2 (was pa…
carolinan Aug 21, 2024
658d995
Footer with columns: change heading levels
carolinan Aug 21, 2024
b41a696
Default footer: Change site title from paragraph to H2
carolinan Aug 21, 2024
523f434
Update patterns/footer-columns.php
carolinan Aug 22, 2024
2c458e0
Update patterns/footer-columns.php
carolinan Aug 22, 2024
cc15b3f
Update patterns/footer-columns.php
carolinan Aug 22, 2024
69c56f9
Update patterns/footer-newsletter.php
carolinan Aug 22, 2024
91af7ea
Update patterns/footer.php
carolinan Aug 22, 2024
d8e20c1
Update patterns/footer.php
carolinan Aug 22, 2024
182855b
Update patterns/footer.php
carolinan Aug 22, 2024
9d14aa9
Update patterns/footer-newsletter.php
carolinan Aug 22, 2024
2702493
Update patterns/footer-newsletter.php
carolinan Aug 22, 2024
3f15a69
Merge branch 'trunk' into add/footers
carolinan Aug 22, 2024
45500d3
Merge branch 'trunk' into add/footers
carolinan Aug 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*
* @link https://developer.wordpress.org/themes/basics/theme-functions/
*
* @package Twenty Twenty-Five
* @package WordPress
* @subpackage Twenty_Twenty_Five
* @since Twenty Twenty-Five 1.0
*/
carolinan marked this conversation as resolved.
Show resolved Hide resolved
12 changes: 1 addition & 11 deletions parts/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1 @@
<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<!-- wp:pattern {"slug":"twentytwentyfive/footer"} /-->
26 changes: 26 additions & 0 deletions patterns/footer-centered.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<?php
/**
* Title: Centered Footer
* Slug: twentytwentyfive/footer-centered
* Categories: footer
* Block Types: core/template-part/footer
* Description: Footer with centered site title and tagline
*
* @package WordPress
* @subpackage Twenty_Twenty_Five
* @since Twenty Twenty-Five 1.0
*/

?>
<!-- wp:group {"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:site-title {"level":0,"textAlign":"center"} /-->
<!-- wp:site-tagline {"textAlign":"center"} /-->
<!-- 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 <strong>WordPress</strong></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
71 changes: 71 additions & 0 deletions patterns/footer-columns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<?php
/**
* Title: Footer with columns
* Slug: twentytwentyfive/footer-columns
* Categories: footer
* Block Types: core/template-part/footer
* Description: Footer columns with title, tagline and links
*
* @package WordPress
* @subpackage Twenty_Twenty_Five
* @since Twenty Twenty-Five 1.0
*/

?>
<!-- wp:group {"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 {"level":2,"fontSize":"xx-large"} /-->
<!-- wp:site-tagline /-->
Copy link
Member

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.

</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","fontSize":"small","layout":{"type":"flex","orientation":"vertical"},"ariaLabel":"<?php esc_attr_e( 'Stories', 'twentytwentyfive' ); ?>"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'FAQs', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Authors', 'twentytwentyfive' ); ?>","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">Featured</h3>
<!-- /wp:heading -->
<!-- wp:navigation {"overlayMenu":"never","fontSize":"small","layout":{"type":"flex","orientation":"vertical"},"ariaLabel":"<?php esc_attr_e( 'Featured', 'twentytwentyfive' ); ?>"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Example.com', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Shop', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Patterns', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Themes', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->

<!-- wp:spacer -->
<div style="height:100px" 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:site-title {"level":0,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"small"} /-->
carolinan marked this conversation as resolved.
Show resolved Hide resolved
<!-- wp:paragraph {"fontSize":"small"} -->
carolinan marked this conversation as resolved.
Show resolved Hide resolved
<p class="has-small-font-size">Designed with <strong>WordPress</strong></p>
carolinan marked this conversation as resolved.
Show resolved Hide resolved
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
42 changes: 42 additions & 0 deletions patterns/footer-newsletter.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<?php
/**
* Title: Footer with newsletter signup
* Slug: twentytwentyfive/footer-newsletter
* Categories: footer
* Block Types: core/template-part/footer
* Description: Footer with large site title and newsletter signup
*
* @package WordPress
* @subpackage Twenty_Twenty_Five
* @since Twenty Twenty-Five 1.0
*/

?>
<!-- wp:group {"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:site-title {"level":2,"style":{"typography":{"fontSize":"10vw"}}} /-->
<!-- wp:group {"style":{"spacing":{"padding":{"right":"0","left":"0"}}},"layout":{"type":"constrained","justifyContent":"left"}} -->
Copy link
Contributor Author

@carolinan carolinan Aug 18, 2024 •
edited
Loading

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.

<div class="wp-block-group" style="padding-right:0;padding-left:0">
<!-- wp:paragraph {"fontSize":"x-large"} -->
<p class="has-x-large-font-size">Subscribe to our newsletter</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 -->
<!-- wp:spacer {"height":"20px"} -->
<div style="height:20px" 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:site-title {"level":0,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"small"} /-->
carolinan marked this conversation as resolved.
Show resolved Hide resolved
<!-- wp:paragraph {"fontSize":"small"} -->
carolinan marked this conversation as resolved.
Show resolved Hide resolved
<p class="has-small-font-size">Designed with <strong>WordPress</strong></p>
carolinan marked this conversation as resolved.
Show resolved Hide resolved
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
30 changes: 30 additions & 0 deletions patterns/footer-social.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<?php
/**
* Title: Centered Footer with social links
* Slug: twentytwentyfive/footer-social
* Categories: footer
* Block Types: core/template-part/footer
* Description: Footer with centered site title and social links
*
* @package WordPress
* @subpackage Twenty_Twenty_Five
* @since Twenty Twenty-Five 1.0
*/

?>
<!-- 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"}} -->
Copy link
Contributor Author

@carolinan carolinan Aug 20, 2024 •
edited
Loading

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.

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

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.

<!-- 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"}},"fontSize":"large","layout":{"type":"flex","justifyContent":"center"},"ariaLabel":"<?php esc_attr_e( 'Social', 'twentytwentyfive' ); ?>"} -->
<!-- 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 -->
Copy link
Contributor Author

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: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 <strong>WordPress</strong></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
59 changes: 59 additions & 0 deletions patterns/footer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<?php
/**
* Title: Footer
* Slug: twentytwentyfive/footer
* Categories: footer
* Block Types: core/template-part/footer
* Description: Footer columns with logo, title, tagline and links
*
* @package WordPress
* @subpackage Twenty_Twenty_Five
* @since Twenty Twenty-Five 1.0
*/

?>

<!-- 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":"default"}} -->
<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-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"}} -->
Copy link
Member

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?

<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 /-->
</div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|80"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group">
<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","orientation":"vertical"},"ariaLabel":"<?php esc_attr_e( 'Stories', 'twentytwentyfive' ); ?>"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'FAQs', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Authors', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->
<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","orientation":"vertical"},"ariaLabel":"<?php esc_attr_e( 'Featured', 'twentytwentyfive' ); ?>"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Example.com', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Shop', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Patterns', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Themes', 'twentytwentyfive' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->

<!-- wp:spacer -->
<div style="height:100px" 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:site-title {"level":0,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"small"} /-->
carolinan marked this conversation as resolved.
Show resolved Hide resolved
<!-- wp:paragraph {"fontSize":"small"} -->
carolinan marked this conversation as resolved.
Show resolved Hide resolved
<p class="has-small-font-size">Designed with <strong>WordPress</strong></p>
Copy link
Contributor Author

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.

carolinan marked this conversation as resolved.
Show resolved Hide resolved
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
12 changes: 12 additions & 0 deletions theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1011,6 +1011,18 @@
"typography": {
"fontSize": "var:preset|font-size|medium",
"fontWeight": "700"
},
"elements": {
"link": {
"typography": {
"textDecoration": "none"
},
":hover": {
"typography": {
"textDecoration": "underline"
}
}
}
}
},
"core/navigation": {
Expand Down
Loading