Fix: Pattern Card Spacing Variables and Sticky Menu Scroll Offset#818
Fix: Pattern Card Spacing Variables and Sticky Menu Scroll Offset#818
Conversation
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
github-actions
bot
added
lang:php
|
Caution Review failedThe pull request is closed. Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Warning
|
| Cohort / File(s) | Summary |
|---|---|
Spacing variables & stylesheet build outputs src/css/_variables.scss, src/css/index.scss, build/style.css, build/style-rtl.css |
Adds a new SCSS variables module declaring --wp--preset--spacing--* tokens (rem fallbacks under :where(:root)), imports it in index.scss, and includes these root-level custom properties in the compiled CSS outputs. |
Sticky-menu behaviour & build asset src/blocks/sticky-menu/view.js, build/blocks/sticky-menu/view.js, build/blocks/sticky-menu/view.asset.php |
In scroll_to_section the computed top adds +5px and focus calls use focus({ preventScroll: true }); built asset PHP version/hash updated. |
Pattern spacing and text tweak patterns/accommodation-card.php, patterns/tour-card.php |
Replaces fixed paddings/gaps with theme spacing tokens (`var:preset |
Slider arrow offset src/css/_slider.scss |
Reduces horizontal offset for .slick-prev / .slick-next from -4rem to -2rem. |
Changelog changelog.md |
Documents the addition of spacing variables with theme-inheritance fallbacks and related changes. |
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~25 minutes
- Review
src/blocks/sticky-menu/view.jsfor focus/accessibility edge cases and the +5px scroll adjustment. - Confirm
:where(:root)variable use allows theme overrides and check compiledbuild/style*.cssfor duplication or specificity issues. - Validate pattern spacing substitutions and the "From:" label change render as intended across breakpoints.
- Verify slider arrow position across responsive breakpoints.
Possibly related PRs
- PR: Sticky Menu Mobile UX - First Section Open by Default #817 — touches sticky-menu scroll/focus behaviour and built assets; closely related.
- feat: Add Sticky Menu Block with Desktop/Mobile Navigation #684 — earlier edits to sticky-menu frontend affecting the same function.
- feat: Enhance Sticky Menu Block with Improved Inspector Controls, UX, and Keyboard Accessibility #773 — overlaps on scroll target and focus changes in the sticky-menu implementation.
Suggested reviewers
- krugazul
Poem
🐰 I hopped through styles with gentle paws,
I planted tokens, fixed the laws,
I nudged the scroll by five small ticks,
Tucked arrows in and changed some ticks,
The layout breathes — a tiny cause ✨
Pre-merge checks and finishing touches
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title accurately describes the two main changes: pattern card spacing variables and sticky menu scroll offset adjustments, both of which are prominent in the changeset. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
📜 Recent review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
patterns/accommodation-card.php(2 hunks)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
github-actions
bot
added
the
meta:needs-changelog
Summary of ChangesHello @tibiii, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly refines the user experience by standardizing spacing across pattern cards and improving the precision of the sticky menu's scroll-to-section functionality. It introduces a robust system for managing CSS spacing variables, allowing for greater theme compatibility and reducing reliance on hardcoded values within patterns. The adjustment to the sticky menu ensures smoother and more accurate navigation. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces new CSS custom properties for spacing (--wp--preset--spacing-10 through --wp--preset--spacing-80) with low-specificity fallbacks using the :where() selector, allowing themes to easily override these values. These new spacing variables are then applied to various block patterns, including accommodation-card.php and tour-card.php, replacing hardcoded rem values for padding and block gaps. The sticky menu's scroll-to-section functionality was adjusted by adding a -5 pixel offset for more accurate scrolling, and the positioning of slick slider navigation arrows was changed from -4rem to -2rem. Review comments suggest reintroducing a fixed width for info labels in block patterns to prevent misalignment and updating block pattern JSON to reflect the removal of inline padding styles for consistency. Additionally, the -5 pixel scroll offset was identified as a 'magic number' and a named constant was recommended for clarity.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
patterns/tour-card.php (1)
40-73: Add fallback values to CSS variables in inline styles.The file correctly uses
var:preset|spacing|XXformat in JSON block attributes andvar(--wp--preset--spacing--XX)syntax in inline styles. However, per coding guidelines, all CSS variables in inlinestyleattributes should include fallback values. Update lines 34, 40, and 76 to use format:var(--wp--preset--spacing--20, 32px)with appropriate pixel fallbacks based on preset definitions (e.g., spacing-20≈32px, spacing-30≈48px).
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (11)
build/blocks/sticky-menu/view.asset.php(1 hunks)build/blocks/sticky-menu/view.js(1 hunks)build/style-rtl.css(1 hunks)build/style.css(1 hunks)changelog.md(1 hunks)patterns/accommodation-card.php(1 hunks)patterns/tour-card.php(2 hunks)src/blocks/sticky-menu/view.js(1 hunks)src/css/_slider.scss(1 hunks)src/css/_variables.scss(1 hunks)src/css/index.scss(1 hunks)
🧰 Additional context used
📓 Path-based instructions (18)
**/*.{js,jsx,ts,tsx,php,scss,css}
📄 CodeRabbit inference engine (GEMINI.md)
Use camelCase for variable and function names, kebab-case for CSS classes, and snake_case for PHP variable names per WordPress Coding Standards
Files:
src/css/_variables.scsssrc/css/_slider.scssbuild/style-rtl.csspatterns/tour-card.phpsrc/css/index.scsssrc/blocks/sticky-menu/view.jsbuild/blocks/sticky-menu/view.asset.phppatterns/accommodation-card.phpbuild/blocks/sticky-menu/view.jsbuild/style.css
**/*.{js,jsx,ts,tsx,scss,css}
📄 CodeRabbit inference engine (GEMINI.md)
For performance optimization, implement code splitting, lazy loading, and minimize CSS/JavaScript bundle sizes in block components
Files:
src/css/_variables.scsssrc/css/_slider.scssbuild/style-rtl.csssrc/css/index.scsssrc/blocks/sticky-menu/view.jsbuild/blocks/sticky-menu/view.jsbuild/style.css
**/*.{php,js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (GEMINI.md)
Follow WordPress Coding Standards including proper namespacing, security practices (sanitization/escaping), and code organization
Files:
patterns/tour-card.phpsrc/blocks/sticky-menu/view.jsbuild/blocks/sticky-menu/view.asset.phppatterns/accommodation-card.phpbuild/blocks/sticky-menu/view.js
**/*.{js,jsx,ts,tsx,php}
📄 CodeRabbit inference engine (GEMINI.md)
Implement accessibility features following WCAG 2.2 AA standards in all block components and patterns
Files:
patterns/tour-card.phpsrc/blocks/sticky-menu/view.jsbuild/blocks/sticky-menu/view.asset.phppatterns/accommodation-card.phpbuild/blocks/sticky-menu/view.js
**/*.{php,js,jsx,ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Validate generated code against WordPress standards, test thoroughly, check security implications, and review for proper sanitization/escaping
Files:
patterns/tour-card.phpsrc/blocks/sticky-menu/view.jsbuild/blocks/sticky-menu/view.asset.phppatterns/accommodation-card.phpbuild/blocks/sticky-menu/view.js
**/*tour*.{php,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Include all meta tags, schema.org markup, and SEO-related data in tour listing and detail components for proper search engine indexing
Files:
patterns/tour-card.php
**/*.php
📄 CodeRabbit inference engine (AGENTS.md)
Follow WordPress Coding Standards (WPCS) for all WordPress code
**/*.php: Store block patterns in the/patterns/directory at the root of the plugin (WordPress standard for plugins), not in/includes/patterns/
Use text domain 'tour-operator' for all localization strings in the plugin
Files:
patterns/tour-card.phpbuild/blocks/sticky-menu/view.asset.phppatterns/accommodation-card.php
**/patterns/*.php
📄 CodeRabbit inference engine (.github/instructions/figma-to-wordpress-pattern-extraction.instructions.md)
**/patterns/*.php: WordPress pattern PHP files must be located in /patterns/[pattern-slug].php at root level with required metadata in PHP DocBlock
Use plugin constants like LSX_TO_URL for asset paths in pattern files, not theme functions like get_template_directory_uri()
Always use 'tour-operator' as the text domain for internationalization functions in WordPress pattern files
Wrap all user-facing text in internationalization functions (esc_html_e(), (), esc_attr()) in WordPress pattern files
Preserve Figma layer names in WordPress blocks using the metadata attribute with 'name' property
Use block binding source 'lsx/post-meta' for custom data connections in WordPress block patterns
Use self-closing block syntax for dynamic/static blocks (e.g., lsx-tour-operator/icons, post-featured-image) that render via PHP
Do not embed SVG markup directly in icon block patterns; use self-closing icon block syntax to allow dynamic rendering
Include absolute fallback values (hex colors, rem sizes) for all CSS variables in inline styles within WordPress patterns
Use WordPress preset slug format in JSON block attributes (var:preset|color|slug format) separately from inline CSS fallback syntax
Add PHP DocBlock metadata with title, slug (tour-operator/pattern-name format), description, categories, keywords, block types, and post types to WordPress pattern files
Use LSX_TO_URL constant to reference plugin assets instead of theme asset functions in pattern content strings
Include the phpcs:ignoreFile comment for PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage at the top of WordPress pattern PHP files
Use available icon block attributes (iconType: 'outline'|'solid', iconName from icon library) in lsx-tour-operator/icons blocks within patterns
**/patterns/*.php: Use PHP array return format for plugin patterns instead of file header comments (unlike themes where patterns auto-register from/patterns/using file headers)
Include required pattern properties: 'title' and e...
Files:
patterns/tour-card.phppatterns/accommodation-card.php
**/*.{php,html}
📄 CodeRabbit inference engine (.github/instructions/patterns-templates-refactoring.instructions.md)
**/*.{php,html}: Always useLSX_TO_URLandLSX_TO_PATHconstants for asset paths in plugin files
Include CSS variable fallbacks with absolute hex values in inline styles for plugin compatibility with any theme
Use CSS variable formatvar(--wp--preset--[type]--[name], fallback_value)in inline styles, notvar:preset|[type]|[name]format
Usevar:preset|[type]|[name]format only within JSON block attributes, not in inline styles
Use the correct spacing preset names: 'tiny' (10px), 'small' (16px), 'medium' (32px), 'large' (48px), and 'x-small' (8px)
Files:
patterns/tour-card.phpbuild/blocks/sticky-menu/view.asset.phppatterns/accommodation-card.php
**/{patterns,templates,parts}/*.{php,html}
📄 CodeRabbit inference engine (.github/instructions/patterns-templates-refactoring.instructions.md)
**/{patterns,templates,parts}/*.{php,html}: For icon blocks, use self-closing syntax and never embed HTML content inside icon block markup to prevent validation errors
Use primary color preset for buttons, borders, and main brand elements; use 'contrast' preset for text/links; use 'base' for white backgrounds
Files:
patterns/tour-card.phppatterns/accommodation-card.php
**/{templates,patterns,parts}/*.{php,html}
📄 CodeRabbit inference engine (.github/instructions/patterns-templates-refactoring.instructions.md)
Use wide alignment constraint for main content containers in single templates and align-full for full-width sections like breadcrumbs
Files:
patterns/tour-card.phppatterns/accommodation-card.php
**/*.{php,twig}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not generate .php, .twig, or legacy CMS files
Files:
patterns/tour-card.phpbuild/blocks/sticky-menu/view.asset.phppatterns/accommodation-card.php
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use semicolons to terminate statements in JavaScript block code
Ensure all generated code follows ESLint rules and WordPress Coding Standards before deployment
Files:
src/blocks/sticky-menu/view.jsbuild/blocks/sticky-menu/view.js
src/blocks/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Block API v3 standards when developing blocks
Files:
src/blocks/sticky-menu/view.js
{src/blocks/**/*.{js,jsx,ts,tsx},src/**/*.php,inc/**/*.php}
📄 CodeRabbit inference engine (AGENTS.md)
Apply WCAG 2.2 AA accessibility standards to all blocks and UI components
Files:
src/blocks/sticky-menu/view.js
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,ts,tsx,jsx}: Use async/await syntax; avoid .then() chains
Use named exports; avoid default exports unless wrapping a module
Files:
src/blocks/sticky-menu/view.jsbuild/blocks/sticky-menu/view.js
src/**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{js,ts,tsx,jsx}: Document public functions with JSDoc
Do not include any WordPress-related imports, functions, or file structures
Do not reference or assume plugins like WooCommerce or Wetu
Files:
src/blocks/sticky-menu/view.js
**/blocks/**/*.php
📄 CodeRabbit inference engine (CLAUDE.md)
PHP render callbacks must be properly documented with descriptions of attributes and return values
Files:
build/blocks/sticky-menu/view.asset.php
🧬 Code graph analysis (1)
build/blocks/sticky-menu/view.js (1)
src/js/custom.js (1)
lsx_to(8-8)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Summary
🔇 Additional comments (8)
build/blocks/sticky-menu/view.asset.php (1)
1-1: LGTM!This is an auto-generated build asset file. The version hash update correctly reflects the changes made to the source
view.jsfile.src/css/_slider.scss (1)
246-250: LGTM!The slider arrow positioning adjustment from
-4remto-2remis applied consistently to both.slick-prevand.slick-next. This brings the navigation arrows closer to the slider content edge.src/css/index.scss (1)
5-5: LGTM!The
variablesmodule is correctly imported before other modules, ensuring CSS spacing variables are available to subsequent imports likeslider. Using@useis the modern SCSS approach.build/style.css (1)
1-1: LGTM!The compiled CSS correctly includes:
- Spacing variable fallbacks using
:where(:root)for zero-specificity, ensuring theme definitions take precedence- WordPress-aligned naming (
--wp--preset--spacing--10through--80)- rem-based values which respect user font size preferences for better accessibility
- Updated slider arrow positions (
-2rem) as modified in the sourceThe spacing scale progression (0.125rem → 6rem) provides good granularity for layout flexibility.
build/blocks/sticky-menu/view.js (1)
1-1: Approve with note on the scroll offset buffer.The 5px scroll offset buffer addition (
window.pageYOffset+n.top-o-5) addresses the sticky menu scroll positioning improvement mentioned in the PR objectives. This is a build artifact; the magic number5should ideally be documented or made configurable in the source file (src/blocks/sticky-menu/view.js) for maintainability.The implementation correctly:
- Accounts for admin bar, fixed header, and navigation heights
- Respects
prefers-reduced-motionfor accessibility- Includes proper ARIA attributes and screen reader announcements
Consider documenting the 5px buffer rationale in the source file:
#!/bin/bash # Check the source file for comments explaining the 5px offset rg -n -C3 'pageYOffset.*top.*offset' src/blocks/sticky-menu/view.jssrc/blocks/sticky-menu/view.js (1)
65-65: LGTM! Scroll offset buffer improves positioning accuracy.The additional 5-pixel buffer ensures sticky menu items align more precisely when scrolling to sections, accounting for potential pixel rounding or border widths in the layout.
src/css/_variables.scss (1)
1-35: Excellent implementation of theme-aware spacing tokens.The use of
:where(:root)ensures zero specificity, allowing theme-defined spacing values to take precedence whilst providing sensible rem-based fallbacks. The documentation clearly explains the scale ratios and purpose.patterns/tour-card.php (1)
45-45: Good improvement to label clarity.Changing the price label from "Price:" to "From:" better indicates that the displayed price is a starting price, which is common practice for tour pricing.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
patterns/accommodation-card.php (3)
35-35: Add fallback values to CSS variables in inline styles.The inline
styleattribute on line 35 usesvar(--wp--preset--spacing--30)without fallback values. According to the coding guidelines, all CSS variables in inline styles within WordPress patterns must include absolute fallback values (hex colors, rem sizes) for theme compatibility.🔎 Apply this diff to add fallback values:
-<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"> +<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--30, 2rem);padding-left:var(--wp--preset--spacing--30, 2rem)">As per coding guidelines, inline styles must include fallback values.
84-84: Add fallback values to CSS variables in inline styles.The inline
styleattribute on line 84 usesvar(--wp--preset--spacing--20)three times without fallback values. According to the coding guidelines, all CSS variables in inline styles within WordPress patterns must include absolute fallback values for theme compatibility.🔎 Apply this diff to add fallback values:
-<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"> +<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--20, 1rem);padding-bottom:var(--wp--preset--spacing--20, 1rem);padding-left:var(--wp--preset--spacing--20, 1rem)">As per coding guidelines, inline styles must include fallback values.
40-40: Add fallback values to CSS variables in inline styles.The inline
styleattribute on line 40 usesvar(--wp--preset--spacing--20)four times without fallback values. According to the coding guidelines, all CSS variables in inline styles within WordPress patterns must include absolute fallback values for theme compatibility.🔎 Apply this diff to add fallback values:
-<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)"> +<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, 1rem);padding-right:var(--wp--preset--spacing--20, 1rem);padding-bottom:var(--wp--preset--spacing--20, 1rem);padding-left:var(--wp--preset--spacing--20, 1rem)">As per coding guidelines, inline styles must include fallback values.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
changelog.md(1 hunks)patterns/accommodation-card.php(2 hunks)
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{php,js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (GEMINI.md)
Follow WordPress Coding Standards including proper namespacing, security practices (sanitization/escaping), and code organization
Files:
patterns/accommodation-card.php
**/*.{js,jsx,ts,tsx,php}
📄 CodeRabbit inference engine (GEMINI.md)
Implement accessibility features following WCAG 2.2 AA standards in all block components and patterns
Files:
patterns/accommodation-card.php
**/*.{php,js,jsx,ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Validate generated code against WordPress standards, test thoroughly, check security implications, and review for proper sanitization/escaping
Files:
patterns/accommodation-card.php
**/*.{js,jsx,ts,tsx,php,scss,css}
📄 CodeRabbit inference engine (GEMINI.md)
Use camelCase for variable and function names, kebab-case for CSS classes, and snake_case for PHP variable names per WordPress Coding Standards
Files:
patterns/accommodation-card.php
**/*.php
📄 CodeRabbit inference engine (AGENTS.md)
Follow WordPress Coding Standards (WPCS) for all WordPress code
**/*.php: Store block patterns in the/patterns/directory at the root of the plugin (WordPress standard for plugins), not in/includes/patterns/
Use text domain 'tour-operator' for all localization strings in the plugin
Files:
patterns/accommodation-card.php
**/patterns/*.php
📄 CodeRabbit inference engine (.github/instructions/figma-to-wordpress-pattern-extraction.instructions.md)
**/patterns/*.php: WordPress pattern PHP files must be located in /patterns/[pattern-slug].php at root level with required metadata in PHP DocBlock
Use plugin constants like LSX_TO_URL for asset paths in pattern files, not theme functions like get_template_directory_uri()
Always use 'tour-operator' as the text domain for internationalization functions in WordPress pattern files
Wrap all user-facing text in internationalization functions (esc_html_e(), (), esc_attr()) in WordPress pattern files
Preserve Figma layer names in WordPress blocks using the metadata attribute with 'name' property
Use block binding source 'lsx/post-meta' for custom data connections in WordPress block patterns
Use self-closing block syntax for dynamic/static blocks (e.g., lsx-tour-operator/icons, post-featured-image) that render via PHP
Do not embed SVG markup directly in icon block patterns; use self-closing icon block syntax to allow dynamic rendering
Include absolute fallback values (hex colors, rem sizes) for all CSS variables in inline styles within WordPress patterns
Use WordPress preset slug format in JSON block attributes (var:preset|color|slug format) separately from inline CSS fallback syntax
Add PHP DocBlock metadata with title, slug (tour-operator/pattern-name format), description, categories, keywords, block types, and post types to WordPress pattern files
Use LSX_TO_URL constant to reference plugin assets instead of theme asset functions in pattern content strings
Include the phpcs:ignoreFile comment for PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage at the top of WordPress pattern PHP files
Use available icon block attributes (iconType: 'outline'|'solid', iconName from icon library) in lsx-tour-operator/icons blocks within patterns
**/patterns/*.php: Use PHP array return format for plugin patterns instead of file header comments (unlike themes where patterns auto-register from/patterns/using file headers)
Include required pattern properties: 'title' and e...
Files:
patterns/accommodation-card.php
**/*.{php,html}
📄 CodeRabbit inference engine (.github/instructions/patterns-templates-refactoring.instructions.md)
**/*.{php,html}: Always useLSX_TO_URLandLSX_TO_PATHconstants for asset paths in plugin files
Include CSS variable fallbacks with absolute hex values in inline styles for plugin compatibility with any theme
Use CSS variable formatvar(--wp--preset--[type]--[name], fallback_value)in inline styles, notvar:preset|[type]|[name]format
Usevar:preset|[type]|[name]format only within JSON block attributes, not in inline styles
Use the correct spacing preset names: 'tiny' (10px), 'small' (16px), 'medium' (32px), 'large' (48px), and 'x-small' (8px)
Files:
patterns/accommodation-card.php
**/{patterns,templates,parts}/*.{php,html}
📄 CodeRabbit inference engine (.github/instructions/patterns-templates-refactoring.instructions.md)
**/{patterns,templates,parts}/*.{php,html}: For icon blocks, use self-closing syntax and never embed HTML content inside icon block markup to prevent validation errors
Use primary color preset for buttons, borders, and main brand elements; use 'contrast' preset for text/links; use 'base' for white backgrounds
Files:
patterns/accommodation-card.php
**/{templates,patterns,parts}/*.{php,html}
📄 CodeRabbit inference engine (.github/instructions/patterns-templates-refactoring.instructions.md)
Use wide alignment constraint for main content containers in single templates and align-full for full-width sections like breadcrumbs
Files:
patterns/accommodation-card.php
**/*.{php,twig}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not generate .php, .twig, or legacy CMS files
Files:
patterns/accommodation-card.php
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Summary
🔇 Additional comments (1)
changelog.md (1)
10-10: LGTM! PR reference added.The PR reference has been added to maintain consistency with other changelog entries, addressing the previous review feedback.
1 participant
type: fix
scope: patterns, sticky-menu
breaking: false
Description
This PR addresses spacing inconsistencies in pattern cards and improves the sticky menu scroll offset for better UX.
Changes
Pattern Cards Spacing
:where()selector--wp--preset--spacing--10through--wp--preset--spacing--80) with zero-specificity fallbacksSticky Menu Scroll
Files Changed
src/css/_variables.scss- Added spacing variable fallbackssrc/css/index.scss- Imported variablessrc/css/_slider.scss- Updated spacing referencespatterns/accommodation-card.php- Replaced hardcoded spacing with presetspatterns/tour-card.php- Replaced hardcoded spacing with presetssrc/blocks/sticky-menu/view.js- Added scroll offset bufferchangelog.md- UpdatedTesting
Type of Change
Related Issues
Fixes spacing inconsistencies in card patterns and sticky menu scroll precision
Summary by CodeRabbit
New Features
Bug Fixes
Style
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.