revamp: UI/UX of existing post form templates#1845
Open
sapayth wants to merge 1 commit into
Open
Conversation
WalkthroughA comprehensive refactor migrating form layout styling from monolithic base CSS files into five separate, dedicated layout-specific stylesheets (layout1–layout5), alongside corresponding updates to asset registration, form rendering logic, and configuration settings. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
assets/css/frontend-form/layout3.css (1)
184-202:⚠️ Potential issue | 🟠 MajorRestore a keyboard-visible focus style for layout3 controls.
Lines 184-202 remove the default focus ring, but this layout never adds a replacement
:focus-visiblestate. Keyboard navigation becomes invisible across the form.Suggested fix
.wpuf-form-add.wpuf-form-layout3 ul.wpuf-form li a:visited { outline: none; border-color: `#8726d3`; } + +.wpuf-form-add.wpuf-form-layout3 ul.wpuf-form li input:focus-visible, +.wpuf-form-add.wpuf-form-layout3 ul.wpuf-form li textarea:focus-visible, +.wpuf-form-add.wpuf-form-layout3 ul.wpuf-form li select:focus-visible, +.wpuf-form-add.wpuf-form-layout3 ul.wpuf-form li a:focus-visible { + outline: 2px solid `#8726d3`; + outline-offset: 2px; +}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@assets/css/frontend-form/layout3.css` around lines 184 - 202, The current rule targeting .wpuf-form-add.wpuf-form-layout3 ul.wpuf-form li input/textarea/select/a removes the browser focus ring for all focus states; restore an accessible keyboard-visible focus by adding a separate :focus-visible selector (e.g. .wpuf-form-add.wpuf-form-layout3 ul.wpuf-form li input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible) that applies a visible outline or focus ring (outline/box-shadow and/or border-color) so keyboard users can see focused controls while keeping your existing hover/active styling intact.
🧹 Nitpick comments (1)
languages/wp-user-frontend.pot (1)
12106-12134: Add translator context for generic "Template 1–5" labels.These labels are very generic in isolation, so translators may not know they refer to form style presets. Currently using plain
__()without context. Consider using contextual gettext calls (e.g.,_x()) inwpuf-functions.php(lines 6121, 6125, 6129, 6133, 6137) for better translation quality.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@languages/wp-user-frontend.pot` around lines 12106 - 12134, The "Template 1" through "Template 5" strings are too generic for translators—replace the plain gettext calls used for these labels in wpuf-functions.php with contextual calls (use _x()) and provide a concise context like "form style label" so translators know these are form style presets; apply the same change for each occurrence of "Template 1", "Template 2", "Template 3", "Template 4", and "Template 5" and keep the existing text domain used elsewhere in the file.
🤖 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/css/frontend-form/layout1.css`:
- Around line 1-113: This file contains bespoke CSS for the "layout1" form skin
(selectors like .wpuf-form-layout1, `#form-preview-stage.wpuf-form-layout1`
ul.wpuf-form .wpuf-fields input[type=text|password|email|url|number|tel],
textarea, select, select[multiple], .wpuf-fields-inline, and .wpuf-submit
input[type=submit]) that must be migrated to Tailwind 3 + DaisyUI with scoped
preflight; replace these rule blocks by creating Tailwind utility class sets or
DaisyUI component variants (or a small plugin/partials file) that express the
same styles (background, borders, padding, shadows, disabled state) and update
the form markup to use those utility/component classes, then remove the bespoke
CSS rules from assets/css/frontend-form/layout1.css (or convert the file into a
Tailwind component) so the project follows the Tailwind+DaisyUI styling
standard.
In `@assets/css/frontend-form/layout2.css`:
- Around line 30-40: The new color overrides currently target global selectors
(.wpuf-form-add .wpuf-price-label, .wpuf-form-add .wpuf-upload-instructions,
.wpuf-repeat-container p, body ul.wpuf-form li label.wpuf-form-sub-label) and
must be scoped to the layout skin; update each selector to be nested under the
.wpuf-form-layout2 root (e.g. prefix selectors with .wpuf-form-layout2 so they
become .wpuf-form-layout2 .wpuf-form-add .wpuf-price-label, .wpuf-form-layout2
.wpuf-form-add .wpuf-upload-instructions, .wpuf-form-layout2
.wpuf-repeat-container p, and .wpuf-form-layout2 ul.wpuf-form li
label.wpuf-form-sub-label) to preserve per-layout isolation and follow the
Tailwind/DaisyUI scoped preflight pattern.
In `@assets/css/frontend-form/layout3.css`:
- Around line 278-281: The selector currently targets every form because it uses
"body ul.wpuf-form li .wpuf-fields .wpuf-radio-block, body ul.wpuf-form li
.wpuf-fields .wpuf-checkbox-block"; limit this rule to layout3 by scoping the
selector to the layout3 root used by this stylesheet (e.g., prefix with the
layout3 container class used for these styles) so only layout3 forms get the
flex alignment; update the selector that references .wpuf-radio-block and
.wpuf-checkbox-block in assets/css/frontend-form/layout3.css accordingly and
keep the same declarations so includes/Fields/Form_Field_Radio.php and
Form_Field_Checkbox.php continue to work for non-layout3 forms without being
restyled.
In `@assets/css/frontend-form/layout4.css`:
- Line 45: This stylesheet contains a raw declaration "width: 100%;" in the
layout4.css that violates our Tailwind/DaisyUI policy; remove the direct CSS
rule and migrate the styling to utility/component classes (e.g., use Tailwind
utility classes like w-full or an appropriate DaisyUI component class) applied
in the component/template markup, ensuring the change is scoped under our
preflight setup rather than editing the global layout stylesheet; update any
related component templates that relied on the CSS rule to use the new
Tailwind/DaisyUI classes and remove the rule from layout4.css.
In `@assets/css/frontend-form/layout5.css`:
- Around line 12-23: The new CSS rules are not scoped to layout5 and override
other WPUF forms; update the selectors that reference .wpuf-form-add
.wpuf-price-label, .wpuf-form-add .wpuf-upload-instructions, .wpuf-form-add
.wpuf-repeat-container p and body ul.wpuf-form li label.wpuf-form-sub-label to
be prefixed with the layout5 wrapper (e.g. .wpuf-form-layout5) so they only
apply to layout5 instances (use .wpuf-form-layout5 .wpuf-form-add ... and
.wpuf-form-layout5 body ul.wpuf-form ... or equivalent scoped selectors),
ensuring all four selectors are restricted to .wpuf-form-layout5.
In `@assets/css/frontend-forms.css`:
- Around line 985-988: The focus rule for body fieldset.wpuf-multistep-fieldset
button.wpuf-multistep-nav-btn:focus currently removes focus indicators (outline
and box-shadow); instead restore an accessible visible focus style by removing
the blanket outline:none/box-shadow:none and adding a clear focus ring (for
example use outline with outline-offset or a contrastive box-shadow) on the same
selector (body fieldset.wpuf-multistep-fieldset
button.wpuf-multistep-nav-btn:focus) so keyboard users can see focus; ensure the
color/contrast meets WCAG and keep any visual design tweaks (border-radius,
offset) to match the site style.
In `@assets/less/frontend-forms.less`:
- Around line 1096-1120: The focus rules in button.wpuf-multistep-nav-btn (the
&:focus block) currently remove both outline and box-shadow, erasing the visible
keyboard focus; change the &:focus handling so it does not clear focus
indication but applies an accessible visible focus style instead (update the
&:focus inside button.wpuf-multistep-nav-btn to remove outline: none/box-shadow:
none and replace with a clear focus indicator such as a visible outline or focus
ring via outline or box-shadow with sufficient contrast and size).
In `@includes/Frontend_Render_Form.php`:
- Around line 233-236: The current check skips enqueuing the selected layout
stylesheet for every layout when $use_theme_css is on; change the logic in the
method that sets $layout (where wp_enqueue_style('wpuf-post-form-' . $layout) is
called) so that you only suppress the plugin layout stylesheet when $layout ===
'layout1' and $use_theme_css is truthy—leave the enqueue for
'wpuf-post-form-layout2'..'layout5' intact when Use Theme CSS is enabled, and
only replace/enqueue 'wpuf-theme-style' for layout1 as done later (adjust the
conditional around wp_enqueue_style and the $use_theme_css check accordingly).
---
Outside diff comments:
In `@assets/css/frontend-form/layout3.css`:
- Around line 184-202: The current rule targeting
.wpuf-form-add.wpuf-form-layout3 ul.wpuf-form li input/textarea/select/a removes
the browser focus ring for all focus states; restore an accessible
keyboard-visible focus by adding a separate :focus-visible selector (e.g.
.wpuf-form-add.wpuf-form-layout3 ul.wpuf-form li input:focus-visible,
textarea:focus-visible, select:focus-visible, a:focus-visible) that applies a
visible outline or focus ring (outline/box-shadow and/or border-color) so
keyboard users can see focused controls while keeping your existing hover/active
styling intact.
---
Nitpick comments:
In `@languages/wp-user-frontend.pot`:
- Around line 12106-12134: The "Template 1" through "Template 5" strings are too
generic for translators—replace the plain gettext calls used for these labels in
wpuf-functions.php with contextual calls (use _x()) and provide a concise
context like "form style label" so translators know these are form style
presets; apply the same change for each occurrence of "Template 1", "Template
2", "Template 3", "Template 4", and "Template 5" and keep the existing text
domain used elsewhere in the file.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 7b5c7d0b-0924-4c5c-bddf-420ba59de2f3
📒 Files selected for processing (16)
assets/css/admin/form-builder.cssassets/css/ai-form-builder.cssassets/css/frontend-form/layout1.cssassets/css/frontend-form/layout2.cssassets/css/frontend-form/layout3.cssassets/css/frontend-form/layout4.cssassets/css/frontend-form/layout5.cssassets/css/frontend-forms.cssassets/css/frontend/account.cssassets/less/frontend-forms.lessincludes/Assets.phpincludes/Free/Free_Loader.phpincludes/Frontend_Render_Form.phpincludes/Render_Form.phplanguages/wp-user-frontend.potwpuf-functions.php
💤 Files with no reviewable changes (1)
- includes/Free/Free_Loader.php
Comment on lines
+1
to
+113
| /* Default form skin — layout1 | ||
| * Extracted from frontend-forms.css (.wpuf-style block). | ||
| * Scoped to .wpuf-form-layout1 so it never conflicts with layout2–5. | ||
| */ | ||
|
|
||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=text], | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=text], | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=password], | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=password], | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=email], | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=email], | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=url], | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=url], | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=number], | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=number], | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=tel], | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=tel], | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields textarea, | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields textarea { | ||
| background: #fafafa; | ||
| -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); | ||
| -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); | ||
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); | ||
| border: 1px solid #ddd; | ||
| color: #888; | ||
| width: 95%; | ||
| } | ||
|
|
||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=text]:focus, | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=text]:focus, | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=password]:focus, | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=password]:focus, | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=email]:focus, | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=email]:focus, | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=url]:focus, | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=url]:focus, | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=number]:focus, | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=number]:focus, | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields textarea:focus, | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields textarea:focus { | ||
| color: #373737; | ||
| } | ||
|
|
||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields textarea, | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields textarea { | ||
| padding-left: 3px; | ||
| width: 95%; | ||
| } | ||
|
|
||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=text], | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=text], | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=password], | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=password], | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=email], | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=email], | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=url], | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=url], | ||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=number], | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields input[type=number] { | ||
| padding: 5px; | ||
| } | ||
|
|
||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields select, | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields select { | ||
| border: 1px solid #eee; | ||
| padding: 2px; | ||
| height: 2em; | ||
| -webkit-border-radius: 3px; | ||
| -moz-border-radius: 3px; | ||
| border-radius: 3px; | ||
| min-width: 150px; | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields select[multiple], | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields select[multiple] { | ||
| height: auto; | ||
| } | ||
|
|
||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-fields-inline, | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-fields-inline { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-submit input[type=submit], | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-submit input[type=submit] { | ||
| font-size: 16px; | ||
| padding: 5px 15px; | ||
| line-height: inherit; | ||
| height: inherit; | ||
| border: 1px solid #ccc; | ||
| -webkit-border-radius: 3px; | ||
| -moz-border-radius: 3px; | ||
| border-radius: 3px; | ||
| background: #0085ba; | ||
| border-color: #0073aa #006799 #006799; | ||
| -webkit-box-shadow: 0 1px 0 #006799; | ||
| box-shadow: 0 1px 0 #006799; | ||
| color: #fff; | ||
| text-decoration: none; | ||
| text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799; | ||
| } | ||
|
|
||
| #form-preview-stage.wpuf-form-layout1 ul.wpuf-form .wpuf-submit input[type=submit]:disabled, | ||
| .wpuf-form-add.wpuf-form-layout1 ul.wpuf-form .wpuf-submit input[type=submit]:disabled { | ||
| background: #dddddd; | ||
| border-color: #dddddd; | ||
| -webkit-box-shadow: 0 1px 0 #dddddd; | ||
| box-shadow: 0 1px 0 #dddddd; | ||
| color: #000; | ||
| text-shadow: 0 -1px 1px #dddddd, 1px 0 1px #dddddd, 0 1px 1px #dddddd, -1px 0 1px #dddddd; | ||
| } |
There was a problem hiding this comment.
New layout skin should be implemented with Tailwind 3 + DaisyUI, not bespoke CSS.
The full file introduces direct CSS rules; this conflicts with the project’s styling standard and should be migrated to Tailwind utility/component classes (with scoped preflight) before merge.
As per coding guidelines, "Use Tailwind CSS 3 with DaisyUI component library and scoped preflight for styling".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@assets/css/frontend-form/layout1.css` around lines 1 - 113, This file
contains bespoke CSS for the "layout1" form skin (selectors like
.wpuf-form-layout1, `#form-preview-stage.wpuf-form-layout1` ul.wpuf-form
.wpuf-fields input[type=text|password|email|url|number|tel], textarea, select,
select[multiple], .wpuf-fields-inline, and .wpuf-submit input[type=submit]) that
must be migrated to Tailwind 3 + DaisyUI with scoped preflight; replace these
rule blocks by creating Tailwind utility class sets or DaisyUI component
variants (or a small plugin/partials file) that express the same styles
(background, borders, padding, shadows, disabled state) and update the form
markup to use those utility/component classes, then remove the bespoke CSS rules
from assets/css/frontend-form/layout1.css (or convert the file into a Tailwind
component) so the project follows the Tailwind+DaisyUI styling standard.
Comment on lines
+30
to
+40
| .wpuf-form-add .wpuf-price-label { | ||
| color: var(--wpuf-l2-muted); | ||
| } | ||
| .wpuf-form-add .wpuf-upload-instructions { | ||
| color: var(--wpuf-l2-muted); | ||
| } | ||
| .wpuf-form-add .wpuf-repeat-container p { | ||
| color: var(--wpuf-l2-muted); | ||
| } | ||
| body ul.wpuf-form li label.wpuf-form-sub-label { | ||
| color: var(--wpuf-l2-muted); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Scope these new color overrides to .wpuf-form-layout2.
Lines 30-40 drop back to generic .wpuf-form-add / body ul.wpuf-form selectors, which breaks the per-layout skin boundary this file is establishing.
Suggested fix
-.wpuf-form-add .wpuf-price-label {
+.wpuf-form-add.wpuf-form-layout2 .wpuf-price-label {
color: var(--wpuf-l2-muted);
}
-.wpuf-form-add .wpuf-upload-instructions {
+.wpuf-form-add.wpuf-form-layout2 .wpuf-upload-instructions {
color: var(--wpuf-l2-muted);
}
-.wpuf-form-add .wpuf-repeat-container p {
+.wpuf-form-add.wpuf-form-layout2 .wpuf-repeat-container p {
color: var(--wpuf-l2-muted);
}
-body ul.wpuf-form li label.wpuf-form-sub-label {
+.wpuf-form-add.wpuf-form-layout2 ul.wpuf-form li label.wpuf-form-sub-label {
color: var(--wpuf-l2-muted);
}As per coding guidelines, **/*.{css,scss}: Use Tailwind CSS 3 with DaisyUI component library and scoped preflight for styling.
📝 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.
Suggested change
| .wpuf-form-add .wpuf-price-label { | |
| color: var(--wpuf-l2-muted); | |
| } | |
| .wpuf-form-add .wpuf-upload-instructions { | |
| color: var(--wpuf-l2-muted); | |
| } | |
| .wpuf-form-add .wpuf-repeat-container p { | |
| color: var(--wpuf-l2-muted); | |
| } | |
| body ul.wpuf-form li label.wpuf-form-sub-label { | |
| color: var(--wpuf-l2-muted); | |
| .wpuf-form-add.wpuf-form-layout2 .wpuf-price-label { | |
| color: var(--wpuf-l2-muted); | |
| } | |
| .wpuf-form-add.wpuf-form-layout2 .wpuf-upload-instructions { | |
| color: var(--wpuf-l2-muted); | |
| } | |
| .wpuf-form-add.wpuf-form-layout2 .wpuf-repeat-container p { | |
| color: var(--wpuf-l2-muted); | |
| } | |
| .wpuf-form-add.wpuf-form-layout2 ul.wpuf-form li label.wpuf-form-sub-label { | |
| color: var(--wpuf-l2-muted); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@assets/css/frontend-form/layout2.css` around lines 30 - 40, The new color
overrides currently target global selectors (.wpuf-form-add .wpuf-price-label,
.wpuf-form-add .wpuf-upload-instructions, .wpuf-repeat-container p, body
ul.wpuf-form li label.wpuf-form-sub-label) and must be scoped to the layout
skin; update each selector to be nested under the .wpuf-form-layout2 root (e.g.
prefix selectors with .wpuf-form-layout2 so they become .wpuf-form-layout2
.wpuf-form-add .wpuf-price-label, .wpuf-form-layout2 .wpuf-form-add
.wpuf-upload-instructions, .wpuf-form-layout2 .wpuf-repeat-container p, and
.wpuf-form-layout2 ul.wpuf-form li label.wpuf-form-sub-label) to preserve
per-layout isolation and follow the Tailwind/DaisyUI scoped preflight pattern.
Comment on lines
+278
to
281
| body ul.wpuf-form li .wpuf-fields .wpuf-radio-block, body ul.wpuf-form li .wpuf-fields .wpuf-checkbox-block { | ||
| display: flex !important; | ||
| align-items: center; | ||
| } |
There was a problem hiding this comment.
Scope the block radio/checkbox label rule to layout3.
includes/Fields/Form_Field_Radio.php and includes/Fields/Form_Field_Checkbox.php render .wpuf-radio-block / .wpuf-checkbox-block for every form, so the body ul.wpuf-form ... !important selector here will restyle non-layout3 forms too.
Suggested fix
-body ul.wpuf-form li .wpuf-fields .wpuf-radio-block, body ul.wpuf-form li .wpuf-fields .wpuf-checkbox-block {
+.wpuf-form-add.wpuf-form-layout3 ul.wpuf-form li .wpuf-fields .wpuf-radio-block,
+.wpuf-form-add.wpuf-form-layout3 ul.wpuf-form li .wpuf-fields .wpuf-checkbox-block {
display: flex !important;
align-items: center;
}As per coding guidelines, **/*.{css,scss}: Use Tailwind CSS 3 with DaisyUI component library and scoped preflight for styling.
📝 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.
Suggested change
| body ul.wpuf-form li .wpuf-fields .wpuf-radio-block, body ul.wpuf-form li .wpuf-fields .wpuf-checkbox-block { | |
| display: flex !important; | |
| align-items: center; | |
| } | |
| .wpuf-form-add.wpuf-form-layout3 ul.wpuf-form li .wpuf-fields .wpuf-radio-block, | |
| .wpuf-form-add.wpuf-form-layout3 ul.wpuf-form li .wpuf-fields .wpuf-checkbox-block { | |
| display: flex !important; | |
| align-items: center; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@assets/css/frontend-form/layout3.css` around lines 278 - 281, The selector
currently targets every form because it uses "body ul.wpuf-form li .wpuf-fields
.wpuf-radio-block, body ul.wpuf-form li .wpuf-fields .wpuf-checkbox-block";
limit this rule to layout3 by scoping the selector to the layout3 root used by
this stylesheet (e.g., prefix with the layout3 container class used for these
styles) so only layout3 forms get the flex alignment; update the selector that
references .wpuf-radio-block and .wpuf-checkbox-block in
assets/css/frontend-form/layout3.css accordingly and keep the same declarations
so includes/Fields/Form_Field_Radio.php and Form_Field_Checkbox.php continue to
work for non-layout3 forms without being restyled.
| .wpuf-form-add.wpuf-form-layout4 ul.wpuf-form li .wpuf-fields textarea, | ||
| .wpuf-form-add.wpuf-form-layout4 ul.wpuf-form li .wpuf-fields select { | ||
| width: auto; | ||
| width: 100%; |
There was a problem hiding this comment.
Use Tailwind/DaisyUI styling instead of direct CSS edits in layout stylesheets.
This change updates a raw CSS declaration, but this path is under the Tailwind/DaisyUI styling policy and should be migrated to utility/component-based styling with scoped preflight.
As per coding guidelines, "Use Tailwind CSS 3 with DaisyUI component library and scoped preflight for styling".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@assets/css/frontend-form/layout4.css` at line 45, This stylesheet contains a
raw declaration "width: 100%;" in the layout4.css that violates our
Tailwind/DaisyUI policy; remove the direct CSS rule and migrate the styling to
utility/component classes (e.g., use Tailwind utility classes like w-full or an
appropriate DaisyUI component class) applied in the component/template markup,
ensuring the change is scoped under our preflight setup rather than editing the
global layout stylesheet; update any related component templates that relied on
the CSS rule to use the new Tailwind/DaisyUI classes and remove the rule from
layout4.css.
Comment on lines
+12
to
+23
| .wpuf-form-add .wpuf-price-label { | ||
| color: var(--wpuf-l2-muted); | ||
| } | ||
| .wpuf-form-add .wpuf-upload-instructions { | ||
| color: var(--wpuf-l2-muted); | ||
| } | ||
| .wpuf-form-add .wpuf-repeat-container p { | ||
| color: var(--wpuf-l2-muted); | ||
| } | ||
| body ul.wpuf-form li label.wpuf-form-sub-label { | ||
| color: var(--wpuf-l2-muted); | ||
| } |
There was a problem hiding this comment.
Scope these new rules to layout5 only.
These selectors dropped the .wpuf-form-layout5 qualifier, so loading layout5.css will recolor labels/instructions in other WPUF forms rendered on the same page.
🔧 Proposed fix
-.wpuf-form-add .wpuf-price-label {
- color: var(--wpuf-l2-muted);
-}
-.wpuf-form-add .wpuf-upload-instructions {
- color: var(--wpuf-l2-muted);
-}
-.wpuf-form-add .wpuf-repeat-container p {
- color: var(--wpuf-l2-muted);
-}
-body ul.wpuf-form li label.wpuf-form-sub-label {
- color: var(--wpuf-l2-muted);
-}
+.wpuf-form-add.wpuf-form-layout5 .wpuf-price-label,
+.wpuf-form-add.wpuf-form-layout5 .wpuf-upload-instructions,
+.wpuf-form-add.wpuf-form-layout5 .wpuf-repeat-container p,
+.wpuf-form-add.wpuf-form-layout5 ul.wpuf-form li label.wpuf-form-sub-label {
+ color: var(--wpuf-l2-muted);
+}As per coding guidelines, **/*.{css,scss}: Use Tailwind CSS 3 with DaisyUI component library and scoped preflight for styling.
📝 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.
Suggested change
| .wpuf-form-add .wpuf-price-label { | |
| color: var(--wpuf-l2-muted); | |
| } | |
| .wpuf-form-add .wpuf-upload-instructions { | |
| color: var(--wpuf-l2-muted); | |
| } | |
| .wpuf-form-add .wpuf-repeat-container p { | |
| color: var(--wpuf-l2-muted); | |
| } | |
| body ul.wpuf-form li label.wpuf-form-sub-label { | |
| color: var(--wpuf-l2-muted); | |
| } | |
| .wpuf-form-add.wpuf-form-layout5 .wpuf-price-label, | |
| .wpuf-form-add.wpuf-form-layout5 .wpuf-upload-instructions, | |
| .wpuf-form-add.wpuf-form-layout5 .wpuf-repeat-container p, | |
| .wpuf-form-add.wpuf-form-layout5 ul.wpuf-form li label.wpuf-form-sub-label { | |
| color: var(--wpuf-l2-muted); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@assets/css/frontend-form/layout5.css` around lines 12 - 23, The new CSS rules
are not scoped to layout5 and override other WPUF forms; update the selectors
that reference .wpuf-form-add .wpuf-price-label, .wpuf-form-add
.wpuf-upload-instructions, .wpuf-form-add .wpuf-repeat-container p and body
ul.wpuf-form li label.wpuf-form-sub-label to be prefixed with the layout5
wrapper (e.g. .wpuf-form-layout5) so they only apply to layout5 instances (use
.wpuf-form-layout5 .wpuf-form-add ... and .wpuf-form-layout5 body ul.wpuf-form
... or equivalent scoped selectors), ensuring all four selectors are restricted
to .wpuf-form-layout5.
Comment on lines
+985
to
+988
| body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-nav-btn:focus { | ||
| outline: none; | ||
| box-shadow: none; | ||
| } |
There was a problem hiding this comment.
Accessibility issue: Removing focus indicator violates WCAG 2.4.7.
Setting outline: none and box-shadow: none on :focus removes all visible focus indicators, making keyboard navigation unusable for users who rely on it.
♿ Proposed fix to add a visible focus ring
body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-nav-btn:focus {
- outline: none;
- box-shadow: none;
+ outline: 2px solid `#3b82f6`;
+ outline-offset: 2px;
}📝 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.
Suggested change
| body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-nav-btn:focus { | |
| outline: none; | |
| box-shadow: none; | |
| } | |
| body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-nav-btn:focus { | |
| outline: 2px solid `#3b82f6`; | |
| outline-offset: 2px; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@assets/css/frontend-forms.css` around lines 985 - 988, The focus rule for
body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-nav-btn:focus
currently removes focus indicators (outline and box-shadow); instead restore an
accessible visible focus style by removing the blanket
outline:none/box-shadow:none and adding a clear focus ring (for example use
outline with outline-offset or a contrastive box-shadow) on the same selector
(body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-nav-btn:focus) so
keyboard users can see focus; ensure the color/contrast meets WCAG and keep any
visual design tweaks (border-radius, offset) to match the site style.
Comment on lines
+1096
to
+1120
| button.wpuf-multistep-nav-btn { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: 0.5rem 1rem; | ||
| font-size: 1rem; | ||
| font-weight: 500; | ||
| line-height: 1.5rem; | ||
| color: #4b5563; | ||
| white-space: nowrap; | ||
| background: #ffffff; | ||
| border: 1px solid #e5e7eb; | ||
| border-radius: 0.375rem; | ||
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | ||
| text-decoration: none; | ||
| cursor: pointer; | ||
|
|
||
| &:hover { | ||
| background: #f9fafb; | ||
| } | ||
|
|
||
| &:focus { | ||
| outline: none; | ||
| box-shadow: none; | ||
| } |
There was a problem hiding this comment.
Don't remove the multistep buttons' visible focus state.
Lines 1117-1120 clear both outline and box-shadow without adding a replacement, so keyboard users lose track of the active Previous/Next button.
Suggested fix
&:focus {
- outline: none;
- box-shadow: none;
+ outline: none;
+ }
+
+ &:focus-visible {
+ outline: 2px solid `#5C5CFB`;
+ outline-offset: 2px;
+ box-shadow: 0 0 0 2px rgba(92, 92, 251, 0.2);
}📝 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.
Suggested change
| button.wpuf-multistep-nav-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0.5rem 1rem; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| line-height: 1.5rem; | |
| color: #4b5563; | |
| white-space: nowrap; | |
| background: #ffffff; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.375rem; | |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| text-decoration: none; | |
| cursor: pointer; | |
| &:hover { | |
| background: #f9fafb; | |
| } | |
| &:focus { | |
| outline: none; | |
| box-shadow: none; | |
| } | |
| button.wpuf-multistep-nav-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0.5rem 1rem; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| line-height: 1.5rem; | |
| color: `#4b5563`; | |
| white-space: nowrap; | |
| background: `#ffffff`; | |
| border: 1px solid `#e5e7eb`; | |
| border-radius: 0.375rem; | |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| text-decoration: none; | |
| cursor: pointer; | |
| &:hover { | |
| background: `#f9fafb`; | |
| } | |
| &:focus { | |
| outline: none; | |
| } | |
| &:focus-visible { | |
| outline: 2px solid `#5C5CFB`; | |
| outline-offset: 2px; | |
| box-shadow: 0 0 0 2px rgba(92, 92, 251, 0.2); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@assets/less/frontend-forms.less` around lines 1096 - 1120, The focus rules in
button.wpuf-multistep-nav-btn (the &:focus block) currently remove both outline
and box-shadow, erasing the visible keyboard focus; change the &:focus handling
so it does not clear focus indication but applies an accessible visible focus
style instead (update the &:focus inside button.wpuf-multistep-nav-btn to remove
outline: none/box-shadow: none and replace with a clear focus indicator such as
a visible outline or focus ring via outline or box-shadow with sufficient
contrast and size).
Comment on lines
233
to
+236
| $layout = isset( $this->form_settings['form_layout'] ) ? $this->form_settings['form_layout'] : 'layout1'; | ||
|
|
||
| if ( ! empty( $layout ) && 'on' !== $use_theme_css ) { | ||
| // Always enqueue the base template style | ||
| wp_enqueue_style( 'wpuf-reg-template-base' ); | ||
| wp_enqueue_style( 'wpuf-' . $layout ); | ||
| wp_enqueue_style( 'wpuf-post-form-' . $layout ); |
There was a problem hiding this comment.
Only bypass plugin CSS for layout1.
Line 236 suppresses the selected layout stylesheet for every layout when use_theme_css is on, but Line 267 only replaces that with wpuf-theme-style for layout1. Selecting layout2-layout5 with “Use Theme CSS” enabled will therefore drop the chosen template styling entirely.
🔧 Proposed fix
- if ( ! empty( $layout ) && 'on' !== $use_theme_css ) {
+ if ( ! empty( $layout ) && ( 'layout1' !== $layout || 'on' !== $use_theme_css ) ) {
wp_enqueue_style( 'wpuf-post-form-' . $layout );
}Also applies to: 267-267
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@includes/Frontend_Render_Form.php` around lines 233 - 236, The current check
skips enqueuing the selected layout stylesheet for every layout when
$use_theme_css is on; change the logic in the method that sets $layout (where
wp_enqueue_style('wpuf-post-form-' . $layout) is called) so that you only
suppress the plugin layout stylesheet when $layout === 'layout1' and
$use_theme_css is truthy—leave the enqueue for
'wpuf-post-form-layout2'..'layout5' intact when Use Theme CSS is enabled, and
only replace/enqueue 'wpuf-theme-style' for layout1 as done later (adjust the
conditional around wp_enqueue_style and the $use_theme_css check accordingly).
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.
closes #1481, closes #1482, closes #1483, closes #1484, closes #1485
related PR #1486
Revamp the design of all 5 current prebuilt post form layouts to follow modern UI/UX practices
Summary by CodeRabbit
Release Notes
New Features
Style