wall

Signed-off-by: Jeff <jeff@gotenzing.com>

+<?php
+
+/**
+ * Wall Block Template.
+ *
+ * @param   array $block The block settings and attributes.
+ * @param   string $content The block inner HTML (empty).
+ * @param   bool $is_preview True during AJAX preview.
+ * @param   (int|string) $post_id The post ID this block is saved to.
+ */
+
+?>
+<button class="toggle" id="direction-toggle">
+  <span>Toggle scroll axis</span>
+  <svg aria-hidden="true" viewBox="0 0 512 512" width="100" title="arrows-alt-h">
+    <path d="M377.941 169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296h243.882v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z" />
+  </svg>
+</button>
+<?php if( have_rows('wall') ): ?>  
+    <?php $rowCount = count( get_field('wall') );
+   $dir = get_field('direction');
+   if( $dir == 'right'){
+    $marquee = 'marquee--reverse';
+   }  ?> 
+    
+
+    <article class="wrapper">
+  <div class="marquee <?php echo  $marquee; ?>">
+    <div class="marquee__group">     
+            <?php while( the_repeater_field('wall') ): ?>
+                <?php $image = get_sub_field('image'); ?>
+               
+                        <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
+  
+           <?php endwhile; ?>
+         </div>
+         <div aria-hidden="true" class="marquee__group  <?php echo  $marquee; ?>">
+            <?php while( the_repeater_field('wall') ): ?>
+                <?php $image = get_sub_field('image'); ?>
+               
+                        <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
+  
+           <?php endwhile; ?>
+         </div>
+    </div>
+</div>
+
+
+<?php endif; ?>
+

@@ -16331,4 +16331,166 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
   padding: 0px;
   padding: 0px;
 }
 }
 
 
+:root {
+  --color-text: navy;
+  --color-bg: papayawhip;
+  --color-bg-accent: #ecdcc0;
+  --size: clamp(10rem, 1rem + 40vmin, 30rem);
+  --gap: calc(var(--size) / 14);
+  --duration: 60s;
+  --scroll-start: 0;
+  --scroll-end: calc(-100% - var(--gap));
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text: #fff;
+    --color-bg: fff;
+    --color-bg-accent: #fff;
+  }
+}
+.marquee {
+  display: flex;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  gap: var(--gap);
+  margin-right: -25%;
+  margin-left: -25%;
+}
+
+.marquee__group {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: var(--gap);
+  min-width: 100%;
+  animation: scroll-x var(--duration) linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .marquee__group {
+    animation-play-state: paused;
+  }
+}
+.marquee--vertical {
+  --mask-direction: to bottom;
+}
+
+.marquee--vertical,
+.marquee--vertical .marquee__group {
+  flex-direction: column;
+}
+
+.marquee--vertical .marquee__group {
+  animation-name: scroll-y;
+}
+
+.marquee--reverse .marquee__group {
+  animation-direction: reverse;
+  animation-delay: -3s;
+}
+
+@keyframes scroll-x {
+  from {
+    transform: translateX(var(--scroll-start));
+  }
+  to {
+    transform: translateX(var(--scroll-end));
+  }
+}
+@keyframes scroll-y {
+  from {
+    transform: translateY(var(--scroll-start));
+  }
+  to {
+    transform: translateY(var(--scroll-end));
+  }
+}
+/* Element styles */
+.marquee img {
+  display: grid;
+  place-items: center;
+  width: auto;
+  border-radius: 0;
+}
+
+/* Parent wrapper */
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  margin: auto;
+  max-width: 100vw;
+}
+
+.wrapper--vertical {
+  flex-direction: row;
+  height: 100vh;
+}
+
+/* Toggle direction button */
+.toggle {
+  --size: 3rem;
+  position: relative;
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  width: var(--size);
+  height: var(--size);
+  font: inherit;
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  border-radius: 50%;
+  color: inherit;
+  background-color: var(--color-bg-accent);
+  z-index: 1;
+}
+
+.toggle:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-text);
+}
+
+.toggle span {
+  position: absolute;
+  display: inline-block;
+  top: 50%;
+  left: calc(100% + 0.4em);
+  width: -moz-fit-content;
+  width: fit-content;
+  white-space: nowrap;
+  transform: translateY(-50%);
+  animation: fade 400ms 4s ease-out forwards;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.toggle svg {
+  --size: 1.5rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--size);
+  height: var(--size);
+  fill: currentcolor;
+  transform: translate(-50%, -50%);
+  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.toggle--vertical svg {
+  transform: translate(-50%, -50%) rotate(-90deg);
+}
+
+@keyframes fade {
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
 /*# sourceMappingURL=child-theme.css.map */
 /*# sourceMappingURL=child-theme.css.map */
\ No newline at end of file

@@ -23,5 +23,17 @@ function my_acf_init_block_types() {
             ]
             ]
         ));
         ));
 
 
+        acf_register_block_type( array(
+            'title'			=> __( 'Wall', 'client_textdomain' ),
+            'name'			=> 'wall',
+            'render_template'	=> 'blocks/wall/wall.php',
+            'mode'			=> 'edit',
+            'supports'		=> [
+                'align'			=> false,
+                'anchor'		=> true,
+                'customClassName'	=> true
+            ]
+        ));
+
 	}
 	}
 }
 }
\ No newline at end of file

@@ -17136,6 +17136,10 @@
 
 
 	// window.requestAnimationFrame(scrollPlay);
 	// window.requestAnimationFrame(scrollPlay);
 
 
+	/*
+	 JS to toggle scroll axis styles
+	*/
+
 	exports.Alert = alert;
 	exports.Alert = alert;
 	exports.Button = button;
 	exports.Button = button;
 	exports.Carousel = carousel;
 	exports.Carousel = carousel;

@@ -182,7 +182,6 @@ function numberWithCommas(x) {
 
 
 
 
 
 
-
 });  
 });  
 
 
 ScrollTrigger.refresh();
 ScrollTrigger.refresh();
@@ -212,3 +211,8 @@ ScrollTrigger.refresh();
 
 
 
 
 
 
+/*
+ JS to toggle scroll axis styles
+*/
+
+

@@ -16,4 +16,5 @@
 @import "theme/body";
 @import "theme/body";
 @import "theme/footer";
 @import "theme/footer";
 @import "theme/tabs";
 @import "theme/tabs";
-@import "theme/tiles";
\ No newline at end of file
+@import "theme/tiles";
+@import "theme/wall";
\ No newline at end of file

+:root {
+  --color-text: navy;
+  --color-bg: papayawhip;
+  --color-bg-accent: #ecdcc0;
+  --size: clamp(10rem, 1rem + 40vmin, 30rem);
+  --gap: calc(var(--size) / 14);
+  --duration: 60s;
+  --scroll-start: 0;
+  --scroll-end: calc(-100% - var(--gap));
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text: #fff;
+    --color-bg: fff;
+    --color-bg-accent: #fff;
+  }
+}
+
+
+.marquee {
+  display: flex;
+  overflow: hidden;
+  user-select: none;
+  gap: var(--gap);
+  margin-right: -25%;
+  margin-left: -25%;
+
+
+}
+
+.marquee__group {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: var(--gap);
+  min-width: 100%;
+  animation: scroll-x var(--duration) linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .marquee__group {
+    animation-play-state: paused;
+  }
+}
+
+.marquee--vertical {
+  --mask-direction: to bottom;
+}
+
+.marquee--vertical,
+.marquee--vertical .marquee__group {
+  flex-direction: column;
+}
+
+.marquee--vertical .marquee__group {
+  animation-name: scroll-y;
+}
+
+.marquee--reverse .marquee__group {
+  animation-direction: reverse;
+  animation-delay: -3s;
+}
+
+@keyframes scroll-x {
+  from {
+    transform: translateX(var(--scroll-start));
+  }
+  to {
+    transform: translateX(var(--scroll-end));
+  }
+}
+
+@keyframes scroll-y {
+  from {
+    transform: translateY(var(--scroll-start));
+  }
+  to {
+    transform: translateY(var(--scroll-end));
+  }
+}
+
+/* Element styles */
+.marquee img {
+  display: grid;
+  place-items: center;
+  width: auto;
+  border-radius: 0;
+}
+
+.marquee--vertical img {
+ 
+}
+
+/* Parent wrapper */
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  margin: auto;
+  max-width: 100vw;
+}
+
+.wrapper--vertical {
+  flex-direction: row;
+  height: 100vh;
+}
+
+/* Toggle direction button */
+.toggle {
+  --size: 3rem;
+  position: relative;
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  width: var(--size);
+  height: var(--size);
+  font: inherit;
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  border-radius: 50%;
+  color: inherit;
+  background-color: var(--color-bg-accent);
+  z-index: 1;
+}
+
+.toggle:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-text);
+}
+
+.toggle span {
+  position: absolute;
+  display: inline-block;
+  top: 50%;
+  left: calc(100% + 0.4em);
+  width: fit-content;
+  white-space: nowrap;
+  transform: translateY(-50%);
+  animation: fade 400ms 4s ease-out forwards;
+  user-select: none;
+}
+
+.toggle svg {
+  --size: 1.5rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--size);
+  height: var(--size);
+  fill: currentcolor;
+  transform: translate(-50%, -50%);
+  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.toggle--vertical svg {
+  transform: translate(-50%, -50%) rotate(-90deg);
+}
+
+@keyframes fade {
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}