feat: Add Sticky Menu Block with Desktop/Mobile Navigation#684
feat: Add Sticky Menu Block with Desktop/Mobile Navigation#684
Conversation
- Created block.json for the Sticky Menu block with necessary attributes and settings. - Implemented the Edit and Save components in index.js to manage the block's behavior in the editor and on the frontend. - Added server-side rendering in render.php to handle mobile headers for sticky menu sections. - Developed sticky-menu-editor-extension.js to extend core/group block with sticky menu attributes and controls. - Styled the Sticky Menu block with SCSS, ensuring responsive design and accessibility features. - Implemented view.js for sticky menu functionality, including scroll-to-section, mobile section toggling, and active menu item updates. - Added event listeners for keyboard accessibility and mobile interactions. - Ensured proper cleanup of event listeners and observers on page unload.
…o feature/496-sticky-secondary-nav-menu
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ⛔ Files ignored due to path filters (167)
📒 Files selected for processing (1)
Tip You can make CodeRabbit's review stricter and more nitpicky using the `assertive` profile, if that's what you prefer.Change the Warning CodeRabbit GitHub Action detectedThe repository is using both CodeRabbit Pro and CodeRabbit Open Source (via GitHub Actions), which is not recommended as it may lead to duplicate comments and extra noise. Please remove the CodeRabbit GitHub Action. WalkthroughAdds a new Sticky Menu block and integrates it across editor and frontend: block manifest and assets, editor HOCs for Changes
Sequence Diagram(s)sequenceDiagram
participant Editor as Block Editor
participant useSelect as useSelect Hook
participant Scanner as Block Scanner (debounced)
participant EditUI as Sticky Menu Edit UI
Editor->>useSelect: subscribe to blocks
useSelect->>Scanner: trigger scan (debounced 500ms)
Scanner->>Scanner: recursively collect core/group with addToStickyMenu
alt candidates found
Scanner->>EditUI: update attributes.menuItems
EditUI->>Editor: render navigation list
else none
EditUI->>Editor: render placeholder & troubleshooting
end
sequenceDiagram
participant User as Page Visitor
participant Scroll as Scroll Event
participant Observer as IntersectionObserver
participant Sticky as sticky_menu.handle_scroll_spy
participant Active as update_active_menu_item
participant SR as aria-live region
User->>Scroll: scrolls page
Scroll->>Observer: intersection updates
Observer->>Sticky: determine active section
Sticky->>Active: set active menu item / aria-current
Active->>SR: announce_section_change
sequenceDiagram
participant MobileUser as Mobile User
participant HeaderBtn as Mobile Header Button
participant ToggleFn as toggle_mobile_section
participant Wrapper as Collapsible Section
MobileUser->>HeaderBtn: click / keypress
HeaderBtn->>ToggleFn: invoke
ToggleFn->>Wrapper: toggle expanded/collapsed, set aria-expanded
Wrapper->>MobileUser: animate reveal/hide
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related issues
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
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 |
|
Uplevel your code reviews with CodeRabbit ProCodeRabbit ProIf you like this project, please support us by purchasing the Pro version. The Pro version has advanced context, superior noise reduction and several proprietary improvements compared to the open source version. Moreover, CodeRabbit Pro is free for open source projects. |
There was a problem hiding this comment.
CodeRabbit
Files selected (12)
- build/blocks/sticky-menu/index.js (1)
- build/blocks/sticky-menu/sticky-menu-editor-extension.js (1)
- build/blocks/sticky-menu/style-index-rtl.css (1)
- build/blocks/sticky-menu/style-index.css (1)
- build/blocks/sticky-menu/view.js (1)
- changelog.md (1)
- src/blocks/sticky-menu/index.js (1)
- src/blocks/sticky-menu/render.php (1)
- src/blocks/sticky-menu/sticky-menu-editor-extension.js (1)
- src/blocks/sticky-menu/style.scss (1)
- src/blocks/sticky-menu/view.js (1)
- tour-operator.php (1)
Files ignored due to filter (2)
- build/blocks/sticky-menu/block.json
- src/blocks/sticky-menu/block.json
Files not summarized due to errors (12)
- build/blocks/sticky-menu/index.js (diff tokens exceeds limit)
- build/blocks/sticky-menu/sticky-menu-editor-extension.js (diff tokens exceeds limit)
- build/blocks/sticky-menu/view.js (diff tokens exceeds limit)
- src/blocks/sticky-menu/render.php (nothing obtained from openai)
- changelog.md (nothing obtained from openai)
- src/blocks/sticky-menu/view.js (diff tokens exceeds limit)
- src/blocks/sticky-menu/sticky-menu-editor-extension.js (nothing obtained from openai)
- src/blocks/sticky-menu/index.js (nothing obtained from openai)
- build/blocks/sticky-menu/style-index-rtl.css (nothing obtained from openai)
- build/blocks/sticky-menu/style-index.css (nothing obtained from openai)
- src/blocks/sticky-menu/style.scss (nothing obtained from openai)
- tour-operator.php (nothing obtained from openai)
Files not reviewed due to errors (9)
- build/blocks/sticky-menu/style-index.css (no response)
- changelog.md (no response)
- src/blocks/sticky-menu/render.php (no response)
- build/blocks/sticky-menu/style-index-rtl.css (no response)
- build/blocks/sticky-menu/sticky-menu-editor-extension.js (no response)
- src/blocks/sticky-menu/index.js (no response)
- tour-operator.php (no response)
- src/blocks/sticky-menu/style.scss (no response)
- src/blocks/sticky-menu/sticky-menu-editor-extension.js (no response)
Files skipped from review due to trivial changes (3)
- build/blocks/sticky-menu/index.js (diff too large)
- build/blocks/sticky-menu/view.js (diff too large)
- src/blocks/sticky-menu/view.js (diff too large)
Review comments generated (0)
- Review: 0
- LGTM: 0
Tips
Chat with 
CodeRabbit Bot (@coderabbitai)
- Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
- Invite the bot into a review comment chain by tagging
@coderabbitaiin a reply.
Code suggestions
- The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
- You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.
Pausing incremental reviews
- Add
@coderabbitai: ignoreanywhere in the PR description to pause further reviews from the bot.
There was a problem hiding this comment.
Actionable comments posted: 30
🧹 Nitpick comments (13)
src/blocks/sticky-menu/style.scss (4)
51-54: Respect reduced motion and avoidtransition: all.Specify properties and disable transitions for users preferring reduced motion. Also add coverage on
.sticky-menu-button.-.sticky-menu-button { - transition: opacity 0.2s ease; -} +.sticky-menu-button { transition: opacity 0.2s ease; } +@media (prefers-reduced-motion: reduce) { + .sticky-menu-button { transition: none; } +} - /* Ensure smooth transitions (respect motion preferences) */ - transition: all 0.3s ease; + /* Target properties explicitly. */ + transition: transform 0.3s ease; @media (prefers-reduced-motion: reduce) { transition: none; } -button.section-header { - transition: all 0.2s ease; +button.section-header { + transition: background-color 0.2s ease, color 0.2s ease; +} +@media (prefers-reduced-motion: reduce) { + button.section-header { transition: none; } }Also applies to: 124-129, 168-169
53-54: Convert px ≥ 3 to rem via to_rem().Radius and caret use fixed px; follow the rem rule.
- border-radius: 4px; + border-radius: to_rem(4px); ... - border-top: 6px solid currentColor; - border-right: 6px solid transparent; - border-left: 6px solid transparent; + border-top: to_rem(6px) solid currentColor; + border-right: to_rem(6px) solid transparent; + border-left: to_rem(6px) solid transparent;Also applies to: 183-191
95-104: Avoid inline sizing in px; use to_rem() and existing helper classes.Replace 11px/16px with rems and prefer the existing
.sticky-menu-helpstyles instead of duplicating..sticky-menu-help { - font-size: 11px; - margin-top: 8px; + font-size: to_rem(11px); + margin-top: to_rem(8px); } .sticky-menu-help ol { - margin-left: 16px; + margin-left: to_rem(16px); line-height: 1.4; text-align: left; }
1-202: Align class naming and tokens with guidelines.
- Prefer
tour-operator-prefixed, BEM‑style class names, or add prefixed aliases alongside current classes.- Where possible, use theme tokens (e.g.,
var(--wp--preset--color--… )) instead ofrgba(0,0,0,0.1)and magicz-index: 100.tour-operator.php (1)
45-48: Minor doc comment punctuation.Add a trailing full stop per guidelines.
/** - * Include sticky menu block functionality. This doesn't work via the block.json registration method + * Include sticky menu block functionality. This doesn't work via the block.json registration method. */ require_once LSX_TO_PATH . 'src/blocks/sticky-menu/render.php';src/blocks/sticky-menu/block.json (1)
9-10: Addkeywordsfor discoverability and ensure strings are localisation‑friendly.Include a short keywords list.
"description": "A sticky navigation menu that links to sections on the page", + "keywords": [ "menu", "navigation", "anchor", "sticky", "scroll" ],Also applies to: 41-49
src/blocks/sticky-menu/index.js (3)
23-29: Avoid inline styles; rely on block supports/theme.json.Let
supports.color/spacing/typographyhandle styling via block wrapper. Remove ad‑hocstyleprops.- const blockProps = useBlockProps({ - className: `lsx-sticky-menu position-${position}`, - style: { - backgroundColor: backgroundColor || undefined, - color: textColor || undefined, - }, - }); + const blockProps = useBlockProps({ className: `lsx-sticky-menu position-${position}` });
105-114: Avoid inline styles in editor help; use the SCSS helper class.Use
.sticky-menu-helpstyles instead of inline CSS.- <details style={{ fontSize: '11px', color: '#666', marginTop: '8px' }}> + <details className="sticky-menu-help"> <summary>{__('Troubleshooting', 'tour-operator')}</summary> - <ol style={{ marginLeft: '16px', lineHeight: '1.4' }}> + <ol>
1-10: Add JSDoc with@sinceand ensure eslint rules are satisfied.Document Edit/Save per guidelines and include
@since 2.1.0.src/blocks/sticky-menu/sticky-menu-editor-extension.js (1)
101-106: Validate cleaned ID is not empty.After sanitizing the CSS ID, there's no validation to ensure the cleaned ID isn't empty. If a user enters only invalid characters,
cleanIdwill be an empty string, which could cause issues.Apply this diff to add validation:
onBlur={() => { // Clean and save to attributes when user finishes typing const cleanId = localStickyMenuId.replace(/[^a-zA-Z0-9-_]/g, '').toLowerCase(); + + // Ensure ID is not empty and doesn't start with a digit + if (cleanId && !/^\d/.test(cleanId)) { setLocalStickyMenuId(cleanId); setAttributes({ stickyMenuId: cleanId }); + } else { + // Reset to empty if invalid + setLocalStickyMenuId(''); + setAttributes({ stickyMenuId: '' }); + } - setLocalStickyMenuId(cleanId); - setAttributes({ stickyMenuId: cleanId }); }}src/blocks/sticky-menu/view.js (3)
211-224: Remove aria-current attribute instead of setting to 'false'.According to ARIA best practices,
aria-currentshould be removed entirely when not applicable, rather than being set to 'false'. This provides clearer semantics for assistive technologies.Apply this diff:
// Remove active class and aria-current from all menu buttons const menu_buttons = document.querySelectorAll('.wp-block-lsx-tour-operator-sticky-menu .sticky-menu-button'); menu_buttons.forEach(button => { button.classList.remove('active'); - button.setAttribute('aria-current', 'false'); + button.removeAttribute('aria-current'); }); // Add active class and aria-current to current menu button
613-618: Add JSDoc comments for event listeners.The DOMContentLoaded event listener should have a JSDoc comment explaining when initialization occurs.
Apply this diff:
/** * Initialize when DOM is ready. + * + * @since 2.1.0 */ document.addEventListener('DOMContentLoaded', function() {
620-625: Add JSDoc comments for cleanup event listener.The beforeunload event listener should have a JSDoc comment.
Apply this diff:
/** * Cleanup when page is unloaded. + * + * @since 2.1.0 */ window.addEventListener('beforeunload', function() {
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (9)
build/blocks/sticky-menu/block.jsonis excluded by!build/**build/blocks/sticky-menu/index.asset.phpis excluded by!build/**build/blocks/sticky-menu/index.jsis excluded by!build/**build/blocks/sticky-menu/sticky-menu-editor-extension.asset.phpis excluded by!build/**build/blocks/sticky-menu/sticky-menu-editor-extension.jsis excluded by!build/**build/blocks/sticky-menu/style-index-rtl.cssis excluded by!build/**build/blocks/sticky-menu/style-index.cssis excluded by!build/**build/blocks/sticky-menu/view.asset.phpis excluded by!build/**build/blocks/sticky-menu/view.jsis excluded by!build/**
📒 Files selected for processing (8)
changelog.md(1 hunks)src/blocks/sticky-menu/block.json(1 hunks)src/blocks/sticky-menu/index.js(1 hunks)src/blocks/sticky-menu/render.php(1 hunks)src/blocks/sticky-menu/sticky-menu-editor-extension.js(1 hunks)src/blocks/sticky-menu/style.scss(1 hunks)src/blocks/sticky-menu/view.js(1 hunks)tour-operator.php(1 hunks)
🧰 Additional context used
📓 Path-based instructions (20)
**/*.php
📄 CodeRabbit inference engine (.github/instructions/coding-standards.instructions.md)
**/*.php: PHP classes must use the Tour_Operator_ prefix with Pascal_Case
PHP functions must use the tour_operator_ prefix with snake_case
Variables should use snake_case (e.g., $tour_data, $destination_info)
Constants must use UPPER_SNAKE_CASE (e.g., TOUR_OPERATOR_VERSION)
Always sanitize input data (e.g., sanitize_text_field)
Validate all data before processing (e.g., type checks, ranges)
Escape all output (e.g., esc_html, wp_kses_post)
Use nonces for form submissions (e.g., wp_nonce_field)
Use $wpdb->prepare() for all SQL queries
Prefix all custom tables with $wpdb->prefix
Prefer WordPress database helper functions when possible
Prefix all hooks (actions/filters) with tour_operator_
Document all hooks with proper DocBlocks
Provide examples in hook documentation DocBlocks
One class per PHP file
All functions must have DocBlocks
Use @SInCE tags for version tracking in DocBlocks
Include @param and @return tags in DocBlocks
Use transients for temporary cached data
Minimize database queriesUse wp_enqueue_block_style and wp_register_style with proper dependencies when adding styles in WordPress
**/*.php: Use proper WordPress file headers with plugin/theme information
Use kebab-case for file names
Use snake_case for PHP function names
Prefix all functions, classes, and constants to avoid conflicts
Escape all output using appropriate WordPress functions (esc_html, esc_attr, esc_url, wp_kses_post)
Sanitize input immediately on receipt (e.g., sanitize_text_field, sanitize_email, esc_url_raw)
Use nonces for all forms and AJAX requests and verify with wp_verify_nonce
Check user capabilities (current_user_can) before privileged actions
Always use $wpdb->prepare for custom SQL queries
Prefer WordPress API functions (e.g., get_posts) over direct SQL queries
Internationalize strings using __, _e, _x, _n with a consistent text domain
For JavaScript strings, pass data via wp_localize_script and include nonces where needed
Use WordPress error handling: check is_wp_error, log...
Files:
tour-operator.phpsrc/blocks/sticky-menu/render.php
**/*.{php,js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/review.instructions.md)
Internationalize user‑facing strings using WordPress i18n APIs
Files:
tour-operator.phpsrc/blocks/sticky-menu/render.phpsrc/blocks/sticky-menu/index.jssrc/blocks/sticky-menu/sticky-menu-editor-extension.jssrc/blocks/sticky-menu/view.js
**/*.{php,html,jsx,tsx}
📄 CodeRabbit inference engine (.github/instructions/review.instructions.md)
Do not use inline CSS (no style attributes or inline style props)
Files:
tour-operator.phpsrc/blocks/sticky-menu/render.php
**/*.{html,php}
⚙️ CodeRabbit configuration file
**/*.{html,php}: Perform a detailed review of the provided code with following key aspects in mind:
- Review the HTML and PHP code to ensure it is well-structured and adheres to best practices.
- Ensure the code follows WordPress coding standards (WPCS) and is well-documented.
- Confirm the code is secure and free from vulnerabilities using proper sanitization and validation.
- Escape all outputs using esc_html, esc_attr, wp_kses_post appropriately.
- Use WordPress functions instead of native PHP where available.
- Optimize the code for performance, removing any unnecessary elements.
- Validate comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Add proper DocBlocks with @param, @return, @SInCE tags.
- Use meaningful variable and function names with tour_operator_ prefix.
- Follow WordPress naming conventions (snake_case for functions/variables).
- Verify code compatibility with the latest version of WordPress, avoiding deprecated functions.
- Ensure proper template hierarchy usage and WordPress block theme patterns.
- Validate HTML semantics and accessibility (WCAG 2.2 AA compliance).
Files:
tour-operator.phpsrc/blocks/sticky-menu/render.php
src/**/*.{css,scss}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Avoid ad‑hoc CSS; prefer theme.json + block selectors
Files:
src/blocks/sticky-menu/style.scss
⚙️ CodeRabbit configuration file
src/**/*.{css,scss}: - Follow WordPress CSS coding standards and BEM methodology.
- Use semantic class naming with tour-operator- prefix consistently.
- Ensure responsive design for all tour displays and booking interfaces.
- Check for accessibility compliance (WCAG 2.2 AA) including color contrast.
- Style complex tour layouts, booking forms, and destination galleries effectively.
- Use CSS custom properties and modern CSS features (Grid, Flexbox).
- Implement proper mobile-first responsive design approach.
- Use theme.json compatible styling where applicable.
- Avoid !important declarations and maintain specificity hierarchy.
- Ensure RTL (right-to-left) language support.
Files:
src/blocks/sticky-menu/style.scss
**/*.{css,scss}
📄 CodeRabbit inference engine (.github/instructions/accessibility.instructions.md)
Respect prefers-reduced-motion for animations
Provide mobile‑first responsive behavior
Prefer CSS utilities/presets over custom CSS to reduce CSS size and specificity
Use theme.json design tokens (var(--wp--...)) instead of hard‑coded styles in stylesheets
Files:
src/blocks/sticky-menu/style.scss
⚙️ CodeRabbit configuration file
**/*.{css,scss}: Perform a detailed review of the provided code with following key aspects in mind:
- Review the SCSS code to ensure it is well-structured and adheres to best practices.
- Convert dimensions greater than or equal to 3px to rem units using the to_rem function.
- Utilize variables for sizes and colors defined in src/content-helper/common/css/variables.scss instead of hardcoding values.
- Follow WordPress CSS coding standards and use semantic class naming with tour-operator- prefix.
- Ensure responsive design for all tour displays and booking forms.
- Check for accessibility compliance (WCAG 2.2 AA).
- Style complex tour layouts, booking forms, and destination galleries.
- Use CSS custom properties and modern CSS features.
- Ensure proper mobile-first responsive design for tourism content.
Files:
src/blocks/sticky-menu/style.scss
{assets,src}/**/*
📄 CodeRabbit inference engine (.github/instructions/block-theme-structure.instructions.md)
Keep SCSS/JS/images source assets in assets/ or src/
Files:
src/blocks/sticky-menu/style.scsssrc/blocks/sticky-menu/block.jsonsrc/blocks/sticky-menu/render.phpsrc/blocks/sticky-menu/index.jssrc/blocks/sticky-menu/sticky-menu-editor-extension.jssrc/blocks/sticky-menu/view.js
src/**/block.json
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/block.json: Prefer block.json with server-side registration for blocks (avoid ad‑hoc registration)
Use the block namespacelsx-toin block names
Files:
src/blocks/sticky-menu/block.json
**/block.json
📄 CodeRabbit inference engine (.github/instructions/accessibility.instructions.md)
**/block.json: Provide meaningful block titles, descriptions, and keywords in block.json
Include editor-specific accessibility guidance in block descriptions (block.json)
Include accessibility considerations in block registration (e.g., supports, attributes)
**/block.json: In block.json, include required fields: name, title, description, category, keywords, and supports
Ensure accessible metadata in block.json: use clear, descriptive title and description
Provide reasonable default values for attributes in block.json
Use usesInnerBlocks in block.json only when the block actually contains InnerBlocks
Define block variations in block.json to provide common starting points
Ensure i18n and RTL safety for user-facing strings in block.json (including variations)
Files:
src/blocks/sticky-menu/block.json
**/*.md
⚙️ CodeRabbit configuration file
**/*.md: - Keep documentation updated with code changes and new features.
- Use clear examples for tour operator integration and API usage.
- Document complex booking and tour management features with screenshots.
- Include proper installation and configuration steps with troubleshooting.
- Follow markdown linting rules and maintain consistent formatting.
- On Pull Requests check for updates to the changelog file.
- Ensure documentation covers accessibility features and requirements.
- Include developer documentation for extending the plugin.
- Document REST API endpoints and integration patterns.
Files:
changelog.md
src/**/*.{js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use @wordpress/eslint-plugin for JavaScript linting
Files:
src/blocks/sticky-menu/index.jssrc/blocks/sticky-menu/sticky-menu-editor-extension.jssrc/blocks/sticky-menu/view.js
src/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{js,jsx,ts,tsx}: Use useBlockProps() in block edit/save components when applicable
Use the text domaintour-operatorfor JS i18n calls
Files:
src/blocks/sticky-menu/index.jssrc/blocks/sticky-menu/sticky-menu-editor-extension.jssrc/blocks/sticky-menu/view.js
**/*.{js,ts}
📄 CodeRabbit inference engine (.github/instructions/javascript-react.instructions.md)
**/*.{js,ts}: Use const or let instead of var for variable declarations
Use default parameters for function arguments where appropriate
Use @wordpress/api-fetch (optionally with addQueryArgs) for REST API requests
Register blocks via registerBlockType using block metadata (imported from block.json), and localize title/description/keywords
Use wp.media for media selection in custom components/utilities when needed
Create and register custom data stores with @wordpress/data (createReduxStore + register), and structure actions/selectors clearly
Initialize frontend interactivity after DOMContentLoaded and implement ARIA attributes for toggles (aria-controls, aria-expanded)
Handle AJAX form submissions with fetch, proper loading states, and user notices; restore UI state in finally
Implement accessibility utilities like focus trapping and polite screen reader announcements for dynamic content
Files:
src/blocks/sticky-menu/index.jssrc/blocks/sticky-menu/sticky-menu-editor-extension.jssrc/blocks/sticky-menu/view.js
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.github/instructions/javascript-react.instructions.md)
**/*.{js,ts,jsx,tsx}: Prefer arrow functions for callbacks and inline handlers
Use object/array destructuring for cleaner code
Use template literals for string interpolation
Use async/await for promise handling with try/catch for errors
Use WordPress i18n APIs (__/_n/sprintf) with a consistent textdomain for all user-facing strings; include translator comments where needed
Use @wordpress/data dispatch/select for interacting with WP data stores (e.g., core/notices, core/editor)
Files:
src/blocks/sticky-menu/index.jssrc/blocks/sticky-menu/sticky-menu-editor-extension.jssrc/blocks/sticky-menu/view.js
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/instructions/js-ts.instructions.md)
**/*.{ts,tsx,js,jsx}: Debounce user inputs to prevent excessive processing
Avoid blocking the UI thread (prefer async/non-blocking operations)
Files:
src/blocks/sticky-menu/index.jssrc/blocks/sticky-menu/sticky-menu-editor-extension.jssrc/blocks/sticky-menu/view.js
**/*.{js,mjs,ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/performance.instructions.md)
Defer non-critical JavaScript and avoid synchronous blocking operations
Files:
src/blocks/sticky-menu/index.jssrc/blocks/sticky-menu/sticky-menu-editor-extension.jssrc/blocks/sticky-menu/view.js
**/*.{css,js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/reviews.instructions.md)
Minimize CSS/JS payload size
Files:
src/blocks/sticky-menu/index.jssrc/blocks/sticky-menu/sticky-menu-editor-extension.jssrc/blocks/sticky-menu/view.js
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/reviews.instructions.md)
Lazy-load code and resources where possible
Files:
src/blocks/sticky-menu/index.jssrc/blocks/sticky-menu/sticky-menu-editor-extension.jssrc/blocks/sticky-menu/view.js
**/*.{js,ts,tsx,jsx}
⚙️ CodeRabbit configuration file
**/*.{js,ts,tsx,jsx}: Perform a detailed review of the provided code with following key aspects in mind:
- Review the code to ensure it is well-structured and adheres to best practices.
- Verify compliance with WordPress coding standards and @wordpress/eslint-plugin rules.
- Ensure the code is well-documented with proper JSDoc comments.
- Check for security vulnerabilities and confirm the code is secure.
- Optimize the code for performance, removing any unnecessary elements.
- Validate JSDoc comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Confirm every JSDoc comment includes a @SInCE tag indicating the next version of the plugin to include the code.
- Guarantee compatibility with the latest version of WordPress, avoiding deprecated functions or features.
- Follow WordPress JavaScript coding standards and use WordPress script localization.
- Use WordPress script dependencies and enqueue properly.
- Ensure React/JSX best practices for blocks and modern JavaScript/TypeScript patterns.
- Implement proper error handling and loading states.
- Use WordPress components and design system where applicable.
- For Tour Operator: Focus on tour booking interfaces, search functionality, and tour display components.
Files:
src/blocks/sticky-menu/index.jssrc/blocks/sticky-menu/sticky-menu-editor-extension.jssrc/blocks/sticky-menu/view.js
src/blocks/**/*.{js,jsx,ts,tsx}
⚙️ CodeRabbit configuration file
src/blocks/**/*.{js,jsx,ts,tsx}: - Follow WordPress JavaScript coding standards and @wordpress/scripts configuration.
- Use WordPress components from @wordpress/components and design system.
- Implement proper React/JSX patterns for WordPress blocks.
- Ensure proper WordPress script dependencies and localization.
- Use WordPress data store patterns with @wordpress/data.
- Implement proper error boundaries and loading states.
- Follow modern JavaScript/TypeScript patterns with proper typing.
- Ensure accessibility in interactive block components.
- Use WordPress block editor APIs correctly (useBlockProps, InspectorControls, etc.).
- Implement proper block validation and save/edit functionality.
Files:
src/blocks/sticky-menu/index.jssrc/blocks/sticky-menu/sticky-menu-editor-extension.jssrc/blocks/sticky-menu/view.js
🧬 Code graph analysis (3)
src/blocks/sticky-menu/render.php (4)
src/blocks/sticky-menu/sticky-menu-editor-extension.js (1)
attributes(140-140)build/blocks/sticky-menu/sticky-menu-editor-extension.js (1)
attributes(297-301)src/blocks/sticky-menu/view.js (6)
section_id(424-424)section_id(437-437)section_id(445-445)section_title(425-425)section_title(469-469)section_title(561-563)build/blocks/sticky-menu/view.js (6)
section_id(397-397)section_id(409-409)section_id(417-417)section_title(398-398)section_title(440-440)section_title(531-531)
src/blocks/sticky-menu/index.js (2)
src/blocks/sticky-menu/sticky-menu-editor-extension.js (1)
attributes(140-140)build/blocks/sticky-menu/sticky-menu-editor-extension.js (1)
attributes(297-301)
src/blocks/sticky-menu/sticky-menu-editor-extension.js (1)
build/blocks/sticky-menu/sticky-menu-editor-extension.js (4)
withStickyMenuControls(206-287)attributes(297-301)existingClass(312-312)withStickyMenuEditor(322-380)
🪛 Biome (2.1.2)
src/blocks/sticky-menu/view.js
[error] 195-195: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Safe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
⏰ 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). (2)
- GitHub Check: review
- GitHub Check: Summary
🔇 Additional comments (1)
changelog.md (1)
18-18: Changelog entry looks good.Entry is clear and references the PR. No changes needed.
…lean up all related fields upon removing the sticky menu from the page - Updated CSS class names in style files to use a consistent prefix (`lsx-to-`) for sticky menu elements.
There was a problem hiding this comment.
CodeRabbit
Files selected (10)
- build/blocks/sticky-menu/index.js (1)
- build/blocks/sticky-menu/sticky-menu-editor-extension.js (1)
- build/blocks/sticky-menu/style-index-rtl.css (1)
- build/blocks/sticky-menu/style-index.css (1)
- build/blocks/sticky-menu/view.js (1)
- src/blocks/sticky-menu/index.js (1)
- src/blocks/sticky-menu/render.php (1)
- src/blocks/sticky-menu/sticky-menu-editor-extension.js (1)
- src/blocks/sticky-menu/style.scss (1)
- src/blocks/sticky-menu/view.js (1)
Files not summarized due to errors (10)
- build/blocks/sticky-menu/index.js (diff tokens exceeds limit)
- build/blocks/sticky-menu/sticky-menu-editor-extension.js (diff tokens exceeds limit)
- build/blocks/sticky-menu/view.js (diff tokens exceeds limit)
- src/blocks/sticky-menu/sticky-menu-editor-extension.js (diff tokens exceeds limit)
- src/blocks/sticky-menu/view.js (diff tokens exceeds limit)
- src/blocks/sticky-menu/style.scss (nothing obtained from openai)
- src/blocks/sticky-menu/index.js (nothing obtained from openai)
- src/blocks/sticky-menu/render.php (nothing obtained from openai)
- build/blocks/sticky-menu/style-index.css (nothing obtained from openai)
- build/blocks/sticky-menu/style-index-rtl.css (nothing obtained from openai)
Files not reviewed due to errors (6)
- src/blocks/sticky-menu/index.js (no response)
- src/blocks/sticky-menu/style.scss (no response)
- build/blocks/sticky-menu/style-index-rtl.css (no response)
- src/blocks/sticky-menu/render.php (no response)
- build/blocks/sticky-menu/style-index.css (no response)
- src/blocks/sticky-menu/sticky-menu-editor-extension.js (no response)
Files skipped from review due to trivial changes (4)
- build/blocks/sticky-menu/index.js (diff too large)
- build/blocks/sticky-menu/sticky-menu-editor-extension.js (diff too large)
- build/blocks/sticky-menu/view.js (diff too large)
- src/blocks/sticky-menu/view.js (diff too large)
Review comments generated (0)
- Review: 0
- LGTM: 0
Tips
Chat with CodeRabbit Bot (@coderabbitai)
- Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
- Invite the bot into a review comment chain by tagging
@coderabbitaiin a reply.
Code suggestions
- The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
- You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.
Pausing incremental reviews
- Add
@coderabbitai: ignoreanywhere in the PR description to pause further reviews from the bot.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (3)
src/blocks/sticky-menu/index.js (1)
111-113: Use semantic anchors and sprintf for i18n in Edit component.The Edit component still uses
javascript:void(0);and.replace()for string interpolation. Use#${item.id}for the href andsprintffrom@wordpress/i18nfor translator-friendly strings.Apply this diff:
+import { __, sprintf } from '@wordpress/i18n'; + // ... in the Edit component render: <a className="lsx-to-sticky-menu-button" - href="javascript:void(0);" + href={`#${item.id}`} aria-current="false" - aria-label={__('Navigate to %s section', 'tour-operator').replace('%s', item.title)} + aria-label={sprintf(__('Navigate to %s section', 'tour-operator'), item.title)} >src/blocks/sticky-menu/view.js (2)
216-223: Wrap switch case variable in block scope.The
const is_expandeddeclaration at line 219 within thecase 'Escape':can be accessed by other switch cases. Static analysis correctly flags this as an error.Apply this diff:
case 'Enter': case ' ': event.preventDefault(); lsx_to.toggle_mobile_section(wrapper); break; - case 'Escape': + case 'Escape': { event.preventDefault(); // Always collapse on Escape if expanded const is_expanded = wrapper.getAttribute('aria-expanded') === 'true'; if (is_expanded) { lsx_to.toggle_mobile_section(wrapper); } break; + } }
467-468: Remove incorrectrole='tab'that conflicts with accordion pattern.Lines 467-468 add
role='tab'to buttons, but the component implements an accordion pattern (witharia-expanded,aria-controls, androle='region'in render.php). This creates a conflicting ARIA pattern that confuses assistive technologies. Remove therole='tab'attribute.Apply this diff:
// Add descriptive aria-label button.setAttribute('aria-label', `Navigate to ${section_title} section`); - // Add role and aria-current for active state - button.setAttribute('role', 'tab'); + // Add aria-current for active state button.setAttribute('aria-current', 'false');
🧹 Nitpick comments (1)
src/blocks/sticky-menu/style.scss (1)
22-24: Convert pixel value to rem for admin bar offset.Line 23 uses
32pxfor the admin bar top offset. Per coding guidelines, convert values ≥3px to rem.Apply this diff:
.admin-bar .lsx-to-sticky-menu { - top: 32px; + top: 2rem; }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
build/blocks/sticky-menu/index.asset.phpis excluded by!build/**build/blocks/sticky-menu/index.jsis excluded by!build/**build/blocks/sticky-menu/sticky-menu-editor-extension.asset.phpis excluded by!build/**build/blocks/sticky-menu/sticky-menu-editor-extension.jsis excluded by!build/**build/blocks/sticky-menu/style-index-rtl.cssis excluded by!build/**build/blocks/sticky-menu/style-index.cssis excluded by!build/**build/blocks/sticky-menu/view.asset.phpis excluded by!build/**build/blocks/sticky-menu/view.jsis excluded by!build/**
📒 Files selected for processing (4)
src/blocks/sticky-menu/index.js(1 hunks)src/blocks/sticky-menu/sticky-menu-editor-extension.js(1 hunks)src/blocks/sticky-menu/style.scss(1 hunks)src/blocks/sticky-menu/view.js(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/blocks/sticky-menu/sticky-menu-editor-extension.js
🧰 Additional context used
📓 Path-based instructions (14)
src/**/*.{css,scss}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Avoid ad‑hoc CSS; prefer theme.json + block selectors
Files:
src/blocks/sticky-menu/style.scss
⚙️ CodeRabbit configuration file
src/**/*.{css,scss}: - Follow WordPress CSS coding standards and BEM methodology.
- Use semantic class naming with tour-operator- prefix consistently.
- Ensure responsive design for all tour displays and booking interfaces.
- Check for accessibility compliance (WCAG 2.2 AA) including color contrast.
- Style complex tour layouts, booking forms, and destination galleries effectively.
- Use CSS custom properties and modern CSS features (Grid, Flexbox).
- Implement proper mobile-first responsive design approach.
- Use theme.json compatible styling where applicable.
- Avoid !important declarations and maintain specificity hierarchy.
- Ensure RTL (right-to-left) language support.
Files:
src/blocks/sticky-menu/style.scss
**/*.{css,scss}
📄 CodeRabbit inference engine (.github/instructions/accessibility.instructions.md)
Respect prefers-reduced-motion for animations
Provide mobile‑first responsive behavior
Prefer CSS utilities/presets over custom CSS to reduce CSS size and specificity
Use theme.json design tokens (var(--wp--...)) instead of hard‑coded styles in stylesheets
Files:
src/blocks/sticky-menu/style.scss
⚙️ CodeRabbit configuration file
**/*.{css,scss}: Perform a detailed review of the provided code with following key aspects in mind:
- Review the SCSS code to ensure it is well-structured and adheres to best practices.
- Convert dimensions greater than or equal to 3px to rem units using the to_rem function.
- Utilize variables for sizes and colors defined in src/content-helper/common/css/variables.scss instead of hardcoding values.
- Follow WordPress CSS coding standards and use semantic class naming with tour-operator- prefix.
- Ensure responsive design for all tour displays and booking forms.
- Check for accessibility compliance (WCAG 2.2 AA).
- Style complex tour layouts, booking forms, and destination galleries.
- Use CSS custom properties and modern CSS features.
- Ensure proper mobile-first responsive design for tourism content.
Files:
src/blocks/sticky-menu/style.scss
{assets,src}/**/*
📄 CodeRabbit inference engine (.github/instructions/block-theme-structure.instructions.md)
Keep SCSS/JS/images source assets in assets/ or src/
Files:
src/blocks/sticky-menu/style.scsssrc/blocks/sticky-menu/view.jssrc/blocks/sticky-menu/index.js
src/**/*.{js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use @wordpress/eslint-plugin for JavaScript linting
Files:
src/blocks/sticky-menu/view.jssrc/blocks/sticky-menu/index.js
src/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{js,jsx,ts,tsx}: Use useBlockProps() in block edit/save components when applicable
Use the text domaintour-operatorfor JS i18n calls
Files:
src/blocks/sticky-menu/view.jssrc/blocks/sticky-menu/index.js
**/*.{js,ts}
📄 CodeRabbit inference engine (.github/instructions/javascript-react.instructions.md)
**/*.{js,ts}: Use const or let instead of var for variable declarations
Use default parameters for function arguments where appropriate
Use @wordpress/api-fetch (optionally with addQueryArgs) for REST API requests
Register blocks via registerBlockType using block metadata (imported from block.json), and localize title/description/keywords
Use wp.media for media selection in custom components/utilities when needed
Create and register custom data stores with @wordpress/data (createReduxStore + register), and structure actions/selectors clearly
Initialize frontend interactivity after DOMContentLoaded and implement ARIA attributes for toggles (aria-controls, aria-expanded)
Handle AJAX form submissions with fetch, proper loading states, and user notices; restore UI state in finally
Implement accessibility utilities like focus trapping and polite screen reader announcements for dynamic content
Files:
src/blocks/sticky-menu/view.jssrc/blocks/sticky-menu/index.js
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.github/instructions/javascript-react.instructions.md)
**/*.{js,ts,jsx,tsx}: Prefer arrow functions for callbacks and inline handlers
Use object/array destructuring for cleaner code
Use template literals for string interpolation
Use async/await for promise handling with try/catch for errors
Use WordPress i18n APIs (__/_n/sprintf) with a consistent textdomain for all user-facing strings; include translator comments where needed
Use @wordpress/data dispatch/select for interacting with WP data stores (e.g., core/notices, core/editor)
Files:
src/blocks/sticky-menu/view.jssrc/blocks/sticky-menu/index.js
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/instructions/js-ts.instructions.md)
**/*.{ts,tsx,js,jsx}: Debounce user inputs to prevent excessive processing
Avoid blocking the UI thread (prefer async/non-blocking operations)
Files:
src/blocks/sticky-menu/view.jssrc/blocks/sticky-menu/index.js
**/*.{js,mjs,ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/performance.instructions.md)
Defer non-critical JavaScript and avoid synchronous blocking operations
Files:
src/blocks/sticky-menu/view.jssrc/blocks/sticky-menu/index.js
**/*.{php,js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/review.instructions.md)
Internationalize user‑facing strings using WordPress i18n APIs
Files:
src/blocks/sticky-menu/view.jssrc/blocks/sticky-menu/index.js
**/*.{css,js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/reviews.instructions.md)
Minimize CSS/JS payload size
Files:
src/blocks/sticky-menu/view.jssrc/blocks/sticky-menu/index.js
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/reviews.instructions.md)
Lazy-load code and resources where possible
Files:
src/blocks/sticky-menu/view.jssrc/blocks/sticky-menu/index.js
**/*.{js,ts,tsx,jsx}
⚙️ CodeRabbit configuration file
**/*.{js,ts,tsx,jsx}: Perform a detailed review of the provided code with following key aspects in mind:
- Review the code to ensure it is well-structured and adheres to best practices.
- Verify compliance with WordPress coding standards and @wordpress/eslint-plugin rules.
- Ensure the code is well-documented with proper JSDoc comments.
- Check for security vulnerabilities and confirm the code is secure.
- Optimize the code for performance, removing any unnecessary elements.
- Validate JSDoc comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Confirm every JSDoc comment includes a @SInCE tag indicating the next version of the plugin to include the code.
- Guarantee compatibility with the latest version of WordPress, avoiding deprecated functions or features.
- Follow WordPress JavaScript coding standards and use WordPress script localization.
- Use WordPress script dependencies and enqueue properly.
- Ensure React/JSX best practices for blocks and modern JavaScript/TypeScript patterns.
- Implement proper error handling and loading states.
- Use WordPress components and design system where applicable.
- For Tour Operator: Focus on tour booking interfaces, search functionality, and tour display components.
Files:
src/blocks/sticky-menu/view.jssrc/blocks/sticky-menu/index.js
src/blocks/**/*.{js,jsx,ts,tsx}
⚙️ CodeRabbit configuration file
src/blocks/**/*.{js,jsx,ts,tsx}: - Follow WordPress JavaScript coding standards and @wordpress/scripts configuration.
- Use WordPress components from @wordpress/components and design system.
- Implement proper React/JSX patterns for WordPress blocks.
- Ensure proper WordPress script dependencies and localization.
- Use WordPress data store patterns with @wordpress/data.
- Implement proper error boundaries and loading states.
- Follow modern JavaScript/TypeScript patterns with proper typing.
- Ensure accessibility in interactive block components.
- Use WordPress block editor APIs correctly (useBlockProps, InspectorControls, etc.).
- Implement proper block validation and save/edit functionality.
Files:
src/blocks/sticky-menu/view.jssrc/blocks/sticky-menu/index.js
🧬 Code graph analysis (2)
src/blocks/sticky-menu/view.js (1)
build/blocks/sticky-menu/view.js (37)
section_id(433-433)section_id(445-445)section_id(453-453)section(55-55)section(267-267)section(574-574)top(58-58)prefersReducedMotion(64-64)originalTabIndex(82-82)sticky_menu(168-168)button(431-431)sections(251-251)sections(332-332)sections(399-399)sections(471-471)sections(509-509)sections(602-602)offset(255-255)offset(337-337)adminBar(256-256)adminBar(338-338)masthead(257-257)masthead(339-339)stickyMenu(258-258)stickyMenu(340-340)i(266-266)offsetPercentage(346-346)observer_options(347-351)sectionId(358-358)sectionId(607-607)firstVisibleSection(373-376)menu_items(423-423)section_title(434-434)section_title(478-478)section_title(575-575)sticky_menu_block(596-596)correspondingSection(608-608)
src/blocks/sticky-menu/index.js (4)
src/blocks/sticky-menu/sticky-menu-editor-extension.js (3)
attributes(258-258)sectionId(261-261)sectionTitle(262-262)build/blocks/sticky-menu/sticky-menu-editor-extension.js (3)
attributes(456-460)sectionId(463-463)sectionTitle(464-464)src/blocks/sticky-menu/view.js (2)
sectionId(381-381)sectionId(639-639)build/blocks/sticky-menu/view.js (2)
sectionId(358-358)sectionId(607-607)
🪛 Biome (2.1.2)
src/blocks/sticky-menu/view.js
[error] 219-219: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Safe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
⏰ 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). (2)
- GitHub Check: review
- GitHub Check: Summary
There was a problem hiding this comment.
CodeRabbit
Files selected (1)
- src/blocks/sticky-menu/sticky-menu-editor-extension.js (1)
Files not summarized due to errors (1)
- src/blocks/sticky-menu/sticky-menu-editor-extension.js (diff tokens exceeds limit)
Files not reviewed due to errors (1)
- src/blocks/sticky-menu/sticky-menu-editor-extension.js (no response)
Review comments generated (0)
- Review: 0
- LGTM: 0
Tips
Chat with CodeRabbit Bot (@coderabbitai)
- Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
- Invite the bot into a review comment chain by tagging
@coderabbitaiin a reply.
Code suggestions
- The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
- You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.
Pausing incremental reviews
- Add
@coderabbitai: ignoreanywhere in the PR description to pause further reviews from the bot.
name: "Feature: Sticky Menu Block"
about: "Add sticky navigation block with responsive design for single post templates"
title: "feat: Add Sticky Menu Block with Desktop/Mobile Navigation"
Summary
Implements a new Sticky Menu Block that provides anchor navigation functionality for single Tour, Destination, and Accommodation pages. This feature improves user experience by making it easy to navigate long content pages with jump-to-section navigation that remains visible while scrolling.
Linked issues: Closes #496 and relates to #374
Changes
New Block Implementation
Frontend Functionality
Styling & Responsive Design
Build Integration
Test Notes
Risk & Rollback
Implementation Details
Technical Architecture
useBlockProps()integrationIntegration Points
Checklist (Global DoD / PR)
Summary by CodeRabbit
New Features
Documentation