FEATURE Handling Instagram field

includes/navwalker.php

@@ -8,10 +8,20 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
 {
     // #### MENU HOMEGRADE HEADER
     if ($args->theme_location === "secondary"  && in_array('menu-item-has-children', $item->classes, true)) {
-
         $output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
     }
+    if ($args->theme_location === "primary" && in_array('menu-item-has-children', $item->classes, true)) {
+        $page_icon = get_field('page_icon', $item->object_id) ?? null;
+        $icon = isset($page_icon) && is_array($page_icon) && !empty($page_icon['url']) ? '<img class="page_icon" src="'  . $page_icon['url'] . '" alt=""/>' : '';
+        $output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $icon . $item->title . '</button>';
+    }
+    // write_log($item->classes);
+    if ($args->theme_location === "primary" && !in_array('menu-item-has-children', $item->classes, true)) {
 
+        $page_icon = get_field('page_icon', $item->object_id) ?? null;
+        $icon = isset($page_icon) && is_array($page_icon) && !empty($page_icon['url']) ? '<img class="page_icon" src="'  . $page_icon['url'] . '" alt=""/>' : '';
+        $output = '<a href="' . $item->url . '">' . $icon . $item->title . '</a>';
+    }
     return $output;
 }
 add_filter('walker_nav_menu_start_el', 'wrap_parent_menu_item_buttons', 10, 4);

includes/nawalker_fction.php

@@ -7,9 +7,11 @@
 function carhop_wrap_parent_menu_item_buttons($output, $item, $depth, $args)
 {
 	if ($args->theme_location === "primary") {
-		$page_icon = get_field('page_icon', $item->object_id);
+		$page_icon = get_field('page_icon', $item->object_id) ?? null;
+		// $test = get_field('page_icon', 729);
+		// write_log($test);
 
-		if (isset($page_icon)) {
+		if (isset($page_icon) && is_array($page_icon) && !empty($page_icon['url'])) {
 			$icon = '<img class="page_icon" src="'  . $page_icon['url'] . '" alt=""/>';
 			// Insérer l'icône à l'intérieur du lien (seulement la première occurrence)
 			$output = preg_replace('/>/', '>' . $icon, $output, 1);

includes/social-networks.php

@@ -51,6 +51,14 @@ function carhop_settings_init()
 		'carhop_section_social',
 		array('label_for' => 'youtube_url')
 	);
+	add_settings_field(
+		'instagram_url',
+		'URL Instagram',
+		'carhop_field_instagram_callback',
+		'carhop_options',
+		'carhop_section_social',
+		array('label_for' => 'instagram_url')
+	);
 }
 add_action('admin_init', 'carhop_settings_init');
 
@@ -89,6 +97,22 @@ function carhop_field_youtube_callback($args)
 		placeholder="https://youtube.com/votrechaine">
 <?php
 }
+
+function carhop_field_instagram_callback($args)
+{
+	$options = get_option('carhop_options');
+	$value = isset($options[$args['label_for']]) ? $options[$args['label_for']] : '';
+?>
+	<input type="url"
+		id="<?php echo esc_attr($args['label_for']); ?>"
+		name="carhop_options[<?php echo esc_attr($args['label_for']); ?>]"
+		value="<?php echo esc_attr($value); ?>"
+		class="regular-text"
+		placeholder="https://instagram.com/votreprofil">
+<?php
+}
+
+
 // Page HTML de l'interface d'options
 function carhop_options_page_html()
 {

resources/css/app.css

@@ -86,6 +86,7 @@
 @import './blocks/wp-block-table.css';
 @import './blocks/wp-block-details.css';
 @import './blocks/wp-block-image.css';
+@import './blocks/wp-block-buttons.css';
 
 @import './blocks/variants.css';
 

resources/css/base/base.css

@@ -20,3 +20,7 @@ ol li {
     content: counter(list-item) ' • ';
   }
 }
+
+.align-extra-wide {
+  max-width: var(--wp--style--global--wide-size, 1280px);
+}

resources/css/blocks/content-box.css

@@ -11,9 +11,18 @@
     background-color: var(--content-box-background-color, transparent);
   }
 
-  &.alignwide {
+  &.alignwide, &.aligncontained {
     @apply !mx-auto;
   }
+  &.aligncontained {
+    @apply !max-w-screen-lg ;
+    
+
+    
+  }
+  /* &.alignwide {
+    @apply max-w-screen-lg;
+  } */
 
   .wp-block-group {
   }
@@ -49,7 +58,16 @@
   }
 
   &__innerblocks {
-    @apply max-w-screen-lg mx-auto px-4 md:px-8;
+    @apply  mx-auto px-4 md:px-8;
+    >:not(.alignwide):not(.alignfull) {
+      @apply max-w-screen-lg mx-auto ;
+    } 
+    
+  }
+  &.alignwide .content-box__innerblocks{
+    >:not(.alignfull) {
+      @apply max-w-screen-xl mx-auto ;
+    } 
   }
   h3 {
     /* @apply title-small font-bold; */

resources/css/blocks/heading.css

@@ -33,7 +33,8 @@
   }
 
   &--hierarchy-inverted {
-    @apply text-white;
+    /* @apply text-white; */
+    color: var(--advised-text-color, inherit);
 
     h1,
     h2,
@@ -47,7 +48,9 @@
     }
   }
   &--hierarchy-classic {
-    @apply text-white;
+    /* @apply text-white; */
+    color: var(--advised-text-color, inherit);
+
     h1,
     h2,
     h3,

resources/css/blocks/wp-block-buttons.css

@@ -0,0 +1,49 @@
+.wp-block-buttons.is-style-big-buttons {
+  @apply mx-auto flex flex-col justify-center mt-4 mb-12;
+  @apply px-4;
+  @screen lg {
+    flex-direction: row;
+    @apply px-0;
+  }
+  .wp-block-button {
+    @apply shrink w-full;
+    flex-shrink: 1;
+    flex-grow: 1;
+    flex-basis: 100%;
+    @screen lg {
+      @apply w-fit;
+      flex-grow: 0;
+      flex-basis: calc(50% - var(--wp--style--block-gap, 0.5em) * 0.5);
+    }
+    .wp-block-button__link {
+      @apply fjalla uppercase text-left flex justify-between items-center bg-white text-primary;
+      @apply text-3xl;
+      &:after {
+        @apply content-[''] block w-16 h-16 bg-no-repeat;
+
+        transition: transform 0.3s ease-out;
+        background-image: url('../resources/img/carhop-fleche-full-green.svg');
+
+        margin-top: 0.5em;
+      }
+    }
+
+    &:hover {
+      .wp-block-button__link {
+        @apply bg-carhop-green-900 text-white;
+      }
+      .wp-block-button__link:after {
+        transform: translateX(10px);
+        filter: brightness(0) invert(1);
+      }
+    }
+  }
+}
+.wp-block-buttons {
+  @apply !max-w-screen-lg;
+}
+
+.wp-block-buttons.alignwide,
+.wp-block-buttons.alignfull {
+  @apply max-w-none;
+}

resources/css/layout/gutenberg.css

@@ -59,4 +59,13 @@ article > *:not(.entry-content),
       @apply font-bold;
     }
   }
+
+}
+
+.content-box{
+  &__innerblocks{
+    .block-editor-inner-blocks{
+      max-width: 960px !important;
+    }
+  }
 }

resources/css/layout/nav/primary-menu.css

@@ -108,6 +108,7 @@
 
     li.menu-item.has-page-icon {
       @apply gap-4 font-normal tracking-wide;
+      button,
       a {
         @apply flex flex-row lg:flex-col items-center justify-start lg:justify-end gap-4 font-normal tracking-wide;
       }
@@ -120,32 +121,77 @@
       }
     }
     li.menu-item.menu-item-has-children:hover {
+      &:hover .page_icon {
+        transform: none;
+      }
       @screen lg {
         .menu-item-submenu-toggle:after {
           transform: rotate(180deg);
         }
-        .sub-menu {
+        /* .sub-menu {
           display: block;
-        }
+        } */
       }
     }
     /* submenus */
     li .sub-menu {
-      @apply bg-primary 
+      @apply bg-carhop-green-700 
 			p-6
+      px-6
+
 			mx-auto
 			lg:mx-0
 			static
+			w-full
+      grid-cols-2
       lg:absolute;
       z-index: 999;
       display: none;
+      left: 0;
+      top: 100%;
+      opacity: 0;
+      translate: 0 -30px;
+      transition:
+        translate 0.3s ease-out,
+        display 0.3s,
+        opacity 0.3s;
+      transition-behavior: allow-discrete;
 
       &.sub-menu-open {
-        display: block;
+        display: grid;
+        opacity: 1;
+        translate: 0 0;
+
+        @starting-style {
+          opacity: 0;
+          translate: 0 -30px;
+        }
       }
 
       li {
-        @apply py-2 lg:text-left;
+        @apply lg:text-left;
+        border-bottom: 1px solid #fff;
+        &:nth-last-child(-n + 2),
+        &:last-child {
+          border-bottom: none;
+        }
+        @apply max-w-3xl w-full;
+
+        &:nth-child(odd) {
+          @apply ml-auto;
+        }
+        &.menu-item.has-page-icon a {
+          @apply flex gap-4 items-center justify-start flex-row p-6 py-8;
+          .page_icon {
+            @apply w-12 h-12;
+          }
+        }
+        &:hover {
+          @apply bg-black/10;
+          a {
+            @apply gap-12;
+          }
+        }
       }
 
       > a::after {
@@ -231,3 +277,28 @@
     }
   }
 }
+
+body:has(.primary-menu-container .sub-menu-open) {
+  main {
+    @apply relative;
+
+    &:after {
+      @apply absolute inset-0 bg-black/50 z-10;
+      backdrop-filter: blur(4px);
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 10;
+
+      transition: all 0.3s ease-out;
+      @starting-style {
+        backdrop-filter: blur(0px);
+        background-color: transparent;
+      }
+    }
+  }
+}