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

Commit

Permalink
[Store Customization] Update the "Footer with 3 Menus" (#11379)
Browse files Browse the repository at this point in the history 
* Fix search bar, spacing and show text in one line

* Set site log width

* Adjust margins and search bar

* Make the search bar fill space on mobile

* Update column sizes

* Remove width from site logo
  • Loading branch information
@albarin
albarin authored Oct 24, 2023
1 parent b3022f0 commit 60972ee
Showing 1 changed file with 31 additions and 33 deletions.
64 changes: 31 additions & 33 deletions patterns/footer-with-3-menus.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@
*/
?>

<!-- wp:group {"className":"wc-blocks-footer-pattern","align":"full","style":{"spacing":{"blockGap":"40px","padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
<div class="wc-blocks-footer-pattern wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
<!-- wp:columns -->
<div class="wp-block-columns are-vertically-aligned-top">
<!-- wp:column {"verticalAlignment":"top","width":"70%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:70%">
<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"40px","padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}}},"className":"wc-blocks-footer-pattern"} -->
<div class="wp-block-group alignfull wc-blocks-footer-pattern" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px">
<!-- wp:columns {"style":{"spacing":{"padding":{"right":"0","left":"0"}}},"className":"are-vertically-aligned-top"} -->
<div class="wp-block-columns are-vertically-aligned-top" style="padding-right:0;padding-left:0">
<!-- wp:column {"verticalAlignment":"top","width":"60%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:60%">
<!-- wp:group {"style":{"spacing":{"blockGap":"32px"}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"top"}} -->
<div class="wp-block-group">
<!-- wp:site-logo {"shouldSyncIcon":false} /-->
<!-- wp:site-logo /-->

<!-- wp:columns {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":{"top":"var:preset|spacing|70","left":"var:preset|spacing|70"}}}} -->
<!-- wp:columns {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":{"top":"var:preset|spacing|70","left":"var:preset|spacing|80"}}}} -->
<div class="wp-block-columns" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
<!-- wp:column -->
<div class="wp-block-column">
Expand All @@ -43,33 +43,31 @@
</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","style":{"spacing":{"blockGap":"60px"}},"layout":{"type":"default"}} -->
<div class="wp-block-column is-vertically-aligned-top">
<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"var:preset|spacing|50"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"right"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
<!-- wp:search {"label":"<?php esc_html_e( 'Search', 'woo-gutenberg-products-block' ); ?>","showLabel":false,"placeholder":"<?php esc_html_e( 'Search our store', 'woo-gutenberg-products-block' ); ?>","buttonText":"<?php esc_html_e( 'Search our store', 'woo-gutenberg-products-block' ); ?>","buttonUseIcon":true,"query":{"post_type":"product"}} /-->
<!-- wp:column {"width":"10%"} -->
<div class="wp-block-column" style="flex-basis:10%"></div>
<!-- /wp:column -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"right"}} -->
<div class="wp-block-group">
<!-- wp:site-title /-->
<!-- wp:column {"verticalAlignment":"stretch","width":"30%","style":{"spacing":{"blockGap":"60px"}},"layout":{"type":"default"}} -->
<div class="wp-block-column is-vertically-aligned-stretch" style="flex-basis:30%">
<!-- wp:search {"label":"<?php esc_html_e( 'Search', 'woo-gutenberg-products-block' ); ?>","showLabel":false,"placeholder":"<?php esc_html_e( 'Search our store', 'woo-gutenberg-products-block' ); ?>","buttonText":"<?php esc_html_e( 'Search our store', 'woo-gutenberg-products-block' ); ?>","buttonUseIcon":true,"query":{"post_type":"product"}} /-->

<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">
<?php
echo sprintf(
/* translators: Footer powered by text. %1$s being WordPress, %2$s being WooCommerce */
esc_html__(
'Powered by %1$s with %2$s',
'woo-gutenberg-products-block'
),
'<a href="https://wordpress.org" target="_blank" rel="noreferrer nofollow">WordPress</a>',
'<a href="https://woocommerce.com" target="_blank" rel="noreferrer nofollow">WooCommerce</a>'
);
?>
</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"right":"0","left":"0"},"margin":{"top":"56px","bottom":"0"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"right"}} -->
<div class="wp-block-group" style="margin-top:56px;margin-bottom:0;padding-right:0;padding-left:0">
<!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->

<!-- wp:paragraph {"align":"right"} --><p class="has-text-align-right">
<?php
echo sprintf(
/* translators: Footer powered by text. %1$s being WordPress, %2$s being WooCommerce */
esc_html__(
'Powered by %1$s with %2$s',
'woo-gutenberg-products-block'
),
'<a href="https://wordpress.org" target="_blank" rel="noreferrer nofollow">WordPress</a>',
'<a href="https://woocommerce.com" target="_blank" rel="noreferrer nofollow">WooCommerce</a>'
);
?>
</p><!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
Expand Down

0 comments on commit 60972ee

Please sign in to comment.