Fix: Pattern Card Spacing Variables and Sticky Menu Scroll Offset (#818)

* Remove hardcoded css values from patterns

* Create default spacing variables for fallback when a theme doesn't use them

* Update changelog

* Add small padding to the scroll

* Fix scroll position calculation and focus behavior in sticky menu

* Keep json comment in sync with css, update changelog

* Remove unnecessary attribute

Author: tibiii

build/blocks/sticky-menu/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'cf51a72123735683e0ba');
+<?php return array('dependencies' => array(), 'version' => 'c8f455b8491acabcf94e');

build/blocks/sticky-menu/view.js

@@ -7,6 +7,7 @@
 #### Build & Pattern Infrastructure
 
 - **Pattern Registration Infrastructure** - Established directory structure and registration system for tour operator patterns with proper categorization and template support - PR[#803](https://github.com/lightspeedwp/tour-operator/pull/803), Issue [#795](https://github.com/lightspeedwp/tour-operator/issues/795)
+- **Spacing Variables with Theme Inheritance** - Added CSS spacing variables (`--wp--preset--spacing--10` through `--wp--preset--spacing--80`) with zero-specificity fallbacks using `:where()` selector to ensure theme values take precedence while providing consistent rem-based fallback values for patterns and templates when theme doesn't define them PR [#818](https://github.com/lightspeedwp/tour-operator/pull/818)
 
 #### Patterns
 

build/style-rtl.css

@@ -36,13 +36,13 @@
 <div class="wp-block-group center-vertically" style="min-height:3.75rem"><!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"elements":{"link":{":hover":{"color":{"text":"var:preset|color|primary-700"}}}}},"fontSize":"large"} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Accommodation Information', 'tour-operator' ) . '"},"className":"lsx-accommodation-info","style":{"spacing":{"padding":{"left":"var:preset|spacing|20","right":"var:preset|spacing|20","top":"0.63rem","bottom":"0.63rem"},"blockGap":"0"},"border":{"top":{"width":"1px"},"bottom":{"width":"1px"}}},"fontSize":"medium","layout":{"type":"default"},"ariaLabel":"' . esc_attr__( 'Accommodation details', 'tour-operator' ) . '"} -->
-<div aria-label="' . esc_attr__( 'Accommodation details', 'tour-operator' ) . '" class="wp-block-group lsx-accommodation-info has-medium-font-size" style="border-top-width:1px;border-bottom-width:1px;padding-top:0.63rem;padding-right:var(--wp--preset--spacing--20);padding-bottom:0.63rem;padding-left:var(--wp--preset--spacing--20)"><!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Price Row', 'tour-operator' ) . '"},"className":"lsx-price-wrapper","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
-<div class="wp-block-group lsx-price-wrapper"><!-- wp:group {"className":"lsx-info-label","style":{"spacing":{"blockGap":"0.3125rem"},"layout":{"selfStretch":"fixed","flexSize":"6rem"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+<!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Accommodation Information', 'tour-operator' ) . '"},"className":"lsx-accommodation-info","style":{"spacing":{"padding":{"left":"var:preset|spacing|20","right":"var:preset|spacing|20","top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"},"blockGap":"0"},"border":{"top":{"width":"1px"},"bottom":{"width":"1px"}}},"fontSize":"medium","layout":{"type":"default"},"ariaLabel":"' . esc_attr__( 'Accommodation details', 'tour-operator' ) . '"} -->
+<div aria-label="' . esc_attr__( 'Accommodation details', 'tour-operator' ) . '" class="wp-block-group lsx-accommodation-info has-medium-font-size" style="border-top-width:1px;border-bottom-width:1px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Price Row', 'tour-operator' ) . '"},"className":"lsx-price-wrapper","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+<div class="wp-block-group lsx-price-wrapper"><!-- wp:group {"className":"lsx-info-label","style":{"spacing":{"blockGap":"var:preset|spacing|10"},"layout":{"selfStretch":"fixed"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
 <div class="wp-block-group lsx-info-label"><!-- wp:lsx-tour-operator/icons {"iconName":"priceIcon"} /-->
 
-<!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"0.125rem","bottom":"0.125rem"}}}} -->
-<p style="padding-top:0.125rem;padding-bottom:0.125rem">' . esc_html__( 'From:', 'tour-operator' ) . '</p>
+<!-- wp:paragraph -->
+<p>' . esc_html__( 'From:', 'tour-operator' ) . '</p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->
 
@@ -51,26 +51,26 @@
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Type Row', 'tour-operator' ) . '"},"className":"lsx-accommodation-type-wrapper","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
-<div class="wp-block-group lsx-accommodation-type-wrapper"><!-- wp:group {"className":"lsx-info-label","style":{"spacing":{"blockGap":"0.3125rem"},"layout":{"selfStretch":"fixed","flexSize":"6rem"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+<!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Type Row', 'tour-operator' ) . '"},"className":"lsx-accommodation-type-wrapper","style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+<div class="wp-block-group lsx-accommodation-type-wrapper"><!-- wp:group {"className":"lsx-info-label","style":{"spacing":{"blockGap":"var:preset|spacing|10"},"layout":{"selfStretch":"fixed"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
 <div class="wp-block-group lsx-info-label"><!-- wp:lsx-tour-operator/icons {"iconType":"solid","iconName":"accommodationTypeIcon"} /-->
 
-<!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"0.125rem","bottom":"0.125rem"}}}} -->
-<p style="padding-top:0.125rem;padding-bottom:0.125rem">' . esc_html__( 'Type:', 'tour-operator' ) . '</p>
+<!-- wp:paragraph -->
+<p>' . esc_html__( 'Type:', 'tour-operator' ) . '</p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->
 
 <!-- wp:group {"className":"lsx-info-value","style":{"spacing":{"padding":{"top":"0.125rem","bottom":"0.125rem"},"blockGap":"0"}},"layout":{"type":"default"}} -->
-<div class="wp-block-group lsx-info-value" style="padding-top:0.125rem;padding-bottom:0.125rem"><!-- wp:post-terms {"term":"accommodation-type","className":"is-style-default","style":{"elements":{"link":{":hover":{"color":{"text":"var:preset|color|primary-700"}}}}},"fontSize":"medium"} /--></div>
+<div class="wp-block-group lsx-info-value"><!-- wp:post-terms {"term":"accommodation-type","className":"is-style-default","style":{"elements":{"link":{":hover":{"color":{"text":"var:preset|color|primary-700"}}}}},"fontSize":"medium"} /--></div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Rooms Row', 'tour-operator' ) . '"},"className":"lsx-number-of-rooms-wrapper","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
-<div class="wp-block-group lsx-number-of-rooms-wrapper"><!-- wp:group {"className":"lsx-info-label","style":{"spacing":{"blockGap":"0.3125rem"},"layout":{"selfStretch":"fixed","flexSize":"6rem"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+<!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Rooms Row', 'tour-operator' ) . '"},"className":"lsx-number-of-rooms-wrapper","style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+<div class="wp-block-group lsx-number-of-rooms-wrapper"><!-- wp:group {"className":"lsx-info-label","style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
 <div class="wp-block-group lsx-info-label"><!-- wp:lsx-tour-operator/icons {"iconType":"solid","iconName":"roomBasisIcon"} /-->
 
-<!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"0.125rem","bottom":"0.125rem"}}}} -->
-<p style="padding-top:0.125rem;padding-bottom:0.125rem">' . esc_html__( 'Rooms:', 'tour-operator' ) . '</p>
+<!-- wp:paragraph -->
+<p>' . esc_html__( 'Rooms:', 'tour-operator' ) . '</p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->
 

build/style.css

@@ -36,9 +36,9 @@
 <div class="wp-block-group center-vertically" style="min-height:3.75rem"><!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"elements":{"link":{":hover":{"color":{"text":"var:preset|color|primary-700"}}}}},"fontSize":"large"} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Tour Information', 'tour-operator' ) . '"},"className":"lsx-tour-info","style":{"spacing":{"padding":{"left":"var:preset|spacing|20","right":"var:preset|spacing|20","top":"0.63rem","bottom":"0.63rem"},"blockGap":"0"},"border":{"top":{"width":"1px"},"bottom":{"width":"1px"}}},"fontSize":"medium","layout":{"type":"default"},"ariaLabel":"' . esc_attr__( 'Tour details', 'tour-operator' ) . '"} -->
-<div aria-label="' . esc_attr__( 'Tour details', 'tour-operator' ) . '" class="wp-block-group lsx-tour-info has-medium-font-size" style="border-top-width:1px;border-bottom-width:1px;padding-top:0.63rem;padding-right:var(--wp--preset--spacing--20);padding-bottom:0.63rem;padding-left:var(--wp--preset--spacing--20)"><!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Price Row', 'tour-operator' ) . '"},"className":"lsx-price-wrapper","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
-<div class="wp-block-group lsx-price-wrapper"><!-- wp:group {"className":"lsx-info-label","style":{"spacing":{"blockGap":"0.3125rem"},"layout":{"selfStretch":"fixed","flexSize":"6.25rem"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+<!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Tour Information', 'tour-operator' ) . '"},"className":"lsx-tour-info","style":{"spacing":{"padding":{"left":"var:preset|spacing|20","right":"var:preset|spacing|20","top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"},"blockGap":"0"},"border":{"top":{"width":"1px"},"bottom":{"width":"1px"}}},"fontSize":"medium","layout":{"type":"default"},"ariaLabel":"' . esc_attr__( 'Tour details', 'tour-operator' ) . '"} -->
+<div aria-label="' . esc_attr__( 'Tour details', 'tour-operator' ) . '" class="wp-block-group lsx-tour-info has-medium-font-size" style="border-top-width:1px;border-bottom-width:1px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Price Row', 'tour-operator' ) . '"},"className":"lsx-price-wrapper","style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+<div class="wp-block-group lsx-price-wrapper"><!-- wp:group {"className":"lsx-info-label","style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
 <div class="wp-block-group lsx-info-label"><!-- wp:lsx-tour-operator/icons {"iconName":"priceIcon"} /-->
 
 <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"0.125rem","bottom":"0.125rem"}}}} -->
@@ -51,16 +51,16 @@
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Duration Row', 'tour-operator' ) . '"},"className":"lsx-duration-wrapper","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
-<div class="wp-block-group lsx-duration-wrapper"><!-- wp:group {"className":"lsx-info-label","style":{"spacing":{"blockGap":"0.3125rem"},"layout":{"selfStretch":"fixed","flexSize":"6.25rem"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+<!-- wp:group {"metadata":{"name":"' . esc_attr__( 'Duration Row', 'tour-operator' ) . '"},"className":"lsx-duration-wrapper","style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+<div class="wp-block-group lsx-duration-wrapper"><!-- wp:group {"className":"lsx-info-label","style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
 <div class="wp-block-group lsx-info-label"><!-- wp:lsx-tour-operator/icons {"iconName":"durationIcon"} /-->
 
 <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"0.125rem","bottom":"0.125rem"}}}} -->
 <p style="padding-top:0.125rem;padding-bottom:0.125rem">' . esc_html__( 'Duration:', 'tour-operator' ) . '</p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"className":"lsx-info-value","style":{"spacing":{"padding":{"top":"0.125rem","bottom":"0.125rem"},"blockGap":"0.25rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<!-- wp:group {"className":"lsx-info-value","style":{"spacing":{"padding":{"top":"0.125rem","bottom":"0.125rem"},"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 <div class="wp-block-group lsx-info-value" style="padding-top:0.125rem;padding-bottom:0.125rem"><!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"lsx/post-meta","args":{"key":"duration"}},"__default":{"source":"core/pattern-overrides"}},"name":"' . esc_attr__( 'Duration', 'tour-operator' ) . '"}} -->
 <p></p>
 <!-- /wp:paragraph -->

changelog.md

@@ -62,7 +62,7 @@ lsx_to.scroll_to_section = function (section_id) {
 
         // Use getBoundingClientRect for accurate position relative to viewport
         const rect = section.getBoundingClientRect();
-        const top = window.pageYOffset + rect.top - offset;
+        const top = window.pageYOffset + rect.top - offset + 5;
 
         // Check user's motion preference
         const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -88,8 +88,8 @@ lsx_to.scroll_to_section = function (section_id) {
                 section.setAttribute('tabindex', '-1');
             }
 
-            // Focus the section
-            section.focus();
+            // Focus the section without scrolling (preventScroll prevents interference)
+            section.focus({ preventScroll: true });
 
             // Remove temporary tabindex if we added it
             if (!originalTabIndex) {

patterns/accommodation-card.php

@@ -243,11 +243,11 @@
 
 	.slick-arrow {
 	  &.slick-prev {
-		left: -4rem;
+		left: -2rem;
 	  }
 
 	  &.slick-next {
-		right: -4rem;
+		right: -2rem;
 	  }
 	}
 

patterns/tour-card.php

@@ -0,0 +1,35 @@
+/**
+ * Tour Operator CSS Variables
+ *
+ * Spacing variables that inherit from WordPress theme presets with fallback values.
+ * These values ensure consistent spacing throughout patterns and templates.
+ *
+ * @package LightSpeed_Tour_Operator
+ */
+
+/**
+ * Spacing Scale Fallbacks
+ * These use :where() for zero specificity, allowing theme values to always take precedence.
+ * If the theme doesn't define these variables, these fallback values will be used.
+ * Base: 1rem = 16px (default browser setting)
+ *
+ * Scale ratios:
+ * - 10: 0.125rem (2px)   - Extra small
+ * - 20: 0.5rem (8px)     - Small
+ * - 30: 1rem (16px)      - Medium
+ * - 40: 2rem (32px)      - Large
+ * - 50: 3rem (48px)      - Extra large
+ * - 60: 4rem (64px)      - 2X large
+ * - 70: 5rem (80px)      - 3X large
+ * - 80: 6rem (96px)      - 4X large
+ */
+:where(:root) {
+	--wp--preset--spacing--10: 0.125rem;
+	--wp--preset--spacing--20: 0.5rem;
+	--wp--preset--spacing--30: 1rem;
+	--wp--preset--spacing--40: 2rem;
+	--wp--preset--spacing--50: 3rem;
+	--wp--preset--spacing--60: 4rem;
+	--wp--preset--spacing--70: 5rem;
+	--wp--preset--spacing--80: 6rem;
+}