Skip to content

Commit c04788b

Browse files
laurelfulfordlaurelfulford
authored
feat: make My Account button only show icon on mobile (#406)
1 parent 94e3ce7 commit c04788b

6 files changed

Lines changed: 177 additions & 19 deletions

‎patterns/header/header-mobile-style-1.php‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515

1616
<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
1717
<div class="wp-block-group alignwide">
18+
1819
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
1920
<div class="wp-block-group">
2021
<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
@@ -25,17 +26,17 @@
2526

2627
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
2728
<div class="wp-block-group">
29+
<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
30+
<!-- wp:newspack/my-account-button {"lock":{"move":false,"remove":true},"className":"is-style-icon-only has-x-small-size","style":{"spacing":{"padding":{"top":"0.375rem","bottom":"0.375rem","left":"0.375rem","right":"0.375rem"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base","textColor":"contrast","fontSize":"x-small"} /-->
31+
<?php endif; ?>
32+
2833
<!-- wp:buttons {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
2934
<div class="wp-block-buttons">
3035
<!-- wp:button {"className":"has-x-small-size","fontSize":"x-small"} -->
31-
<div class="wp-block-button has-custom-font-size has-x-small-size has-x-small-font-size"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Donate', 'newspack-block-theme' ); ?></a></div>
36+
<div class="wp-block-button has-custom-font-size has-x-small-size has-x-small-font-size"><a class="wp-block-button__link wp-element-button"></a></div>
3237
<!-- /wp:button -->
3338
</div>
3439
<!-- /wp:buttons -->
35-
36-
<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
37-
<!-- wp:newspack/my-account-button {"lock":{"move":true,"remove":false},"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base-2","textColor":"contrast","className":"has-x-small-size","fontSize":"x-small"} /-->
38-
<?php endif; ?>
3940
</div>
4041
<!-- /wp:group -->
4142

‎patterns/header/header-mobile-style-2.php‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,27 @@
1515

1616
<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
1717
<div class="wp-block-group alignwide">
18-
<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
1918

20-
<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
19+
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
20+
<div class="wp-block-group">
21+
<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
22+
23+
<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
24+
</div>
25+
<!-- /wp:group -->
26+
27+
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
28+
<div class="wp-block-group">
29+
<!-- wp:template-part {"slug":"search-menu","theme":"newspack-block-theme","tagName":"div","className":"search-menu"} /-->
30+
31+
<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
32+
<!-- wp:newspack/my-account-button {"lock":{"move":false,"remove":true},"className":"is-style-icon-only has-x-small-size","style":{"spacing":{"padding":{"top":"0.375rem","bottom":"0.375rem","left":"0.375rem","right":"0.375rem"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base","textColor":"contrast","fontSize":"x-small"} /-->
33+
<?php endif; ?>
34+
</div>
35+
<!-- /wp:group -->
2136

22-
<!-- wp:template-part {"slug":"search-menu","theme":"newspack-block-theme","tagName":"div","className":"search-menu"} /-->
2337
</div>
2438
<!-- /wp:group -->
2539

2640
</div>
27-
<!-- /wp:group -->
41+
<!-- /wp:group -->

‎patterns/header/header-mobile-style-3.php‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,27 +13,37 @@
1313
<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Header (Mobile)', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"bottom":"var:preset|spacing|50"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
1414
<div class="wp-block-group has-base-background-color has-background" style="margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">
1515

16-
<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
16+
<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"grid","columnCount":7,"minimumColumnWidth":null}} -->
1717
<div class="wp-block-group alignwide">
18-
<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
1918

20-
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
19+
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"columnSpan":2}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
20+
<div class="wp-block-group">
21+
<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
22+
23+
<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
24+
<!-- wp:newspack/my-account-button {"lock":{"move":false,"remove":true},"className":"is-style-icon-only has-x-small-size","style":{"spacing":{"padding":{"top":"0.375rem","bottom":"0.375rem","left":"0.375rem","right":"0.375rem"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base","textColor":"contrast","fontSize":"x-small"} /-->
25+
<?php endif; ?>
26+
</div>
27+
<!-- /wp:group -->
28+
29+
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"columnSpan":3}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
30+
<div class="wp-block-group">
31+
<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
32+
</div>
33+
<!-- /wp:group -->
34+
35+
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"columnSpan":2}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
2136
<div class="wp-block-group">
2237
<!-- wp:buttons {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
2338
<div class="wp-block-buttons">
2439
<!-- wp:button {"className":"has-x-small-size","fontSize":"x-small"} -->
25-
<div class="wp-block-button has-custom-font-size has-x-small-size has-x-small-font-size"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Donate', 'newspack-block-theme' ); ?></a></div>
40+
<div class="wp-block-button has-custom-font-size has-x-small-size has-x-small-font-size"><a class="wp-block-button__link wp-element-button"></a></div>
2641
<!-- /wp:button -->
2742
</div>
2843
<!-- /wp:buttons -->
29-
30-
<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
31-
<!-- wp:newspack/my-account-button {"lock":{"move":true,"remove":false},"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base-2","textColor":"contrast","className":"has-x-small-size","fontSize":"x-small"} /-->
32-
<?php endif; ?>
33-
34-
<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
3544
</div>
3645
<!-- /wp:group -->
46+
3747
</div>
3848
<!-- /wp:group -->
3949

‎patterns/header/header-mobile-style-4.php‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?php
2+
/**
3+
* Title: Header (Mobile) - Style 4
4+
* Slug: newspack-block-theme/header-mobile-style-4
5+
* Viewport Width: 632
6+
* Inserter: no
7+
* Block Types: core/template-part/header
8+
*
9+
* @package Newspack_Block_Theme
10+
*/
11+
12+
?>
13+
<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Header (Mobile)', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"bottom":"var:preset|spacing|50"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
14+
<div class="wp-block-group has-base-background-color has-background" style="margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">
15+
16+
<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"grid","columnCount":7,"minimumColumnWidth":null}} -->
17+
<div class="wp-block-group alignwide">
18+
19+
<!-- wp:group {"style":{"layout":{"columnSpan":2}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
20+
<div class="wp-block-group">
21+
<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
22+
</div>
23+
<!-- /wp:group -->
24+
25+
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"columnSpan":3}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
26+
<div class="wp-block-group">
27+
<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
28+
</div>
29+
<!-- /wp:group -->
30+
31+
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"columnSpan":2}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
32+
<div class="wp-block-group">
33+
<!-- wp:template-part {"slug":"search-menu","theme":"newspack-block-theme","tagName":"div","className":"search-menu"} /-->
34+
35+
<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
36+
<!-- wp:newspack/my-account-button {"lock":{"move":false,"remove":true},"className":"is-style-icon-only has-x-small-size","style":{"spacing":{"padding":{"top":"0.375rem","bottom":"0.375rem","left":"0.375rem","right":"0.375rem"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base","textColor":"contrast","fontSize":"x-small"} /-->
37+
<?php endif; ?>
38+
</div>
39+
<!-- /wp:group -->
40+
41+
</div>
42+
<!-- /wp:group -->
43+
44+
</div>
45+
<!-- /wp:group -->

‎patterns/header/header-mobile-style-5.php‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<?php
2+
/**
3+
* Title: Header (Mobile) - Style 5
4+
* Slug: newspack-block-theme/header-mobile-style-5
5+
* Viewport Width: 632
6+
* Inserter: no
7+
* Block Types: core/template-part/header
8+
*
9+
* @package Newspack_Block_Theme
10+
*/
11+
12+
?>
13+
<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Header (Mobile)', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"bottom":"var:preset|spacing|50"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
14+
<div class="wp-block-group has-base-background-color has-background" style="margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">
15+
16+
<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
17+
<div class="wp-block-group alignwide">
18+
19+
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
20+
<div class="wp-block-group">
21+
<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
22+
</div>
23+
<!-- /wp:group -->
24+
25+
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
26+
<div class="wp-block-group">
27+
<!-- wp:buttons {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
28+
<div class="wp-block-buttons">
29+
<!-- wp:button {"className":"has-x-small-size","fontSize":"x-small"} -->
30+
<div class="wp-block-button has-custom-font-size has-x-small-size has-x-small-font-size"><a class="wp-block-button__link wp-element-button"></a></div>
31+
<!-- /wp:button -->
32+
</div>
33+
<!-- /wp:buttons -->
34+
35+
<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
36+
<!-- wp:newspack/my-account-button {"lock":{"move":false,"remove":true},"className":"is-style-icon-only has-x-small-size","style":{"spacing":{"padding":{"top":"0.375rem","bottom":"0.375rem","left":"0.375rem","right":"0.375rem"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base","textColor":"contrast","fontSize":"x-small"} /-->
37+
<?php endif; ?>
38+
39+
<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu overlay-contents--position--right--force"} /-->
40+
</div>
41+
<!-- /wp:group -->
42+
43+
</div>
44+
<!-- /wp:group -->
45+
46+
</div>
47+
<!-- /wp:group -->

‎patterns/header/header-mobile-style-6.php‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<?php
2+
/**
3+
* Title: Header (Mobile) - Style 6
4+
* Slug: newspack-block-theme/header-mobile-style-6
5+
* Viewport Width: 632
6+
* Inserter: no
7+
* Block Types: core/template-part/header
8+
*
9+
* @package Newspack_Block_Theme
10+
*/
11+
12+
?>
13+
<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Header (Mobile)', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"bottom":"var:preset|spacing|50"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
14+
<div class="wp-block-group has-base-background-color has-background" style="margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">
15+
16+
<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
17+
<div class="wp-block-group alignwide">
18+
19+
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
20+
<div class="wp-block-group">
21+
<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
22+
</div>
23+
<!-- /wp:group -->
24+
25+
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
26+
<div class="wp-block-group">
27+
<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
28+
<!-- wp:newspack/my-account-button {"lock":{"move":false,"remove":true},"className":"is-style-icon-only has-x-small-size","style":{"spacing":{"padding":{"top":"0.375rem","bottom":"0.375rem","left":"0.375rem","right":"0.375rem"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base","textColor":"contrast","fontSize":"x-small"} /-->
29+
<?php endif; ?>
30+
31+
<!-- wp:template-part {"slug":"search-menu","theme":"newspack-block-theme","tagName":"div","className":"search-menu"} /-->
32+
33+
<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu overlay-contents--position--right--force"} /-->
34+
</div>
35+
<!-- /wp:group -->
36+
37+
</div>
38+
<!-- /wp:group -->
39+
40+
</div>
41+
<!-- /wp:group -->

0 commit comments

Comments
 (0)