Fix: Sticky Menu Filter File Missing in Production Builds#834
Fix: Sticky Menu Filter File Missing in Production Builds#834
Conversation
- Removed `render.php` and replaced it with `filters.php` to handle mobile section headers. - Updated webpack configuration to copy `filters.php` to the build folder. - Added functionality to dynamically create mobile headers for group blocks with sticky menu enabled. - Updated changelog to reflect changes in sticky menu block functionality. - Adjusted CSS class audit documentation to reference new filters file.
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
|
Warning
|
| Cohort / File(s) | Summary |
|---|---|
Sticky Menu Filter Logic — Source & Build src/blocks/sticky-menu/filters.php, build/blocks/sticky-menu/filters.php |
New add_mobile_section_headers() added and registered with add_filter('render_block', ...) to wrap core/group blocks that have addToStickyMenu and stickyMenuId attributes with an accessible mobile header and collapsible content region. |
Sticky Menu Source — Removed Render src/blocks/sticky-menu/render.php |
Removed previous server-rendered add_mobile_section_headers() and its render_block registration (logic migrated to filters.php). |
Sticky Menu Build Assets build/blocks/sticky-menu/index.asset.php, build/blocks/sticky-menu/index.js |
Rebuilt assets: version hash updated (...ebef7a... → ...fa65b6...) and internal webpack module ID updated (560 → 2842); no API/interface changes. |
Icon Block Asset Metadata build/blocks/icons/index.asset.php |
Asset metadata version hash updated only (...e6c6da... → ...d9fe69...). |
Build Configuration & Dependencies webpack.config.js, package.json |
Added CopyWebpackPlugin import and configured it to copy src/blocks/sticky-menu/filters.php into build output; added copy-webpack-plugin to devDependencies; bumped package version to 2.1.1. |
Main Plugin & Docs tour-operator.php, changelog.md, docs/css-class-audit.md, readme.txt |
Bumped plugin/version constants to 2.1.1, changed include path to build/blocks/sticky-menu/filters.php, updated changelog and CSS-class audit references from render.php → filters.php. |
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
- feat: Add Sticky Menu Block with Desktop/Mobile Navigation #684: Introduced the original
add_mobile_section_headersimplementation insrc/blocks/sticky-menu/render.phpthat this PR relocates. - feat: Update Node.js requirements and package.json structure #791: Related rebuild of sticky-menu build artifacts and asset metadata adjustments.
- feat: Enhance Sticky Menu Block with Improved Inspector Controls, UX, and Keyboard Accessibility #773: Related caret/markup and CSS-class changes tied to sticky-menu render/filter logic.
Suggested labels
area:infrastructure
Suggested reviewers
- krugazul
Poem
🐰 I hopped a render to a filter new,
Packed it neat with webpack too.
Hashes changed and docs align,
A tiny jump — the build’s fine.
Carrot cheers for code that’s true.
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. | You can run @coderabbitai generate docstrings to improve docstring coverage. |
✅ Passed checks (2 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The pull request title accurately and specifically describes the main change: moving the sticky menu filter file from src/ to build/ to ensure it's included in production releases. |
✨ Finishing touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
hotfix/sticky-menu-filter-build
📜 Recent review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
package.json
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{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:
package.json
⏰ 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 (2)
package.json (2)
3-3: Version bump is appropriate for this hotfix.The patch version increment from 2.1.0 to 2.1.1 correctly follows semantic versioning for a bug fix release, aligning with the critical production issue being addressed in this PR.
45-45: Excellent choice using the latest version.The addition of
copy-webpack-pluginat version 13.0.1 addresses previous review feedback and uses the latest available version with no known security vulnerabilities. The placement in devDependencies is correct for a build-time tool, and testing results confirm the build process works as expected.
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.
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 addresses a critical production deployment issue where a necessary PHP filter file for the sticky menu block was not being included in WordPress.org releases, leading to fatal errors. The changes involve a strategic renaming of the filter file, an update to the build configuration to ensure this file is correctly copied to the production-ready build directory, and adjustments to the main plugin file to load the filter from its new, correct location. This fix guarantees the sticky menu's mobile header functionality is available and stable across all environments. 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
|
There was a problem hiding this comment.
Code Review
This pull request effectively resolves a critical production bug by ensuring the sticky menu's filter file is included in the build. The changes are well-structured, including renaming the file for clarity, updating the build process with CopyWebpackPlugin, and adding a function_exists check to prevent errors. I've added a couple of suggestions to improve code readability and to update a development dependency.
There was a problem hiding this comment.
Actionable comments posted: 1
Fix all issues with AI Agents 🤖
In @package.json:
- Line 45: Update the dependency entry "copy-webpack-plugin" from "^10.2.4" to
"^13.0.1" in package.json, run your package manager (npm install or yarn) to
update lockfiles, and rebuild to ensure compatibility; also review and adjust
any webpack configuration that references CopyWebpackPlugin (constructor options
or plugin API) to match v13's API changes if needed.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (12)
build/blocks/icons/index.asset.phpbuild/blocks/icons/index.jsbuild/blocks/sticky-menu/filters.phpbuild/blocks/sticky-menu/index.asset.phpbuild/blocks/sticky-menu/index.jschangelog.mddocs/css-class-audit.mdpackage.jsonsrc/blocks/sticky-menu/filters.phpsrc/blocks/sticky-menu/render.phptour-operator.phpwebpack.config.js
💤 Files with no reviewable changes (1)
- src/blocks/sticky-menu/render.php
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{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:
build/blocks/sticky-menu/index.jswebpack.config.js
**/*.{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:
build/blocks/sticky-menu/index.jstour-operator.phpbuild/blocks/sticky-menu/filters.phpwebpack.config.jspackage.jsonbuild/blocks/sticky-menu/index.asset.phpsrc/blocks/sticky-menu/filters.phpbuild/blocks/icons/index.asset.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:
build/blocks/sticky-menu/index.jstour-operator.phpbuild/blocks/sticky-menu/filters.phpwebpack.config.jsbuild/blocks/sticky-menu/index.asset.phpsrc/blocks/sticky-menu/filters.phpbuild/blocks/icons/index.asset.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:
build/blocks/sticky-menu/index.jstour-operator.phpbuild/blocks/sticky-menu/filters.phpwebpack.config.jsbuild/blocks/sticky-menu/index.asset.phpsrc/blocks/sticky-menu/filters.phpbuild/blocks/icons/index.asset.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:
build/blocks/sticky-menu/index.jstour-operator.phpbuild/blocks/sticky-menu/filters.phpwebpack.config.jsbuild/blocks/sticky-menu/index.asset.phpsrc/blocks/sticky-menu/filters.phpbuild/blocks/icons/index.asset.php
**/*.{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:
build/blocks/sticky-menu/index.jswebpack.config.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:
build/blocks/sticky-menu/index.jswebpack.config.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:
tour-operator.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:
tour-operator.phpbuild/blocks/sticky-menu/filters.phpbuild/blocks/sticky-menu/index.asset.phpsrc/blocks/sticky-menu/filters.phpbuild/blocks/icons/index.asset.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:
tour-operator.phpbuild/blocks/sticky-menu/filters.phpbuild/blocks/sticky-menu/index.asset.phpsrc/blocks/sticky-menu/filters.phpbuild/blocks/icons/index.asset.php
**/*.{php,twig}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not generate .php, .twig, or legacy CMS files
Files:
tour-operator.phpbuild/blocks/sticky-menu/filters.phpbuild/blocks/sticky-menu/index.asset.phpsrc/blocks/sticky-menu/filters.phpbuild/blocks/icons/index.asset.php
**/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/filters.phpbuild/blocks/sticky-menu/index.asset.phpsrc/blocks/sticky-menu/filters.phpbuild/blocks/icons/index.asset.php
docs/**/*.md
📄 CodeRabbit inference engine (AGENTS.md)
Document architectural decisions and block patterns in markdown documentation
Files:
docs/css-class-audit.md
{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/filters.php
🪛 PHPMD (2.15.0)
build/blocks/sticky-menu/filters.php
30-67: The parameter $block_content is not named in camelCase. (undefined)
(CamelCaseParameterName)
33-33: The variable $block_content is not named in camelCase. (undefined)
(CamelCaseVariableName)
42-42: The variable $section_id is not named in camelCase. (undefined)
(CamelCaseVariableName)
43-43: The variable $section_title is not named in camelCase. (undefined)
(CamelCaseVariableName)
46-46: The variable $mobile_header is not named in camelCase. (undefined)
(CamelCaseVariableName)
59-59: The variable $wrapped_content is not named in camelCase. (undefined)
(CamelCaseVariableName)
src/blocks/sticky-menu/filters.php
30-67: The parameter $block_content is not named in camelCase. (undefined)
(CamelCaseParameterName)
33-33: The variable $block_content is not named in camelCase. (undefined)
(CamelCaseVariableName)
42-42: The variable $section_id is not named in camelCase. (undefined)
(CamelCaseVariableName)
43-43: The variable $section_title is not named in camelCase. (undefined)
(CamelCaseVariableName)
46-46: The variable $mobile_header is not named in camelCase. (undefined)
(CamelCaseVariableName)
59-59: The variable $wrapped_content is not named in camelCase. (undefined)
(CamelCaseVariableName)
⏰ 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 (13)
changelog.md (1)
116-116: Changelog entry is accurate and well-documented.The entry clearly communicates the fix, including the file rename, webpack configuration, production availability concern, and redeclaration guard. Documentation is complete and properly formatted for consistency with other entries in the changelog.
build/blocks/sticky-menu/index.asset.php (1)
1-1: LGTM - Generated asset metadata update.The version hash update is expected when webpack regenerates assets. No concerns.
build/blocks/sticky-menu/index.js (1)
1-1: LGTM - Generated webpack bundle.The internal module ID change (560 → 2842) is a webpack build artifact with no functional impact. No concerns.
build/blocks/icons/index.asset.php (1)
1-1: LGTM - Generated asset metadata update.Version hash update reflects webpack rebuild. No concerns.
docs/css-class-audit.md (1)
170-174: LGTM - Documentation accurately reflects code restructuring.The CSS class references have been correctly updated to point to
filters.phpinstead ofrender.php, aligning with the PR's architectural change.src/blocks/sticky-menu/filters.php (1)
1-70: Excellent implementation - LGTM!This filter implementation demonstrates best practices across multiple dimensions:
Security: Proper direct access prevention, function_exists guard, and comprehensive escaping (esc_attr, esc_html, esc_html__).
Accessibility (WCAG 2.2 AA): Outstanding ARIA implementation following the disclosure pattern—button with aria-expanded, aria-controls linking to content, aria-describedby for context, role="region" with aria-labelledby, aria-hidden on decorative SVG, and screen reader-only text.
WordPress Standards: Correctly follows WordPress Coding Standards including snake_case for PHP variables (the PHPMD camelCase warnings are false positives—WordPress explicitly requires snake_case for PHP), proper text domain usage, and defensive coding with the null coalescing operator.
The function_exists check addresses the redeclaration issue mentioned in the PR objectives.
Note on static analysis hints: The PHPMD warnings about camelCase variable naming are false positives. As per WordPress Coding Standards and the coding guidelines provided, PHP must use snake_case for variable names, which this code correctly implements.
build/blocks/sticky-menu/filters.php (4)
1-15: File header and security check look good!The file follows WordPress standards with proper documentation and ABSPATH protection to prevent direct access.
17-29: Excellent documentation and redeclaration protection!The
function_exists()check prevents fatal errors if the file is included multiple times, and the PHPDoc follows WordPress standards with proper attribute and return value descriptions as per the coding guidelines.
30-67: Well-implemented filter with proper security and accessibility!The function correctly:
- Validates block type and attributes with early returns for performance
- Escapes all output using
esc_attr(),esc_html(), andesc_html__()- Implements WCAG 2.2 AA accessibility with proper ARIA attributes (aria-expanded, aria-controls, aria-describedby, role="region", aria-labelledby)
- Uses the correct text domain 'tour-operator' for localization
- Follows WordPress Coding Standards with snake_case variable names (the static analysis warnings about camelCase are false positives—WordPress standards require snake_case for PHP variables per your coding guidelines)
69-69: Filter registration is correct.The
render_blockfilter is registered with standard priority 10. Since the function has early returns for non-matching blocks, performance impact should be minimal.tour-operator.php (1)
76-79: Critical fix correctly implemented!The updated require statement correctly loads the filters.php from the build path, ensuring it's included in WordPress.org releases. The use of the
LSX_TO_PATHconstant follows the coding guidelines for asset paths.webpack.config.js (2)
6-6: Import statement is correct!The CopyWebpackPlugin is imported consistently with the existing code style.
42-49: CopyWebpackPlugin configuration is correct!The plugin configuration properly copies
src/blocks/sticky-menu/filters.phptobuild/blocks/sticky-menu/filters.php(the 'to' path is relative to webpack's output directory). This aligns with the require statement in tour-operator.php at line 79.
…son, and tour-operator.php for sticky menu block filter file in production.
type: fix
scope: sticky-menu, build
breaking: false
Description
Fixes a critical production deployment issue where the sticky menu's mobile section headers filter was not available in production releases. The filter file was located in
src/but only thebuild/folder is included in WordPress.org releases.Problem
The sticky menu block includes a
render_blockfilter (add_mobile_section_headers) that adds collapsible mobile headers to Group blocks with sticky menu attributes. This filter was insrc/blocks/sticky-menu/render.phpbut production releases only include thebuild/folder, causing fatal errors for users installing from WordPress.org.Changes
File Renaming
src/blocks/sticky-menu/render.php→src/blocks/sticky-menu/filters.phpBuild Configuration
CopyWebpackPluginto webpack.config.jsfilters.phptobuild/blocks/sticky-menu/during buildcopy-webpack-plugin@^10.2.4to package.json devDependenciesCode Updates
tour-operator.phpto load frombuild/blocks/sticky-menu/filters.phpfunction_exists()check to prevent redeclaration errorsDocumentation
Files Changed
webpack.config.js- Added CopyWebpackPlugin configurationpackage.json- Added copy-webpack-plugin dependencytour-operator.php- Updated require path to build foldersrc/blocks/sticky-menu/render.php→filters.php- Renamed and added function_exists checkdocs/css-class-audit.md- Updated file referencessrc/blocks/sticky-menu/README.md- New architecture documentationchangelog.md- Added fix entryTesting
filters.phpto build folderfunction_exists()checkType of Change
Production Impact
This fix is critical for production. Without it, sites installing from WordPress.org will experience fatal PHP errors due to missing filter file.
Related Issues
Resolves fatal error: "Cannot redeclare function add_mobile_section_headers()" in production environments
Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.