enhance: registration form multistep design revamp#1823
Open
sapayth wants to merge 2 commits intoweDevsOfficial:developfrom
Open
enhance: registration form multistep design revamp#1823sapayth wants to merge 2 commits intoweDevsOfficial:developfrom
sapayth wants to merge 2 commits intoweDevsOfficial:developfrom
Conversation
WalkthroughThis PR refactors multistep form rendering by consolidating CSS selectors from element-based to class-based selectors, replacing jQuery UI progressbar with custom HTML structure in JavaScript, and removing inline multistep UI from the base plugin, delegating it to the Pro plugin via action hooks. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
assets/js/frontend-form.js (1)
6-14:⚠️ Potential issue | 🟡 Minor
listautowidthcounts.wpuf-step-itembut still resizes only<li>elements.With the new div-based step markup, this helper won’t resize current step items, and
Line 10can divide by zero when no children exist.Suggested fix
- var count = $(this).children('.wpuf-step-item').length; - if ( count === 0 ) { - count = $(this).children('li').length; - } - var liw = w / count; - $(this).children('li').each(function(){ - var s = $(this).outerWidth(true)-$(this).width(); - $(this).width(liw-s); - }); + var $items = $(this).children('.wpuf-step-item, li'); + var count = $items.length; + if ( count === 0 ) { + return; + } + var itemWidth = w / count; + $items.each(function(){ + var s = $(this).outerWidth(true) - $(this).width(); + $(this).width(itemWidth - s); + });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@assets/js/frontend-form.js` around lines 6 - 14, The helper currently computes count using '.wpuf-step-item' but then resizes only 'li' elements and can divide by zero; update the logic in the list auto-width block to use the same selector for counting and iterating (either '.wpuf-step-item' or fallback to 'li' consistently), guard against count === 0 by returning early (or skipping calculation) to avoid the division when computing liw, and ensure the width adjustment loop uses the exact node set used to compute count (referencing the variables count, liw and the selectors '.wpuf-step-item' and 'li').
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@assets/js/frontend-form.js`:
- Around line 186-195: The progress UI code uses document-wide selectors (e.g.,
'fieldset.wpuf-multistep-fieldset' and '.wpuf-multistep-progressbar') which lets
progress state bleed between forms; scope all DOM queries and updates to the
current form container instead (for example replace global selectors with
container.find('fieldset.wpuf-multistep-fieldset') and
container.find('.wpuf-multistep-progressbar')), and apply the same scoping for
all related selectors that set active/completed classes or update percentages
(the code around '.wpuf-multistep-progressbar', any uses at lines ~202-223,
~259, ~289 and ~295). Ensure you locate and update uses in functions that
build/update the barHtml and the handlers that toggle classes so each form
instance updates only its own progress UI.
---
Outside diff comments:
In `@assets/js/frontend-form.js`:
- Around line 6-14: The helper currently computes count using '.wpuf-step-item'
but then resizes only 'li' elements and can divide by zero; update the logic in
the list auto-width block to use the same selector for counting and iterating
(either '.wpuf-step-item' or fallback to 'li' consistently), guard against count
=== 0 by returning early (or skipping calculation) to avoid the division when
computing liw, and ensure the width adjustment loop uses the exact node set used
to compute count (referencing the variables count, liw and the selectors
'.wpuf-step-item' and 'li').
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
assets/css/frontend-form/layout2.cssassets/css/frontend-form/layout3.cssassets/css/frontend-form/layout4.cssassets/css/frontend-form/layout5.cssassets/css/frontend-forms.cssassets/js/frontend-form.jsassets/less/frontend-forms.lessclass/render-form.phpincludes/Render_Form.php
💤 Files with no reviewable changes (1)
- includes/Render_Form.php
Comment on lines
+186
to
+195
| var totalSteps = $('fieldset.wpuf-multistep-fieldset').length; | ||
| var barHtml = '<div class="wpuf-progressbar-header">'; | ||
| barHtml += '<span class="wpuf-progressbar-step-text">Step 1 of ' + totalSteps + '</span>'; | ||
| barHtml += '<span class="wpuf-progressbar-percent">0%</span>'; | ||
| barHtml += '</div>'; | ||
| barHtml += '<div class="wpuf-progressbar-track">'; | ||
| barHtml += '<div class="wpuf-progressbar-fill"></div>'; | ||
| barHtml += '</div>'; | ||
|
|
||
| $( '.wpuf-multistep-progressbar' ).html( barHtml ); |
There was a problem hiding this comment.
Progress state updates are globally scoped and can cross-contaminate multiple forms.
Line 186, Line 195, Line 259, and Line 289 use document-wide selectors, so step count/progress and active/completed classes can be computed and applied across unrelated forms.
Suggested fix (scope updates to the current form)
- var totalSteps = $('fieldset.wpuf-multistep-fieldset').length;
+ var $form = $(this).closest('form.wpuf-form-add');
+ var totalSteps = $form.find('fieldset.wpuf-multistep-fieldset').length;
...
- $( '.wpuf-multistep-progressbar' ).html( barHtml );
+ $form.find('.wpuf-multistep-progressbar').html( barHtml );- if ( progressbar_type == 'step_by_step' ) {
- $('.wpuf-step-item').each(function(){
+ var $form = current_step.closest('form.wpuf-form-add');
+ if ( progressbar_type == 'step_by_step' ) {
+ $form.find('.wpuf-step-item').each(function(){
...
- $('.wpuf-step-line').each(function(){
+ $form.find('.wpuf-step-line').each(function(){
...
- var totalSteps = $('fieldset.wpuf-multistep-fieldset').length;
+ var totalSteps = $form.find('fieldset.wpuf-multistep-fieldset').length;
...
- $( '.wpuf-progressbar-step-text' ).text( 'Step ' + ( step_number + 1 ) + ' of ' + totalSteps );
- $( '.wpuf-progressbar-percent' ).text( progressPercent + '%' );
- $( '.wpuf-progressbar-fill' ).css( 'width', progressPercent + '%' );
+ $form.find('.wpuf-progressbar-step-text').text( 'Step ' + ( step_number + 1 ) + ' of ' + totalSteps );
+ $form.find('.wpuf-progressbar-percent').text( progressPercent + '%' );
+ $form.find('.wpuf-progressbar-fill').css( 'width', progressPercent + '%' );Also applies to: 202-223, 259-295
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@assets/js/frontend-form.js` around lines 186 - 195, The progress UI code uses
document-wide selectors (e.g., 'fieldset.wpuf-multistep-fieldset' and
'.wpuf-multistep-progressbar') which lets progress state bleed between forms;
scope all DOM queries and updates to the current form container instead (for
example replace global selectors with
container.find('fieldset.wpuf-multistep-fieldset') and
container.find('.wpuf-multistep-progressbar')), and apply the same scoping for
all related selectors that set active/completed classes or update percentages
(the code around '.wpuf-multistep-progressbar', any uses at lines ~202-223,
~259, ~289 and ~295). Ensure you locate and update uses in functions that
build/update the barHtml and the handlers that toggle classes so each form
instance updates only its own progress UI.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pro PR #1447
Summary
Redesigns the multistep form progress indicators with a modern, clean look. The Step by Step type now displays numbered circles connected by lines, replacing the old arrow-shaped tab design. The Progressbar type now shows a "Step X of Y" label with a percentage and a smooth horizontal fill bar, replacing the jQuery UI progressbar dependency. Also includes minor UI polish for the account page, dashboard, and subscription templates.
Breaking Changes
jquery-ui-progressbar) has been removed. Any custom CSS targeting.ui-progressbar,.ui-widget-header, or.wpuf-progress-percentageinside.wpuf-multistep-progressbarwill no longer apply.<ul><li>elements to<div>based structure. Custom CSS targetingul.wpuf-step-wizard liwill no longer match.Technical Notes
wpuf_form_fields_topaction hook (Fields_Manager::step_start_form_top())Render_Formclasses in the free plugin.wpuf-progressbar-header,.wpuf-progressbar-track,.wpuf-progressbar-fill.wpuf-step-wizard,.wpuf-step-item,.wpuf-step-circle,.wpuf-step-label,.wpuf-step-linems_bgcolor,ms_active_bgcolor,ms_ac_txt_color) continue to work — they now target the new class selectors via inline stylesSummary by CodeRabbit
Release Notes