enhance: form builder notification settings #1512
Conversation
…or_form_builder_ui_redesign
commit daae343 Author: Sapayth Hossain <[email protected]> Date: Fri Oct 25 10:21:05 2024 +0600 fix logo, minor css commit 7590512 Author: Sapayth Hossain <[email protected]> Date: Thu Oct 17 13:00:12 2024 +0600 pro icon and link commit b720564 Author: Sapayth Hossain <[email protected]> Date: Wed Oct 16 17:31:46 2024 +0600 action buttons commit 743860f Author: Sapayth Hossain <[email protected]> Date: Wed Oct 16 13:10:14 2024 +0600 various fields time, phone field, pro fields, image, file, recaptcha, hidden fields commit e58e788 Merge: 2b12da4 f92a621 Author: Sapayth Hossain <[email protected]> Date: Tue Oct 15 17:25:44 2024 +0600 Merge remote-tracking branch 'upstream/develop' into enhance/form_builder_content_body_ui_redesign commit 2b12da4 Author: Sapayth Hossain <[email protected]> Date: Tue Oct 15 17:24:24 2024 +0600 column field, section break commit 63f6663 Author: Sapayth Hossain <[email protected]> Date: Mon Oct 14 21:47:26 2024 +0600 regular fields
…der_stage_form_builder_ui_redesign
…der_stage_form_builder_ui_redesign
…der_stage_form_builder_ui_redesign
…der_stage_form_builder_ui_redesign
WalkthroughThis PR introduces extensive updates across the codebase. It adds a Tailwind CSS build integration in the Gruntfile and adjusts plugin data retrieval in the Client class. In the admin form builder, new Vue components (e.g., builder-stage-v4-1, form-fields-v4-1) and mixins are added; existing components are updated with refined drag-and-drop, dynamic class bindings, and enhanced user interactions. CSS and LESS files are revised for updated colors, layouts, and new design variables. Backend PHP files and form field definitions also receive icon updates, new fields, and refined template structures for improved maintainability and UI consistency. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant FBU as Form Builder UI (Vue)
participant VS as Vuex Store
participant DA as Draggable Area
U->>FBU: Click "Add Field"
FBU->>VS: Commit new field element
VS-->>FBU: Update current panel state
FBU->>DA: Reinitialize draggable/sortable
FBU-->>U: Render updated form preview
Assessment against linked issues
Suggested labels
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 18
🔭 Outside diff range comments (7)
includes/Fields/Form_Field_Column.php (1)
76-84: Add validation for column count.The field accepts a range input for columns but doesn't explicitly validate against the min/max values defined in
get_field_props().Consider adding validation constraints to the range input:
[ 'name' => 'columns', 'title' => __( 'Number of Columns', 'wp-user-frontend' ), 'type' => 'range', + 'min' => 1, + 'max' => 3, 'section' => 'basic', 'priority' => 10, 'help_text' => __( 'How many columns should be there. Maximum 3', 'wp-user-frontend' ), ],admin/form-builder/assets/js/components/field-visibility/template.php (2)
41-58: Fix typo and improve role selection accessibility.There are several issues in the logged-in users section:
- Typo in class name "condiotional" → "conditional"
- Inconsistent class naming convention
- Missing accessibility attributes for role checkboxes
- <div v-if="'logged_in' === selected" class="condiotional-logic-container wpuf-mt-2"> + <div v-if="'logged_in' === selected" class="conditional-logic-container wpuf-mt-2"> <?php $roles = get_editable_roles(); ?> <ul> <?php foreach ( $roles as $role => $value ) { $role_name = $value['name']; - $output = '<li class="wpuf-mt-2">'; - $output .= "<label><input :class=\"builder_class_names('checkbox')\" type=\"checkbox\" v-model=\"choices\" value=\"{$role}\"> {$role_name} </label>"; + $output = '<li class="wpuf-mt-2" role="listitem">'; + $output .= "<label for=\"role-{$role}\"><input id=\"role-{$role}\" :class=\"builder_class_names('checkbox')\" type=\"checkbox\" v-model=\"choices\" value=\"{$role}\" aria-label=\"{$role_name}\"> {$role_name} </label>"; $output .= '</li>'; echo $output; } ?> </ul> </div>
60-82: Fix subscription section inconsistencies and improve accessibility.The subscription section has several issues:
- Same "conditional" typo as logged-in section
- Inconsistent checkbox styling compared to role selection
- Missing accessibility attributes
- <div v-if="'subscribed_users' === selected" class="condiotional-logic-container wpuf-mt-2"> + <div v-if="'subscribed_users' === selected" class="conditional-logic-container wpuf-mt-2"> <ul> <?php if ( class_exists( 'WPUF_Subscription' ) ) { $subscriptions = wpuf()->subscription->get_subscriptions(); if ( $subscriptions ) { foreach ( $subscriptions as $pack ) { - $output = '<li class="wpuf-mt-2">'; - $output .= "<label><input class='wpuf-bg-transparent wpuf-shadow-primary' type='checkbox' v-model='choices' value='{$pack->ID}' > {$pack->post_title} </label>"; + $output = '<li class="wpuf-mt-2" role="listitem">'; + $output .= "<label for=\"subscription-{$pack->ID}\"><input id=\"subscription-{$pack->ID}\" :class=\"builder_class_names('checkbox')\" type='checkbox' v-model='choices' value='{$pack->ID}' aria-label=\"{$pack->post_title}\"> {$pack->post_title} </label>"; $output .= '</li>'; echo $output; } } } ?> </ul> </div>admin/form-builder/assets/js/components/help-text/index.js (1)
10-16: Update placement validator to match usage.The placement validator doesn't include 'auto top' which is used in the tooltip initialization.
- validator: function (placement) { - return ['top', 'right', 'bottom', 'left'].indexOf(placement) >= 0; - } + validator: function (placement) { + return ['top', 'right', 'bottom', 'left', 'auto top'].indexOf(placement) >= 0; + }admin/form-builder/assets/js/components/form-column_field/index.js (1)
22-40: Potential memory leak in jQuery event handlers.The mouseenter/mouseleave event handlers are bound but not properly cleaned up when the component is destroyed.
Add cleanup in the destroyed lifecycle hook:
+destroyed() { + const columnFields = $(this.$el).find(".wpuf-field-columns .wpuf-column-inner-fields"); + columnFields.unbind("mouseenter"); + columnFields.unbind("mouseleave"); + columnFields.unbind("mouseup"); + columnFields.unbind("mousemove"); +}includes/Frontend_Render_Form.php (1)
281-328: Improve featured field rendering with better separation of concerns.The
render_featured_fieldmethod handles too many responsibilities. Consider splitting it into smaller methods for better maintainability.Extract the JavaScript into a separate file and enqueue it properly:
+private function enqueue_featured_field_script() { + wp_enqueue_script( + 'wpuf-featured-field', + WPUF_ASSET_URI . '/js/featured-field.js', + array('jquery'), + WPUF_VERSION, + true + ); +}includes/Admin/Menu.php (1)
105-137: Enhance security in form template handling.The template handling code should validate user capabilities before processing actions.
Add capability check:
public function wpuf_post_forms_page() { + if ( ! current_user_can( 'manage_options' ) ) { + wp_die( esc_html__( 'You do not have sufficient permissions to access this page.', 'wp-user-frontend' ) ); + }
🧹 Nitpick comments (70)
includes/Pro_Upgrades.php (1)
64-66: LGTM! Consider adding field documentation.The addition of captcha and terms of conditions fields to the "others" section is logically sound. However, consider adding inline documentation to describe the purpose and behavior of these fields, especially the
tocfield which is newly added.Add comments above the array to document the fields:
$pro_fields = [ + // CAPTCHA field using Really Simple CAPTCHA plugin 'really_simple_captcha', + // Mathematical CAPTCHA for form validation 'math_captcha', + // Terms and Conditions field for user agreement 'toc',includes/Fields/Form_Field_Column.php (1)
83-83: Improve help text clarity.While the new help text is more accurate than before, consider making it even clearer:
- 'help_text' => __( 'How many columns should be there. Maximum 3', 'wp-user-frontend' ), + 'help_text' => __( 'Select the number of columns (1-3) to divide this section into equal parts', 'wp-user-frontend' ),admin/form-builder/assets/js/mixins/form-field.js (2)
9-9: Document the purpose of the default field value.The default value
{ key: 'value' }seems generic. Consider documenting why this specific default is needed or use a more meaningful default object.
36-66: LGTM! Well-structured class management with room for improvement.The new
builder_class_namesmethod effectively manages classes for different field types. Consider these enhancements:
- Add JSDoc comments explaining the purpose of each class set
- Consider extracting class strings into constants for reusability
Example improvement:
+ /** Class sets for different form field types */ + const FIELD_CLASSES = { + UPLOAD_BTN: 'file-selector wpuf-rounded-md wpuf-btn-secondary', + RADIO: 'wpuf-ml-3 wpuf-block wpuf-text-sm wpuf-font-medium wpuf-leading-6 wpuf-text-gray-900 checked:focus:!wpuf-bg-primary checked:hover:!wpuf-bg-primary checked:before:!wpuf-bg-white checked:!wpuf-bg-primary', + // ... other class sets + }; + + /** + * Builds class names for form fields + * @param {string} type_class - The type of form field + * @returns {string[]} Array of class names + */ builder_class_names: function(type_class) { var commonClasses = FIELD_CLASSES[type_class.toUpperCase()] || FIELD_CLASSES.DEFAULT; // ... rest of the method }includes/Assets.php (1)
109-181: Consider using automated code formatting.While the whitespace adjustments improve readability, consider using tools like PHP-CS-Fixer or PHP_CodeSniffer to automatically maintain consistent formatting across the codebase.
includes/Fields/Form_Field_Post_Title.php (1)
113-113: Add validation in prepare_entry method to enforce required field.While marking the field as required is correct, consider adding validation in the
prepare_entrymethod to ensure non-empty values are submitted.public function prepare_entry( $field ) { check_ajax_referer( 'wpuf_form_add' ); $field = isset( $_POST[ $field['name'] ] ) ? sanitize_text_field( wp_unslash( $_POST[ $field['name'] ] ) ) : ''; + if ( $field['required'] === 'yes' && empty( $field ) ) { + throw new \Exception( __( 'Post title is required', 'wp-user-frontend' ) ); + } return $field; }admin/form-builder/assets/js/components/field-visibility/index.js (1)
1-58: Consider restructuring the component for better maintainability.The component structure could be improved:
- Empty methods section can be removed
- Consider adding prop validations
- Add component documentation
Apply this diff to improve the component structure:
+/** + * Field Visibility Component + * + * Handles the visibility settings for form fields + */ Vue.component('field-visibility', { template: '#tmpl-wpuf-field-visibility', + props: { + editing_form_field: { + type: Object, + required: true + }, + option_field: { + type: Object, + required: true + } + }, + mixins: [ wpuf_mixins.option_field_mixin, wpuf_mixins.form_field_mixin, ], computed: { // ... existing computed properties }, - methods: { - - }, - watch: { // ... existing watchers } });includes/Fields/Form_Field_reCaptcha.php (1)
134-141: Fix grammatical error in the message.There's a grammatical error in the reCaptcha key link text.
- __( 'Click here to get the these key', 'wp-user-frontend' ) + __( 'Click here to get these keys', 'wp-user-frontend' )admin/form-builder/assets/js/components/field-option-data/index.js (2)
32-49: Consider modernizing the drag-and-drop implementation.While the current jQuery UI sortable implementation works, consider using Vue's native features or dedicated Vue drag-and-drop libraries (e.g., vuedraggable) for better integration and maintainability.
Example modernization using vuedraggable:
-mounted: function () { - var self = this; - this.set_options(); - $(this.$el).find('.option-field-option-chooser').sortable({ - items: '.option-field-option', - handle: '.sort-handler', - update: function (e, ui) { - var item = ui.item[0], - data = item.dataset, - toIndex = parseInt($(ui.item).index()), - fromIndex = parseInt(data.index); - self.options.swap(fromIndex, toIndex); - } - }); -}, +mounted: function () { + this.set_options(); +},Template changes (not in the current file):
<template> <draggable v-model="options" class="option-field-option-chooser" handle=".sort-handler" item-class="option-field-option" > <!-- existing option template --> </draggable> </template>
51-100: Consider enhancing option management robustness.While the implementation is solid, consider these improvements:
- Extract UI constants (like warning colors) to a theme configuration
- Enhance option value generation with proper slugification
Example improvements:
- confirmButtonColor: "#46b450", + confirmButtonColor: this.theme.colors.success, - this.options[index].value = label.toLocaleLowerCase().replace( /\s/g, '_' ); + this.options[index].value = this.slugify(label);Add a slugify method:
slugify: function(text) { return text .toString() .normalize('NFD') .replace(/[\u0300-\u036f]/g, '') .toLowerCase() .trim() .replace(/\s+/g, '_') .replace(/[^\w\-]+/g, '') .replace(/\-\-+/g, '_'); }admin/form-builder/assets/js/components/field-select/index.js (1)
8-13: Consider initializing state from props and adding i18n support.The new data properties could be enhanced in the following ways:
- Initialize
selectedOptionfrom the computedvalueif available- Add i18n support for the default "Select an option" text
Here's a suggested improvement:
data: function () { return { showOptions: false, - selectedOption: 'Select an option', + selectedOption: this.value || window.wpuf_form_builder.i18n.select_option, }; },admin/form-builder/assets/js/components/field-visibility/template.php (1)
2-7: Enhance accessibility for the help text component.While the layout structure is clean, consider improving accessibility by:
- Adding ARIA attributes to the help text component
- Ensuring proper focus management
<div class="wpuf-flex"> <label v-if="option_field.title" class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label> - <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> + <help-text + v-if="option_field.help_text" + :text="option_field.help_text" + :aria-label="option_field.title ? `Help text for ${option_field.title}` : 'Help text'" + role="tooltip"> + </help-text> </div>admin/form-builder/assets/js/components/field-select/template.php (1)
6-28: Add click-outside handling and improve state management.The current implementation needs improvements in state management and user interaction:
- Add click-outside directive to close the dropdown when clicking elsewhere:
- <div class="option-fields-section wpuf-relative"> + <div class="option-fields-section wpuf-relative" v-click-outside="() => showOptions = false">
- Add these methods to your component's script:
methods: { initializeSelectedOption() { this.selectedOption = this.option_field.options[this.value] || 'Select an option'; }, highlightPreviousOption() { // Implementation for keyboard navigation }, highlightNextOption() { // Implementation for keyboard navigation }, selectHighlightedOption() { // Implementation for keyboard selection } }, watch: { value: { immediate: true, handler(newValue) { this.initializeSelectedOption(); } } }admin/form-builder/assets/js/form-builder.js (2)
170-170: Swal.fire content enhancements.
These lines create an instructional tooltip using lengthy strings and HTML. Consider extracting these strings into a more maintainable structure or a localized template to avoid clutter. This helps keep your code cleaner and facilitates potential translations.Also applies to: 174-174, 181-181, 186-186, 188-188
532-608: Extensive toggle fields logic.
These lines manage multiple toggles and dynamic field shows/hides. While it’s effective, the repeated show/hide calls could be consolidated into a more structural approach, e.g. configuring each setting in a data-driven table or mapping. That would streamline maintainability.assets/js/wpuf-form-builder.js (4)
170-170: Custom field tooltip.
Great for user guidance. The step-based instructions are helpful, but consider extracting them into a designated function or partial to ease maintenance and keep the code base DRY.Also applies to: 174-174, 181-181, 186-186, 188-188
470-479: Computed property: section_exists.
A concise check to ensure the active settings tab indeed has a section object. This is neat. Keep an eye on potential null pointers if the store changes structure or dynamic updates.
505-510: Drafting selectize after nextTick.
This recognized pattern ensures DOM readiness for the select elements. No major issues. Re-check that nextTick plus setTimeout is not needed if you only need nextTick in some cases.
532-608: Toggling advanced form builder settings.
As with the other file, these toggles are numerous. Consider a data-driven approach for clarity and maintainability, especially if more toggles are planned or if you want a consistent pattern across all toggles.assets/js/wpuf-form-builder-components.js (2)
1004-1006: Combining mixins for column fields.
You’re pulling in form_field_mixin and add_form_field. Keep an eye on possible naming collisions within mixins. Typically, you might want to ensure method or data property names are carefully unique.
1116-1131: Computed column classes.
Generating column classes (column-1, column-2, etc.) is straightforward. This approach is flexible, but if you allow user-defined column counts in the future, ensure you handle more than three columns gracefully.assets/js-templates/form-components.php (4)
85-405: Streamline the newly introduced builder templates for maintainability.
This large block defines the v4.1 builder stage template, multi-select handling, and option data fields. While the structure appears consistent with Vue best practices, consider:
• Splitting these templates into smaller, reusable components to keep each file focused and improve maintainability.
• Checking for potential performance bottlenecks when rendering large lists (e.g., form_fields) by investigating virtual scrolling or pagination if form field counts grow.
548-611: Ensure robust behavior for select field interactions.
The dynamic toggling of select options (e.g., show/hide options, inline-lists) is helpful, but be mindful of:
• Proper user feedback for large option sets.
• Accessibility concerns, particularly keyboard navigation and screen reader labeling.
757-757: Small placeholder check.
Line 757 modifies a single placeholder conditional. Confirm that the default messages (e.g., fallback text) remain consistent across all recaptcha or turnstile placeholders.
772-964: Refactor large column-field blocks.
This block handles nested column fields with an extensive set of conditions and dynamic classes. Consider factoring out repeated logic (e.g., label rendering, pro checks) into utility functions or sub-components to reduce duplication and enhance clarity.admin/form-builder/assets/js/components/help-text/template.php (1)
1-10: Enhance SVG accessibility.The changes look good! The SVG icon replacement is clean and follows a consistent design pattern. However, let's improve accessibility by adding ARIA attributes.
Add
roleandaria-labelattributes to make the SVG more accessible:<span class="field-helper-text wpuf-ml-2" :data-placement="placement" data-toggle="tooltip" data-container="body"> - <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"> + <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" role="img" aria-label="Help"> <path d="M9.833 12.333H9V9h-.833M9 5.667h.008M16.5 9a7.5 7.5 0 1 1-15 0 7.5 7.5 0 1 1 15 0z" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span>admin/form-builder/assets/js/components/field-option-pro-feature-alert/template.php (1)
1-7: Enhance tooltip accessibility.The changes look good! The utility classes provide consistent styling. However, let's improve accessibility for screen readers.
Add
aria-labelto the link and improve the alt text for the icon:<div class="panel-field-opt panel-field-opt-pro-feature wpuf-flex wpuf-items-center wpuf-text-sm wpuf-text-gray-700 wpuf-font-medium"> <label>{{ option_field.title }} </label><br> <label class="wpuf-pro-text-alert wpuf-ml-2 wpuf-tooltip-top" data-tip="<?php esc_attr_e( 'Available in PRO version', 'wp-user-frontend' ); ?>"> - <a :href="pro_link" target="_blank"><img src="<?php echo wpuf_get_pro_icon() ?>" alt="pro icon"></a> + <a :href="pro_link" target="_blank" aria-label="<?php esc_attr_e( 'Learn more about PRO features', 'wp-user-frontend' ); ?>"><img src="<?php echo wpuf_get_pro_icon() ?>" alt="<?php esc_attr_e( 'PRO feature icon', 'wp-user-frontend' ); ?>"></a> </label> </div>admin/form-builder/assets/js/components/form-dropdown_field/template.php (2)
2-11: Enhance dropdown accessibility.The changes look good! The class binding update and help text styling are consistent with the design system. However, let's improve accessibility for screen readers.
Add ARIA attributes to provide better context for screen readers:
<select - :class="builder_class_names('dropdown')"> + :class="builder_class_names('dropdown')" + :aria-label="field.label" + :aria-describedby="field.help ? field.name + '_help' : null"> <option v-if="field.first" value="">{{ field.first }}</option> <option v-if="has_options" v-for="(label, val) in field.options" :value="label" :selected="is_selected(label)" >{{ label }}</option> </select>
12-12: Add ID to help text for ARIA reference.Add an ID to the help text paragraph to associate it with the dropdown using
aria-describedby.- <p v-if="field.help" class="wpuf-mt-2 wpuf-text-sm wpuf-text-gray-500" v-html="field.help"></p> + <p v-if="field.help" :id="field.name + '_help'" class="wpuf-mt-2 wpuf-text-sm wpuf-text-gray-500" v-html="field.help"></p>admin/form-builder/assets/js/components/form-post_title/template.php (1)
7-8: Consider extracting common Tailwind classes into a reusable class.The extensive list of utility classes could be extracted into a reusable class to improve maintainability and consistency across similar input fields.
Consider creating a shared class in your CSS:
- :class="class_names('textfield')" - class="wpuf-block wpuf-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300" + :class="['wpuf-form-input', class_names('textfield')]"Then define the shared styles:
.wpuf-form-input { @apply wpuf-block wpuf-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300; }admin/form-builder/assets/js/components/field-multiselect/template.php (2)
6-11: Enhance accessibility of multi-select.The multi-select implementation could benefit from additional ARIA attributes and keyboard navigation support.
<select :class="['term-list-selector']" class="wpuf-w-full wpuf-mt-2 wpuf-border-primary wpuf-z-30" v-model="value" multiple + :aria-label="option_field.title" + :aria-describedby="option_field.help_text ? 'help-text-' + _uid : null" >
8-8: Review z-index management.The
wpuf-z-30class suggests potential z-index stacking context issues. Consider documenting the z-index hierarchy or using CSS custom properties for better maintainability.admin/form-builder/assets/js/components/field-checkbox/template.php (1)
1-12: Enhance accessibility and user experience.While the styling improvements are good, consider these accessibility enhancements:
<div v-if="met_dependencies" class="panel-field-opt panel-field-opt-checkbox wpuf-mb-6"> <label v-if="option_field.title" :class="option_field.title_class"> {{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> </label> <ul :class="[option_field.inline ? 'list-inline' : '']"> <li v-for="(option, key) in option_field.options" class="wpuf-mt-2"> <label> - <input type="checkbox" :class="builder_class_names('checkbox')" :value="key" v-model="value"> {{ option }} + <input + type="checkbox" + :id="'checkbox-' + key" + :class="builder_class_names('checkbox')" + :value="key" + v-model="value" + :aria-label="option"> + <span class="wpuf-ml-2">{{ option }}</span> </label> </li> </ul> </div>admin/form-builder/assets/js/components/field-text-meta/template.php (1)
1-14: Add missing accessibility attributes.The layout improvements look good, but let's enhance accessibility:
<div v-if="met_dependencies" class="panel-field-opt panel-field-opt-text panel-field-opt-text-meta"> <div class="wpuf-flex"> <label :for="option_field.title" class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label> <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> </div> <div class="wpuf-mt-2"> <input type="text" v-model="value" + :id="option_field.title" + :aria-describedby="option_field.help_text ? 'help-' + option_field.title : undefined" class="wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full"> </div> </div>admin/form-builder/assets/js/components/field-text/template.php (1)
1-25: Enhance accessibility for input fields.The layout and styling improvements look good. Let's add some accessibility enhancements:
<div v-if="met_dependencies" class="panel-field-opt panel-field-opt-text"> <div class="wpuf-flex"> <label :for="option_field.name" class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label> <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> </div> <div class="wpuf-mt-2"> <input v-if="option_field.variation && 'number' === option_field.variation" type="number" v-model="value" @focusout="on_focusout" @keyup="on_keyup" + :id="option_field.name" + :aria-describedby="option_field.help_text ? 'help-' + option_field.name : undefined" :class="builder_class_names('text')"> <input v-if="!option_field.variation" type="text" v-model="value" @focusout="on_focusout" @keyup="on_keyup" + :id="option_field.name" + :aria-describedby="option_field.help_text ? 'help-' + option_field.name : undefined" :class="builder_class_names('text')"> </div> </div>admin/form-builder/assets/js/components/form-section_break/template.php (1)
9-18: Consider adding aria-label for better accessibility.The dashed section break implementation looks good, but could benefit from improved accessibility.
Add aria-label to the divider elements:
- <div class="wpuf-border wpuf-border-gray-200 wpuf-h-0 wpuf-w-2/5"></div> + <div class="wpuf-border wpuf-border-gray-200 wpuf-h-0 wpuf-w-2/5" aria-hidden="true"></div>admin/form-builder/assets/js/components/form-post_content/template.php (1)
2-14: Add keyboard accessibility to image insertion button.The image insertion button implementation looks good, but could benefit from keyboard accessibility improvements.
Add keyboard interaction attributes:
<a class="wpuf-inline-flex wpuf-items-center wpuf-gap-x-1.5" - :class="builder_class_names('upload_btn')" href="#"> + :class="builder_class_names('upload_btn')" + href="#" + role="button" + tabindex="0" + @keydown.enter="$emit('click')" + @keydown.space.prevent="$emit('click')">admin/form-builder/assets/js/components/field-checkbox/index.js (1)
9-41: Consider adding validation for edge cases.The value computed property implementation looks good but could benefit from additional validation.
Add validation for edge cases:
value: { get: function () { + if (!this.editing_form_field || !this.option_field) { + return false; + } var value = this.editing_form_field[this.option_field.name]; if (this.option_field.is_single_opt) { + if (!this.option_field.options || Object.keys(this.option_field.options).length === 0) { + return false; + } var option = Object.keys(this.option_field.options)[0];admin/form-builder/assets/js/components/form-image_upload/template.php (1)
8-10: Consider extracting duplicate SVG icon into a reusable component.The same SVG icon is used in both templates. Consider creating a reusable Vue component for consistency and maintainability.
Example implementation:
<!-- components/icons/PlusIcon.vue --> <template> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="wpuf-size-5" role="img" aria-label="Add image icon"> <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" /> </svg> </template>Also applies to: 14-16
admin/form-builder/assets/js/components/form-checkbox_field/template.php (1)
2-17: Consider unifying checkbox styles between inline and block layouts.The inline and block layouts use different class naming approaches (
builder_class_names('checkbox')vsclass_names('checkbox_btns')). This inconsistency could lead to maintenance issues.-:class="class_names('checkbox_btns')" +:class="builder_class_names('checkbox')"Also applies to: 19-34
admin/form-builder/assets/js/mixins/add-form-field.js (1)
57-61: Well-structured pro feature detection.Clean implementation of the pro feature check. Consider adding error handling for undefined settings.
is_pro_preview: function (template) { var is_pro_active = wpuf_form_builder.is_pro_active === '1'; - - return (!is_pro_active && this.field_settings[template] && this.field_settings[template].pro_feature); + return !is_pro_active && + this.field_settings?.[template]?.pro_feature || false; },admin/form-builder/assets/js/mixins/global.js (1)
10-12: Consider stronger type checking for pro status.The current implementation might be fragile with different value types.
is_pro_active: function () { - return wpuf_form_builder.is_pro_active === '1'; + return Boolean(wpuf_form_builder.is_pro_active) && + String(wpuf_form_builder.is_pro_active) === '1'; },admin/form-builder/assets/js/components/field-option-data/template.php (2)
29-30: Fix typo in help text message.There's a typo in the help text message: "otder" should be "other".
- <help-text text="<?php esc_attr_e( 'Do not use & or otder special character for option label', 'wp-user-frontend' ); ?>"></help-text></td> + <help-text text="<?php esc_attr_e( 'Do not use & or other special characters for option label', 'wp-user-frontend' ); ?>"></help-text></td>
38-58: Add ARIA attributes for improved accessibility.The checkbox/radio inputs and sort handler lack proper ARIA attributes for accessibility.
<div> <input v-if="option_field.is_multiple" type="checkbox" :value="option.value" v-model="selected" class="wpuf-input-checkbox" + :aria-label="option.label" > <input v-else type="radio" :value="option.value" v-model="selected" :class="builder_class_names('radio')" + :aria-label="option.label" > </div> - <div class="sort-handler"> + <div class="sort-handler" role="button" aria-label="Drag to reorder" tabindex="0"> <i class="fa fa-bars"></i> </div>admin/form-builder/assets/js/components/builder-stage-v4-1/index.js (3)
144-146: Simplify boolean expression.The ternary operator is unnecessary here. You can directly return the boolean expression.
- return ( this.field_settings[template] && this.field_settings[template].pro_feature ) ? true : false; + return !!(this.field_settings[template]?.pro_feature);🧰 Tools
🪛 Biome (1.9.4)
[error] 145-145: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
[error] 145-145: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
175-177: Simplify boolean expression and use optional chaining.The ternary operator is unnecessary here. You can directly return the boolean expression.
- return ( field.recaptcha_type && 'invisible_recaptcha' === field.recaptcha_type ) ? true : false; + return field?.recaptcha_type === 'invisible_recaptcha';🧰 Tools
🪛 Biome (1.9.4)
[error] 176-176: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
113-132: Use arrow function to avoid unnecessary this binding.The self variable is unnecessary when using an arrow function.
- delete_field: function(index) { - var self = this; + delete_field: function(index) { (Swal.fire({ - text: self.i18n.delete_field_warn_msg, + text: this.i18n.delete_field_warn_msg, icon: 'warning', showCancelButton: true, confirmButtonColor: '#d54e21', - confirmButtonText: self.i18n.yes_delete_it, - cancelButtonText: self.i18n.no_cancel_it, + confirmButtonText: this.i18n.yes_delete_it, + cancelButtonText: this.i18n.no_cancel_it, customClass: { confirmButton: 'btn btn-success', cancelButton: 'btn btn-danger', } - })).then((result) => { + })).then(result => { if (result.isConfirmed) { - self.$store.commit('delete_form_field_element', index); + this.$store.commit('delete_form_field_element', index); } }); },🧰 Tools
🪛 Biome (1.9.4)
[error] 114-114: This aliasing of this is unnecessary.
Arrow functions inherits
thisfrom their enclosing scope.
Safe fix: Use this instead of an alias.(lint/complexity/noUselessThisAlias)
admin/form-builder/assets/js/components/form-fields-v4-1/template.php (2)
4-10: Add aria-label for better accessibility.The search input should have an aria-label for screen readers.
<input type="text" name="search" id="search" v-model="searched_fields" + aria-label="<?php esc_attr_e( 'Search form fields', 'wp-user-frontend' ); ?>" class="!wpuf-border-none !wpuf-rounded-lg wpuf-block wpuf-min-w-0 wpuf-grow wpuf-px-4 wpuf-py-1.5 wpuf-text-base wpuf-text-gray-900 placeholder:wpuf-text-gray-400 sm:wpuf-text-sm/6 !wpuf-shadow-none !wpuf-ring-transparent" placeholder="<?php esc_attr_e( 'Search Field', 'wp-user-frontend' ); ?>">
119-124: Add security attributes to external link.The external link should have security-related attributes.
<a class="wpuf-btn-primary" target="_blank" + rel="noopener noreferrer" href="<?php echo esc_url( 'https://wpuf.canny.io/ideas' ); ?>"> <?php esc_html_e( 'Share Your Idea', 'wp-user-frontend' ); ?> </a>admin/form-builder/assets/js/components/form-fields-v4-1/index.js (1)
132-154: Consider using optional chaining for validator property access.The
alert_invalidate_msgmethod could be improved by using optional chaining for safer property access.Apply this diff to use optional chaining:
- if (validator && validator.msg) { + if (validator?.msg) {🧰 Tools
🪛 Biome (1.9.4)
[error] 135-135: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
includes/Admin/template-parts/modal-v4.1.php (3)
2-10: Consider adding ARIA attributes for better accessibility.The modal should include ARIA attributes to improve accessibility for screen readers.
Add these attributes:
-<div class="wpuf-form-template-modal wpuf-w-[calc(100%+20px)] wpuf-ml-[-20px] wpuf-bg-gray-100 wpuf-hidden"> +<div + class="wpuf-form-template-modal wpuf-w-[calc(100%+20px)] wpuf-ml-[-20px] wpuf-bg-gray-100 wpuf-hidden" + role="dialog" + aria-labelledby="modal-title" + aria-modal="true">And for the close button:
-<button class="wpuf-absolute wpuf-right-4 wpuf-top-4 wpuf-text-gray-400 hover:wpuf-text-gray-600 focus:wpuf-outline-none wpuf-close-btn wpuf-border wpuf-border-gray-200 wpuf-rounded-3xl wpuf-p-2 hover:wpuf-border-gray-300"> +<button + class="wpuf-absolute wpuf-right-4 wpuf-top-4 wpuf-text-gray-400 hover:wpuf-text-gray-600 focus:wpuf-outline-none wpuf-close-btn wpuf-border wpuf-border-gray-200 wpuf-rounded-3xl wpuf-p-2 hover:wpuf-border-gray-300" + aria-label="Close modal">
40-62: Enhance template status handling.The template status logic could be improved for better maintainability.
Extract the template status logic into a separate function:
+<?php +function get_template_status($template) { + if (!$template->is_enabled()) { + return [ + 'url' => '#', + 'class' => 'template-inactive', + 'title' => __('This integration is not installed.', 'wp-user-frontend'), + 'disabled' => 'disabled', + 'btn_class' => 'wpuf-btn wpuf-btn-disabled' + ]; + } + return [ + 'url' => '', // Set your default URL here + 'class' => 'template-active', + 'title' => $template->title, + 'disabled' => '', + 'btn_class' => 'wpuf-btn-primary' + ]; +} +?>Then use it like:
-if (!$template->is_enabled()) { - $url = '#'; - $class = 'template-inactive'; - $title = __('This integration is not installed.', 'wp-user-frontend'); - $disabled = 'disabled'; - $btn_class = 'wpuf-btn wpuf-btn-disabled'; -} +$status = get_template_status($template); +$url = $status['url']; +$class = $status['class']; +$title = $status['title']; +$disabled = $status['disabled']; +$btn_class = $status['btn_class'];
130-168: Enhance JavaScript event handling.The JavaScript code could be improved for better maintainability and error handling.
Consider these improvements:
( function ( $ ) { + 'use strict'; + var popup = { init: function () { - $( '.wrap' ).on( 'click', 'a.page-title-action.add-form', this.openModal ); - $( '.wpuf-form-template-modal .wpuf-close-btn' ).on( 'click', $.proxy( this.closeModal, this ) ); + const $wrap = $('.wrap'); + const $modal = $('.wpuf-form-template-modal'); + + if (!$wrap.length || !$modal.length) { + console.warn('Required elements not found'); + return; + } + + $wrap.on('click', 'a.page-title-action.add-form', this.openModal.bind(this)); + $modal.find('.wpuf-close-btn').on('click', this.closeModal.bind(this)); - $( 'body' ).on( 'keydown', $.proxy( this.onEscapeKey, this ) ); + $(document).on('keydown', this.onEscapeKey.bind(this)); },Gruntfile.js (2)
3-5: Consider using a more flexible file mapping configuration.The current file mapping is hardcoded and might be difficult to maintain as the project grows.
Consider using a separate configuration file:
-const tailwindFileMap = { - 'admin/form-builder/views/form-builder-v4.1.php': 'admin/form-builder.css', -} +const tailwindFileMap = require('./config/tailwind-file-map.json');Create
config/tailwind-file-map.json:{ "admin/form-builder/views/form-builder-v4.1.php": "admin/form-builder.css", "__comment": "Add more mappings here" }
121-134: Optimize watch task configuration.The watch task could be optimized for better performance.
Consider these improvements:
tailwind: { files: [ - 'src/css/**/*.css', - 'admin/form-builder/views/*.php', - 'admin/form-builder/assets/js/**/*.php', - 'admin/form-builder/assets/js/**/*.js', - 'includes/Admin/**/*.php', - 'wpuf-functions.php', + // Group by file type for better performance + { + expand: true, + src: [ + 'src/css/**/*.css', + '{admin,includes}/**/*.php', + 'wpuf-functions.php' + ], + filter: 'isFile' + } ], tasks: ['shell:tailwind:src/css/admin/form-builder.css:assets/css/admin/form-builder.css'], options: { - spawn: false + spawn: false, + interval: 1000, // Add debounce + event: ['added', 'changed'] // Only watch relevant events } },admin/form-builder/assets/js/components/builder-stage-v4-1/template.php (3)
1-6: Enhance accessibility for form builder interface.The form builder interface needs ARIA attributes for better accessibility.
Add ARIA attributes:
-<div id="form-preview-stage" class="wpuf-h-[80vh]"> +<div + id="form-preview-stage" + class="wpuf-h-[80vh]" + role="region" + aria-label="Form Builder Preview Stage"> <div v-if="!form_fields.length" + role="status" + aria-live="polite" class="wpuf-flex wpuf-flex-col wpuf-items-center wpuf-justify-center wpuf-h-[80vh]">
8-21: Improve sortable list accessibility.The sortable list should be more accessible for keyboard navigation.
Add keyboard support:
<ul :class="['form-label-' + label_type]" - class="wpuf-form sortable-list wpuf-py-8"> + class="wpuf-form sortable-list wpuf-py-8" + role="list" + aria-label="Form Fields" + tabindex="0" + @keydown.space.prevent="handleSpaceKey" + @keydown.arrow-up.prevent="moveItemUp" + @keydown.arrow-down.prevent="moveItemDown">
100-115: Improve SVG accessibility.The SVG icon needs accessibility improvements.
Add ARIA attributes to SVG:
<svg width="15" height="15" viewBox="0 0 20 15" fill="none" - xmlns="http://www.w3.org/2000/svg"> + xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="Crown Icon" + focusable="false"> <title>Crown Icon</title> <path d="M19.2131 4.11564C19.2161 4.16916 19.2121 4.22364 19.1983 4.27775L17.9646 10.5323C17.9024 10.7741 17.6796 10.9441 17.4235 10.9455L10.0216 10.9818H10.0188H2.61682C2.35933 10.9818 2.13495 10.8112 2.07275 10.5681L0.839103 4.29542C0.824897 4.23985 0.820785 4.18385 0.824374 4.12895C0.34714 3.98269 0 3.54829 0 3.03636C0 2.40473 0.528224 1.89091 1.17757 1.89091C1.82692 1.89091 2.35514 2.40473 2.35514 3.03636C2.35514 3.39207 2.18759 3.71033 1.92523 3.92058L3.46976 5.43433C3.86011 5.81695 4.40179 6.03629 4.95596 6.03629C5.61122 6.03629 6.23596 5.7336 6.62938 5.22647L9.1677 1.95491C8.95447 1.74764 8.82243 1.46124 8.82243 1.14545C8.82243 0.513818 9.35065 0 10 0C10.6493 0 11.1776 0.513818 11.1776 1.14545C11.1776 1.45178 11.0526 1.72982 10.8505 1.93556L10.8526 1.93811L13.3726 5.21869C13.7658 5.73069 14.3928 6.03636 15.0499 6.03636C15.6092 6.03636 16.1351 5.82451 16.5305 5.43978L18.0848 3.92793C17.8169 3.71775 17.6449 3.39644 17.6449 3.03636C17.6449 2.40473 18.1731 1.89091 18.8224 1.89091C19.4718 1.89091 20 2.40473 20 3.03636C20 3.53462 19.6707 3.9584 19.2131 4.11564Z" fill="#FB9A28"/> </svg>assets/js/wpuf-form-builder-mixins.js (2)
23-34: Enhance alert dialog configuration.The alert dialog configuration could be more maintainable.
Extract alert configuration:
+const ALERT_CONFIGS = { + duplicate: { + title: '<span class="wpuf-text-orange-400">Oops...</span>', + html: '<p class="wpuf-text-gray-500 wpuf-text-xl wpuf-m-0 wpuf-p-0">You already have this field in the form</p>', + imageUrl: wpuf_form_builder.asset_url + '/images/oops.svg', + showCloseButton: true, + padding: '1rem', + width: '35rem', + customClass: { + confirmButton: "!wpuf-flex focus:!wpuf-shadow-none !wpuf-bg-primary", + closeButton: "wpuf-absolute" + } + } +}; -Swal.fire({ - title: '<span class="wpuf-text-orange-400">Oops...</span>', - html: '<p class="wpuf-text-gray-500 wpuf-text-xl wpuf-m-0 wpuf-p-0">You already have this field in the form</p>', - imageUrl: wpuf_form_builder.asset_url + '/images/oops.svg', - showCloseButton: true, - padding: '1rem', - width: '35rem', - customClass: { - confirmButton: "!wpuf-flex focus:!wpuf-shadow-none !wpuf-bg-primary", - closeButton: "wpuf-absolute" - }, -}); +Swal.fire(ALERT_CONFIGS.duplicate);
109-139: Optimize builder class names method.The builder class names method could be optimized for better maintainability.
Extract class mappings:
+const CLASS_MAPPINGS = { + upload_btn: 'file-selector wpuf-rounded-md wpuf-btn-secondary', + radio: 'wpuf-ml-3 wpuf-block wpuf-text-sm wpuf-font-medium wpuf-leading-6 wpuf-text-gray-900 checked:focus:!wpuf-bg-primary checked:hover:!wpuf-bg-primary checked:before:!wpuf-bg-white checked:!wpuf-bg-primary', + checkbox: 'wpuf-h-4 wpuf-w-4 wpuf-rounded wpuf-border-gray-300 !wpuf-mt-0.5 checked:focus:!wpuf-bg-primary checked:hover:wpuf-bg-primary checked:!wpuf-bg-primary before:!wpuf-content-none', + dropdown: 'wpuf-block wpuf-w-full wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300', + default: 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full' +}; builder_class_names: function(type_class) { - var commonClasses = ''; - switch (type_class) { - case 'upload_btn': - commonClasses = 'file-selector wpuf-rounded-md wpuf-btn-secondary'; - break; - // ... other cases - } + const commonClasses = CLASS_MAPPINGS[type_class] || CLASS_MAPPINGS.default;admin/form-builder/views/form-builder-v4.1.php (2)
112-131: Improve accessibility of tab navigation.While ARIA roles are used, the tab list structure could be enhanced for better screen reader support.
Add these attributes:
-<div class="wpuf-flex wpuf-items-center wpuf-mt-8"> +<div class="wpuf-flex wpuf-items-center wpuf-mt-8" role="tablist" aria-label="Form sections">
134-164: Consider performance implications of large form layouts.The form editor section uses a fixed height with overflow, which might cause performance issues with large forms. Consider implementing virtual scrolling for better performance with large datasets.
admin/form-builder/assets/js/components/form-column_field/index.js (2)
42-98: Improve sortable implementation for better performance.The jQuery UI sortable implementation could be optimized by:
- Using a throttled update handler
- Caching selectors
- Using more efficient DOM queries
306-371: Optimize column resizing logic.The column resizing implementation uses direct DOM manipulation and could benefit from using Vue's reactivity system instead.
Consider using a Vue-based resize directive or component instead of jQuery for better integration with Vue's reactivity system.
includes/Admin/Forms/Admin_Form_Builder.php (1)
380-409: Consider caching the remote data for longer periods.The
get_pro_field_messages()method fetches data from a remote URL and caches it for one day. Consider:
- Implementing exponential backoff for failed requests
- Caching for a longer period (e.g., 1 week) since pro field assets likely don't change frequently
- Adding error logging for failed requests
-set_transient( self::PRO_FIELD_ASSETS, $info, DAY_IN_SECONDS ); +set_transient( self::PRO_FIELD_ASSETS, $info, WEEK_IN_SECONDS ); + +if ( is_wp_error( $response ) ) { + error_log( sprintf( 'WPUF Pro Field Assets Error: %s', $response->get_error_message() ) ); +}includes/Admin/Forms/Admin_Form.php (1)
254-276: Consider enhancing accessibility for the sidebar navigation.While the UI has been modernized with Tailwind CSS, consider adding ARIA attributes to improve accessibility.
<div class="wpuf-mb-4 wpuf-flex wpuf-justify-between"> - <h2 class="wpuf-text-base wpuf-text-gray-600 wpuf-mb-2 wpuf-flex wpuf-items-center"> + <h2 class="wpuf-text-base wpuf-text-gray-600 wpuf-mb-2 wpuf-flex wpuf-items-center" role="heading" aria-level="2"> <svg class="wpuf-size-4 wpuf-mr-2 wpuf-stroke-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" /> </svg> <?php esc_html_e( 'Post Settings', 'wp-user-frontend' ); ?> </h2>admin/form-builder/views/settings-sidebar.php (1)
219-220: Consider adding error handling for empty settings.The settings rendering doesn't handle the case where
$settings_itemsmight be empty.+if ( empty( $settings_items ) ) { + ?> + <div class="wpuf-settings-body wpuf-py-4"> + <p class="wpuf-text-gray-500"><?php esc_html_e( 'No settings available.', 'wp-user-frontend' ); ?></p> + </div> + <?php + return; +}includes/Admin/Admin_Subscription.php (1)
251-251: LGTM! Improved error handling for billing amount.The change adds proper null checking and type casting, preventing potential PHP notices and ensuring type safety.
Consider using PHP's null coalescing operator for a more concise expression:
-$cost = isset( $pack->meta_value['billing_amount'] ) ? (float) $pack->meta_value['billing_amount'] : 0; +$cost = (float) ($pack->meta_value['billing_amount'] ?? 0);assets/less/frontend-forms.less (1)
2070-2074: New dropzone styling added:
A new .form-preview-stage-dropzone class has been introduced with a light green background (#f0fdf4), a distinct green border (1px solid #4ade80), and a fixed height of 50px. This update should provide clear visual feedback for dropzone areas. Consider whether a hover or active state might further enhance user interaction.assets/css/frontend-forms.css (1)
1789-1793: New dropzone styling in CSS:
The addition of the .form-preview-stage-dropzone class in the CSS file mirrors the changes in the Less file. The background color, border, and height properties look appropriate for defining a dropzone area. Ensure that these styles are consistently applied across the form builder’s preview stage and that any interactive states (such as hover effects) are handled, if required by the design.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (51)
assets/images/adjustments-horizontal.svgis excluded by!**/*.svgassets/images/arrow-up-tray.svgis excluded by!**/*.svgassets/images/badge-check.svgis excluded by!**/*.svgassets/images/check-circle.svgis excluded by!**/*.svgassets/images/checked-green.svgis excluded by!**/*.svgassets/images/chevron-down.svgis excluded by!**/*.svgassets/images/clock.svgis excluded by!**/*.svgassets/images/cloud.svgis excluded by!**/*.svgassets/images/code-bracket-square.svgis excluded by!**/*.svgassets/images/code.svgis excluded by!**/*.svgassets/images/cog-8-tooth.svgis excluded by!**/*.svgassets/images/command-line.svgis excluded by!**/*.svgassets/images/crown-white.svgis excluded by!**/*.svgassets/images/document-check.svgis excluded by!**/*.svgassets/images/exclamation-circle.svgis excluded by!**/*.svgassets/images/eye-off.svgis excluded by!**/*.svgassets/images/form-blank-state.svgis excluded by!**/*.svgassets/images/globe-alt.svgis excluded by!**/*.svgassets/images/key-rounded.svgis excluded by!**/*.svgassets/images/link.svgis excluded by!**/*.svgassets/images/location-marker.svgis excluded by!**/*.svgassets/images/lock-icon-rounded-bg.svgis excluded by!**/*.svgassets/images/mail.svgis excluded by!**/*.svgassets/images/map.svgis excluded by!**/*.svgassets/images/menu-alt-2.svgis excluded by!**/*.svgassets/images/menu-alt-4.svgis excluded by!**/*.svgassets/images/minus-circle-green.svgis excluded by!**/*.svgassets/images/oops.svgis excluded by!**/*.svgassets/images/photograph.svgis excluded by!**/*.svgassets/images/play.svgis excluded by!**/*.svgassets/images/plus-circle-green.svgis excluded by!**/*.svgassets/images/qrcode.svgis excluded by!**/*.svgassets/images/queue-list.svgis excluded by!**/*.svgassets/images/recaptcha-placeholder.pngis excluded by!**/*.pngassets/images/rectangle-stack.svgis excluded by!**/*.svgassets/images/squares-2x2.svgis excluded by!**/*.svgassets/images/squares-2x2.zipis excluded by!**/*.zipassets/images/star.svgis excluded by!**/*.svgassets/images/stop.svgis excluded by!**/*.svgassets/images/tag.svgis excluded by!**/*.svgassets/images/templates/blank.svgis excluded by!**/*.svgassets/images/templates/edd.pngis excluded by!**/*.pngassets/images/templates/edd.svgis excluded by!**/*.svgassets/images/templates/event.svgis excluded by!**/*.svgassets/images/templates/post.pngis excluded by!**/*.pngassets/images/templates/post.svgis excluded by!**/*.svgassets/images/templates/woocommerce.pngis excluded by!**/*.pngassets/images/templates/woocommerce.svgis excluded by!**/*.svgassets/images/title.svgis excluded by!**/*.svgassets/images/view-columns.svgis excluded by!**/*.svgpackage-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (107)
Gruntfile.js(5 hunks)Lib/Appsero/Client.php(1 hunks)admin/form-builder/assets/js/components/builder-stage-v4-1/index.js(1 hunks)admin/form-builder/assets/js/components/builder-stage-v4-1/template.php(1 hunks)admin/form-builder/assets/js/components/builder-stage/index.js(1 hunks)admin/form-builder/assets/js/components/field-checkbox/index.js(1 hunks)admin/form-builder/assets/js/components/field-checkbox/template.php(1 hunks)admin/form-builder/assets/js/components/field-multiselect/template.php(1 hunks)admin/form-builder/assets/js/components/field-option-data/index.js(1 hunks)admin/form-builder/assets/js/components/field-option-data/template.php(1 hunks)admin/form-builder/assets/js/components/field-option-pro-feature-alert/template.php(1 hunks)admin/form-builder/assets/js/components/field-options/index.js(1 hunks)admin/form-builder/assets/js/components/field-options/template.php(2 hunks)admin/form-builder/assets/js/components/field-radio/template.php(1 hunks)admin/form-builder/assets/js/components/field-select/index.js(2 hunks)admin/form-builder/assets/js/components/field-select/template.php(1 hunks)admin/form-builder/assets/js/components/field-text-meta/template.php(1 hunks)admin/form-builder/assets/js/components/field-text/index.js(1 hunks)admin/form-builder/assets/js/components/field-text/template.php(1 hunks)admin/form-builder/assets/js/components/field-textarea/index.js(1 hunks)admin/form-builder/assets/js/components/field-textarea/template.php(1 hunks)admin/form-builder/assets/js/components/field-visibility/index.js(1 hunks)admin/form-builder/assets/js/components/field-visibility/template.php(3 hunks)admin/form-builder/assets/js/components/form-checkbox_field/template.php(1 hunks)admin/form-builder/assets/js/components/form-column_field/index.js(4 hunks)admin/form-builder/assets/js/components/form-column_field/template.php(1 hunks)admin/form-builder/assets/js/components/form-custom_hidden_field/template.php(1 hunks)admin/form-builder/assets/js/components/form-dropdown_field/template.php(1 hunks)admin/form-builder/assets/js/components/form-email_address/template.php(1 hunks)admin/form-builder/assets/js/components/form-featured_image/template.php(1 hunks)admin/form-builder/assets/js/components/form-fields-v4-1/index.js(1 hunks)admin/form-builder/assets/js/components/form-fields-v4-1/template.php(1 hunks)admin/form-builder/assets/js/components/form-fields/index.js(1 hunks)admin/form-builder/assets/js/components/form-image_upload/template.php(1 hunks)admin/form-builder/assets/js/components/form-multiple_select/template.php(1 hunks)admin/form-builder/assets/js/components/form-post_content/template.php(1 hunks)admin/form-builder/assets/js/components/form-post_excerpt/template.php(1 hunks)admin/form-builder/assets/js/components/form-post_tags/template.php(1 hunks)admin/form-builder/assets/js/components/form-post_title/template.php(1 hunks)admin/form-builder/assets/js/components/form-radio_field/template.php(1 hunks)admin/form-builder/assets/js/components/form-recaptcha/template.php(1 hunks)admin/form-builder/assets/js/components/form-section_break/template.php(1 hunks)admin/form-builder/assets/js/components/form-taxonomy/template.php(3 hunks)admin/form-builder/assets/js/components/form-text_field/template.php(1 hunks)admin/form-builder/assets/js/components/form-textarea_field/template.php(1 hunks)admin/form-builder/assets/js/components/form-website_url/template.php(1 hunks)admin/form-builder/assets/js/components/help-text/index.js(1 hunks)admin/form-builder/assets/js/components/help-text/template.php(1 hunks)admin/form-builder/assets/js/form-builder.js(16 hunks)admin/form-builder/assets/js/mixins/add-form-field.js(2 hunks)admin/form-builder/assets/js/mixins/form-field.js(3 hunks)admin/form-builder/assets/js/mixins/global.js(1 hunks)admin/form-builder/assets/js/mixins/option-field.js(1 hunks)admin/form-builder/assets/less/form-builder.less(3 hunks)admin/form-builder/assets/less/variables.less(1 hunks)admin/form-builder/views/form-builder-v4.1.php(1 hunks)admin/form-builder/views/form-builder.php(2 hunks)admin/form-builder/views/settings-sidebar.php(1 hunks)assets/css/admin.css(0 hunks)assets/css/frontend-forms.css(2 hunks)assets/css/wpuf-form-builder.css(3 hunks)assets/js-templates/form-components.php(16 hunks)assets/js/wpuf-form-builder-components.js(15 hunks)assets/js/wpuf-form-builder-mixins.js(7 hunks)assets/js/wpuf-form-builder-wpuf-forms.js(2 hunks)assets/js/wpuf-form-builder.js(16 hunks)assets/less/admin.less(0 hunks)assets/less/frontend-forms.less(2 hunks)includes/Admin/Admin_Subscription.php(1 hunks)includes/Admin/Forms/Admin_Form.php(2 hunks)includes/Admin/Forms/Admin_Form_Builder.php(7 hunks)includes/Admin/Forms/Post/Templates/Form_Template.php(3 hunks)includes/Admin/Forms/Post/Templates/Post_Form_Template_Events_Calendar.php(1 hunks)includes/Admin/Forms/Post/Templates/Post_Form_Template_Post.php(1 hunks)includes/Admin/Forms/Post/Templates/Post_Form_Template_WooCommerce.php(1 hunks)includes/Admin/Forms/Post/Templates/Pro_Form_Preview_EDD.php(1 hunks)includes/Admin/Forms/Template_Post.php(1 hunks)includes/Admin/Menu.php(1 hunks)includes/Admin/Posting.php(2 hunks)includes/Admin/template-parts/modal-v4.1.php(1 hunks)includes/Admin/template-parts/modal.php(5 hunks)includes/Admin/views/post-form.php(1 hunks)includes/Assets.php(1 hunks)includes/Fields/Field_Contract.php(2 hunks)includes/Fields/Form_Field_Checkbox.php(1 hunks)includes/Fields/Form_Field_Cloudflare_Turnstile.php(1 hunks)includes/Fields/Form_Field_Column.php(2 hunks)includes/Fields/Form_Field_Dropdown.php(1 hunks)includes/Fields/Form_Field_Email.php(1 hunks)includes/Fields/Form_Field_Featured_Image.php(2 hunks)includes/Fields/Form_Field_Hidden.php(1 hunks)includes/Fields/Form_Field_Image.php(1 hunks)includes/Fields/Form_Field_MultiDropdown.php(1 hunks)includes/Fields/Form_Field_Numeric.php(0 hunks)includes/Fields/Form_Field_Post_Content.php(1 hunks)includes/Fields/Form_Field_Post_Excerpt.php(1 hunks)includes/Fields/Form_Field_Post_Tags.php(1 hunks)includes/Fields/Form_Field_Post_Taxonomy.php(1 hunks)includes/Fields/Form_Field_Post_Title.php(3 hunks)includes/Fields/Form_Field_Radio.php(1 hunks)includes/Fields/Form_Field_SectionBreak.php(2 hunks)includes/Fields/Form_Field_Text.php(1 hunks)includes/Fields/Form_Field_Textarea.php(2 hunks)includes/Fields/Form_Field_reCaptcha.php(2 hunks)includes/Fields/Form_Pro_Upgrade_Fields.php(16 hunks)includes/Frontend_Render_Form.php(1 hunks)includes/Pro_Upgrades.php(1 hunks)
⛔ Files not processed due to max files limit (7)
- includes/Setup_Wizard.php
- languages/wp-user-frontend.pot
- package.json
- src/css/admin/form-builder.css
- tailwind.config.js
- tests/chrome_recordings/post form templates.json
- wpuf-functions.php
💤 Files with no reviewable changes (3)
- includes/Fields/Form_Field_Numeric.php
- assets/css/admin.css
- assets/less/admin.less
✅ Files skipped from review due to trivial changes (20)
- includes/Fields/Form_Field_Checkbox.php
- includes/Fields/Form_Field_Post_Content.php
- includes/Admin/Forms/Post/Templates/Pro_Form_Preview_EDD.php
- includes/Admin/Forms/Post/Templates/Post_Form_Template_WooCommerce.php
- includes/Fields/Form_Field_Radio.php
- includes/Fields/Form_Field_Dropdown.php
- includes/Admin/Forms/Template_Post.php
- includes/Admin/template-parts/modal.php
- admin/form-builder/assets/js/components/form-multiple_select/template.php
- admin/form-builder/assets/less/variables.less
- includes/Fields/Field_Contract.php
- includes/Fields/Form_Field_Image.php
- includes/Admin/Forms/Post/Templates/Post_Form_Template_Events_Calendar.php
- includes/Fields/Form_Field_Email.php
- includes/Admin/Forms/Post/Templates/Post_Form_Template_Post.php
- includes/Fields/Form_Field_Post_Excerpt.php
- includes/Fields/Form_Field_Hidden.php
- includes/Fields/Form_Field_Post_Taxonomy.php
- includes/Fields/Form_Field_MultiDropdown.php
- includes/Fields/Form_Field_Post_Tags.php
🧰 Additional context used
🪛 Biome (1.9.4)
admin/form-builder/assets/js/components/builder-stage-v4-1/index.js
[error] 145-145: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 145-145: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 168-168: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 176-176: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 114-114: This aliasing of this is unnecessary.
Arrow functions inherits this from their enclosing scope.
Safe fix: Use this instead of an alias.
(lint/complexity/noUselessThisAlias)
admin/form-builder/assets/js/form-builder.js
[error] 634-634: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
assets/js/wpuf-form-builder.js
[error] 634-634: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
admin/form-builder/assets/js/components/form-fields-v4-1/index.js
[error] 135-135: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
assets/js/wpuf-form-builder-components.js
[error] 332-332: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 332-332: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 355-355: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 363-363: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 301-301: This aliasing of this is unnecessary.
Arrow functions inherits this from their enclosing scope.
Safe fix: Use this instead of an alias.
(lint/complexity/noUselessThisAlias)
[error] 1683-1683: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (113)
admin/form-builder/assets/js/components/form-email_address/template.php (2)
4-4: LGTM! Class binding enhancement aligns with form builder UI standardization.The addition of
builder_class_names('text')helps maintain consistent styling across text input elements in the form builder.
9-9: LGTM! Improved help text styling enhances readability.The change from
<span>to<p>with Tailwind utility classes (wpuf-mt-2,wpuf-text-sm,wpuf-text-gray-500) improves the visual hierarchy and readability of the help text.admin/form-builder/assets/js/components/form-post_excerpt/template.php (1)
13-13: LGTM! Semantic HTML and styling improvements.Good improvements:
- Changed from
spantoptag for better semantics- Added Tailwind CSS classes for consistent spacing and typography
includes/Fields/Form_Field_Column.php (1)
13-13: LGTM! Icon update aligns with the UI modernization.The icon change from 'columns' to 'view-columns' is consistent with the broader icon system updates across the codebase.
admin/form-builder/assets/js/components/form-textarea_field/template.php (3)
5-5: LGTM! Fixed attribute typo and updated class binding.The changes improve code quality by:
- Fixing the typo in the
:defaultattribute- Using the new
builder_class_namesmethod for consistent stylingAlso applies to: 8-8
11-14: LGTM! Improved text editor component formatting.The reformatting enhances code readability while maintaining functionality.
16-16: LGTM! Enhanced help text structure and styling.Good improvements:
- Using
<p>instead of<span>for better semantics- Added Tailwind classes for consistent styling
includes/Assets.php (2)
1-48: LGTM! Well-structured class with proper documentation.The class follows PSR-4 standards and has clear documentation for its properties and methods.
155-158: Verify the new CSS file exists.The new style entry references
css/admin/form-builder.css. Please ensure this file exists in the asset directory.✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Check if the new CSS file exists in the assets directory # Find the file in the assets directory fd "form-builder.css" --type f --full-path --base-directory "assets/css/admin" # If not found, check if it needs to be generated from source files fd "form-builder" --type f --extension scss --extension less --base-directory "assets"Length of output: 178
New CSS file verified in assets directory.
The shell script output confirms that "assets/css/admin/form-builder.css" exists, meeting the review comment requirements.
admin/form-builder/assets/js/components/form-custom_hidden_field/template.php (2)
9-9: LGTM! Improved semantic HTML and styling.The change from
spantopelement with Tailwind CSS classes (wpuf-mt-2,wpuf-text-sm,wpuf-text-gray-500) improves both semantic HTML and visual consistency.
4-4: Verify the builder_class_names method implementation.The change from
class_namestobuilder_class_namesappears to be part of standardizing class naming. Let's verify the method exists and is properly implemented.✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for builder_class_names method definition ast-grep --pattern 'builder_class_names($$$)' # Search for any imports or uses of this method rg "builder_class_names"Length of output: 7446
Builder Class Binding and Help Text Changes Verified
The new builder_class_names method is implemented and consistently used across multiple components, including the custom hidden field component. The updated help text using a p element with Tailwind CSS classes is also in line with the intended semantic and styling improvements.
includes/Fields/Form_Field_SectionBreak.php (2)
13-13: LGTM! Icon update aligns with UI improvements.The icon change from 'columns' to 'menu-alt-4' is consistent with the broader UI enhancement effort.
92-92: Document the new divider property.The newly added 'divider' property lacks documentation explaining its purpose and valid values. Please:
- Add PHPDoc comments explaining this property's purpose
- Document the valid values (e.g., is 'regular' the only option?)
- Consider adding validation in the class if specific values are expected
Could you provide documentation for this new property and its expected values?
includes/Fields/Form_Field_Post_Title.php (2)
97-97: LGTM! Consistent handling of required field status.The addition of 'required' to the excluded options is consistent with the field's required nature in WordPress.
9-9: Verify the 'title' icon exists in the icon library.The icon change from 'header' to 'title' is semantically more accurate, but we should ensure the icon exists in the icon library being used.
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for icon definitions or usage patterns rg -i "icon.*['\"]title['\"]" --type phpLength of output: 425
Icon 'title' Verified
The shell script output confirms that the "title" icon is referenced in both the post title and text fields via:
• includes/Fields/Form_Field_Post_Title.php
• includes/Fields/Form_Field_Text.phpAdditionally, the icon is utilized by the settings API for tab rendering, meaning it's consistently integrated across the codebase. No issues were found with the change.
admin/form-builder/assets/js/components/field-visibility/index.js (1)
4-7: Verify the new mixin integration.The addition of
wpuf_mixins.form_field_mixinneeds verification to ensure it's properly defined and doesn't conflict with the existingoption_field_mixin.Run this script to check the mixin definition and potential conflicts:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Verify the mixin definition and check for potential method conflicts # Search for the mixin definition ast-grep --pattern 'wpuf_mixins.form_field_mixin = { $$$ }' # Search for potential method conflicts between mixins ast-grep --pattern 'wpuf_mixins.option_field_mixin = { $$$ }'Length of output: 22283
New mixin integration verified
The new mixin, wpuf_mixins.form_field_mixin, is defined as expected (found in both admin/form-builder/assets/js/mixins/form-field.js and assets/js/wpuf-form-builder-mixins.js) and its structure is consistent with that of the existing wpuf_mixins.option_field_mixin. There were no signs of conflicting method signatures or properties between the two mixins.
includes/Fields/Form_Field_reCaptcha.php (2)
13-13: LGTM! Icon update improves visual semantics.The change from 'qrcode' to 'badge-check' better represents the verification nature of reCaptcha.
128-128: Verify the WPUF_ASSET_URI constant and SVG asset.Please ensure that:
- The WPUF_ASSET_URI constant is defined
- The key-rounded.svg file exists at the specified path
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Check if WPUF_ASSET_URI is defined and key-rounded.svg exists rg "define.*WPUF_ASSET_URI" fd "key-rounded.svg"Length of output: 254
Final Verification: WPUF_ASSET_URI is correctly defined and the key-rounded.svg asset exists.
- The constant WPUF_ASSET_URI is defined in wpuf.php as "WPUF_ROOT_URI . '/assets'".
- The SVG file key-rounded.svg is present at "assets/images/key-rounded.svg".
admin/form-builder/assets/js/components/field-textarea/template.php (1)
2-5: Improved accessibility and styling structure.The changes improve accessibility by correctly separating the label and textarea elements, while maintaining consistent spacing with utility classes.
admin/form-builder/assets/js/components/field-textarea/index.js (1)
4-7: LGTM! Enhanced field functionality with form field mixin.Adding the form field mixin standardizes behavior across form fields and promotes code reuse.
includes/Fields/Form_Field_Textarea.php (2)
14-14: LGTM! Updated icon for better visual representation.The icon change from 'paragraph' to 'menu-alt-2' aligns with the form builder's visual language.
79-79: Verify Vue.js binding in PHP context.The Vue.js class binding
:class="builder_class_names('textareafield')"might not work as expected in a PHP-rendered template. Please ensure this is properly processed by the framework.Run this script to check how Vue.js bindings are handled in other PHP templates:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for Vue.js class bindings in PHP templates rg -t php ':class="' --glob '**/*.php'Length of output: 25037
Vue.js Binding in PHP Template Confirmed
The search output shows that Vue.js class bindings (using syntax like
:class="builder_class_names('textareafield')") are consistently used across many PHP-rendered templates within the codebase. This pattern appears in multiple locations (e.g., in admin and asset templates), indicating that the framework is designed to correctly process these Vue.js directives from PHP templates. No changes are necessary.admin/form-builder/assets/js/components/field-options/index.js (1)
7-7: Verify mixin integration and potential method conflicts.The addition of
form_field_mixinalongsidefield_optionsmixin looks good, as it aligns with the broader enhancement of form field capabilities across components.Let's verify that there are no method conflicts between the mixins and the component:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Check for potential method conflicts between mixins and component. # Search for method definitions in form_field_mixin echo "Searching for method definitions in form_field_mixin..." rg -A 1 "methods:\s*{" . | rg -A 10 "form_field_mixin" # Search for method definitions in field_options mixin echo "Searching for method definitions in field_options mixin..." rg -A 1 "methods:\s*{" . | rg -A 10 "field_options" # Search for component methods that might conflict echo "Searching for component methods..." ast-grep --pattern $'Vue.component(\'field-options\', { $$$ methods: { $$$ } $$$ })'Length of output: 711
Let's gather additional information with an updated verification script using corrected regex patterns to avoid the previous errors.
🏁 Script executed:
#!/bin/bash # Description: Updated script to search for potential method conflicts between mixins and the Vue component. echo "Searching for method definitions related to 'form_field_mixin'..." rg -A 10 --regexp "methods:[[:space:]]*\\{" . | rg -A 10 "form_field_mixin" echo "----------------------------------------" echo "Searching for method definitions related to 'field_options' mixin..." rg -A 10 --regexp "methods:[[:space:]]*\\{" . | rg -A 10 "field_options" echo "----------------------------------------" echo "Searching for defined methods in the 'field-options' Vue component..." ast-grep --pattern $'Vue.component("field-options", { $$$ methods: { $$$ } $$$ })'Length of output: 3178
Mixin integration verified – no conflicting methods identified.
Based on our updated script executions:
- No method definitions for form_field_mixin were flagged, suggesting it does not introduce conflicting methods.
- The existing field_options mixin’s methods are present in related components without conflict.
- The field-options component’s methods were verified via ast-grep with no conflicts detected.
This indicates that adding form_field_mixin alongside field_options is properly integrated, and there are no apparent method name conflicts.
admin/form-builder/assets/js/components/field-option-data/index.js (3)
13-30: LGTM! Well-structured data management.The data and computed properties are well-organized, following Vue.js best practices for reactivity and state management.
102-120: LGTM! Effective reactive data management.The watchers are well-implemented, providing proper reactivity and parent component updates.
8-11: Verify the form_field_mixin integration and order.The addition of
form_field_mixinenhances the component's form-related capabilities. However, we should verify:
- The existence and implementation of the mixin
- Any potential method/property conflicts between the mixins
- Whether the mixin order is correct (as it affects method/property overrides)
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for the form_field_mixin definition and its usage echo "Searching for form_field_mixin definition..." rg -A 10 "form_field_mixin\s*=\s*{" echo "Checking other components using this mixin..." rg "wpuf_mixins\.form_field_mixin"Length of output: 5538
Verified: form_field_mixin integration and order are correct.
The mixin is defined (as seen in admin/form-builder/assets/js/mixins/form-field.js) and is used consistently by multiple components (e.g., in field-text, field-textarea, etc.). The ordering—listing wpuf_mixins.option_field_mixin first and then wpuf_mixins.form_field_mixin—is consistent with its usage across the codebase and should not introduce any conflicts.
includes/Fields/Form_Field_Featured_Image.php (2)
15-15: LGTM! Icon update aligns with the new design system.The icon update from the old value to 'photograph' is consistent with the broader icon system update across form field components.
113-113: Verify the impact of excluding 'width' option.The addition of 'width' to the excluded options array might affect existing forms that rely on width configuration. Please ensure this change is intentional and doesn't break existing functionality.
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for any existing usage of width configuration in form definitions rg -i "width.*featured.*image" -g "*.{php,json}"Length of output: 50
I'll run an additional script to search for any direct references to the string "width" (including in quotes) in the Featured Image field file. This should help us verify if there’s any code manipulation or reliance on the "width" option within that file.
🏁 Script executed:
#!/bin/bash rg -n "'width'" includes/Fields/Form_Field_Featured_Image.phpLength of output: 188
Impact of Excluding "width" Option Appears Minimal
The search results confirm that the only occurrence of "width" in relation to the featured image field is its use in the exclusion array in Form_Field_Featured_Image.php (line 113). No additional references were found suggesting that forms rely on a "width" configuration for the featured image field. Based on these findings, excluding "width" in this context appears intentional and doesn’t seem to affect existing functionality.
admin/form-builder/assets/js/components/field-select/index.js (1)
15-28: Ensure state synchronization between computed value and data properties.The computed
valueproperty and the newselectedOptiondata property might get out of sync since they're managed independently. Consider watching the computed value to updateselectedOption.Add a watcher to keep the states synchronized:
computed: { value: { get: function () { return this.editing_form_field[this.option_field.name]; }, set: function (value) { this.$store.commit('update_editing_form_field', { editing_field_id: this.editing_form_field.id, field_name: this.option_field.name, value: value }); } }, }, +watch: { + value: { + immediate: true, + handler: function(newVal) { + this.selectedOption = newVal || window.wpuf_form_builder.i18n.select_option; + } + } +}admin/form-builder/assets/js/components/form-website_url/template.php (2)
9-9: LGTM! Semantic HTML improvement with consistent styling.The change from
spantopelement improves semantic structure, and the Tailwind CSS classes provide consistent styling for help text.Let's verify if these Tailwind classes are consistently used for help text across other components:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for help text elements with similar Tailwind classes echo "Checking help text styling consistency across components:" rg "wpuf-(mt-2|text-sm|text-gray-500)" --type phpLength of output: 23403
Tailwind styling for help texts is consistent across components.
The search confirms that the same set of classes ("wpuf-mt-2 wpuf-text-sm wpuf-text-gray-500") is used in multiple templates, including the one in question (form-website_url). This consistency verifies both the semantic improvement and styling uniformity.
4-4: Verify the existence and usage ofbuilder_class_namesmethod.The change from
class_namestobuilder_class_namessuggests a move to a more builder-specific class naming function. Let's verify its implementation and consistent usage.admin/form-builder/assets/js/components/form-taxonomy/template.php (4)
10-12: LGTM! Consistent class binding implementation.The class binding update maintains consistency with other select elements in the template.
46-46: LGTM! Semantic HTML improvement.The change improves semantics by using a paragraph element for help text. The added utility classes enhance styling consistency.
Run this script to verify the utility classes:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Verify the utility classes used in the template # Test: Search for utility class definitions rg -g '*.css' -g '*.less' 'wpuf-(mt-2|text-sm|text-gray-500)'Length of output: 65600
LGTM! Semantic HTML Improvement verified.
The utility classes wpuf-mt-2, wpuf-text-sm, and wpuf-text-gray-500 are defined in assets/css/admin/form-builder.css, confirming that the styling enhancements are supported.
40-42: LGTM! Verify field properties.The changes improve flexibility by:
- Using consistent class name generation
- Adding dynamic attribute bindings for placeholder and size
Run this script to verify the field properties:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Verify the field properties used in the template # Test: Search for field property definitions ast-grep --pattern 'field: { $$$ placeholder: $_, size: $_, $$$ }'Length of output: 76
I'll generate a new verification script to search for any occurrences of "field.placeholder" and "field.size" in the codebase so we can manually inspect if the field properties are defined elsewhere (or in another way) that confirm the dynamic binding.
🏁 Script executed:
#!/bin/bash echo "Searching for occurrences of 'field.placeholder':" rg "field\.placeholder" --context 3 echo "Searching for occurrences of 'field.size':" rg "field\.size" --context 3Length of output: 25365
LGTM! The dynamic bindings for placeholder and size appear consistent with those in other form components.
Observations:
- The search confirms that multiple templates (e.g., form-taxonomy, form-custom_hidden_field, form-text_field, etc.) use bindings like :placeholder="field.placeholder" and :size="field.size".
- While we don’t see a literal declaration of the field object (which might be defined via props or in component data elsewhere), the consistent usage across files suggests the intended dynamic binding is maintained.
- It’s advisable to double-check that the field object, along with its placeholder and size properties, is defined and passed properly to these components.
4-6: LGTM! Verify the builder_class_names method.The class binding update improves maintainability by using a dedicated method. The v-html directive is correctly used for rendering dynamic options.
Run this script to verify the builder_class_names method implementation:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Verify the builder_class_names method implementation # Test: Search for the builder_class_names method definition ast-grep --pattern 'builder_class_names($_) { $$$ }'Length of output: 56
I'll run a new script using ripgrep to search for the definition of the builder_class_names method across the repository:
🏁 Script executed:
#!/bin/bash # Searching for the usage and potential definition of builder_class_names in the repository. rg -n "builder_class_names("Length of output: 121
I'll run a new script using a fixed-string search to look for any occurrences of "builder_class_names" in the repository:
🏁 Script executed:
#!/bin/bash # Using fixed string search to find any occurrences of builder_class_names in the repository. rg -nF "builder_class_names"Length of output: 7615
Let's take a look at the implementation of the builder_class_names method. I'll run a command to get some context from its definition in the mixin file:
🏁 Script executed:
#!/bin/bash # Print 10 lines of context from the builder_class_names function implementation in admin/form-builder/assets/js/mixins/form-field.js rg -A 10 "builder_class_names: function\(type_class\)" admin/form-builder/assets/js/mixins/form-field.jsLength of output: 679
Verification Complete: builder_class_names Method is Properly Defined
The builder_class_names method is implemented in the mixin (admin/form-builder/assets/js/mixins/form-field.js) with a clear switch-case logic for handling different type classes (e.g., 'upload_btn', 'radio', etc.). The usage in the taxonomy template is consistent with its definition.
admin/form-builder/assets/js/mixins/option-field.js (1)
7-10: Good use of function for default value, but verify the generic default.The change to use a function for the default value is a Vue.js best practice that prevents shared state issues between components. However, the generic default value
{ key: 'value' }needs verification.Please verify that this generic default value is appropriate for all components using this mixin (field-checkbox, field-option-data, field-text, field-textarea, field-visibility). Consider using a more specific default structure if needed.
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for components using this mixin to understand their expected option_field structure ast-grep --pattern 'mixins: [$_] { $$$ option_field_mixin $$$ }'Length of output: 72
I'll run an additional search to gather more evidence on how the mixin (and specifically the option_field property) is used across the codebase. This will help us verify if the generic default value is truly appropriate.
Once we review the output of these commands, we can determine if all consuming components expect a more tailored default value than { key: 'value' }.
🏁 Script executed:
#!/bin/bash # Search for components that import the option-field mixin file echo "---- Searching for imports of admin/form-builder/assets/js/mixins/option-field.js ----" rg "admin/form-builder/assets/js/mixins/option-field.js" -n . echo "---- Searching for occurrences of the 'option_field:' property ----" rg --ignore-case "option_field:" -n .Length of output: 703
I'll run an additional script to display the surrounding context in the wpuf-form-builder-mixins.js file around line 323. This context may help us determine how the option_field default value is utilized and whether its generic structure ({ key: 'value' }) meets the expectations of its consumers.
🏁 Script executed:
#!/bin/bash sed -n '310,340p' ./assets/js/wpuf-form-builder-mixins.jsLength of output: 986
Default Value in Option Field Mixin: Functionality as Intended
• The use of a function for the default value prevents shared state issues and is in line with Vue's best practices.
• In wpuf-form-builder-mixins.js, the computed property checks for the presence of a "dependencies" key on option_field. With the default value { key: 'value' } lacking a dependencies property, the behavior (returning true) appears intentional.
• No evidence was found suggesting that consuming components expect a more specific structure. If the components (field-checkbox, field-option-data, field-text, field-textarea, field-visibility) require additional default settings, that adjustment should occur at the component level rather than in the mixin.Based on the reviewed context, the generic default value seems acceptable.
includes/Fields/Form_Field_Text.php (1)
13-13: Verify icon availability and consistency.The icon change from 'text-width' to 'title' aligns with the broader UI standardization effort. The new icon choice is more intuitive for a text input field.
Let's verify:
- Icon availability in the icon library
- Consistent icon usage across form fields
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Check icon usage across form field classes # Search for icon property assignments in form field classes rg -A 1 "\$this->icon\s*=\s*['\"]" includes/Fields/Length of output: 54
🏁 Script executed:
#!/bin/bash # 1. Print the first 30 lines of the file to verify the icon assignment context. sed -n '1,30p' includes/Fields/Form_Field_Text.php # 2. Search within includes/Fields for all occurrences of the 'title' icon assignment. rg -n --color=always "\$this->icon\s*=\s*['\"]title['\"]" includes/Fields/Length of output: 931
🏁 Script executed:
#!/bin/bash # 1. List all icon property assignments in the includes/Fields directory to verify consistency. rg -n "\$this->icon\s*=\s*['\"]" includes/Fields/ # 2. Search the entire repository for asset files (common image formats) with "title" in the filename, # which would indicate the availability of the 'title' icon in the icon library. find . -type f \( -iname "*title*.svg" -o -iname "*title*.png" -o -iname "*title*.jpg" \) 2>/dev/nullLength of output: 172
Icon update verified and approved
The update in includes/Fields/Form_Field_Text.php correctly sets the icon to "title" with the expected asset (./assets/images/title.svg) present. This change is consistent with our UI standardization effort and poses no issues.
admin/form-builder/assets/js/form-builder.js (8)
44-47: Ensure consistent naming for newly introduced state properties.
It’s great to see the introduction of is_older_form and is_post_form flags for clearer logic. However, consider whether naming them more explicitly might reduce potential confusion (e.g. "is_v4_form" vs. "is_older_form") if more form types are added in the future.
73-73: Resetting editing_field_id condition.
The logic that resets editing_field_id for 'form-fields' or 'form-fields-v4-1' panels is helpful. Just confirm that no edge cases exist where you might unintentionally lose context by setting it to 0 too aggressively.
93-96: Open field settings consistency.
Lines 93-96 filter the relevant field, and lines 106-108 include a small delay (setTimeout). This is coherent with how Vue updates happen asynchronously. Ensure that 400ms is always sufficient to guarantee DOM updates in all environments. If there's a risk of slow client devices, consider a more robust approach like Vue.nextTick() or a watch-based trigger.Also applies to: 106-108
244-244: Switching the panel on field deletion.
Ensuring that the panel changes back to 'form-fields' or 'form-fields-v4-1' is a good UX decision. Just verify that the correct panel is always re-selected in all possible workflows (e.g. when multiple panels exist).
395-398: Panel sections management.
set_panel_sections and set_default_panel_sections are straightforward. If needed, consider validating that sections is an array of objects with expected properties before setting state, to reduce potential store corruption.Also applies to: 401-403
422-430: New data properties for form builder.
These additions (shortcodeCopied, logoUrl, etc.) improve user feedback and branding. Looks solid. Confirm that your usage of i18n properties (e.g. i18n.copy_shortcode) always has fallbacks, so the UI remains intact even if translations are missing.
490-498: Re-initializing selectize after tab changes.
Attaching selectize once the tab changes is a good approach for dynamic UIs. Watch out for potential memory leaks when toggling back and forth—ensure that old selectize instances get cleaned up if applicable.
520-530: Conditional tab logic (clipboard, nav tabs).
This block binds a clipboard instance and sets up event listeners for settings-related navigation. The approach is correct. Just confirm that the binding is removed on component unmount if this code is used in a single-page app scenario.assets/js/wpuf-form-builder.js (8)
44-47: Added form type detection in Vuex state.
Using is_older_form and is_post_form clarifies how you conditionally choose the panel. This seems consistent with your form builder’s backward compatibility logic. Good addition.
73-73: Reset editing_field_id on panel switch.
Same logic as in the admin form-builder file. Double-check that no existing watchers or subsequent commits rely on the previous editing_field_id for partial updates.
93-96: Opening the field settings panel with a delay.
The approach is identical to the previous file’s pattern. Ensure that the 400ms wait is the best approach for your user base, or consider hooking into Vue’s lifecycle events for more robust synchronization.Also applies to: 106-108
244-244: Maintaining correct panel after field deletion.
Confirm that the logic does not inadvertently take the user away from a different specialized panel. If the user is working in a custom panel, might they lose context unexpectedly?
395-398: Setting/updating panel sections.
Looks straightforward. If you anticipate future nested sections, consider building a more extensible approach for these mutations.Also applies to: 401-403
422-430: Data properties for advanced form features.
(shortcodeCopied, logoUrl, settings_titles, etc.) all appear well integrated. Just confirm that your logic for forming the active_settings_tab label is bulletproof if new sub-items are added in future.
490-498: Watchers re-initializing UI elements.
Looks good. The deep watch on form_fields, plus reinit for selectize, addresses dynamic changes. Just be sure to remove or re-init old references to avoid memory bloat.
520-530: Clipboard listeners & tab click events.
Similar concerns as in the other file: it’s fine for a typical WordPress admin page, but watch out for SPA usage if memory leaks become relevant. Overall, it’s an acceptable approach.assets/js/wpuf-form-builder-components.js (7)
188-216: Introducing builder-stage-v4-1 component.
Good job separating this into a distinct component. The computed properties largely mirror builder-stage. Verify that any references to “isSingleInstance” or “containsField” remain consistent with the new naming to avoid confusion.
217-269: Enhanced sortable setup for #form-preview-stage.
Allowing drag-and-drop on both #form-preview-stage and .sortable-list is flexible. Keep an eye on possible double-binding issues. If future nested sortables are introduced, you may need a more robust approach to handle multiple-level nesting.
276-319: Clone/delete field logic with pro checks.
The checks for single-instance fields and pro features are consistent. Confirm that you provide enough user feedback if a user tries to clone a pro-only field or a single-instance field that’s already present.🧰 Tools
🪛 Biome (1.9.4)
[error] 301-301: This aliasing of this is unnecessary.
Arrow functions inherits
thisfrom their enclosing scope.
Safe fix: Use this instead of an alias.(lint/complexity/noUselessThisAlias)
331-352: Conditional is_pro_feature usage changed to is_pro_preview.
Nice rename to reflect actual usage. Make sure the logic behind “preview” vs. “feature” is consistent across your codebase.🧰 Tools
🪛 Biome (1.9.4)
[error] 332-332: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
[error] 332-332: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
372-378: field-checkbox and field-option-data mixins.
Attaching wpuf_mixins.form_field_mixin here is a good step for uniform code. This ensures advanced behaviors remain consistent across field components.
476-478: New data fields for field-select.
showOptions and selectedOption can be helpful for advanced UI interactions. Keep an eye on any watchers or watchers needed so that changes reflect quickly if you add more complex logic.
1552-1768: form-fields-v4-1: searching and filtering fields.
The search-based logic that filters available fields is a good addition for large field lists. Just confirm the performance remains acceptable if you scale up the number of fields or sections drastically.🧰 Tools
🪛 Biome (1.9.4)
[error] 1683-1683: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
assets/js-templates/form-components.php (7)
416-463: Validate pro feature checks and advanced toggles.
The conditions for pro feature alerts and advanced toggle expansions look correct. However, ensure that disabling these features in the free version is clear to the user. Also confirm that the “Pro” logic consistently matches your licensing checks to avoid confusion.
485-524: Consider rechecking the radio field editing flow.
These lines introduce field edits and validation logic for radio fields. Make sure partial invalid states are handled gracefully, and confirm that any disabled editing case does not break the UX.
620-669: Double-check hidden fields management.
The hidden fields section and controls appear coherent. Please verify that deleting or editing these fields always synchronizes with any upstream dependencies that rely on hidden field metadata.
689-751: Column layout logic looks good.
The new approach for columns within the form builder provides a flexible layout. Just ensure that reordering or nesting columns remains intuitive and that errors on one column do not block actions on another.
1154-1160: Confirm image upload triggers.
The inline-flex approach for uploading images is convenient. Ensure that any triggered upload events handle errors (e.g., user cancels upload, file is invalid) so that the interface does not silently fail.
1173-1351: Multiple incremental enhancements across various fields.
This span covers new or modified lines for help texts, placeholders, and reCaptcha checks. Overall, it looks cohesive. Confirm that each new help text is localized and that reCaptcha types are handled consistently with existing site keys, especially for invisible recaptcha.
1391-1452: Finalize form logic & styling.
Near the end of the file, double-check that all newly introduced CSS utility classes (e.g., for spacing, colors) are supported in the production build. Watch for conflicting classes that might override essential styles in other parts of the plugin.includes/Admin/views/post-form.php (1)
1-3: Check updated action hook usage.
You replaced “wpuf_admin_form_builder” with “wpuf_admin_form_builder_view.” Ensure upstream references are updated so that no functionalities break. Consider adding a comment or docblock clarifying why this hook changed.admin/form-builder/assets/js/components/form-text_field/template.php (1)
7-9: Enhanced class binding and help text rendering.
Applying builder_class_names for textfield and switching from tofor the help text is a good improvement for readability. Verify that external styling references (e.g., your CSS or utility classes) match this new HTML structure.
admin/form-builder/assets/js/components/form-recaptcha/template.php (1)
7-7: LGTM! Good use of strict equality operator.The changes look good! The use of strict equality operator (
!==) is a better practice than loose equality (!=) for type-safe comparisons.admin/form-builder/assets/js/components/form-post_title/template.php (1)
10-10: Verify color contrast for accessibility.The text-gray-500 class for help text might not provide sufficient contrast ratio for accessibility. Consider using a darker shade.
admin/form-builder/assets/js/components/field-multiselect/template.php (1)
1-1: Consider performance implications of v-if vs v-show.Using
v-ifinstead ofv-showwill cause the component to be re-mounted when dependencies change. Ifmet_dependencieschanges frequently, consider keepingv-showfor better performance.✅ Verification successful
🏁 Script executed:
#!/bin/bash # Check frequency of met_dependencies changes ast-grep --pattern 'met_dependencies = $_' -l jsLength of output: 50
🏁 Script executed:
#!/bin/bash # Search for all occurrences of "met_dependencies" in the repository across common file types rg "met_dependencies" --iglob "*.{js,vue,php,html}" --max-columns=1000Length of output: 1868
🏁 Script executed:
#!/bin/bash # Display the definition of met_dependencies in the mixin file to review its function body rg -A 20 'met_dependencies: function' admin/form-builder/assets/js/mixins/option-field.jsLength of output: 915
Performance Consideration on met_dependencies Implementation
The met_dependencies function in the mixin performs a straightforward dependency check by examining a limited set of properties and iterating over a small dependency list. This logic does not indicate heavy processing—even when used in multiple components—as confirmed by similar usages across the codebase (e.g. field-checkbox, field-radio) that all use v-if with met_dependencies.
- The mixin’s function quickly returns true if no dependencies exist or if no keys are present.
- Its execution cost is minimal, reducing the risk of performance problems even if re-mounted.
- Consistent use of v-if in similar components suggests that the change was deliberate; unless met_dependencies changes very frequently in your specific use cases, the re-mount performance cost should be acceptable.
Please monitor user interactions and dependency update frequency in practice. If updates become a performance concern, consider reverting to v-show for that context.
admin/form-builder/assets/js/components/field-text/index.js (1)
4-7: LGTM! Good enhancement with form_field_mixin.The addition of form_field_mixin while maintaining option_field_mixin improves component functionality without breaking existing behavior.
admin/form-builder/assets/js/components/form-section_break/template.php (1)
1-8: LGTM! Clean implementation of regular section break.The implementation uses appropriate Vue.js directives and Tailwind CSS classes for styling. The conditional rendering is well-structured.
admin/form-builder/assets/js/components/form-post_content/template.php (1)
16-23: LGTM! Clean textarea implementation.The textarea implementation uses appropriate Vue.js bindings and class names.
admin/form-builder/assets/js/components/form-radio_field/template.php (1)
31-31: LGTM! Help text implementation is accessible.The help text implementation uses semantic HTML and appropriate styling.
admin/form-builder/assets/js/components/field-checkbox/index.js (1)
4-7: LGTM! Good use of mixins for code reusability.The addition of
form_field_mixinalongsideoption_field_mixinpromotes code reuse and maintainability.admin/form-builder/assets/js/components/form-featured_image/template.php (1)
19-19: Good improvement on help text semantics!Converting the help text from
<span>to<p>improves semantic structure and accessibility.admin/form-builder/assets/js/components/field-options/template.php (2)
1-1: LGTM! Consistent spacing with Tailwind utilities.The addition of
wpuf-px-6andwpuf-mt-6classes provides consistent padding and margin spacing.Also applies to: 9-9
10-16: Well-structured dynamic styling for section headers.Good implementation of:
- Dynamic color changes based on section state
- Consistent hover effects
- Proper spacing utilities
- Clear visual hierarchy with icons
Also applies to: 32-38
admin/form-builder/assets/js/components/form-fields/index.js (1)
26-26: Verify performance with expanded sortable connections.While broadening the sortable connections improves flexibility, ensure it doesn't impact performance with large forms.
Run this script to check for potential performance bottlenecks:
admin/form-builder/assets/js/mixins/add-form-field.js (1)
21-31: Great improvement to error feedback UI!The enhanced error modal provides:
- Clear visual feedback with custom image
- Consistent styling with Tailwind
- Better user experience with close button
Lib/Appsero/Client.php (1)
168-168: Verify the impact of get_plugin_data parameters.The
get_plugin_data()function now includes additional parameters. Let's verify their purpose and impact.✅ Verification successful
🌐 Web query:
What are the parameters of WordPress get_plugin_data function and their purpose?💡 Result:
The WordPress `get_plugin_data` function retrieves metadata from a plugin's main file using three parameters: ## Parameters Overview | Parameter | Type | Default | Purpose | |-----------------|---------|---------|-------------------------------------------------------------------------| | `$plugin_file` | string | Required | Absolute path to the plugin's main PHP file | | `$markup` | bool | `true` | Determines if returned data includes HTML formatting | | `$translate` | bool | `true` | Controls whether text fields are translated via WordPress localization | ### Detailed Breakdown **1. `$plugin_file`** - **Purpose**: Specifies the filesystem path to the plugin's primary file (e.g., `wp-content/plugins/my-plugin/my-plugin.php`) - **Requirement**: Mandatory - **Example**: ```php get_plugin_data(__FILE__); // Uses current file's path ``` **2. `$markup** - **Behavior**: - When `true`, sanitizes output fields like descriptions/author names using `wp_kses()`[5][8] - When `false`, returns raw unformatted data **3. `$translate`** - **Functionality**: - Enables localization of text fields using `__()` when `true`[6][8] - Returns original language strings when `false` --- ## Key Notes - Requires including `wp-admin/includes/plugin.php` before use in non-admin contexts[1][4] - Returns an array containing headers like `Name`, `Version`, and `AuthorURI`[5] - Deprecated headers like "Site Wide Only" get converted to modern "Network" flag automatically[5][6] For implementation details: ```php // Basic usage pattern require_once ABSPATH . 'wp-admin/includes/plugin.php'; $data = get_plugin_data('/path/to/plugin.php', false); // No markup or translation echo "Plugin version: " . $data['Version']; ``` Citations: - 1: https://www.ensuredomains.com/codex/platform/wordpress/functions/get_plugin_data/ - 2: https://developer.wordpress.org/reference/functions/_get_plugin_data_markup_translate/ - 3: https://docs.classicpress.net/reference/functions/get_plugins/ - 4: https://pexetothemes.com/wordpress-functions/get_plugins/ - 5: https://wpseek.com/function/get_plugin_data/ - 6: https://hitchhackerguide.com/2011/02/12/get_plugin_data/ - 7: https://developer.wordpress.org/reference/classes/wp_rest_plugins_controller/get_plugin_data/ - 8: https://developer.wordpress.org/reference/functions/get_plugin_data/
Impact of get_plugin_data parameters verified
The function accepts three parameters—plugin file path, markup, and translate. In the usage:
• The file parameter specifies the plugin's main file.
• The second parameter (true) enables markup, meaning output fields are sanitized/formatted (e.g., using wp_kses()).
• The third parameter (false) disables translation, so text strings won’t be passed through localization functions.This configuration is valid if you want HTML-safe metadata without translation. No further action is needed.
assets/js/wpuf-form-builder-wpuf-forms.js (2)
113-113: Improved selector specificity.The selector change from
.buttonto.wpuf-field-buttonis more specific and better targets the intended elements.
122-122: Enhanced drag-and-drop functionality.The connectToSortable configuration now includes additional target areas, improving the flexibility of the drag-and-drop functionality.
admin/form-builder/assets/js/components/builder-stage/index.js (1)
38-38: Verify the handle selector change impact.The sortable handle selector has changed from
.control-buttons .moveto.field-buttons .move. Please ensure this change doesn't break existing functionality.includes/Fields/Form_Field_Cloudflare_Turnstile.php (1)
41-48: LGTM! Improved HTML structure and styling consistency.The changes properly wrap the turnstile div in a list item and add the wpuf-fields class, maintaining consistency with other form fields.
admin/form-builder/views/form-builder.php (2)
42-42: LGTM! Improved form ID initialization.The form_id initialization with proper sanitization using intval and wp_unslash improves code safety.
59-59: LGTM! Enhanced form switcher UI.Added draggable classes to form switcher list items to support drag-and-drop functionality.
includes/Fields/Form_Pro_Upgrade_Fields.php (2)
13-14: LGTM! New fields added correctly.The constructor has been updated to include two new fields:
time_fieldandphone_field, which are properly instantiated with their respective classes.
40-40: LGTM! Icon updates enhance UI consistency.The icon properties across all field classes have been updated to use more modern and consistent icon names, which aligns with the broader UI enhancement effort.
Also applies to: 51-51, 62-62, 75-75, 88-88, 96-96, 107-107, 118-118, 129-129, 140-140, 151-151, 195-195, 206-206, 217-217, 228-228, 239-239, 251-251, 263-263
includes/Admin/Forms/Post/Templates/Form_Template.php (2)
108-110: Verify the existence of the new modal template.The modal template path has been updated to use
modal-v4.1.php. Please ensure this file exists and contains the necessary template code.Run the following script to verify the existence and content of the new modal template:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Check if the new modal template exists and examine its content. # Check if the file exists if [ -f "includes/Admin/template-parts/modal-v4.1.php" ]; then echo "File exists. Content:" cat "includes/Admin/template-parts/modal-v4.1.php" else echo "File not found!" fiLength of output: 9268
Modal template file verified
The new modal template "includes/Admin/template-parts/modal-v4.1.php" exists and contains the expected modal code for rendering the template. The file includes the modal markup along with the necessary JavaScript to control the modal's behavior. No issues were detected with the updated template file.
19-19: Verify the impact of disabling post form template rendering.The action hook for rendering post form templates in the admin footer has been commented out. Please ensure this change doesn't break any existing functionality.
Run the following script to check for any dependencies on this action hook:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Check for any code that might depend on the 'admin_footer' action hook for rendering post form templates. # Search for any references to the render_post_form_templates method rg -A 5 'render_post_form_templates' # Search for any direct calls to the method ast-grep --pattern 'render_post_form_templates()'Length of output: 1147
Action Hook Comment-Out Verified
Based on our search:
- The only reference to render_post_form_templates is the commented-out add_action in Form_Template.php.
- The method render_post_form_templates() is defined in the same file but is not invoked anywhere else.
- No other code in the repository appears to depend on this action hook.
It appears that disabling the admin_footer action hook for rendering post form templates should not break existing functionality.
admin/form-builder/assets/js/components/form-column_field/template.php (3)
1-3: LGTM! Enhanced layout with Tailwind CSS utilities.The outer container has been updated with Tailwind CSS utility classes for improved flex layout and spacing, while preserving the dynamic column class binding.
18-27: LGTM! Enhanced field items with improved interactivity.The column field items have been updated with:
- Preserved dynamic class bindings for field properties
- Added hover effects and transitions using Tailwind CSS
- Improved handling of hidden fields
63-120: LGTM! Enhanced control buttons with improved visual feedback.The control buttons section has been updated with:
- Opacity transitions and hover effects using Tailwind CSS
- Added SVG icon for the pro feature link
- Improved button layout and spacing
admin/form-builder/assets/js/components/form-fields-v4-1/index.js (2)
4-28: LGTM! Well-structured component initialization.The component is properly initialized with:
- Template and mixins integration
- Reactive data properties
- Computed properties for Vuex store access
30-50: LGTM! Robust draggable functionality implementation.The draggable functionality is well-implemented with:
- Proper cleanup of previous instances
- Correct configuration of draggable options
- Proper connection to sortable containers
admin/form-builder/views/form-builder-v4.1.php (1)
1-4: Form submission should prevent default action and validate CSRF token.The form's submit handler uses
@submit.preventwhich is good for preventing default form submission. However, ensure thesave_form_buildermethod validates the nonce token before processing the form data.includes/Admin/Menu.php (1)
146-169: Consider security implications of third-party script.The Headway badge script is loaded from an external CDN. Consider:
- Adding SRI hash verification
- Loading script asynchronously (already done)
- Implementing a fallback
includes/Admin/Forms/Admin_Form_Builder.php (2)
11-18: LGTM! Well-documented constant definition.The constant
PRO_FIELD_ASSETSis properly defined with clear documentation explaining its purpose.
58-59: LGTM! Added new action hook for form builder view.The new action hook
wpuf_admin_form_builder_viewenhances extensibility by allowing additional integrations with the form builder view.includes/Admin/Forms/Admin_Form.php (1)
197-219: LGTM! Improved tab content visibility management using Vue.js.The code effectively uses Vue.js
v-showdirective for managing tab content visibility, providing a more dynamic user experience.admin/form-builder/views/settings-sidebar.php (1)
123-127: LGTM! Well-structured field rendering function.The
wpuf_render_settings_fieldfunction properly handles default values and existing settings.includes/Admin/Posting.php (2)
39-50: LGTM! Proper asset conflict prevention.The
dequeue_assetsmethod effectively prevents asset conflicts by:
- Checking the current screen
- Conditionally dequeuing styles based on pro version
63-65: LGTM! Improved script loading order.The code ensures proper loading order by enqueuing
wpuf-admin-form-builderbeforejquery-ui.assets/css/wpuf-form-builder.css (3)
200-200: LGTM! Improved active state visibility.Changed the active dropdown item background color to a more visible green shade (#16a34a).
540-541: LGTM! Enhanced dropzone visual feedback.Updated the form preview dropzone styling to use green colors (#f0fdf4 background and #4ade80 border) for better visual feedback during drag and drop operations.
858-858: LGTM! Improved modal responsiveness.Changed modal height to 100vh to ensure it takes up the full viewport height, improving the user experience on different screen sizes.
admin/form-builder/assets/less/form-builder.less (3)
269-269: LGTM! Improved color variable usage.Changed active dropdown background to use @wpufPrimary variable instead of @wpblue, maintaining consistency with the new color scheme.
677-678: LGTM! Enhanced dropzone styling.Updated form preview dropzone styling to use green colors, matching the CSS implementation.
1115-1115: LGTM! Improved modal responsiveness.Changed modal height to use viewport units (100vh) for better responsiveness.
assets/less/frontend-forms.less (1)
258-260: Updated wp-editor-wrap styling:
The change to set the border to "none" on the .wp-editor-wrap element removes the outline around the editor, streamlining its appearance. Please verify that this change aligns with the overall visual design and usability expectations for the editor in the form builder.
| @@ -1,13 +1,14 @@ | |||
| <div class="wpuf-fields"> | |||
| <textarea | |||
| v-if="'no' === field.rich" | |||
| :class="class_names('textareafield')" | |||
| :class="builder_class_names('textareafield')" | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove redundant default text binding.
The textarea has both :default_text="field.default" binding and {{ field.default }} as content. This creates unnecessary duplication and could lead to synchronization issues.
Apply this diff to remove the redundancy:
<textarea
v-if="'no' === field.rich"
:class="builder_class_names('textareafield')"
:placeholder="field.placeholder"
- :default_text="field.default"
:rows="field.rows"
:cols="field.cols"
>{{ field.default }}</textarea>Also applies to: 6-6, 9-9
| 'input_type' => 'section_break', | ||
| 'template' => $this->get_type(), | ||
| 'label' => $this->get_name(), | ||
| 'description' => __( 'Some description about this section adshfdsh', 'wp-user-frontend' ), |
There was a problem hiding this comment.
Remove accidental text in description.
The description contains what appears to be accidental keyboard input "adshfdsh".
- 'description' => __( 'Some description about this section adshfdsh', 'wp-user-frontend' ),
+ 'description' => __( 'Some description about this section', 'wp-user-frontend' ),📝 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.
| 'description' => __( 'Some description about this section adshfdsh', 'wp-user-frontend' ), | |
| 'description' => __( 'Some description about this section', 'wp-user-frontend' ), |
| <div | ||
| v-if="option_field.inline" | ||
| class="wpuf-mt-2 wpuf-flex wpuf-flex-wrap"> | ||
| <div | ||
| v-for="(option, key, index) in option_field.options" | ||
| class="wpuf-items-center"> | ||
| <label | ||
| class="wpuf-block wpuf-my-1 wpuf-mr-2 wpuf-font-medium wpuf-text-gray-900"> | ||
| <input | ||
| type="radio" | ||
| :value="key" | ||
| v-model="selected" | ||
| class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent"> | ||
| {{ option }} | ||
| </label> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Clean up inline radio implementation and improve accessibility.
The inline radio implementation has several issues:
- Unused
indexparameter in v-for - Missing key binding
- Same accessibility concerns as non-inline version
<div
v-if="option_field.inline"
class="wpuf-mt-2 wpuf-flex wpuf-flex-wrap">
<div
- v-for="(option, key, index) in option_field.options"
+ v-for="(option, key) in option_field.options"
+ :key="key"
class="wpuf-items-center">
<label
- class="wpuf-block wpuf-my-1 wpuf-mr-2 wpuf-font-medium wpuf-text-gray-900">
+ class="wpuf-block wpuf-my-1 wpuf-mr-2 wpuf-font-medium wpuf-text-gray-900"
+ :for="`visibility-inline-option-${key}`">
<input
type="radio"
:value="key"
v-model="selected"
+ :id="`visibility-inline-option-${key}`"
+ :aria-label="option"
class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent">
{{ option }}
</label>
</div>
</div>📝 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 | |
| v-if="option_field.inline" | |
| class="wpuf-mt-2 wpuf-flex wpuf-flex-wrap"> | |
| <div | |
| v-for="(option, key, index) in option_field.options" | |
| class="wpuf-items-center"> | |
| <label | |
| class="wpuf-block wpuf-my-1 wpuf-mr-2 wpuf-font-medium wpuf-text-gray-900"> | |
| <input | |
| type="radio" | |
| :value="key" | |
| v-model="selected" | |
| class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent"> | |
| {{ option }} | |
| </label> | |
| </div> | |
| </div> | |
| <div | |
| v-if="option_field.inline" | |
| class="wpuf-mt-2 wpuf-flex wpuf-flex-wrap"> | |
| <div | |
| v-for="(option, key) in option_field.options" | |
| :key="key" | |
| class="wpuf-items-center"> | |
| <label | |
| class="wpuf-block wpuf-my-1 wpuf-mr-2 wpuf-font-medium wpuf-text-gray-900" | |
| :for="`visibility-inline-option-${key}`"> | |
| <input | |
| type="radio" | |
| :value="key" | |
| v-model="selected" | |
| :id="`visibility-inline-option-${key}`" | |
| :aria-label="option" | |
| class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent"> | |
| {{ option }} | |
| </label> | |
| </div> | |
| </div> |
| <div | ||
| v-if="!option_field.inline" | ||
| class="wpuf-flex wpuf-items-center wpuf-gap-x-2 wpuf-m-2" | ||
| v-for="(option, key) in option_field.options"> | ||
| <label | ||
| class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900"> | ||
| <input | ||
| type="radio" | ||
| :value="key" | ||
| v-model="selected" | ||
| class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent"> | ||
| {{ option }}</label> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve radio button accessibility and keyboard navigation.
The radio button implementation needs better accessibility support for screen readers and keyboard navigation.
<div
v-if="!option_field.inline"
class="wpuf-flex wpuf-items-center wpuf-gap-x-2 wpuf-m-2"
- v-for="(option, key) in option_field.options">
+ v-for="(option, key) in option_field.options"
+ :key="key">
<label
- class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900">
+ class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900"
+ :for="`visibility-option-${key}`">
<input
type="radio"
:value="key"
v-model="selected"
+ :id="`visibility-option-${key}`"
+ :aria-label="option"
class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent">
{{ option }}</label>
</div>📝 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 | |
| v-if="!option_field.inline" | |
| class="wpuf-flex wpuf-items-center wpuf-gap-x-2 wpuf-m-2" | |
| v-for="(option, key) in option_field.options"> | |
| <label | |
| class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900"> | |
| <input | |
| type="radio" | |
| :value="key" | |
| v-model="selected" | |
| class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent"> | |
| {{ option }}</label> | |
| </div> | |
| <div | |
| v-if="!option_field.inline" | |
| class="wpuf-flex wpuf-items-center wpuf-gap-x-2 wpuf-m-2" | |
| v-for="(option, key) in option_field.options" | |
| :key="key"> | |
| <label | |
| class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900" | |
| :for="`visibility-option-${key}`"> | |
| <input | |
| type="radio" | |
| :value="key" | |
| v-model="selected" | |
| :id="`visibility-option-${key}`" | |
| :aria-label="option" | |
| class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent"> | |
| {{ option }}</label> | |
| </div> |
| editing_form_field: { | ||
| type: Object, | ||
| default: {} | ||
| default: () => ({ key: 'value' }) | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify the default value compatibility with existing code.
The change to use a function for the default value is good, but the generic default { key: 'value' } might cause issues:
- The
met_dependenciescomputed property accesses dynamic properties fromediting_form_field - The
update_valuemethod expects an 'id' property which isn't in the default value
Consider updating the default value to include required properties:
-default: () => ({ key: 'value' })
+default: () => ({
+ id: null,
+ // Add other required properties
+})Run this script to find required properties:
🏁 Script executed:
#!/bin/bash
# Search for properties accessed from editing_form_field
rg -A 2 'editing_form_field\.' admin/form-builder/Length of output: 5399
Default Value Issue in editing_form_field
The current default value of { key: 'value' } does not include an "id" property which many components depend on. The search results reveal that components like field-radio, field-checkbox, field-multiselect, field-select, field-text-meta, and field-visibility all access "this.editing_form_field.id". This could lead to runtime errors when these components attempt to use the "id" value.
- Update the default to include at least an "id" property (e.g., id: null) and document any other required properties.
| <div | ||
| v-if="!option_field.inline" | ||
| class="wpuf-flex wpuf-items-center wpuf-gap-x-2 wpuf-m-2" | ||
| v-for="(option, key) in option_field.options"> | ||
| <label | ||
| class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900"> | ||
| </label> | ||
| <input | ||
| type="radio" | ||
| :value="key" | ||
| v-model="value" | ||
| class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent"> | ||
| {{ option }} | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add ARIA attributes for radio group accessibility.
The radio group needs proper ARIA attributes for better screen reader support.
<div
v-if="!option_field.inline"
+ role="radiogroup"
+ :aria-labelledby="'radio-group-' + option_field.id"
class="wpuf-flex wpuf-items-center wpuf-gap-x-2 wpuf-m-2">
+ <div :id="'radio-group-' + option_field.id" class="wpuf-sr-only">
+ {{ option_field.title }}
+ </div>📝 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 | |
| v-if="!option_field.inline" | |
| class="wpuf-flex wpuf-items-center wpuf-gap-x-2 wpuf-m-2" | |
| v-for="(option, key) in option_field.options"> | |
| <label | |
| class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900"> | |
| </label> | |
| <input | |
| type="radio" | |
| :value="key" | |
| v-model="value" | |
| class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent"> | |
| {{ option }} | |
| </div> | |
| <div | |
| v-if="!option_field.inline" | |
| role="radiogroup" | |
| :aria-labelledby="'radio-group-' + option_field.id" | |
| class="wpuf-flex wpuf-items-center wpuf-gap-x-2 wpuf-m-2" | |
| v-for="(option, key) in option_field.options"> | |
| <div :id="'radio-group-' + option_field.id" class="wpuf-sr-only"> | |
| {{ option_field.title }} | |
| </div> | |
| <label | |
| class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900"> | |
| </label> | |
| <input | |
| type="radio" | |
| :value="key" | |
| v-model="value" | |
| class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent"> | |
| {{ option }} | |
| </div> |
| ?> | ||
| </a> | ||
| </div> | ||
| </li> |
There was a problem hiding this comment.
Fix HTML tag mismatch.
There's a mismatch between opening and closing tags.
Fix the tag mismatch:
- </li>
+ </div>Also applies to: 167-167
| grunt.registerTask('tailwind', function() { | ||
| const done = this.async(); | ||
|
|
||
| // Process each file mapping | ||
| Object.entries(tailwindFileMap).forEach(([phpFile, cssFile]) => { | ||
| const inputFile = `src/css/${cssFile}`; | ||
| const outputFile = `assets/css/${cssFile}`; | ||
|
|
||
| // Ensure the input file exists | ||
| if (grunt.file.exists(inputFile)) { | ||
| // Run the tailwind command | ||
| grunt.task.run(`shell:tailwind:${inputFile}:${outputFile}`); | ||
| } | ||
| }); | ||
|
|
||
| done(); | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling to Tailwind task.
The Tailwind task should include error handling for better reliability.
Add error handling:
grunt.registerTask('tailwind', function() {
const done = this.async();
+ let hasErrors = false;
// Process each file mapping
Object.entries(tailwindFileMap).forEach(([phpFile, cssFile]) => {
const inputFile = `src/css/${cssFile}`;
const outputFile = `assets/css/${cssFile}`;
// Ensure the input file exists
if (grunt.file.exists(inputFile)) {
// Run the tailwind command
grunt.task.run(`shell:tailwind:${inputFile}:${outputFile}`);
+ } else {
+ grunt.log.error(`Input file not found: ${inputFile}`);
+ hasErrors = true;
}
});
- done();
+ done(!hasErrors);
});📝 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.
| grunt.registerTask('tailwind', function() { | |
| const done = this.async(); | |
| // Process each file mapping | |
| Object.entries(tailwindFileMap).forEach(([phpFile, cssFile]) => { | |
| const inputFile = `src/css/${cssFile}`; | |
| const outputFile = `assets/css/${cssFile}`; | |
| // Ensure the input file exists | |
| if (grunt.file.exists(inputFile)) { | |
| // Run the tailwind command | |
| grunt.task.run(`shell:tailwind:${inputFile}:${outputFile}`); | |
| } | |
| }); | |
| done(); | |
| }); | |
| grunt.registerTask('tailwind', function() { | |
| const done = this.async(); | |
| let hasErrors = false; | |
| // Process each file mapping | |
| Object.entries(tailwindFileMap).forEach(([phpFile, cssFile]) => { | |
| const inputFile = `src/css/${cssFile}`; | |
| const outputFile = `assets/css/${cssFile}`; | |
| // Ensure the input file exists | |
| if (grunt.file.exists(inputFile)) { | |
| // Run the tailwind command | |
| grunt.task.run(`shell:tailwind:${inputFile}:${outputFile}`); | |
| } else { | |
| grunt.log.error(`Input file not found: ${inputFile}`); | |
| hasErrors = true; | |
| } | |
| }); | |
| done(!hasErrors); | |
| }); |
| is_pro_preview: function (template) { | ||
| var is_pro_active = wpuf_form_builder.is_pro_active === '1'; | ||
|
|
||
| return (!is_pro_active && this.field_settings[template] && this.field_settings[template].pro_feature); | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling to pro feature check.
The pro feature check should include error handling.
Add error handling:
is_pro_preview: function (template) {
- var is_pro_active = wpuf_form_builder.is_pro_active === '1';
+ try {
+ if (!wpuf_form_builder || typeof wpuf_form_builder.is_pro_active === 'undefined') {
+ console.error('Pro status not available');
+ return false;
+ }
- return (!is_pro_active && this.field_settings[template] && this.field_settings[template].pro_feature);
+ var is_pro_active = wpuf_form_builder.is_pro_active === '1';
+ return (!is_pro_active &&
+ this.field_settings &&
+ this.field_settings[template] &&
+ this.field_settings[template].pro_feature);
+ } catch (error) {
+ console.error('Error checking pro preview status:', error);
+ return false;
+ }
},📝 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.
| is_pro_preview: function (template) { | |
| var is_pro_active = wpuf_form_builder.is_pro_active === '1'; | |
| return (!is_pro_active && this.field_settings[template] && this.field_settings[template].pro_feature); | |
| }, | |
| is_pro_preview: function (template) { | |
| try { | |
| if (!wpuf_form_builder || typeof wpuf_form_builder.is_pro_active === 'undefined') { | |
| console.error('Pro status not available'); | |
| return false; | |
| } | |
| var is_pro_active = wpuf_form_builder.is_pro_active === '1'; | |
| return (!is_pro_active && | |
| this.field_settings && | |
| this.field_settings[template] && | |
| this.field_settings[template].pro_feature); | |
| } catch (error) { | |
| console.error('Error checking pro preview status:', error); | |
| return false; | |
| } | |
| }, |
| <?php | ||
| $form_id = isset( $_GET['id'] ) ? intval( wp_unslash( $_GET['id'] ) ) : 0; | ||
|
|
||
| if ( count( $shortcodes ) > 1 && isset( $shortcodes[0]['type'] ) ) { | ||
| foreach ( $shortcodes as $shortcode ) { | ||
| /* translators: %s: form id */ | ||
| printf( "<span class=\"form-id\" title=\"%s\" data-clipboard-text='%s'><i class=\"fa fa-clipboard\" aria-hidden=\"true\"></i> %s: #{{ post.ID }}</span>", sprintf( esc_html( __( 'Click to copy %s shortcode', 'wp-user-frontend' ) ), esc_attr( $shortcode['type'] ) ), sprintf( '[%s type="%s" id="%s"]', esc_attr( $shortcode['name'] ), esc_attr( $shortcode['type'] ), esc_attr( $form_id ) ), esc_attr( ucwords( $shortcode['type'] ) ), esc_attr( $shortcode['type'] ) ); | ||
| } |
There was a problem hiding this comment.
Potential XSS vulnerability in form ID sanitization.
The form ID is retrieved from $_GET['id'] without proper sanitization. While intval() is used, it's recommended to validate the input earlier in the request lifecycle.
Apply this sanitization:
-$form_id = isset( $_GET['id'] ) ? intval( wp_unslash( $_GET['id'] ) ) : 0;
+$form_id = filter_input( INPUT_GET, 'id', FILTER_VALIDATE_INT, ['options' => ['default' => 0, 'min_range' => 1]] );
There was a problem hiding this comment.
Actionable comments posted: 3
🔭 Outside diff range comments (1)
src/css/admin/form-builder.css (1)
200-201:⚠️ Potential issueFix syntax error: Add missing closing brace.
The file is missing a closing brace at the end.
input[type="range"]::-moz-range-thumb:active { background: green; } +}🧰 Tools
🪛 Biome (1.9.4)
[error] 200-200: expected
}but instead the file endsthe file ends here
(parse)
♻️ Duplicate comments (2)
admin/form-builder/assets/js/components/field-radio/template.php (2)
7-20: 🛠️ Refactor suggestionImprove radio group structure and accessibility.
The radio group structure needs improvements for better accessibility and semantics.
Apply this diff to improve the structure:
<div v-if="!option_field.inline" + role="radiogroup" + :aria-labelledby="'radio-group-label-' + option_field.id" class="wpuf-flex wpuf-items-center wpuf-gap-x-2 wpuf-m-2" v-for="(option, key) in option_field.options"> <label - class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900"> - </label> - <input - type="radio" - :value="key" - v-model="value" - class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent"> - {{ option }} + class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900"> + <input + type="radio" + :value="key" + v-model="value" + class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent"> + <span>{{ option }}</span> + </label>
22-39: 🛠️ Refactor suggestionImprove inline radio group accessibility and styling.
The inline radio group needs accessibility improvements and better margin handling.
Apply this diff to improve the structure:
<div v-if="option_field.inline" + role="radiogroup" + :aria-labelledby="'radio-group-label-' + option_field.id" - class="wpuf-mt-2 wpuf-flex"> + class="wpuf-mt-2 wpuf-flex wpuf-gap-x-2"> <div v-for="(option, key, index) in option_field.options" class="wpuf-items-center"> <label - :class="index !== 0 ? 'wpuf-ml-2' : ''" class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900"> <input type="radio" :value="key" v-model="value" class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent"> {{ option }} </label> </div> </div>The changes:
- Added ARIA attributes for accessibility
- Replaced individual margins with gap utility for consistent spacing
🧹 Nitpick comments (11)
admin/form-builder/assets/js/components/field-text-meta/template.php (1)
8-13: Consider extracting common input styles to a reusable class.While the current implementation with utility classes works well, consider extracting these commonly used input styles into a reusable class to improve maintainability and consistency across forms.
Example approach:
- class="wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full" + class="wpuf-form-input"Then define the
wpuf-form-inputclass in your CSS/LESS file with all the necessary styles. This would:
- Reduce template verbosity
- Make it easier to maintain consistent input styling
- Allow for easier global style updates
assets/js-templates/form-components.php (2)
89-90: Consider using unique translation strings.The same translation string is used for both the heading and description:
<?php esc_html_e( 'Add fields and build your desired form', 'wp-user-frontend' ); ?>Consider using distinct translation strings for better clarity and maintainability:
-<h2 class="wpuf-text-lg wpuf-text-gray-800"><?php esc_html_e( 'Add fields and build your desired form', 'wp-user-frontend' ); ?></h2> -<p class="wpuf-text-sm wpuf-text-gray-500"><?php esc_html_e( 'Add fields and build your desired form', 'wp-user-frontend' ); ?></p> +<h2 class="wpuf-text-lg wpuf-text-gray-800"><?php esc_html_e( 'Form Builder', 'wp-user-frontend' ); ?></h2> +<p class="wpuf-text-sm wpuf-text-gray-500"><?php esc_html_e( 'Add fields and build your desired form', 'wp-user-frontend' ); ?></p>
326-326: Fix typo in translation string.There's a typo in the translation string:
<?php esc_attr_e( 'Do not use & or otder special character for option label', 'wp-user-frontend' ); ?>Fix the typo:
-<?php esc_attr_e( 'Do not use & or otder special character for option label', 'wp-user-frontend' ); ?> +<?php esc_attr_e( 'Do not use & or other special characters for option label', 'wp-user-frontend' ); ?>admin/form-builder/assets/js/components/field-option-data/template.php (4)
29-30: Fix typo in help text message.There's a typo in the help text message: "otder" should be "other".
- <help-text text="<?php esc_attr_e( 'Do not use & or otder special character for option label', 'wp-user-frontend' ); ?>"></help-text></td> + <help-text text="<?php esc_attr_e( 'Do not use & or other special characters for option label', 'wp-user-frontend' ); ?>"></help-text></td>
28-32: Optimize table column widths for better space utilization.Consider adjusting the column widths for better space distribution. The current max-width values could be refined.
- <td class="wpuf-max-w-[10%]"></td> - <td class="wpuf-flex wpuf-max-w-[40%]"><?php esc_attr_e( 'Label', 'wp-user-frontend' ); ?> - <td v-if="show_value" class="wpuf-max-w-[40%]"><?php esc_attr_e( 'Value', 'wp-user-frontend' ); ?></td> - <td class="wpuf-max-w-[10%]"></td> + <td class="wpuf-w-[8%]"></td> + <td class="wpuf-flex wpuf-w-[42%]"><?php esc_attr_e( 'Label', 'wp-user-frontend' ); ?> + <td v-if="show_value" class="wpuf-w-[42%]"><?php esc_attr_e( 'Value', 'wp-user-frontend' ); ?></td> + <td class="wpuf-w-[8%]"></td>
34-103: Enhance accessibility for interactive elements.The table rows implementation could benefit from improved accessibility:
- Add ARIA labels for interactive elements
- Include keyboard navigation support for the sort handler
- Add tooltips for action buttons
- class="action-buttons hover:wpuf-cursor-pointer"> + class="action-buttons hover:wpuf-cursor-pointer" + role="button" + tabindex="0" + aria-label="<?php esc_attr_e( 'Delete option', 'wp-user-frontend' ); ?>" + title="<?php esc_attr_e( 'Delete option', 'wp-user-frontend' ); ?>"> - <div class="sort-handler"> + <div + class="sort-handler" + role="button" + tabindex="0" + aria-label="<?php esc_attr_e( 'Drag to reorder', 'wp-user-frontend' ); ?>" + title="<?php esc_attr_e( 'Drag to reorder', 'wp-user-frontend' ); ?>">
108-114: Improve keyboard accessibility for the clear selection button.The clear selection button should have keyboard focus styles for better accessibility.
- class="wpuf-inline-flex wpuf-items-center wpuf-gap-x-2 wpuf-rounded-md wpuf-px-3 wpuf-py-2 wpuf-text-sm wpuf-text-gray-700 hover:wpuf-text-gray-700 hover:wpuf-bg-gray-50 wpuf-ring-1 wpuf-ring-inset wpuf-ring-gray-300 wpuf-mt-4" + class="wpuf-inline-flex wpuf-items-center wpuf-gap-x-2 wpuf-rounded-md wpuf-px-3 wpuf-py-2 wpuf-text-sm wpuf-text-gray-700 hover:wpuf-text-gray-700 hover:wpuf-bg-gray-50 wpuf-ring-1 wpuf-ring-inset wpuf-ring-gray-300 wpuf-mt-4 focus:wpuf-outline-none focus:wpuf-ring-2 focus:wpuf-ring-primary"src/css/admin/form-builder.css (4)
6-32: Consider extracting common button styles into a base class.The button classes
.wpuf-btn-primaryand.wpuf-btn-secondaryshare common styles. Consider extracting these into a base class for better maintainability.+ .wpuf-btn-base { + @apply wpuf-rounded-md wpuf-px-3.5 wpuf-py-2 wpuf-text-sm wpuf-font-semibold; + } + .wpuf-btn-primary { - @apply wpuf-rounded-md wpuf-bg-primary wpuf-text-white wpuf-px-3.5 wpuf-py-2 wpuf-text-sm wpuf-font-semibold hover:wpuf-bg-green-700 hover:wpuf-text-white focus:wpuf-text-white focus:wpuf-shadow-none; + @apply wpuf-btn-base wpuf-bg-primary wpuf-text-white hover:wpuf-bg-green-700 hover:wpuf-text-white focus:wpuf-text-white focus:wpuf-shadow-none; } .wpuf-btn-secondary { - @apply wpuf-rounded-md wpuf-bg-green-50 wpuf-text-green-700 wpuf-px-3.5 wpuf-py-2 wpuf-text-sm wpuf-border wpuf-border-green-300 wpuf-font-semibold hover:wpuf-bg-green-100 hover:wpuf-text-white; + @apply wpuf-btn-base wpuf-bg-green-50 wpuf-text-green-700 wpuf-border wpuf-border-green-300 hover:wpuf-bg-green-100 hover:wpuf-text-white; }
54-60: Consider using Tailwind's built-in transition utilities.Instead of defining custom transition utilities, consider using Tailwind's built-in
transition,duration-100, andease-outclasses for better maintainability..wpuf-dropdown-item { - @apply wpuf-transition-all wpuf-duration-100 wpuf-ease-out wpuf-opacity-0 wpuf-scale-75; + @apply transition duration-100 ease-out wpuf-opacity-0 wpuf-scale-75; }
162-200: Use Tailwind color variables for consistency.Replace hardcoded color values with Tailwind color variables for better maintainability and consistency.
input[type="range"] { -webkit-appearance: none; width: 100%; height: 5px; - background: green; + @apply wpuf-bg-green-600; outline: none; transition: background 0.3s; border-radius: 10px }🧰 Tools
🪛 Biome (1.9.4)
[error] 200-200: expected
}but instead the file endsthe file ends here
(parse)
62-67: Fix background property override.The background shorthand property is overriding the previously set background-color. Combine them into a single declaration.
.wpuf-pattern-1 { border: 1px dashed #ddd; - background-color: #ffffff; - opacity: 1; - background: repeating-linear-gradient( -45deg, #dcfce7, #dcfce7 2px, #ffffff 2px, #ffffff 6px ); + background: #ffffff repeating-linear-gradient( -45deg, #dcfce7, #dcfce7 2px, #ffffff 2px, #ffffff 6px ); + opacity: 1; }🧰 Tools
🪛 Biome (1.9.4)
[error] 66-66: Unexpected shorthand property background after background-color
(lint/suspicious/noShorthandPropertyOverrides)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
admin/form-builder/assets/js/components/field-option-data/template.php(1 hunks)admin/form-builder/assets/js/components/field-radio/template.php(1 hunks)admin/form-builder/assets/js/components/field-range/template.php(1 hunks)admin/form-builder/assets/js/components/field-text-meta/template.php(1 hunks)admin/form-builder/assets/js/components/field-text/template.php(1 hunks)admin/form-builder/assets/js/components/field-visibility/template.php(3 hunks)admin/form-builder/assets/js/components/form-fields-v4-1/template.php(1 hunks)admin/form-builder/assets/js/components/form-section_break/template.php(1 hunks)admin/form-builder/assets/less/form-builder.less(3 hunks)admin/form-builder/views/form-builder-v4.1.php(1 hunks)assets/css/wpuf-form-builder.css(3 hunks)assets/js-templates/form-components.php(17 hunks)includes/Admin/Forms/Post/Templates/Post_Form_Template_Post.php(9 hunks)includes/Fields/Form_Field_SectionBreak.php(2 hunks)src/css/admin/form-builder.css(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- admin/form-builder/assets/js/components/field-range/template.php
🚧 Files skipped from review as they are similar to previous changes (9)
- admin/form-builder/assets/js/components/field-text/template.php
- admin/form-builder/assets/js/components/form-fields-v4-1/template.php
- includes/Fields/Form_Field_SectionBreak.php
- admin/form-builder/assets/js/components/field-visibility/template.php
- admin/form-builder/assets/js/components/form-section_break/template.php
- includes/Admin/Forms/Post/Templates/Post_Form_Template_Post.php
- admin/form-builder/views/form-builder-v4.1.php
- admin/form-builder/assets/less/form-builder.less
- assets/css/wpuf-form-builder.css
🧰 Additional context used
🪛 Biome (1.9.4)
src/css/admin/form-builder.css
[error] 200-200: expected } but instead the file ends
the file ends here
(parse)
[error] 66-66: Unexpected shorthand property background after background-color
(lint/suspicious/noShorthandPropertyOverrides)
🔇 Additional comments (8)
admin/form-builder/assets/js/components/field-text-meta/template.php (2)
1-1: LGTM! Good use of conditional rendering.The conditional rendering based on
met_dependenciesensures proper dependency management, and the class naming follows a clear hierarchical structure.
2-7: LGTM! Excellent accessibility and layout implementation.The changes demonstrate good practices:
- Flex container improves layout organization
- Label's
forattribute enhances accessibility- Conditional help text rendering
assets/js-templates/form-components.php (5)
85-255: Great addition of a modern form builder stage template!The new template
tmpl-wpuf-builder-stage-v4-1introduces several improvements:
- Clean and modern UI with Tailwind CSS
- Better empty state handling with visual feedback
- Improved field controls with hover states
- Enhanced accessibility with semantic HTML
1020-1148: Well-structured form fields template with search functionality!The new template
tmpl-wpuf-form-fields-v4-1adds:
- Search functionality for fields
- Grid layout for better organization
- Clear visual hierarchy
- Improved field categorization
257-269: Enhanced checkbox field template with better spacing.The modifications improve readability and maintain consistent styling with Tailwind CSS classes.
484-524: Improved radio field template with better accessibility.The radio field template now has:
- Better spacing and alignment
- Improved accessibility with semantic HTML
- Consistent styling with other form elements
772-896: Excellent column field implementation with responsive design.The column field template demonstrates good practices:
- Responsive layout with Flexbox
- Clear visual hierarchy
- Smooth transitions and hover states
- Proper spacing and alignment
admin/form-builder/assets/js/components/field-option-data/template.php (1)
7-22: LGTM! Well-structured checkbox controls.The checkbox controls are well-implemented with proper data binding and translations. The layout is clean and consistent.
| <div class="wpuf-flex"> | ||
| <label | ||
| class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label> | ||
| <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve semantic structure and accessibility of the title section.
The title section needs proper semantic structure and label association with the radio group.
Apply this diff to improve accessibility:
- <div class="wpuf-flex">
- <label
- class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
- <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
- </div>
+ <div class="wpuf-flex" :id="'radio-group-label-' + option_field.id">
+ <span class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</span>
+ <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
+ </div>📝 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="wpuf-flex"> | |
| <label | |
| class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label> | |
| <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> | |
| </div> | |
| <div class="wpuf-flex" :id="'radio-group-label-' + option_field.id"> | |
| <span class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</span> | |
| <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text> | |
| </div> |
| .selectize-control { | ||
| border: none !important; | ||
| box-shadow: none !important; | ||
| } | ||
| .selectize-control.single .selectize-input, | ||
| .selectize-dropdown.single { | ||
| border: 1px solid #d1d5db; | ||
| box-shadow: none; | ||
| background: #fff; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove !important declarations from selectize styles.
Using !important declarations makes styles harder to override and maintain. Consider increasing selector specificity instead.
.selectize-control {
- border: none !important;
- box-shadow: none !important;
+ border: none;
+ box-shadow: none;
}📝 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.
| .selectize-control { | |
| border: none !important; | |
| box-shadow: none !important; | |
| } | |
| .selectize-control.single .selectize-input, | |
| .selectize-dropdown.single { | |
| border: 1px solid #d1d5db; | |
| box-shadow: none; | |
| background: #fff; | |
| } | |
| .selectize-control { | |
| border: none; | |
| box-shadow: none; | |
| } | |
| .selectize-control.single .selectize-input, | |
| .selectize-dropdown.single { | |
| border: 1px solid #d1d5db; | |
| box-shadow: none; | |
| background: #fff; | |
| } |
| ul.wpuf-form li.field-size-small .wpuf-fields { | ||
| width: 30%; | ||
| } | ||
|
|
||
| ul.wpuf-form li.field-size-medium .wpuf-fields { | ||
| width: 50%; | ||
| } | ||
|
|
||
| #wpuf-form-builder .wpuf-fields { | ||
| float: none; | ||
| width: auto; | ||
| } | ||
| body ul.wpuf-form li.field-size-large .wpuf-fields { | ||
| width: 100% !important; | ||
| } | ||
| body ul.wpuf-form li.field-size-medium .wpuf-fields { | ||
| width: 50% !important; | ||
| } | ||
| body ul.wpuf-form li.field-size-small .wpuf-fields { | ||
| width: 30% !important; | ||
| } | ||
| body ul.wpuf-form li .wpuf-fields { | ||
| width: 70% !important; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consolidate duplicate field size styles.
The field size styles are duplicated with different selectors and specificity levels. Consider consolidating these styles using a single selector pattern.
-ul.wpuf-form li.field-size-small .wpuf-fields {
- width: 30%;
-}
-
-ul.wpuf-form li.field-size-medium .wpuf-fields {
- width: 50%;
-}
-
-#wpuf-form-builder .wpuf-fields {
- float: none;
- width: auto;
-}
-body ul.wpuf-form li.field-size-large .wpuf-fields {
- width: 100% !important;
-}
-body ul.wpuf-form li.field-size-medium .wpuf-fields {
- width: 50% !important;
-}
-body ul.wpuf-form li.field-size-small .wpuf-fields {
- width: 30% !important;
-}
-body ul.wpuf-form li .wpuf-fields {
- width: 70% !important;
-}
+.wpuf-fields {
+ float: none;
+ width: 70%;
+}
+
+.field-size-small .wpuf-fields {
+ width: 30%;
+}
+
+.field-size-medium .wpuf-fields {
+ width: 50%;
+}
+
+.field-size-large .wpuf-fields {
+ width: 100%;
+}📝 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.
| ul.wpuf-form li.field-size-small .wpuf-fields { | |
| width: 30%; | |
| } | |
| ul.wpuf-form li.field-size-medium .wpuf-fields { | |
| width: 50%; | |
| } | |
| #wpuf-form-builder .wpuf-fields { | |
| float: none; | |
| width: auto; | |
| } | |
| body ul.wpuf-form li.field-size-large .wpuf-fields { | |
| width: 100% !important; | |
| } | |
| body ul.wpuf-form li.field-size-medium .wpuf-fields { | |
| width: 50% !important; | |
| } | |
| body ul.wpuf-form li.field-size-small .wpuf-fields { | |
| width: 30% !important; | |
| } | |
| body ul.wpuf-form li .wpuf-fields { | |
| width: 70% !important; | |
| } | |
| .wpuf-fields { | |
| float: none; | |
| width: 70%; | |
| } | |
| .field-size-small .wpuf-fields { | |
| width: 30%; | |
| } | |
| .field-size-medium .wpuf-fields { | |
| width: 50%; | |
| } | |
| .field-size-large .wpuf-fields { | |
| width: 100%; | |
| } |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
assets/js/wpuf-form-builder-mixins.js (2)
60-64:⚠️ Potential issueAdd error handling to pro feature check.
The pro feature check should include error handling.
Apply this diff to add error handling:
is_pro_preview: function (template) { - var is_pro_active = wpuf_form_builder.is_pro_active === '1'; + try { + if (!wpuf_form_builder || typeof wpuf_form_builder.is_pro_active === 'undefined') { + console.error('Pro status not available'); + return false; + } - return (!is_pro_active && this.field_settings[template] && this.field_settings[template].pro_feature); + var is_pro_active = wpuf_form_builder.is_pro_active === '1'; + return (!is_pro_active && + this.field_settings && + this.field_settings[template] && + this.field_settings[template].pro_feature); + } catch (error) { + console.error('Error checking pro preview status:', error); + return false; + } },
169-171:⚠️ Potential issueAdd error handling to pro status check.
The computed property should include error handling for undefined properties.
Apply this diff to add error handling:
is_pro_active: function () { - return wpuf_form_builder.is_pro_active === '1'; + try { + if (!wpuf_form_builder || typeof wpuf_form_builder.is_pro_active === 'undefined') { + console.error('Pro status not available'); + return false; + } + return wpuf_form_builder.is_pro_active === '1'; + } catch (error) { + console.error('Error checking pro status:', error); + return false; + } },
🧹 Nitpick comments (13)
assets/js-templates/form-components.php (3)
86-86: Consider using dynamic height calculation instead of fixed viewport height.The hardcoded viewport height
wpuf-h-[80vh]might not work well on all screen sizes and could cause content to be cut off on smaller screens.Consider using a more flexible height calculation:
-<div id="form-preview-stage" class="wpuf-h-[80vh]"> +<div id="form-preview-stage" class="wpuf-min-h-[50vh] wpuf-h-full">
89-90: Remove duplicate text in empty state message.The same text is used for both the heading and description, which is redundant.
Consider using different text for the description:
-<p class="wpuf-text-sm wpuf-text-gray-500"><?php esc_html_e( 'Add fields and build your desired form', 'wp-user-frontend' ); ?></p> +<p class="wpuf-text-sm wpuf-text-gray-500"><?php esc_html_e( 'Drag and drop fields from the right sidebar to start building your form', 'wp-user-frontend' ); ?></p>
1178-1180: Add ARIA labels to SVG icons for accessibility.The SVG icons lack proper accessibility attributes which could make them difficult to understand for screen readers.
Add ARIA labels to the SVG icons:
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="wpuf-size-5"> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="wpuf-size-5" role="img" aria-label="Add">admin/form-builder/assets/js/components/field-option-data/template.php (4)
7-22: Enhance accessibility for checkbox controls.While the implementation is good, consider these accessibility improvements:
<input type="checkbox" v-model="show_value" + aria-label="<?php esc_attr_e( 'Show values', 'wp-user-frontend' ); ?>" :class="builder_class_names('checkbox')"> -<?php esc_attr_e( 'Show values', 'wp-user-frontend' ); ?> +<span class="wpuf-ml-2"><?php esc_attr_e( 'Show values', 'wp-user-frontend' ); ?></span>
24-56: Improve table semantics and help text positioning.Consider these improvements for better accessibility and maintainability:
<table class="option-field-option-chooser"> + <thead> + <tr class="wpuf-flex wpuf-justify-start wpuf-items-center"> + <th class="wpuf-flex wpuf-mt-1 wpuf-opacity-0"> <div> <input type="radio" :class="builder_class_names('radio')" > </div> <div> <i class="fa fa-bars"></i> </div> + </th> + <th class="wpuf-options-label-holder"> - <td class="wpuf-options-label-holder wpuf-relative"> <input class="!wpuf-border-none !wpuf-shadow-none !wpuf-text-gray-700 !wpuf-m-0 !wpuf-p-0 !wpuf-text-sm" disabled type="text" value="<?php esc_attr_e( 'Label', 'wp-user-frontend' ); ?>"> - <help-text class="wpuf-absolute wpuf-left-11 wpuf-top-[.70rem]" text="<?php esc_attr_e( 'Do not use & or other special character for option label', 'wp-user-frontend' ); ?>"></help-text> + <help-text class="wpuf-mt-1" text="<?php esc_attr_e( 'Do not use & or other special character for option label', 'wp-user-frontend' ); ?>"></help-text> + </th> + <th v-if="show_value"> - <td v-if="show_value"> <input class="!wpuf-border-none !wpuf-shadow-none !wpuf-text-gray-700 !wpuf-m-0 !wpuf-p-0 !wpuf-text-sm !wpuf-w-full" disabled type="text" value="<?php esc_attr_e( 'Value', 'wp-user-frontend' ); ?>"> + </th> + <th></th> - <td></td> </tr> + </thead> <tbody>
57-123: Enhance keyboard accessibility for options management.Consider these improvements for better accessibility:
<tr v-for="(option, index) in options" :key="option.id" :data-index="index" + role="row" class="option-field-option wpuf-flex wpuf-justify-start wpuf-items-center"> <td class="wpuf-flex wpuf-items-center"> <input v-if="option_field.is_multiple" type="checkbox" :value="option.value" v-model="selected" + :aria-label="'Select ' + option.label" class="wpuf-input-checkbox" > <input v-else type="radio" :value="option.value" v-model="selected" + :aria-label="'Select ' + option.label" :class="builder_class_names('radio')" > - <i class="fa fa-bars sort-handler hover:!wpuf-cursor-move wpuf-text-gray-400"></i> + <i class="fa fa-bars sort-handler hover:!wpuf-cursor-move wpuf-text-gray-400" + role="button" + tabindex="0" + :aria-label="'Drag to reorder ' + option.label" + @keydown.enter="handleDragStart($event, index)" + @keydown.space="handleDragStart($event, index)"></i> </td> <td> <input :class="[builder_class_names('text'), '!wpuf-w-full']" type="text" v-model="option.label" + :aria-label="'Label for option ' + (index + 1)" @input="set_option_label(index, option.label)"> </td> <td v-if="show_value"> <input :class="[builder_class_names('text'), '!wpuf-w-full']" type="text" v-model="option.value" + :aria-label="'Value for ' + option.label"> </td> <td> <div class="wpuf-flex wpuf-ml-2"> <div @click="delete_option(index)" + role="button" + tabindex="0" + :aria-label="'Delete ' + option.label" + @keydown.enter="delete_option(index)" + @keydown.space.prevent="delete_option(index)" class="action-buttons hover:wpuf-cursor-pointer"> <!-- ... SVG ... --> </div> <div v-if="index === options.length - 1" @click="add_option" + role="button" + tabindex="0" + aria-label="Add new option" + @keydown.enter="add_option" + @keydown.space.prevent="add_option" class="plus-buttons hover:wpuf-cursor-pointer !wpuf-border-0"> <!-- ... SVG ... --> </div> </div> </td> </tr>
128-134: Use semantic button element and enhance focus styles.Consider these improvements:
-<a +<button v-if="!option_field.is_multiple && selected" - class="wpuf-inline-flex wpuf-items-center wpuf-gap-x-2 wpuf-rounded-md wpuf-px-3 wpuf-py-2 wpuf-text-sm wpuf-text-gray-700 hover:wpuf-text-gray-700 hover:wpuf-bg-gray-50 wpuf-ring-1 wpuf-ring-inset wpuf-ring-gray-300 wpuf-mt-4" + class="wpuf-inline-flex wpuf-items-center wpuf-gap-x-2 wpuf-rounded-md wpuf-px-3 wpuf-py-2 wpuf-text-sm wpuf-text-gray-700 hover:wpuf-text-gray-700 hover:wpuf-bg-gray-50 focus:wpuf-outline-none focus:wpuf-ring-2 focus:wpuf-ring-primary wpuf-ring-1 wpuf-ring-inset wpuf-ring-gray-300 wpuf-mt-4" - href="#clear" - @click.prevent="clear_selection"> + type="button" + @click="clear_selection"> <?php esc_attr_e( 'Clear Selection', 'wp-user-frontend' ); ?> -</a> +</button>src/css/admin/form-builder.css (4)
5-33: Consider using CSS custom properties for colors.The component styles directly use Tailwind's color classes. For better maintainability and theme customization, consider extracting colors into CSS custom properties.
+:root { + --wpuf-primary: #15803d; + --wpuf-primary-hover: #166534; + --wpuf-secondary-bg: #f0fdf4; + --wpuf-secondary-text: #15803d; +} .wpuf-btn-primary { - @apply wpuf-rounded-md wpuf-bg-primary wpuf-text-white wpuf-px-3.5 wpuf-py-2 wpuf-text-sm wpuf-font-semibold hover:wpuf-bg-green-700 hover:wpuf-text-white; + @apply wpuf-rounded-md wpuf-text-white wpuf-px-3.5 wpuf-py-2 wpuf-text-sm wpuf-font-semibold; + background-color: var(--wpuf-primary); +} +.wpuf-btn-primary:hover { + background-color: var(--wpuf-primary-hover); }
35-51: Consider using Tailwind's built-in transition utilities.Instead of defining custom transition utilities, you can use Tailwind's built-in classes like
transition-all,duration-100, andease-out.-@layer utilities { - .wpuf-transition-all { - transition-property: all; - } - .wpuf-duration-100 { - transition-duration: 100ms; - } - .wpuf-ease-out { - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); - } - .wpuf-scale-95 { - transform: scale(.95); - } - .wpuf-scale-100 { - transform: scale(1); - } -}Then update the usage:
.wpuf-dropdown-item { - @apply wpuf-transition-all wpuf-duration-100 wpuf-ease-out wpuf-opacity-0 wpuf-scale-75; + @apply transition-all duration-100 ease-out opacity-0 scale-75; }
115-160: Consider using CSS custom properties for animation values.Extract animation timings and values into CSS custom properties for better maintainability.
+:root { + --wpuf-shimmer-duration: 1.5s; + --wpuf-transition-duration: 0.3s; +} .wpuf-icon-container img { opacity: 0; - transition: opacity 0.3s ease; + transition: opacity var(--wpuf-transition-duration) ease; } .wpuf-shimmer { - animation: wpuf-shimmer 1.5s infinite; - transition: all 0.3s ease; + animation: wpuf-shimmer var(--wpuf-shimmer-duration) infinite; + transition: all var(--wpuf-transition-duration) ease; }
161-195: Use CSS custom properties for range input colors.The color 'green' is hardcoded and repeated multiple times. Consider using CSS custom properties for better maintainability.
+:root { + --wpuf-range-color: green; +} input[type="range"] { - background: green; + background: var(--wpuf-range-color); } input[type="range"]::-webkit-slider-thumb { - background: green; + background: var(--wpuf-range-color); } input[type="range"]::-moz-range-thumb { - background: green; + background: var(--wpuf-range-color); } input[type="range"]:hover, input[type="range"]:active { - background: green; + background: var(--wpuf-range-color); } input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]::-webkit-slider-thumb:active, input[type="range"]::-moz-range-thumb:hover, input[type="range"]::-moz-range-thumb:active { - background: green; + background: var(--wpuf-range-color); }assets/js/wpuf-form-builder-mixins.js (1)
109-139: Consider adopting TypeScript for better type safety.The builder class names implementation is well-structured and provides consistent styling. However, adding TypeScript would improve type safety, especially for the
type_classparameter.Example TypeScript enhancement:
builder_class_names(type_class: 'upload_btn' | 'radio' | 'checkbox' | 'dropdown' | string): string[] { // ... existing implementation }admin/form-builder/assets/js/mixins/form-field.js (1)
9-9: Consider using a more meaningful default value for the field prop.While using a function for the default value is good practice, the current default
{ key: 'value' }seems generic. Consider using a more meaningful default structure that aligns with the expected field properties.- default: () => ({ key: 'value' }) + default: () => ({ + name: '', + type: '', + value: '', + options: {}, + required: 'no' + })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
admin/form-builder/assets/js/components/field-option-data/template.php(1 hunks)admin/form-builder/assets/js/mixins/form-field.js(3 hunks)assets/js-templates/form-components.php(17 hunks)assets/js/wpuf-form-builder-mixins.js(7 hunks)src/css/admin/form-builder.css(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/css/admin/form-builder.css
[error] 198-198: expected } but instead the file ends
the file ends here
(parse)
[error] 66-66: Unexpected shorthand property background after background-color
(lint/suspicious/noShorthandPropertyOverrides)
🔇 Additional comments (11)
assets/js-templates/form-components.php (1)
1040-1167: LGTM! The new form fields template improves user experience.The new template
tmpl-wpuf-form-fields-v4-1introduces several improvements:
- Enhanced search functionality
- Better field organization
- Clear visual hierarchy
- Consistent styling with Tailwind CSS
admin/form-builder/assets/js/components/field-option-data/template.php (1)
2-6: LGTM! Clean and accessible implementation.The field title section uses semantic HTML with proper labeling and accessibility features.
src/css/admin/form-builder.css (5)
1-4: LGTM! Tailwind CSS setup is correct.The imports follow the recommended order: base, components, utilities.
53-60: LGTM! Transition styles are well-implemented.The dropdown animations provide smooth transitions with appropriate timing and easing.
69-72: Remove !important declarations from selectize styles.Using !important declarations makes styles harder to override and maintain. Consider increasing selector specificity instead.
74-97: Consolidate duplicate field size styles.The field size styles are duplicated with different selectors and specificity levels. Consider consolidating these styles using a single selector pattern.
105-114: Remove !important declarations from selectize control styles.Using !important declarations makes styles harder to override and maintain. Consider increasing selector specificity instead.
assets/js/wpuf-form-builder-mixins.js (3)
24-33: LGTM! Enhanced alert dialog styling.The updated SweetAlert2 dialog styling with Tailwind CSS classes improves visual feedback while maintaining proper class namespacing.
68-70: LGTM! Well-structured button classes.The computed property provides consistent button styling with proper hover states and follows Tailwind CSS conventions.
82-82: LGTM! Fixed object reference sharing issue.Converting object prop defaults to factory functions is a Vue.js best practice that prevents unintended state sharing between component instances.
Also applies to: 325-325, 330-330
admin/form-builder/assets/js/mixins/form-field.js (1)
18-24: LGTM!The
has_optionscomputed property is well-structured and correctly checks for the existence and non-emptiness of the options property.🧰 Tools
🪛 Biome (1.9.4)
[error] 19-19: Do not access Object.prototype method 'hasOwnProperty' from target object.
It's recommended using Object.hasOwn() instead of using Object.hasOwnProperty().
See MDN web docs for more details.(lint/suspicious/noPrototypeBuiltins)
| table.option-field-option-chooser tbody tr td { | ||
| padding: .25rem; | ||
| } |
There was a problem hiding this comment.
Fix syntax error: Add missing closing brace.
The file is missing a closing brace at the end.
table.option-field-option-chooser tbody tr td {
padding: .25rem;
}
+}📝 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.
| table.option-field-option-chooser tbody tr td { | |
| padding: .25rem; | |
| } | |
| table.option-field-option-chooser tbody tr td { | |
| padding: .25rem; | |
| } | |
| } |
🧰 Tools
🪛 Biome (1.9.4)
[error] 198-198: expected } but instead the file ends
the file ends here
(parse)
| builder_class_names: function(type_class) { | ||
| var commonClasses = ''; | ||
|
|
||
| switch (type_class) { | ||
| case 'upload_btn': | ||
| commonClasses = 'file-selector wpuf-rounded-md wpuf-btn-secondary'; | ||
| break; | ||
|
|
||
| case 'radio': | ||
| commonClasses = '!wpuf-mt-0 wpuf-block wpuf-text-sm wpuf-font-medium wpuf-leading-6 wpuf-text-gray-900 checked:focus:!wpuf-bg-primary checked:hover:!wpuf-bg-primary checked:before:!wpuf-bg-white checked:!wpuf-bg-primary'; | ||
| break; | ||
|
|
||
| case 'checkbox': | ||
| commonClasses = 'wpuf-h-4 wpuf-w-4 wpuf-rounded wpuf-border-gray-300 !wpuf-mt-0.5 checked:focus:!wpuf-bg-primary checked:hover:wpuf-bg-primary checked:!wpuf-bg-primary before:!wpuf-content-none'; | ||
| break; | ||
|
|
||
| case 'dropdown': | ||
| commonClasses = 'wpuf-block wpuf-w-full wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300'; | ||
| break; | ||
|
|
||
| default: | ||
| commonClasses = 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full'; | ||
| } | ||
|
|
||
| return [ | ||
| type_class, | ||
| this.required_class(), | ||
| 'wpuf_' + this.field.name + '_' + this.form_id, | ||
| commonClasses | ||
| ]; | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Refactor class name generation for better maintainability.
While the implementation works, there are several areas for improvement:
- The method duplicates logic from
class_names - Hardcoded Tailwind classes reduce maintainability
- The switch statement could become unwieldy as more field types are added
- Use of
!important(!wpuf-) might cause CSS specificity issues
Consider extracting the Tailwind classes into a configuration object and refactoring the method:
+ // At the top of the file or in a separate config
+ const FIELD_CLASSES = {
+ upload_btn: 'file-selector wpuf-rounded-md wpuf-btn-secondary',
+ radio: 'wpuf-mt-0 wpuf-block wpuf-text-sm wpuf-font-medium wpuf-leading-6 wpuf-text-gray-900',
+ checkbox: 'wpuf-h-4 wpuf-w-4 wpuf-rounded wpuf-border-gray-300 wpuf-mt-0.5',
+ dropdown: 'wpuf-block wpuf-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm',
+ default: 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm'
+ };
+
methods: {
- builder_class_names: function(type_class) {
- var commonClasses = '';
-
- switch (type_class) {
- case 'upload_btn':
- commonClasses = 'file-selector wpuf-rounded-md wpuf-btn-secondary';
- break;
-
- case 'radio':
- commonClasses = '!wpuf-mt-0 wpuf-block wpuf-text-sm wpuf-font-medium wpuf-leading-6 wpuf-text-gray-900 checked:focus:!wpuf-bg-primary checked:hover:!wpuf-bg-primary checked:before:!wpuf-bg-white checked:!wpuf-bg-primary';
- break;
-
- case 'checkbox':
- commonClasses = 'wpuf-h-4 wpuf-w-4 wpuf-rounded wpuf-border-gray-300 !wpuf-mt-0.5 checked:focus:!wpuf-bg-primary checked:hover:wpuf-bg-primary checked:!wpuf-bg-primary before:!wpuf-content-none';
- break;
-
- case 'dropdown':
- commonClasses = 'wpuf-block wpuf-w-full wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300';
- break;
-
- default:
- commonClasses = 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full';
- }
-
- return [
- type_class,
- this.required_class(),
- 'wpuf_' + this.field.name + '_' + this.form_id,
- commonClasses
- ];
+ builder_class_names: function(type_class) {
+ const baseClasses = [
+ type_class,
+ this.required_class(),
+ `wpuf_${this.field.name}_${this.form_id}`
+ ];
+
+ return baseClasses.concat(FIELD_CLASSES[type_class] || FIELD_CLASSES.default);
},This refactoring:
- Improves maintainability by separating configuration from logic
- Reduces code duplication
- Makes it easier to add new field types
- Allows for easier theme customization
📝 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.
| builder_class_names: function(type_class) { | |
| var commonClasses = ''; | |
| switch (type_class) { | |
| case 'upload_btn': | |
| commonClasses = 'file-selector wpuf-rounded-md wpuf-btn-secondary'; | |
| break; | |
| case 'radio': | |
| commonClasses = '!wpuf-mt-0 wpuf-block wpuf-text-sm wpuf-font-medium wpuf-leading-6 wpuf-text-gray-900 checked:focus:!wpuf-bg-primary checked:hover:!wpuf-bg-primary checked:before:!wpuf-bg-white checked:!wpuf-bg-primary'; | |
| break; | |
| case 'checkbox': | |
| commonClasses = 'wpuf-h-4 wpuf-w-4 wpuf-rounded wpuf-border-gray-300 !wpuf-mt-0.5 checked:focus:!wpuf-bg-primary checked:hover:wpuf-bg-primary checked:!wpuf-bg-primary before:!wpuf-content-none'; | |
| break; | |
| case 'dropdown': | |
| commonClasses = 'wpuf-block wpuf-w-full wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300'; | |
| break; | |
| default: | |
| commonClasses = 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full'; | |
| } | |
| return [ | |
| type_class, | |
| this.required_class(), | |
| 'wpuf_' + this.field.name + '_' + this.form_id, | |
| commonClasses | |
| ]; | |
| }, | |
| // At the top of the file or in a separate config | |
| const FIELD_CLASSES = { | |
| upload_btn: 'file-selector wpuf-rounded-md wpuf-btn-secondary', | |
| radio: 'wpuf-mt-0 wpuf-block wpuf-text-sm wpuf-font-medium wpuf-leading-6 wpuf-text-gray-900', | |
| checkbox: 'wpuf-h-4 wpuf-w-4 wpuf-rounded wpuf-border-gray-300 wpuf-mt-0.5', | |
| dropdown: 'wpuf-block wpuf-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm', | |
| default: 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm' | |
| }; | |
| methods: { | |
| builder_class_names: function(type_class) { | |
| const baseClasses = [ | |
| type_class, | |
| this.required_class(), | |
| `wpuf_${this.field.name}_${this.form_id}` | |
| ]; | |
| return baseClasses.concat(FIELD_CLASSES[type_class] || FIELD_CLASSES.default); | |
| }, | |
| // ... other methods | |
| } |
fixes #669
part of WP User Frontend (WPUF) Post Form Settings UI revamp
Summary by CodeRabbit
New Features
Style