feat: add card grid UI for payment gateway selection#1830
Open
sapayth wants to merge 2 commits intoweDevsOfficial:developfrom
Open
feat: add card grid UI for payment gateway selection#1830sapayth wants to merge 2 commits intoweDevsOfficial:developfrom
sapayth wants to merge 2 commits intoweDevsOfficial:developfrom
Conversation
Replace plain multicheck field with a visual card grid for selecting payment gateways in Settings > Payments. Each gateway renders as a clickable card with icon, name, and toggle. Clicking a card shows its settings below; toggling the checkmark enables/disables it. - Add gateway_selector field type and callback in WeDevs_Settings_API - Add gateway_selector context to wpuf_get_gateways() for rich data - Add JS gateway row detection and show/hide logic - Add LESS/CSS styles with BEM naming and focused/active states - Use official PayPal SVG mark icon, inline SVG for bank, generic credit card fallback for gateways without icons
WalkthroughAdds a card-style gateway selector UI (PHP callback, JS init, CSS/LESS styles), updates settings to use the new Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
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)
📝 Coding Plan
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: 4
🧹 Nitpick comments (1)
assets/css/admin.css (1)
1606-1703: Migrate gateway card styles to Tailwind CSS to match the codebase's established modern styling approach.The gateway selector component in
Lib/WeDevs_Settings_API.phpuses handwritten CSS compiled from LESS (viaassets/less/admin.less), which falls outside the repository's Tailwind CSS 3 + DaisyUI styling system. Similar admin components like subscriptions have already been modernized to use Tailwind directives—follow that same pattern for consistency.Current styles (from admin.less → admin.css, lines 1606–1703)
.wpuf-gateway-cards { display: flex; flex-wrap: wrap; gap: 12px; } .wpuf-gateway-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; padding: 20px 16px 14px; border: 2px solid `#e0e0e0`; border-radius: 6px; background: `#fff`; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* ... additional rules ... */Reference the pattern in
assets/css/admin/subscriptions.css(which starts with@tailwinddirectives) for how modernized admin styles are structured.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@assets/css/admin.css` around lines 1606 - 1703, Replace the handwritten gateway card CSS rules (.wpuf-gateway-cards, .wpuf-gateway-card and all related modifiers like .wpuf-gateway-card--active, --focused, --pro-locked and child selectors) with Tailwind-based styles following the same pattern used for the subscriptions admin styles: create a Tailwind-enabled stylesheet that starts with `@tailwind` directives and either apply utility classes in the markup or use `@apply` to map the existing class names to utilities (e.g., .wpuf-gateway-cards -> flex flex-wrap gap-3, .wpuf-gateway-card -> relative flex flex-col items-center justify-center w-[150px] p-5 border-2 border-gray-200 rounded-md bg-white cursor-pointer transition, active/focused -> border-green-500 ring-1 ring-green-500, pro-locked -> opacity-60 cursor-not-allowed, hide/show check icons via hidden/block utilities), remove the legacy rules from the old CSS so only the Tailwind/@apply implementations remain, and ensure hover/focus transitions, icon sizing and absolute toggle/checkbox positioning are preserved using Tailwind utilities.
🤖 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/admin.css`:
- Around line 1625-1661: The locked-card state (.wpuf-gateway-card--pro-locked)
currently only reduces opacity so hover and toggle affordances remain; update
the CSS to override hover and pointer behaviors for locked cards by adding rules
such as .wpuf-gateway-card--pro-locked:hover { border-color: inherit;
box-shadow: none; } and .wpuf-gateway-card--pro-locked { cursor: not-allowed; }
plus disable interactions on children: .wpuf-gateway-card--pro-locked
.wpuf-gateway-card__toggle { pointer-events: none; opacity: 0.6; cursor:
not-allowed; } and ensure .wpuf-gateway-card--pro-locked
.wpuf-gateway-card__checkbox keeps pointer-events: none so the card no longer
advertises clickability.
In `@assets/js/admin/settings.js`:
- Around line 281-296: The card container click handler only listens for 'click'
on gatewayCards and is not keyboard-accessible; update the gatewayCards handling
so each card element (gatewayCards) is focusable (e.g., renderer adds
tabindex="0" and an appropriate role) and add a keydown listener alongside the
click listener that listens for Enter and Space and calls
showGatewaySettings(gatewayId) while preserving the existing ignores
(wpuf-gateway-card__toggle and wpuf-gateway-card--pro-locked checks); ensure
Space prevents default to avoid scrolling and reuse the same gatewayId
extraction logic to keep behavior consistent.
In `@Lib/WeDevs_Settings_API.php`:
- Around line 354-355: Locate the docblock in the WeDevs_Settings_API class in
Lib/WeDevs_Settings_API.php that currently uses the placeholder "@since
WPUF_SINCE" and replace that placeholder with the actual release version string
(e.g., "1.2.3") used across the project; ensure the `@since` tag format matches
other `@since` entries in the repository.
In `@wpuf-functions.php`:
- Around line 933-939: The gateway config is missing the is_pro_preview flag so
wpuf_get_gateways (branches 'gateway_selector' and checkout) always sees false;
update the code path that assembles gateway configs to include this flag—either
add is_pro_preview to Payment_Gateway::get_config(), or have specific gateways
(e.g., the Stripe gateway in the Free loader) override get_config() to return
'is_pro_preview' => true when appropriate, or compute and inject it in
Gateway_Manager::get_registered_gateways() before wpuf_get_gateways consumes the
configs; pick one approach and ensure the key name matches 'is_pro_preview' so
the existing wpuf_get_gateways['gateway_selector'] logic picks up the correct
value.
---
Nitpick comments:
In `@assets/css/admin.css`:
- Around line 1606-1703: Replace the handwritten gateway card CSS rules
(.wpuf-gateway-cards, .wpuf-gateway-card and all related modifiers like
.wpuf-gateway-card--active, --focused, --pro-locked and child selectors) with
Tailwind-based styles following the same pattern used for the subscriptions
admin styles: create a Tailwind-enabled stylesheet that starts with `@tailwind`
directives and either apply utility classes in the markup or use `@apply` to map
the existing class names to utilities (e.g., .wpuf-gateway-cards -> flex
flex-wrap gap-3, .wpuf-gateway-card -> relative flex flex-col items-center
justify-center w-[150px] p-5 border-2 border-gray-200 rounded-md bg-white
cursor-pointer transition, active/focused -> border-green-500 ring-1
ring-green-500, pro-locked -> opacity-60 cursor-not-allowed, hide/show check
icons via hidden/block utilities), remove the legacy rules from the old CSS so
only the Tailwind/@apply implementations remain, and ensure hover/focus
transitions, icon sizing and absolute toggle/checkbox positioning are preserved
using Tailwind utilities.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6d788195-f50e-48c5-8f3b-abc0230ea300
⛔ Files ignored due to path filters (1)
assets/images/paypal-mark.svgis excluded by!**/*.svg
📒 Files selected for processing (7)
Lib/Gateway/Paypal_Gateway.phpLib/WeDevs_Settings_API.phpassets/css/admin.cssassets/js/admin/settings.jsassets/less/admin.lessincludes/functions/settings-options.phpwpuf-functions.php
Comment on lines
+1625
to
+1661
| .wpuf-gateway-card:hover { | ||
| border-color: #c3c4c7; | ||
| box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); | ||
| } | ||
| .wpuf-gateway-card--active:hover { | ||
| border-color: #10b981; | ||
| } | ||
| .wpuf-gateway-card--focused { | ||
| border-color: #10b981; | ||
| box-shadow: 0 0 0 1px #10b981; | ||
| } | ||
| .wpuf-gateway-card--focused:hover { | ||
| border-color: #10b981; | ||
| } | ||
| .wpuf-gateway-card--pro-locked { | ||
| opacity: 0.6; | ||
| cursor: not-allowed; | ||
| } | ||
| .wpuf-gateway-card__checkbox { | ||
| position: absolute; | ||
| opacity: 0; | ||
| width: 0; | ||
| height: 0; | ||
| pointer-events: none; | ||
| } | ||
| .wpuf-gateway-card__toggle { | ||
| position: absolute; | ||
| top: 4px; | ||
| right: 4px; | ||
| cursor: pointer; | ||
| line-height: 1; | ||
| padding: 4px; | ||
| z-index: 2; | ||
| } | ||
| .wpuf-gateway-card__toggle:hover { | ||
| opacity: 0.8; | ||
| } |
There was a problem hiding this comment.
Locked cards still look clickable.
--pro-locked only lowers opacity. The generic hover rule and the toggle’s pointer/hover styles still apply, so a locked gateway keeps advertising affordances as if it can be enabled.
Proposed CSS adjustment
.wpuf-gateway-card--pro-locked {
opacity: 0.6;
cursor: not-allowed;
}
+.wpuf-gateway-card--pro-locked:hover,
+.wpuf-gateway-card--pro-locked.wpuf-gateway-card--focused {
+ border-color: `#e0e0e0`;
+ box-shadow: none;
+}
+.wpuf-gateway-card--pro-locked .wpuf-gateway-card__toggle,
+.wpuf-gateway-card--pro-locked .wpuf-gateway-card__toggle:hover {
+ cursor: not-allowed;
+ opacity: 1;
+}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@assets/css/admin.css` around lines 1625 - 1661, The locked-card state
(.wpuf-gateway-card--pro-locked) currently only reduces opacity so hover and
toggle affordances remain; update the CSS to override hover and pointer
behaviors for locked cards by adding rules such as
.wpuf-gateway-card--pro-locked:hover { border-color: inherit; box-shadow: none;
} and .wpuf-gateway-card--pro-locked { cursor: not-allowed; } plus disable
interactions on children: .wpuf-gateway-card--pro-locked
.wpuf-gateway-card__toggle { pointer-events: none; opacity: 0.6; cursor:
not-allowed; } and ensure .wpuf-gateway-card--pro-locked
.wpuf-gateway-card__checkbox keeps pointer-events: none so the card no longer
advertises clickability.
Comment on lines
+281
to
+296
| // Card body click handler — only shows settings, does not toggle selection | ||
| gatewayCards.forEach(function(card) { | ||
| card.addEventListener('click', function(e) { | ||
| // Ignore clicks on the toggle label or checkbox (those handle selection) | ||
| if ( e.target.closest('.wpuf-gateway-card__toggle') ) { | ||
| return; | ||
| } | ||
|
|
||
| if ( card.classList.contains('wpuf-gateway-card--pro-locked') ) { | ||
| return; | ||
| } | ||
|
|
||
| var gatewayId = card.getAttribute('data-gateway'); | ||
| showGatewaySettings(gatewayId); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
Card-body interaction is not keyboard-operable.
Line 283 binds only click on a non-semantic card container, so keyboard users can’t trigger “show settings” from the card body. Please add keyboard activation (Enter/Space) and ensure cards are focusable from the renderer.
♿ Suggested JS fix (keyboard activation)
gatewayCards.forEach(function(card) {
card.addEventListener('click', function(e) {
// Ignore clicks on the toggle label or checkbox (those handle selection)
if ( e.target.closest('.wpuf-gateway-card__toggle') ) {
return;
}
if ( card.classList.contains('wpuf-gateway-card--pro-locked') ) {
return;
}
var gatewayId = card.getAttribute('data-gateway');
showGatewaySettings(gatewayId);
});
+
+ card.addEventListener('keydown', function(e) {
+ if ( e.key !== 'Enter' && e.key !== ' ' ) {
+ return;
+ }
+ e.preventDefault();
+
+ if ( card.classList.contains('wpuf-gateway-card--pro-locked') ) {
+ return;
+ }
+
+ var gatewayId = card.getAttribute('data-gateway');
+ showGatewaySettings(gatewayId);
+ });
});Also update the rendered card container to be focusable (e.g., tabindex="0" with an appropriate role).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@assets/js/admin/settings.js` around lines 281 - 296, The card container click
handler only listens for 'click' on gatewayCards and is not keyboard-accessible;
update the gatewayCards handling so each card element (gatewayCards) is
focusable (e.g., renderer adds tabindex="0" and an appropriate role) and add a
keydown listener alongside the click listener that listens for Enter and Space
and calls showGatewaySettings(gatewayId) while preserving the existing ignores
(wpuf-gateway-card__toggle and wpuf-gateway-card--pro-locked checks); ensure
Space prevents default to avoid scrolling and reuse the same gatewayId
extraction logic to keep behavior consistent.
Comment on lines
+354
to
+355
| * @since WPUF_SINCE | ||
| * |
There was a problem hiding this comment.
Replace the placeholder @since value.
@since WPUF_SINCE should be replaced with the actual release version before merge.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Lib/WeDevs_Settings_API.php` around lines 354 - 355, Locate the docblock in
the WeDevs_Settings_API class in Lib/WeDevs_Settings_API.php that currently uses
the placeholder "@since WPUF_SINCE" and replace that placeholder with the actual
release version string (e.g., "1.2.3") used across the project; ensure the
`@since` tag format matches other `@since` entries in the repository.
Comment on lines
+933
to
+939
| } elseif ( 'gateway_selector' === $context ) { | ||
| $return[ $id ] = [ | ||
| 'admin_label' => $gate['admin_label'], | ||
| 'icon' => isset( $gate['icon'] ) ? $gate['icon'] : '', | ||
| 'supports_subscription' => ! empty( $gate['supports_subscription'] ), | ||
| 'is_pro_preview' => ! empty( $gate['is_pro_preview'] ) ? $gate['is_pro_preview'] : false, | ||
| ]; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Payment::get_payment_gateways implementation =="
rg -n -C4 'function\s+get_payment_gateways\s*\(' -g '*.php'
echo
echo "== get_config implementations =="
rg -n -C4 'function\s+get_config\s*\(' -g '*.php'
echo
echo "== is_pro_preview definitions / exports =="
rg -n -C2 '\bis_pro_preview\b' -g '*.php'Repository: weDevsOfficial/wp-user-frontend
Length of output: 50387
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Full Payment::get_payment_gateways implementation =="
rg -n -A20 'public static function get_payment_gateways' includes/Frontend/Payment.php
echo
echo "== Payment_Gateway subclasses (extends Payment_Gateway) =="
rg -n 'class\s+\w+\s+extends\s+Payment_Gateway' -g '*.php'
echo
echo "== Gateway implementations that might override get_config =="
rg -n -B2 -A10 'function\s+get_config\s*\(' includes/Lib/Gateway/*.php includes/Free/Gateways/*.php 2>/dev/null || echo "No results in those paths"Repository: weDevsOfficial/wp-user-frontend
Length of output: 1347
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Payment::get_payment_gateways full implementation with return =="
sed -n '26,70p' includes/Frontend/Payment.php
echo
echo "== Check if Gateway_Manager adds is_pro_preview =="
rg -n -C5 'is_pro_preview' includes/Lib/Gateway/Gateway_Manager.php 2>/dev/null || echo "Not found in Gateway_Manager"Repository: weDevsOfficial/wp-user-frontend
Length of output: 1836
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Hook definitions for wpuf_payment_gateways filter =="
rg -n 'wpuf_payment_gateways' -g '*.php' --max-count=20
echo
echo "== wpuf_get_gateways function =="
rg -n -A30 'function\s+wpuf_get_gateways' -g '*.php'Repository: weDevsOfficial/wp-user-frontend
Length of output: 2798
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Free_Loader::wpuf_payment_gateways implementation =="
sed -n '1475,1520p' includes/Free/Free_Loader.php
echo
echo "== Gateway_Manager::get_registered_gateways implementation =="
rg -n -A25 'function\s+get_registered_gateways' Lib/Gateway/Gateway_Manager.phpRepository: weDevsOfficial/wp-user-frontend
Length of output: 2735
🏁 Script executed:
#!/bin/bash
set -euo kapipefail
echo "== Check if any class adds is_pro_preview to gateways =="
rg -n "is_pro_preview.*=>.*true" -g '*.php' | grep -i gateway
echo
echo "== Check all gateway definitions to see if is_pro_preview is ever set =="
rg -n -B3 -A3 "\['is_pro_preview'\]" includes/Lib/Gateway/ includes/Free/Gateways/ 2>/dev/null || echo "Not found in gateway code"
echo
echo "== Verify Payment_Gateway get_config return statement fully =="
sed -n '153,165p' includes/Abstracts/Payment_Gateway.phpRepository: weDevsOfficial/wp-user-frontend
Length of output: 130
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Check if any class adds is_pro_preview to gateways =="
rg -n "is_pro_preview.*=>.*true" -g '*.php' | grep -i gateway || echo "No gateway-specific is_pro_preview=true found"
echo
echo "== Check all gateway definitions to see if is_pro_preview is ever set =="
rg -n -B3 -A3 "\['is_pro_preview'\]" includes/Lib/Gateway/ includes/Free/Gateways/ 2>/dev/null || echo "Not found in gateway code"
echo
echo "== Verify Payment_Gateway get_config return statement fully =="
sed -n '153,165p' includes/Abstracts/Payment_Gateway.phpRepository: weDevsOfficial/wp-user-frontend
Length of output: 797
is_pro_preview is missing from the gateway config chain and will always evaluate to false.
The base Payment_Gateway::get_config() does not export is_pro_preview, and Gateway_Manager::get_registered_gateways() passes it through verbatim without augmentation. The Free loader's stripe gateway definition also does not populate this field. As a result, the gateway_selector and checkout branches in wpuf_get_gateways() (lines 938 and 944) will silently default is_pro_preview to false for every gateway, preventing pro-only gateways from displaying the locked-preview state.
To fix, either:
- Add
is_pro_previewtoPayment_Gateway::get_config()(or a separate method), or - Have gateways that need it override
get_config()to include the flag, or - Populate it in
Gateway_Manager::get_registered_gateways()based on gateway state.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@wpuf-functions.php` around lines 933 - 939, The gateway config is missing the
is_pro_preview flag so wpuf_get_gateways (branches 'gateway_selector' and
checkout) always sees false; update the code path that assembles gateway configs
to include this flag—either add is_pro_preview to Payment_Gateway::get_config(),
or have specific gateways (e.g., the Stripe gateway in the Free loader) override
get_config() to return 'is_pro_preview' => true when appropriate, or compute and
inject it in Gateway_Manager::get_registered_gateways() before wpuf_get_gateways
consumes the configs; pick one approach and ensure the key name matches
'is_pro_preview' so the existing wpuf_get_gateways['gateway_selector'] logic
picks up the correct value.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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-forms.css`:
- Around line 940-942: The new CSS rule targeting body `#wpuf-payment-gateway`
ul.wpuf-payment-gateways li.wpuf-gateway-paypal img must not be added to the
legacy LESS pipeline; remove that rule from the LESS file and instead implement
the sizing via the modern Tailwind CSS pipeline: either add the equivalent
Tailwind utility class to the img element (e.g., a max-width utility) or create
a small component/utility in your Tailwind stylesheet (using `@layer` components
or utilities) that targets the same selector and sets the max-width, and ensure
the change is included in the Tailwind build so it follows the Tailwind +
DaisyUI + scoped preflight pipeline.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6a565303-670e-40b7-9c89-a1cff20c0946
⛔ Files ignored due to path filters (1)
assets/images/modules/razorpay.pngis excluded by!**/*.png
📒 Files selected for processing (3)
assets/css/frontend-forms.cssassets/less/frontend-forms.lesslanguages/wp-user-frontend.pot
✅ Files skipped from review due to trivial changes (1)
- assets/less/frontend-forms.less
Comment on lines
+940
to
+942
| body #wpuf-payment-gateway ul.wpuf-payment-gateways li.wpuf-gateway-paypal img { | ||
| max-width: 15px; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check for Tailwind configuration and package.json
fd -t f -e json "tailwind|package" | head -20Repository: weDevsOfficial/wp-user-frontend
Length of output: 233
🏁 Script executed:
# Search for Tailwind CSS imports or configuration
rg -i "tailwind|daisyui" --type json --type js --type css -A 3 | head -50Repository: weDevsOfficial/wp-user-frontend
Length of output: 2404
🏁 Script executed:
# Check the structure of the CSS file to understand styling approach
cat -n assets/css/frontend-forms.css | head -50Repository: weDevsOfficial/wp-user-frontend
Length of output: 1598
🏁 Script executed:
# Check if there are any Tailwind or CSS imports in the HTML/PHP files
rg -i "tailwind|scoped.*preflight" --type php --type html | head -20Repository: weDevsOfficial/wp-user-frontend
Length of output: 890
🏁 Script executed:
# Check the beginning of frontend-forms.css to see if it has `@tailwind` directives
head -20 assets/css/frontend-forms.cssRepository: weDevsOfficial/wp-user-frontend
Length of output: 585
🏁 Script executed:
# Look at context around lines 940-942
sed -n '935,950p' assets/css/frontend-forms.cssRepository: weDevsOfficial/wp-user-frontend
Length of output: 534
🏁 Script executed:
# Check if frontend-forms.css has any Tailwind directives
rg "@tailwind|@layer" assets/css/frontend-forms.cssRepository: weDevsOfficial/wp-user-frontend
Length of output: 57
🏁 Script executed:
# Check package.json for build scripts and Tailwind configuration
cat package.json | head -100Repository: weDevsOfficial/wp-user-frontend
Length of output: 2457
🏁 Script executed:
# Verify if tailwind.config.js references assets/css or src/css
cat tailwind.config.js | head -50Repository: weDevsOfficial/wp-user-frontend
Length of output: 1840
🏁 Script executed:
# Check if frontend-forms.css exists in src/ directory
find . -name "frontend-forms.css" -o -name "*frontend-forms*" | grep -v node_modulesRepository: weDevsOfficial/wp-user-frontend
Length of output: 140
🏁 Script executed:
# Check Gruntfile for Tailwind build configuration
fd -t f "Gruntfile" | xargs cat | head -100Repository: weDevsOfficial/wp-user-frontend
Length of output: 3396
🏁 Script executed:
# Check if assets/css files are in git or generated
git status assets/css/ 2>/dev/null | head -20Repository: weDevsOfficial/wp-user-frontend
Length of output: 140
🏁 Script executed:
# Look for a build config that might compile src/ to assets/
rg "tailwind|src/css|assets/css" Gruntfile.js -A 5 -B 5 2>/dev/null | head -50Repository: weDevsOfficial/wp-user-frontend
Length of output: 1821
Avoid adding styles to the legacy LESS pipeline; migrate to Tailwind CSS instead.
The rule at lines 940-942 is being added to assets/less/frontend-forms.less, which bypasses the required Tailwind CSS 3 + DaisyUI + scoped preflight pipeline. This file is part of the legacy LESS-based styling layer. Per coding guidelines, new styles should use Tailwind utilities or be added to the modern src/css/ pipeline with proper Tailwind directives.
🤖 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 940 - 942, The new CSS rule
targeting body `#wpuf-payment-gateway` ul.wpuf-payment-gateways
li.wpuf-gateway-paypal img must not be added to the legacy LESS pipeline; remove
that rule from the LESS file and instead implement the sizing via the modern
Tailwind CSS pipeline: either add the equivalent Tailwind utility class to the
img element (e.g., a max-width utility) or create a small component/utility in
your Tailwind stylesheet (using `@layer` components or utilities) that targets the
same selector and sets the max-width, and ensure the change is included in the
Tailwind build so it follows the Tailwind + DaisyUI + scoped preflight pipeline.
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.
Replace plain multicheck field with a visual card grid for selecting payment gateways in Settings > Payments. Each gateway renders as a clickable card with icon, name, and toggle. Clicking a card shows its settings below; toggling the checkmark enables/disables it.
Summary by CodeRabbit
New Features
Style
Localization