Feature/template filtering search in post form #1621
Conversation
|
""" WalkthroughThis update adds a new interactive and categorized modal template for form selection, replaces the previous modal inclusion with the new version, and expands admin CSS with new utility classes for modal behavior, spacing, sizing, gradients, shadows, and focus states to improve UI flexibility and accessibility. Changes
Suggested labels
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (5)
includes/Admin/template-parts/modal-post-forms-v4.2.php (5)
219-219: Remove extra space in the disabled attribute.There's an extra space after
$disabledin the attribute output.-title="<?php echo esc_attr( $template->get_title() ); ?>" <?php echo esc_attr($disabled ); ?> +title="<?php echo esc_attr( $template->get_title() ); ?>" <?php echo esc_attr( $disabled ); ?>
273-352: Reduce usage of !important and lower z-index values.The CSS has excessive use of
!importantdeclarations and very high z-index values that could cause conflicts with other WordPress plugins or themes.Consider these improvements:
- Use more specific selectors instead of
!important- Use reasonable z-index values (e.g., 9999 instead of 999999)
- Move inline styles from the HTML to the CSS section
Example refactor for z-index:
-z-index: 999999 !important; +z-index: 9999;For the modal styles, increase specificity:
-.wpuf-form-template-modal { +.wp-admin .wpuf-form-template-modal {
387-387: Replace reflow hack with a more standard approach.Using
offsetHeightto trigger a reflow is a hack. Consider usingrequestAnimationFramefor better performance.-$modal[0].offsetHeight; +// Force a reflow to ensure transition works +window.getComputedStyle($modal[0]).opacity;Or better yet, use
requestAnimationFrame:-$modal[0].offsetHeight; - -setTimeout( function() { - $modal.addClass( 'wpuf-modal-show' ); -}, 10 ); +requestAnimationFrame( function() { + $modal.addClass( 'wpuf-modal-show' ); +});
437-437: Use includes() instead of indexOf() for string search.For better readability and modern JavaScript practices, use
includes()instead ofindexOf().-if ( title.indexOf( searchTerm ) !== -1 ) { +if ( title.includes( searchTerm ) ) {
362-362: Add debouncing to search input for better performance.The search function triggers on every keystroke without debouncing, which could cause performance issues with many templates.
Implement debouncing for the search functionality:
// Add this at the beginning of the popup object searchTimeout: null, // Update the search event binding $( '#template-search' ).on( 'input', $.proxy( this.debounceSearch, this ) ); // Add debounce wrapper debounceSearch: function( e ) { clearTimeout( this.searchTimeout ); this.searchTimeout = setTimeout( function() { popup.searchTemplates( e ); }, 300 ); },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
includes/Admin/Menu.php(1 hunks)includes/Admin/template-parts/modal-post-forms-v4.2.php(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: Inspections
includes/Admin/Menu.php
[warning] 1-1: base64_encode() can be used to obfuscate code which is strongly discouraged. Please verify that the function is used for benign reasons.
[warning] 1-1: This comment is 57% valid code; is this commented out code?
[error] 1-1: Opening parenthesis of a multi-line function call must be the last content on the line.
🔇 Additional comments (2)
includes/Admin/Menu.php (1)
152-152: LGTM! Template version update is appropriate.The update from
modal-v4.1.phptomodal-post-forms-v4.2.phpcorrectly integrates the new enhanced modal interface as described in the PR objectives.includes/Admin/template-parts/modal-post-forms-v4.2.php (1)
39-47: Add error handling for potentially undefined variables.The code assumes
$registryexists but doesn't verify it before use in the counting logic.-if ( ! empty( $registry ) ) { +if ( ! empty( $registry ) && is_array( $registry ) ) {Likely an incorrect or invalid review comment.
| if ( ! function_exists( 'wpuf_get_template_category' ) ) { | ||
| function wpuf_get_template_category( $template_title, $categories ) { | ||
| $template_title_lower = strtolower( $template_title ); | ||
|
|
||
| foreach ( $categories as $slug => $category ) { | ||
| if ( ! empty( $category['keywords'] ) ) { | ||
| foreach ( $category['keywords'] as $keyword ) { | ||
| if ( strpos( $template_title_lower, $keyword ) !== false ) { | ||
| return $slug; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return 'registration'; | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Move function definition outside of conditional check.
Defining a function inside a conditional check can lead to redefinition errors if this file is included multiple times. Additionally, use strict comparison for strpos to handle matches at position 0.
Move the function definition outside the conditional and improve the implementation:
-// Helper function to determine a template's category based on its title
-if ( ! function_exists( 'wpuf_get_template_category' ) ) {
- function wpuf_get_template_category( $template_title, $categories ) {
- $template_title_lower = strtolower( $template_title );
-
- foreach ( $categories as $slug => $category ) {
- if ( ! empty( $category['keywords'] ) ) {
- foreach ( $category['keywords'] as $keyword ) {
- if ( strpos( $template_title_lower, $keyword ) !== false ) {
- return $slug;
- }
- }
- }
- }
-
- return 'registration';
- }
-}Add this to a more appropriate location (e.g., in a separate functions file or at the beginning of the plugin initialization):
if ( ! function_exists( 'wpuf_get_template_category' ) ) {
function wpuf_get_template_category( $template_title, $categories ) {
$template_title_lower = strtolower( $template_title );
foreach ( $categories as $slug => $category ) {
if ( empty( $category['keywords'] ) ) {
continue;
}
foreach ( $category['keywords'] as $keyword ) {
if ( strpos( $template_title_lower, strtolower( $keyword ) ) !== false ) {
return $slug;
}
}
}
return 'registration';
}
}🤖 Prompt for AI Agents
In includes/Admin/template-parts/modal-post-forms-v4.2.php lines 19 to 35, move
the entire wpuf_get_template_category function definition outside of the
conditional check to avoid redefinition errors on multiple includes. Also,
update the strpos check to use strict comparison !== false to correctly handle
matches at position 0, and ensure keywords are lowercased before comparison.
Consider relocating this function to a more appropriate file such as a dedicated
functions file or early in plugin initialization.
| $total_count = count($registry) + 1; // +2 for blank form and create with AI | ||
| if (!empty($pro_templates)) { | ||
| $total_count += count($pro_templates); | ||
| } | ||
| echo esc_html( $total_count ); |
There was a problem hiding this comment.
Fix the template count calculation comment.
The comment mentions "+2 for blank form and create with AI" but only adds 1. Since the AI template is commented out, update the comment to reflect the actual count.
-$total_count = count($registry) + 1; // +2 for blank form and create with AI
+$total_count = count($registry) + 1; // +1 for blank form📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| $total_count = count($registry) + 1; // +2 for blank form and create with AI | |
| if (!empty($pro_templates)) { | |
| $total_count += count($pro_templates); | |
| } | |
| echo esc_html( $total_count ); | |
| $total_count = count($registry) + 1; // +1 for blank form | |
| if (!empty($pro_templates)) { | |
| $total_count += count($pro_templates); | |
| } | |
| echo esc_html( $total_count ); |
🤖 Prompt for AI Agents
In includes/Admin/template-parts/modal-post-forms-v4.2.php around lines 100 to
104, the comment about adding "+2 for blank form and create with AI" is
inaccurate because only 1 is added and the AI template is commented out. Update
the comment to correctly state "+1 for blank form" to match the actual addition
in the code.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
assets/css/admin/form-builder.css (1)
1732-1740: Respect reduced-motion preferences for modal pop-in animationThe transform reset is smooth, but users with
prefers-reduced-motion: reducewill still get the scale/translate transition.
Wrap the animation (or settransition: none) inside:@media (prefers-reduced-motion: reduce) { .wpuf-modal-box { transition: none; } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
assets/css/admin/form-builder.css(16 hunks)includes/Admin/template-parts/modal-post-forms-v4.2.php(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- includes/Admin/template-parts/modal-post-forms-v4.2.php
🔇 Additional comments (4)
assets/css/admin/form-builder.css (4)
1308-1316: Ensure default modal state disables pointer eventsThese rules make the modal interactive when any “open” selector matches, but I don’t see a complementary block that explicitly sets
pointer-events: none; visibility: hidden; opacity: 0;for the closed state.
If those declarations live elsewhere make sure they override later in the cascade, otherwise background clicks could leak through after the first open/close cycle.
2914-2916:aspect-ratiorequires fallback on older Safari/IE
.wpuf-aspect-square { aspect-ratio: 1/1; }is fine on modern engines, but Safari ≤14 will ignore it and stretch images.
If supporting those versions matters, add an explicitheight: auto; width: 100%;workaround or use a padding-box trick.
3935-3947: Verify colour tokens exist for new gradient helpers
wpuf-from-blue-500andwpuf-to-purple-600assume the corresponding CSS variables or hex values are defined earlier. Missing tokens will result in transparent gradients. Double-check Tailwind build config or add fallbacks.
2480-2482: Trivial utility-class additions (top-1/2, spacing, width, gap, shadow, focus helpers) look consistent with the existing naming scheme and Tailwind conventions. No issues noted.Also applies to: 2594-2597, 2604-2607, 2710-2713, 2750-2753, 2993-2996, 3125-3127, 3375-3377, 4037-4040, 5528-5532, 5583-5585, 5672-5674, 3244-3247
| :root:has(:is(.wpuf-modal-open, .wpuf-modal:target, .wpuf-modal-toggle:checked + .wpuf-modal, .wpuf-modal[open])) { | ||
| overflow: hidden; | ||
| scrollbar-gutter: stable; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
:has() is still an experimental selector – add a JS/utility‐class fallback
Relying solely on :root:has(.wpuf-modal-open …) will silently fail in Safari ≤15.6 and old Chromium/Firefox builds shipped with WordPress Core.
Recommend toggling a simple class (e.g. wpuf-modal-lock) on <html> via the same JS that opens the modal and targeting that instead; keep the :has() rule as progressive enhancement.
🤖 Prompt for AI Agents
In assets/css/admin/form-builder.css around lines 1317 to 1320, the use of the
experimental :has() selector for modal state styling will fail in older browsers
like Safari ≤15.6 and legacy Chromium/Firefox. To fix this, add a JavaScript
utility that toggles a class such as wpuf-modal-lock on the <html> element when
the modal opens or closes, then update the CSS to target this class for the
overflow and scrollbar-gutter styles as a fallback, keeping the :has() rule as a
progressive enhancement.
|
Forms list not showing when pro is deactivated. @arifulhoque7 vai |
|
@Rubaiyat-E-Mohammad vai fixed
|
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (5)
includes/Admin/template-parts/modal-post-forms-v4.2.php (5)
99-103: Fix incorrect comment about template count calculation.The comment still mentions "+2 for blank form and create with AI" but only adds 1, and the AI template is commented out.
-$total_count = count($registry) + 1; // +2 for blank form and create with AI +$total_count = count($registry) + 1; // +1 for blank form
2-2: Critical: Pro_Prompt class usage without existence check still present.The
usestatement forPro_Promptis still present without a class existence check, which directly causes the fatal error reported in the PR comments when the Pro plugin is deactivated.This issue was previously flagged but not properly resolved. The fatal error occurs because this class is imported unconditionally.
-use WeDevs\Wpuf\Free\Pro_Prompt; +// Conditionally use Pro_Prompt only if it exists +if ( class_exists( 'WeDevs\Wpuf\Free\Pro_Prompt' ) ) { + use WeDevs\Wpuf\Free\Pro_Prompt; +}However, since
usestatements must be at the top level, a better approach would be to remove this entirely and handle the class usage conditionally where it's needed.
18-34: Move function definition outside conditional check.The function definition inside a conditional check can lead to redefinition errors if this file is included multiple times.
This issue was previously flagged but not resolved. Move the function definition to a more appropriate location:
-// Helper function to determine a template's category based on its title -if ( ! function_exists( 'wpuf_get_template_category' ) ) { - function wpuf_get_template_category( $template_title, $categories ) { - $template_title_lower = strtolower( $template_title ); - - foreach ( $categories as $slug => $category ) { - if ( ! empty( $category['keywords'] ) ) { - foreach ( $category['keywords'] as $keyword ) { - if ( strpos( $template_title_lower, $keyword ) !== false ) { - return $slug; - } - } - } - } - - return 'post'; - } -}Consider moving this function to a dedicated functions file or the main plugin file to avoid redefinition issues.
128-146: Remove commented-out AI template code.The large block of commented-out AI template code is still present and should be removed to improve maintainability.
This was previously flagged but not resolved. Remove the entire commented block:
-<?php /* -<!-- Create with AI --> -<div class="template-box wpuf-template-item" data-category="ai" data-title="create with ai" style="width: calc(25% - 12px);"> - <div class="wpuf-relative wpuf-group wpuf-bg-gradient-to-br wpuf-from-blue-500 wpuf-to-purple-600 wpuf-rounded-lg wpuf-border wpuf-border-gray-200 wpuf-shadow-sm hover:wpuf-shadow-md wpuf-transition-all"> - <div class="wpuf-aspect-square wpuf-flex wpuf-items-center wpuf-justify-center wpuf-p-6"> - <div class="wpuf-text-center"> - <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="wpuf-h-8 wpuf-w-8 wpuf-text-white wpuf-mx-auto wpuf-mb-2"> - <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.898 20.624L16.5 21.75l-.398-1.126a3.375 3.375 0 00-2.455-2.456L12.75 18l1.126-.398a3.375 3.375 0 002.455-2.456L16.5 14.25l.398 1.126a3.375 3.375 0 002.456 2.456L20.25 18l-1.126.398a3.375 3.375 0 00-2.456 2.456z" /> - </svg> - </div> - </div> - <div class="wpuf-absolute wpuf-opacity-0 group-hover:wpuf-opacity-70 wpuf-transition-all wpuf-duration-200 wpuf-z-10 wpuf-text-center wpuf-flex wpuf-flex-col wpuf-justify-center wpuf-items-center wpuf-bg-emerald-900 wpuf-h-full wpuf-w-full wpuf-top-0 wpuf-left-0 wpuf-text-white wpuf-rounded-lg"></div> - <a href="#" class="wpuf-btn-secondary wpuf-w-max wpuf-absolute wpuf-top-[50%] wpuf-left-[50%] wpuf--translate-y-[50%] wpuf--translate-x-[50%] wpuf-z-20 wpuf-opacity-0 group-hover:wpuf-opacity-100 wpuf-border-transparent focus:wpuf-shadow-none wpuf-transition-all" title="<?php echo esc_attr( 'Create with AI' ); ?>"> - <?php esc_html_e( 'Create Form', 'wp-user-frontend' ); ?> - </a> - </div> - <p class="wpuf-text-xs wpuf-text-gray-700 wpuf-mt-2 wpuf-text-center wpuf-font-medium"><?php echo esc_html( 'Create with AI' ); ?></p> -</div> -*/ ?>If this feature is planned for future release, track it in your issue management system instead.
246-246: Critical: Pro_Prompt method call without existence check.This line directly calls
Pro_Prompt::get_upgrade_to_pro_popup_url()without checking if the class exists, which causes the fatal error reported in the PR comments.-href="<?php echo esc_url( Pro_Prompt::get_upgrade_to_pro_popup_url() ); ?>" +href="<?php echo esc_url( class_exists( 'WeDevs\Wpuf\Free\Pro_Prompt' ) ? Pro_Prompt::get_upgrade_to_pro_popup_url() : '#' ); ?>"
🧹 Nitpick comments (1)
includes/Admin/template-parts/modal-post-forms-v4.2.php (1)
412-435: Optimize search performance and improve case sensitivity handling.The search function iterates through all templates on each keystroke, which could be inefficient for large template collections. Additionally, the search should be more robust.
searchTemplates: function ( e ) { var searchTerm = $( e.target ).val().toLowerCase(); var $templates = $( '.wpuf-template-item' ); + + // Debounce search for better performance + clearTimeout(this.searchTimeout); + this.searchTimeout = setTimeout(function() { + performSearch(); + }, 300); + + function performSearch() { if (searchTerm.length > 0) { var $allButtons = $('.wpuf-template-category'); $allButtons.removeClass( 'wpuf-bg-gray-100 wpuf-text-primary wpuf-font-medium' ).addClass( 'wpuf-text-gray-700 hover:wpuf-text-primary hover:wpuf-bg-gray-100' ); $allButtons.find('span:last-child').attr('class', 'wpuf-text-gray-500 wpuf-px-2 wpuf-py-0.5 wpuf-text-sm'); var $allCategoryButton = $allButtons.filter('[data-category="all"]'); $allCategoryButton.removeClass( 'wpuf-text-gray-700 hover:wpuf-text-primary hover:wpuf-bg-gray-100' ).addClass( 'wpuf-bg-gray-100 wpuf-text-primary wpuf-font-medium' ); $allCategoryButton.find('span:last-child').attr('class', 'wpuf-border wpuf-border-primary wpuf-text-primary wpuf-text-sm wpuf-font-semibold wpuf-px-2.5 wpuf-py-0.5 wpuf-rounded-full'); } $templates.each( function() { var $template = $( this ); var title = $template.data( 'title' ) || ''; + title = title.toLowerCase(); - if ( title.indexOf( searchTerm ) !== -1 ) { + if ( title.includes( searchTerm ) ) { $template.show(); } else { $template.hide(); } }); + } },
| $image = $template->get_image(); | ||
| $title = $template->get_title(); | ||
| ?> | ||
| <div class="template-box wpuf-template-item" data-category="registration" data-title="<?php echo esc_attr(strtolower($title)); ?>" style="width: calc(25% - 12px);"> |
There was a problem hiding this comment.
Fix inconsistent category assignment for Pro templates.
Pro templates are hardcoded to data-category="registration" regardless of their actual category, which breaks the categorization system.
-<div class="template-box wpuf-template-item" data-category="registration" data-title="<?php echo esc_attr(strtolower($title)); ?>" style="width: calc(25% - 12px);">
+<?php $pro_category = wpuf_get_template_category( $title, $categories ); ?>
+<div class="template-box wpuf-template-item" data-category="<?php echo esc_attr($pro_category); ?>" data-title="<?php echo esc_attr(strtolower($title)); ?>" style="width: calc(25% - 12px);">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div class="template-box wpuf-template-item" data-category="registration" data-title="<?php echo esc_attr(strtolower($title)); ?>" style="width: calc(25% - 12px);"> | |
| <?php $pro_category = wpuf_get_template_category( $title, $categories ); ?> | |
| <div class="template-box wpuf-template-item" data-category="<?php echo esc_attr( $pro_category ); ?>" data-title="<?php echo esc_attr( strtolower( $title ) ); ?>" style="width: calc(25% - 12px);"> |
🤖 Prompt for AI Agents
In includes/Admin/template-parts/modal-post-forms-v4.2.php at line 232, the
data-category attribute for Pro templates is incorrectly hardcoded to
"registration". Update the code to dynamically assign the correct category value
based on the actual category of the template instead of using a fixed string,
ensuring proper categorization.
sapayth
left a comment
sapayth
left a comment
There was a problem hiding this comment.
add .css changes in form-builder.less file
sapayth
added
needs: author reply
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
includes/Admin/template-parts/modal-v4.2.php (2)
4-4: Remove extra space in ternary operator-$form_type = ! empty( $form_type ) ? $form_type : 'Post Form'; +$form_type = ! empty( $form_type ) ? $form_type : 'Post Form';
336-344: Make animation delays dynamic instead of hardcodedAnimation delays are hardcoded for only 8 items, limiting scalability when more templates are added.
Use JavaScript to dynamically assign animation delays:
$('.wpuf-template-item').each(function(index) { $(this).css('animation-delay', (0.1 * (index + 1)) + 's'); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
includes/Admin/Menu.php(1 hunks)includes/Admin/template-parts/modal-v4.2.php(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- includes/Admin/Menu.php
🧰 Additional context used
🪛 GitHub Actions: Inspections
includes/Admin/template-parts/modal-v4.2.php
[error] Opening parenthesis of a multi-line function call must be the last content on the line.
🔇 Additional comments (1)
includes/Admin/template-parts/modal-v4.2.php (1)
363-490: JavaScript implementation is well-structuredThe JavaScript code demonstrates good practices:
- Keyboard shortcuts (Ctrl/Cmd+K for search, Escape to clear/close)
- Proper event delegation and handling
- Clean object-oriented structure
- Efficient search and filter implementation
Issue not solved @arifulhoque7 vai, still remains same 
|
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
includes/Admin/template-parts/modal-v4.2.php (1)
3-3: Critical: The use statement still causes fatal errors when Pro plugin is deactivatedThe
usestatement is processed at compile time and will cause a fatal error if thePro_Promptclass doesn't exist, even with the conditional check below. This is the same issue reported in the PR comments.Remove the use statement and use the fully qualified class name in the conditional check:
-use WeDevs\Wpuf\Free\Pro_Prompt; - -if ( !class_exists( 'WeDevs\Wpuf\Free\Pro_Prompt' ) ) { +if ( !class_exists( 'WeDevs\Wpuf\Free\Pro_Prompt' ) ) {And update the function call on line 11:
- return Pro_Prompt::get_upgrade_to_pro_popup_url(); + return \WeDevs\Wpuf\Free\Pro_Prompt::get_upgrade_to_pro_popup_url();
🧹 Nitpick comments (1)
includes/Admin/template-parts/modal-v4.2.php (1)
89-89: Remove inline styles to maintain consistencyThe modal div mixes utility classes with inline styles, which is inconsistent with the utility-first approach used elsewhere.
-<div class="wpuf-form-template-modal wpuf-fixed wpuf-top-0 wpuf-left-0 wpuf-w-screen wpuf-h-screen wpuf-bg-gray-100 wpuf-hidden wpuf-z-[999999]" role="dialog" aria-modal="true" aria-labelledby="template-modal-title" aria-describedby="template-modal-description" style="background-color: #F8FAFC;"> +<div class="wpuf-form-template-modal wpuf-fixed wpuf-top-0 wpuf-left-0 wpuf-w-screen wpuf-h-screen wpuf-bg-gray-100 wpuf-hidden wpuf-z-[999999]" role="dialog" aria-modal="true" aria-labelledby="template-modal-title" aria-describedby="template-modal-description">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
assets/less/admin.less(1 hunks)includes/Admin/Menu.php(2 hunks)includes/Admin/template-parts/modal-v4.2.php(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- assets/less/admin.less
🚧 Files skipped from review as they are similar to previous changes (1)
- includes/Admin/Menu.php
🔇 Additional comments (2)
includes/Admin/template-parts/modal-v4.2.php (2)
15-87: Well-structured template categorization logicThe form type detection, category setup, and template categorization logic is well-implemented with proper keyword matching and fallback handling.
292-419: Comprehensive JavaScript implementation with good accessibilityThe JavaScript code provides a complete modal experience with search functionality, category filtering, keyboard shortcuts (Ctrl/Cmd+K for search, Escape key handling), and proper state management.
done vai |
done vai |
arifulhoque7
added
needs: dev review
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
includes/Admin/template-parts/modal-v4.2.php (1)
3-3: Critical: Pro_Prompt class import still causes fatal errorThe
usestatement at line 3 will cause a fatal error when the Pro plugin is deactivated, as reported in the PR comments. Theusestatement is processed at compile time, not runtime, so the conditional check at line 5 won't prevent the error.Remove the
usestatement and reference the class with its full namespace:-use WeDevs\Wpuf\Free\Pro_Prompt; - -if ( !class_exists( 'WeDevs\Wpuf\Free\Pro_Prompt' ) ) { - function wpuf_get_upgrade_to_pro_popup_url() { - return '#'; - } -} else { - function wpuf_get_upgrade_to_pro_popup_url() { - return Pro_Prompt::get_upgrade_to_pro_popup_url(); - } -} +if ( !class_exists( 'WeDevs\Wpuf\Free\Pro_Prompt' ) ) { + function wpuf_get_upgrade_to_pro_popup_url() { + return '#'; + } +} else { + function wpuf_get_upgrade_to_pro_popup_url() { + return \WeDevs\Wpuf\Free\Pro_Prompt::get_upgrade_to_pro_popup_url(); + } +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
includes/Admin/template-parts/modal-v4.2.php(1 hunks)
🔇 Additional comments (4)
includes/Admin/template-parts/modal-v4.2.php (4)
15-51: LGTM: Form type detection and category definitionThe form type detection logic and category structure are well-implemented. The conditional categorization based on form type (registration/profile vs post) is appropriate, and the keyword-based classification system provides good flexibility for template organization.
53-75: LGTM: Well-structured helper functionThe template categorization function is properly implemented with existence checks, clear logic flow, and appropriate fallback behavior. The keyword matching approach provides flexible template classification.
77-88: LGTM: Correct category counting implementationThe category counting logic is well-implemented with proper initialization and defensive programming. The use of
array_fill_keysfor initialization andissetchecks for safety are good practices.
290-418: LGTM: Comprehensive JavaScript implementationThe JavaScript implementation provides excellent user experience with proper modal state management, search functionality, keyboard accessibility (Ctrl/Cmd+K, Escape), and smooth filtering. The code structure is well-organized and follows jQuery best practices.
| <img class="wpuf-absolute wpuf-top-3 wpuf-right-3 wpuf-w-6 wpuf-h-6" src="<?php echo esc_attr( $pro_badge ); ?>" alt="Pro"> | ||
| <div class="wpuf-absolute wpuf-opacity-0 group-hover:wpuf-opacity-70 wpuf-transition-all wpuf-z-10 wpuf-text-center wpuf-flex wpuf-flex-col wpuf-justify-center wpuf-items-center wpuf-bg-emerald-900 wpuf-h-full wpuf-w-full wpuf-top-0 wpuf-left-0 wpuf-text-white wpuf-p-5 wpuf-rounded-md"></div> | ||
| <a | ||
| href="<?php echo esc_url( class_exists( 'WeDevs\Wpuf\Free\Pro_Prompt' ) ? Pro_Prompt::get_upgrade_to_pro_popup_url() : '#' ); ?>" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Update Pro_Prompt usage to use wrapper function
The direct usage of Pro_Prompt class should be updated to use the wrapper function defined earlier to maintain consistency and avoid potential issues.
-href="<?php echo esc_url( class_exists( 'WeDevs\Wpuf\Free\Pro_Prompt' ) ? Pro_Prompt::get_upgrade_to_pro_popup_url() : '#' ); ?>"
+href="<?php echo esc_url( wpuf_get_upgrade_to_pro_popup_url() ); ?>"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| href="<?php echo esc_url( class_exists( 'WeDevs\Wpuf\Free\Pro_Prompt' ) ? Pro_Prompt::get_upgrade_to_pro_popup_url() : '#' ); ?>" | |
| href="<?php echo esc_url( wpuf_get_upgrade_to_pro_popup_url() ); ?>" |
🤖 Prompt for AI Agents
In includes/Admin/template-parts/modal-v4.2.php at line 270, replace the direct
usage of the Pro_Prompt class with the previously defined wrapper function for
getting the upgrade popup URL. This means instead of calling
Pro_Prompt::get_upgrade_to_pro_popup_url() directly, call the wrapper function
to maintain consistency and avoid potential issues.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
includes/Admin/template-parts/modal-v4.2.php (1)
268-268: Use the wrapper function instead of direct Pro_Prompt class reference.The code still uses the Pro_Prompt class directly, bypassing the wrapper function created earlier. This could still cause fatal errors when the Pro plugin is deactivated.
-href="<?php echo esc_url( class_exists( 'WeDevs\Wpuf\Free\Pro_Prompt' ) ? \WeDevs\Wpuf\Free\Pro_Prompt::get_upgrade_to_pro_popup_url() : '#' ); ?>" +href="<?php echo esc_url( wpuf_get_upgrade_to_pro_popup_url() ); ?>"
🧹 Nitpick comments (3)
includes/Admin/template-parts/modal-v4.2.php (3)
354-378: Optimize search performance for large template lists.The search function filters templates on every keystroke, which could cause performance issues with large template lists.
Consider implementing debouncing to reduce the frequency of search operations:
+var searchTimeout; + searchTemplates: function ( e ) { + clearTimeout(searchTimeout); + searchTimeout = setTimeout(function() { var searchTerm = $( e.target ).val().toLowerCase(); var $templates = $( '.wpuf-template-item' ); // ... rest of the function + }, 300); },
289-416: Improve code organization and add error handling.The JavaScript code lacks error handling and could benefit from better organization.
Consider adding try-catch blocks around DOM operations and extracting constants for better maintainability:
+var CONSTANTS = { + ESCAPE_KEY: 27, + CTRL_K: 75, + TRANSITION_DURATION: 300 +}; + init: function () { + try { $( 'a.new-wpuf-form' ).on( 'click', this.openModal ); // ... other event bindings + } catch (error) { + console.error('Error initializing modal:', error); + } },
166-168: Extract duplicate form type check into helper function.The form type check is repeated multiple times throughout the code, violating DRY principles.
+function wpuf_is_registration_form( $form_type ) { + return strpos( strtolower( $form_type ), 'registration' ) !== false || + strpos( strtolower( $form_type ), 'profile' ) !== false; +} + -$blank_form_category = strpos( strtolower( $form_type ), 'registration' ) !== false || strpos( strtolower( $form_type ), 'profile' ) !== false ? 'registration' : 'post'; +$blank_form_category = wpuf_is_registration_form( $form_type ) ? 'registration' : 'post';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
includes/Admin/template-parts/modal-v4.2.php(1 hunks)
🔇 Additional comments (2)
includes/Admin/template-parts/modal-v4.2.php (2)
3-11: Good approach to handle Pro_Prompt class conditionally.The wrapper function approach effectively prevents fatal errors when the Pro plugin is deactivated, addressing the critical issue mentioned in the PR comments.
138-143: Total count calculation is correct – no changes neededI confirmed that:
$registrycomes from wpuf_get_post_form_templates(), covering all free templates.$pro_templatescomes from wpuf_get_pro_form_previews(), covering any Pro templates.- We explicitly add 1 for the blank form.
There are no other template sources in the codebase, so the sum of blank + free + Pro templates fully covers every template type.
| } | ||
| } | ||
| ?> | ||
| <div class="wpuf-form-template-modal wpuf-fixed wpuf-top-0 wpuf-left-0 wpuf-w-screen wpuf-h-screen wpuf-bg-gray-100 wpuf-hidden wpuf-z-[999999]" role="dialog" aria-modal="true" aria-labelledby="template-modal-title" aria-describedby="template-modal-description" style="background-color: #F8FAFC;"> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Accessibility: Add focus trap for modal dialog.
The modal lacks proper focus management, which is essential for keyboard navigation and screen reader users.
Consider adding focus trap functionality to ensure focus remains within the modal when open and returns to the trigger element when closed.
🤖 Prompt for AI Agents
In includes/Admin/template-parts/modal-v4.2.php at line 87, the modal dialog
lacks a focus trap, which is necessary for accessibility to keep keyboard focus
within the modal while it is open. Implement a focus trap by adding JavaScript
that captures focus inside the modal when it opens, cycles focus through its
interactive elements, and returns focus to the element that triggered the modal
when it closes. This ensures proper keyboard navigation and screen reader
usability.
| $category_counts = array_fill_keys( array_keys( $categories ), 0 ); | ||
|
|
||
| if ( ! empty( $registry ) ) { | ||
| foreach ( $registry as $template ) { | ||
| $category = wpuf_get_template_category( $template->get_title(), $categories, $form_type ); | ||
|
|
||
| if ( isset( $category_counts[ $category ] ) ) { | ||
| $category_counts[ $category ]++; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Category counting logic doesn't include pro templates.
The category counting only accounts for free templates from the registry but excludes pro templates, leading to inaccurate counts displayed in the category filters.
$category_counts = array_fill_keys( array_keys( $categories ), 0 );
if ( ! empty( $registry ) ) {
foreach ( $registry as $template ) {
$category = wpuf_get_template_category( $template->get_title(), $categories, $form_type );
if ( isset( $category_counts[ $category ] ) ) {
$category_counts[ $category ]++;
}
}
}
+
+// Count pro templates as well
+if ( ! empty( $pro_templates ) ) {
+ foreach ( $pro_templates as $template ) {
+ $category = wpuf_get_template_category( $template->get_title(), $categories, $form_type );
+
+ if ( isset( $category_counts[ $category ] ) ) {
+ $category_counts[ $category ]++;
+ }
+ }
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| $category_counts = array_fill_keys( array_keys( $categories ), 0 ); | |
| if ( ! empty( $registry ) ) { | |
| foreach ( $registry as $template ) { | |
| $category = wpuf_get_template_category( $template->get_title(), $categories, $form_type ); | |
| if ( isset( $category_counts[ $category ] ) ) { | |
| $category_counts[ $category ]++; | |
| } | |
| } | |
| } | |
| $category_counts = array_fill_keys( array_keys( $categories ), 0 ); | |
| if ( ! empty( $registry ) ) { | |
| foreach ( $registry as $template ) { | |
| $category = wpuf_get_template_category( $template->get_title(), $categories, $form_type ); | |
| if ( isset( $category_counts[ $category ] ) ) { | |
| $category_counts[ $category ]++; | |
| } | |
| } | |
| } | |
| // Count pro templates as well | |
| if ( ! empty( $pro_templates ) ) { | |
| foreach ( $pro_templates as $template ) { | |
| $category = wpuf_get_template_category( $template->get_title(), $categories, $form_type ); | |
| if ( isset( $category_counts[ $category ] ) ) { | |
| $category_counts[ $category ]++; | |
| } | |
| } | |
| } |
🤖 Prompt for AI Agents
In includes/Admin/template-parts/modal-v4.2.php around lines 75 to 85, the
category counting logic only iterates over free templates in the registry and
excludes pro templates, causing inaccurate counts. Update the code to also
include pro templates in the counting loop by merging or iterating over both
free and pro template collections, ensuring all templates are counted correctly
in the category_counts array.
Rubaiyat-E-Mohammad
added
QA Approved
3 participants
Complete Feature Overview: Template Filtering and Search in Post Form Selection
Partially close issue
Key Features Implemented:
1. Template Categorization System
2. Advanced Search Functionality
Escape: Clear search and reset filters when search box is focused3. Category Filtering System
4. Enhanced Modal UI/UX
5. Template Cards Enhancement
6. AI Template Integration (Currently Commented)
7. Technical Improvements
File Structure Changes:
wpuf_get_template_category()functionUser Experience Improvements:
Developer Benefits:
This represents a significant upgrade from a basic template selection to a sophisticated, user-friendly template discovery system that enhances the overall WordPress form creation experience.
Summary by CodeRabbit
New Features
Style