Skip to content

Commit f3830aa

Browse files
mjsol12mjsol12
authored
Merge pull request #8 from navnorth/NN-423
NN-423 - NN Web WP Main Nav
2 parents 719363e + 5201ed4 commit f3830aa

File tree

4 files changed

+169
-7
lines changed

4 files changed

+169
-7
lines changed

‎functions.php

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
function nn_enqueue_styles(){
77
wp_enqueue_style('nn-styles', get_stylesheet_uri());
88
}
9-
109
/**
1110
* Register custom block styles for core blocks.
1211
*/
@@ -42,4 +41,52 @@ function remove_button_outline_style() {
4241
filemtime( get_stylesheet_directory() . '/assets/js/button-unregister-styles.js' )
4342
);
4443
}
45-
add_action( 'enqueue_block_editor_assets', 'remove_button_outline_style', 20 );
44+
add_action( 'enqueue_block_editor_assets', 'remove_button_outline_style', 20 );
45+
46+
/**
47+
* Allow SVG and WEBP format in media uploader
48+
*/
49+
add_filter('wp_check_filetype_and_ext', 'muse_check_filetype_and_ext', 10, 4);
50+
function muse_check_filetype_and_ext($data, $file, $filename, $mimes){
51+
global $wp_version;
52+
53+
if ($wp_version !== '4.7.1') {
54+
return $data;
55+
}
56+
57+
$filetype = wp_check_filetype($filename, $mimes);
58+
59+
return [
60+
'ext' => $filetype['ext'],
61+
'type' => $filetype['type'],
62+
'proper_filename' => $data['proper_filename']
63+
];
64+
}
65+
add_filter('upload_mimes', 'muse_mime_types', 1, 1);
66+
function muse_mime_types($mimes) {
67+
$mimes['svg'] = 'image/svg+xml';
68+
$mimes['svgz'] = 'image/svg+xml';
69+
$mimes['webp'] = 'image/webp';
70+
return $mimes;
71+
}
72+
/**
73+
* Change hamburger menu icon according to Figma design
74+
*/
75+
function custom_render_block_core_navigation (string $block_content, array $block)
76+
{
77+
if (
78+
$block['blockName'] === 'core/navigation' &&
79+
!is_admin() &&
80+
!wp_is_json_request()
81+
) {
82+
return preg_replace('/\<svg width(.*?)\<\/svg\>/', '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
83+
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.7998 7.99999C4.7998 7.57565 4.96838 7.16868 5.26843 6.86862C5.56849 6.56857 5.97546 6.39999 6.3998 6.39999H25.5998C26.0242 6.39999 26.4311 6.56857 26.7312 6.86862C27.0312 7.16868 27.1998 7.57565 27.1998 7.99999C27.1998 8.42434 27.0312 8.83131 26.7312 9.13136C26.4311 9.43142 26.0242 9.59999 25.5998 9.59999H6.3998C5.97546 9.59999 5.56849 9.43142 5.26843 9.13136C4.96838 8.83131 4.7998 8.42434 4.7998 7.99999Z" fill="#172836"/>
84+
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.7998 16C4.7998 15.5756 4.96838 15.1687 5.26843 14.8686C5.56849 14.5686 5.97546 14.4 6.3998 14.4H25.5998C26.0242 14.4 26.4311 14.5686 26.7312 14.8686C27.0312 15.1687 27.1998 15.5756 27.1998 16C27.1998 16.4243 27.0312 16.8313 26.7312 17.1314C26.4311 17.4314 26.0242 17.6 25.5998 17.6H6.3998C5.97546 17.6 5.56849 17.4314 5.26843 17.1314C4.96838 16.8313 4.7998 16.4243 4.7998 16Z" fill="#172836"/>
85+
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3999 24C14.3999 23.5756 14.5685 23.1687 14.8685 22.8686C15.1686 22.5686 15.5756 22.4 15.9999 22.4H25.5999C26.0242 22.4 26.4312 22.5686 26.7313 22.8686C27.0313 23.1687 27.1999 23.5756 27.1999 24C27.1999 24.4243 27.0313 24.8313 26.7313 25.1314C26.4312 25.4314 26.0242 25.6 25.5999 25.6H15.9999C15.5756 25.6 15.1686 25.4314 14.8685 25.1314C14.5685 24.8313 14.3999 24.4243 14.3999 24Z" fill="#172836"/>
86+
</svg>', $block_content);
87+
}
88+
89+
return $block_content;
90+
}
91+
92+
add_filter('render_block', 'custom_render_block_core_navigation', null, 2);

‎parts/header.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"34px","bottom":"0px"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
2+
<div class="wp-block-group alignwide has-base-background-color has-background"
3+
style="padding-top:34px;padding-bottom:0px">
4+
<!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
5+
<div class="wp-block-group alignwide">
6+
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}},"layout":{"type":"flex"}} -->
7+
<div class="wp-block-group">
8+
<!-- wp:site-logo {"width":195 } /-->
9+
</div>
10+
<!-- /wp:group -->
11+
12+
<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left","alignSelf":"stretch"},"className":"header-navigation"} -->
13+
<div class="wp-block-group header-navigation">
14+
<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}}} /-->
15+
</div>
16+
<!-- /wp:group -->
17+
</div>
18+
<!-- /wp:group -->
19+
</div>
20+
<!-- /wp:group -->

‎style.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,64 @@
1818
> .wp-block-button__link:not(.has-text-color, .has-background):hover {
1919
background-color: var(--wp--preset--color--blue);
2020
color: var(--wp--preset--color--base);
21+
}
22+
header .wp-block-navigation {
23+
flex-grow: 1;
24+
}
25+
header .wp-block-navigation .wp-block-navigation__responsive-container-content {
26+
justify-content: space-between;
27+
}
28+
header .header-navigation {
29+
width: 60%;
30+
}
31+
header .header-navigation ul.wp-block-navigation {
32+
justify-content: flex-start;
33+
gap: 58px;
34+
}
35+
header .header-navigation ul.wp-block-navigation li.current-menu-item {
36+
color: var(--wp--preset--color--blue);
37+
}
38+
.wp-block-navigation__responsive-container-open:not(.always-shown) {
39+
display: none;
40+
}
41+
@media screen and (max-width: 1199px) {
42+
header .header-navigation {
43+
width: auto;
44+
}
45+
.wp-block-navigation__responsive-container-open {
46+
display: flex !important;
47+
}
48+
.wp-block-navigation__responsive-container-open:not(.always-shown) {
49+
display: flex !important;
50+
}
51+
.wp-block-navigation__responsive-container {
52+
display: none;
53+
}
54+
}
55+
@media (min-width: 600px) and (max-width: 1199px) {
56+
.wp-block-navigation__responsive-container-open:not(.always-shown) {
57+
display: flex;
58+
}
59+
.wp-block-navigation__responsive-container {
60+
display: none;
61+
}
62+
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
63+
display: none;
64+
}
65+
}
66+
@media screen and (max-width: 480px) {
67+
.wp-block-site-logo {
68+
width: 130px;
69+
}
70+
header > .wp-block-group {
71+
padding-top: 20px !important;
72+
padding-left: 15px;
73+
padding-right: 15px;
74+
}
75+
h1 {
76+
font-size: var(--wp--preset--font-size--x-large);
77+
}
78+
h2 {
79+
font-size: var(--wp--preset--font-size--large);
80+
}
2181
}

‎theme.json

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
]
6464
},
6565
"layout": {
66-
"contentSize": "620px",
66+
"contentSize": "1200px",
6767
"wideSize": "1280px"
6868
},
6969
"spacing": {
@@ -176,6 +176,12 @@
176176
"name": "Body",
177177
"size": "19px",
178178
"slug": "body"
179+
},
180+
{
181+
"fluid": false,
182+
"name": "Menu",
183+
"size": "16px",
184+
"slug": "menu"
179185
}
180186
],
181187
"writingMode": true
@@ -230,6 +236,28 @@
230236
"lineHeight": "130%",
231237
"letterSpacing": "0.96px"
232238
}
239+
},
240+
"core/navigation": {
241+
"elements": {
242+
"link": {
243+
":hover": {
244+
"typography": {
245+
"textDecoration": "underline"
246+
}
247+
},
248+
"typography": {
249+
"textDecoration": "none",
250+
"fontSize":"var(--wp--preset--font-size--menu)",
251+
"fontFamily":"var(--wp--preset--font-family--body)",
252+
"fontStyle":"normal",
253+
"fontWeight":"600",
254+
"lineHeight":"1.3em"
255+
}
256+
}
257+
},
258+
"typography": {
259+
"fontWeight": "500"
260+
}
233261
}
234262
},
235263
"color": {
@@ -246,15 +274,15 @@
246274
},
247275
":focus": {
248276
"color": {
249-
"background": "var(--wp--preset--color--contrast)",
277+
"background": "var(--wp--preset--color--blue)",
250278
"text": "var(--wp--preset--color--base)"
251279
},
252280
"outline": {
253-
"color": "var(--wp--preset--color--contrast)",
281+
"color": "var(--wp--preset--color--blue)",
254282
"offset": "2px"
255283
},
256284
"border": {
257-
"color": "var(--wp--preset--color--contrast)"
285+
"color": "var(--wp--preset--color--blue)"
258286
}
259287
},
260288
":hover": {
@@ -372,5 +400,12 @@
372400
"lineHeight": "1.4em"
373401
},
374402
"css": ":where(.wp-site-blocks *:focus){outline-width:2px;outline-style:solid}.body1{font-size:var(--wp--preset--font-size--body-1);}.body2{font-size:var(--wp--preset--font-size--body-2);line-height:1.5em;}.body3{font-size:var(--wp--preset--font-size--body-3);line-height:1.5em;letter-spacing:0.005em;}.eyebrow{font-size:var(--wp--preset--font-size--eyebrow);line-height:1.4em;letter-spacing:0.12em;}"
375-
}
403+
},
404+
"templateParts": [
405+
{
406+
"area": "header",
407+
"name": "header",
408+
"title": "Header"
409+
}
410+
]
376411
}

0 commit comments

Comments
 (0)