Skip to content

Commit

Permalink
Merge pull request #8 from navnorth/NN-423
Browse files Browse the repository at this point in the history 
NN-423 - NN Web WP Main Nav
  • Loading branch information
@mjsol12
mjsol12 authored Jan 21, 2025
2 parents 719363e + 5201ed4 commit f3830aa
Show file tree
Hide file tree
Showing 4 changed files with 169 additions and 7 deletions.
51 changes: 49 additions & 2 deletions functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
function nn_enqueue_styles(){
wp_enqueue_style('nn-styles', get_stylesheet_uri());
}

/**
* Register custom block styles for core blocks.
*/
Expand Down Expand Up @@ -42,4 +41,52 @@ function remove_button_outline_style() {
filemtime( get_stylesheet_directory() . '/assets/js/button-unregister-styles.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'remove_button_outline_style', 20 );
add_action( 'enqueue_block_editor_assets', 'remove_button_outline_style', 20 );

/**
* Allow SVG and WEBP format in media uploader
*/
add_filter('wp_check_filetype_and_ext', 'muse_check_filetype_and_ext', 10, 4);
function muse_check_filetype_and_ext($data, $file, $filename, $mimes){
global $wp_version;

if ($wp_version !== '4.7.1') {
return $data;
}

$filetype = wp_check_filetype($filename, $mimes);

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}
add_filter('upload_mimes', 'muse_mime_types', 1, 1);
function muse_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
$mimes['svgz'] = 'image/svg+xml';
$mimes['webp'] = 'image/webp';
return $mimes;
}
/**
* Change hamburger menu icon according to Figma design
*/
function custom_render_block_core_navigation (string $block_content, array $block)
{
if (
$block['blockName'] === 'core/navigation' &&
!is_admin() &&
!wp_is_json_request()
) {
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">
<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"/>
<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"/>
<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"/>
</svg>', $block_content);
}

return $block_content;
}

add_filter('render_block', 'custom_render_block_core_navigation', null, 2);
20 changes: 20 additions & 0 deletions parts/header.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"34px","bottom":"0px"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-base-background-color has-background"
style="padding-top:34px;padding-bottom:0px">
<!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
<div class="wp-block-group alignwide">
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}},"layout":{"type":"flex"}} -->
<div class="wp-block-group">
<!-- wp:site-logo {"width":195 } /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left","alignSelf":"stretch"},"className":"header-navigation"} -->
<div class="wp-block-group header-navigation">
<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}}} /-->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
60 changes: 60 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,64 @@
> .wp-block-button__link:not(.has-text-color, .has-background):hover {
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--base);
}
header .wp-block-navigation {
flex-grow: 1;
}
header .wp-block-navigation .wp-block-navigation__responsive-container-content {
justify-content: space-between;
}
header .header-navigation {
width: 60%;
}
header .header-navigation ul.wp-block-navigation {
justify-content: flex-start;
gap: 58px;
}
header .header-navigation ul.wp-block-navigation li.current-menu-item {
color: var(--wp--preset--color--blue);
}
.wp-block-navigation__responsive-container-open:not(.always-shown) {
display: none;
}
@media screen and (max-width: 1199px) {
header .header-navigation {
width: auto;
}
.wp-block-navigation__responsive-container-open {
display: flex !important;
}
.wp-block-navigation__responsive-container-open:not(.always-shown) {
display: flex !important;
}
.wp-block-navigation__responsive-container {
display: none;
}
}
@media (min-width: 600px) and (max-width: 1199px) {
.wp-block-navigation__responsive-container-open:not(.always-shown) {
display: flex;
}
.wp-block-navigation__responsive-container {
display: none;
}
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none;
}
}
@media screen and (max-width: 480px) {
.wp-block-site-logo {
width: 130px;
}
header > .wp-block-group {
padding-top: 20px !important;
padding-left: 15px;
padding-right: 15px;
}
h1 {
font-size: var(--wp--preset--font-size--x-large);
}
h2 {
font-size: var(--wp--preset--font-size--large);
}
}
45 changes: 40 additions & 5 deletions theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
]
},
"layout": {
"contentSize": "620px",
"contentSize": "1200px",
"wideSize": "1280px"
},
"spacing": {
Expand Down Expand Up @@ -176,6 +176,12 @@
"name": "Body",
"size": "19px",
"slug": "body"
},
{
"fluid": false,
"name": "Menu",
"size": "16px",
"slug": "menu"
}
],
"writingMode": true
Expand Down Expand Up @@ -230,6 +236,28 @@
"lineHeight": "130%",
"letterSpacing": "0.96px"
}
},
"core/navigation": {
"elements": {
"link": {
":hover": {
"typography": {
"textDecoration": "underline"
}
},
"typography": {
"textDecoration": "none",
"fontSize":"var(--wp--preset--font-size--menu)",
"fontFamily":"var(--wp--preset--font-family--body)",
"fontStyle":"normal",
"fontWeight":"600",
"lineHeight":"1.3em"
}
}
},
"typography": {
"fontWeight": "500"
}
}
},
"color": {
Expand All @@ -246,15 +274,15 @@
},
":focus": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"background": "var(--wp--preset--color--blue)",
"text": "var(--wp--preset--color--base)"
},
"outline": {
"color": "var(--wp--preset--color--contrast)",
"color": "var(--wp--preset--color--blue)",
"offset": "2px"
},
"border": {
"color": "var(--wp--preset--color--contrast)"
"color": "var(--wp--preset--color--blue)"
}
},
":hover": {
Expand Down Expand Up @@ -372,5 +400,12 @@
"lineHeight": "1.4em"
},
"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;}"
}
},
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
}
]
}

0 comments on commit f3830aa

Please sign in to comment.