fix(checkout-editor): make mobile editor and Add Field modal usable on phones#1162
Merged
superdav42 merged 1 commit intomainfrom May 8, 2026
Merged
Conversation
…n phones
The mobile (<=782px) view of the checkout form editor had three usability
defects that made the screen effectively unusable on phones:
1. The expanded-row layout for TYPE / SLUG / MOVE columns relied on
WordPress core's responsive list-table CSS, which absolutely positions
the data-colname label in a 32%-wide strip on the left of each cell.
Inside the narrow checkout-editor postbox that strip is too thin and
the label collapses to one character per line ('T..s it e_ ur l'
instead of 'Type: site_url'), with the value text overlapping it.
2. The 'Add new Field' wubox modal used a 600px fixed pixel width set
inline by wubox.js, overflowing the viewport on phones and clipping
labels on both edges.
3. The field-type tile grid used wu-w-1/4 (4 columns), producing ~24vw
tiles on phones — too narrow for labels like 'PASSWORD',
'TEMPLATES', and 'DOMAIN SELECTION'.
Fixes:
- Add a new @media (max-width: 782px) block to checkout-editor.css that
switches the expanded-row layout to a stacked block layout (label on
its own row above the value), hides the ORDER and MOVE columns, and
stacks the postbox header and step action buttons vertically.
- Bump the existing wubox responsive breakpoint in admin.css from 400px
to 782px (the WordPress admin mobile breakpoint) and override the
inline pixel width with width: 100vw !important so the modal fills
the screen on phones.
- Drop the field-type tile grid from 4 columns to 2 on mobile so each
label has room to render.
Production users load checkout-editor.min.css and admin.min.css, which
are rebuilt only at release time. Per PR #1135, feature branches must
not hand-edit the .min.css files. To ship the fix to production users
immediately, the same @media block is also injected via
wp_add_inline_style() from Checkout_Form_Edit_Admin_Page::register_scripts().
The source .css and inline-PHP copies cross-reference each other so
they stay in sync.
Tests:
- Extends tests/unit/Checkout_Editor_Assets_Test.php (introduced in
PR #1135) with a new test asserting the wp_add_inline_style call is
wired up and contains the expected selectors and rules. The existing
source-only guard remains intact: checkout-editor.min.css is not
modified on this branch.
Verified at 390x844 (collapsed, expanded, modal, per-field edit) and
1280x800 (5 columns, modal centered at 600px) — desktop unaffected.
Contributor
📝 WalkthroughWalkthroughMobile responsive CSS rules for admin modals and checkout editor UI are expanded and refactored to use inline PHP injection via ChangesMobile Responsive CSS & Inline Injection
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
🔨 Build Complete - Ready for Testing!📦 Download Build Artifact (Recommended)Download the zip build, upload to WordPress and test:
🌐 Test in WordPress Playground (Very Experimental)Click the link below to instantly test this PR in your browser - no installation needed! Login credentials: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
assets/css/checkout-editor.css (1)
85-114: 💤 Low value
td.column-movein the stacked-layout selector group is dead code.
td.column-moveis included in the stacked-layout group at line 87 (settingdisplay: block !important) and in the::beforegroup at line 96, but both are immediately negated bydisplay: none !importantat line 113. The::beforerule forcolumn-movecan never be rendered since the cell itself is hidden. Removingtd.column-move(andtd.column-move::before) from the first two selector groups would reduce confusion.♻️ Proposed simplification
`#wu-checkout-editor-app` tr.is-expanded td.column-type, - `#wu-checkout-editor-app` tr.is-expanded td.column-slug, - `#wu-checkout-editor-app` tr.is-expanded td.column-move { + `#wu-checkout-editor-app` tr.is-expanded td.column-slug { position: relative !important; display: block !important; width: auto !important; padding: 6px 12px !important; text-align: left !important; } `#wu-checkout-editor-app` tr.is-expanded td.column-type::before, - `#wu-checkout-editor-app` tr.is-expanded td.column-slug::before, - `#wu-checkout-editor-app` tr.is-expanded td.column-move::before { + `#wu-checkout-editor-app` tr.is-expanded td.column-slug::before { position: static !important; display: block !important; float: none !important; width: auto !important; padding: 0 0 4px 0 !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; font-weight: 600; text-align: left !important; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/checkout-editor.css` around lines 85 - 114, Remove the dead selectors for the MOVE column: delete td.column-move and td.column-move::before from the stacked-layout selector groups that start with "#wu-checkout-editor-app tr.is-expanded td.column-type, `#wu-checkout-editor-app` tr.is-expanded td.column-slug, `#wu-checkout-editor-app` tr.is-expanded td.column-move" and the corresponding "::before" group so those rules only target column-type and column-slug; leave the explicit rule "#wu-checkout-editor-app tr.is-expanded td.column-move { display: none !important; }" intact so the MOVE column remains hidden.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@tests/unit/Checkout_Editor_Assets_Test.php`:
- Around line 41-45: The current test in Checkout_Editor_Assets_Test.php uses a
whitespace-sensitive assertStringContainsString with an exact "\n\t\t\t"
indentation; update this to avoid coupling to formatting by replacing the single
whitespace-dependent assertion with two independent assertions that check for
the presence of "wp_add_inline_style(" and the handle
"'wu-checkout-form-editor'" separately (both against $admin_page_contents), or
alternatively normalize whitespace (e.g., preg_replace('/\s+/', ' ',
$admin_page_contents)) before asserting; ensure the check still verifies that
register_scripts() triggers wp_add_inline_style with the wu-checkout-form-editor
handle.
---
Nitpick comments:
In `@assets/css/checkout-editor.css`:
- Around line 85-114: Remove the dead selectors for the MOVE column: delete
td.column-move and td.column-move::before from the stacked-layout selector
groups that start with "#wu-checkout-editor-app tr.is-expanded td.column-type,
`#wu-checkout-editor-app` tr.is-expanded td.column-slug, `#wu-checkout-editor-app`
tr.is-expanded td.column-move" and the corresponding "::before" group so those
rules only target column-type and column-slug; leave the explicit rule
"#wu-checkout-editor-app tr.is-expanded td.column-move { display: none
!important; }" intact so the MOVE column remains hidden.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 4011ef15-d0e6-43a0-91d2-3b3e506b99a4
📒 Files selected for processing (4)
assets/css/admin.cssassets/css/checkout-editor.cssinc/admin-pages/class-checkout-form-edit-admin-page.phptests/unit/Checkout_Editor_Assets_Test.php
Comment on lines
+41
to
+45
| $this->assertStringContainsString( | ||
| "wp_add_inline_style(\n\t\t\t'wu-checkout-form-editor'", | ||
| $admin_page_contents, | ||
| 'Expected register_scripts() to call wp_add_inline_style on wu-checkout-form-editor so mobile rules ship without rebuilding the .min.css' | ||
| ); |
Contributor
There was a problem hiding this comment.
Whitespace-sensitive assertion will break on code reformatting.
The assertion embeds \n\t\t\t (newline + 3 tabs), coupling the test to the exact indentation of the PHP source. Any code formatter (PHPCBF, php-cs-fixer) that adjusts indentation or newline style will cause this test to fail even with functionally identical code.
🛡️ Proposed fix — split into two independent assertions
- $this->assertStringContainsString(
- "wp_add_inline_style(\n\t\t\t'wu-checkout-form-editor'",
- $admin_page_contents,
- 'Expected register_scripts() to call wp_add_inline_style on wu-checkout-form-editor so mobile rules ship without rebuilding the .min.css'
- );
+ $this->assertStringContainsString(
+ 'wp_add_inline_style(',
+ $admin_page_contents,
+ 'Expected register_scripts() to call wp_add_inline_style()'
+ );
+ $this->assertStringContainsString(
+ "'wu-checkout-form-editor'",
+ $admin_page_contents,
+ 'Expected wp_add_inline_style to target the wu-checkout-form-editor handle'
+ );🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@tests/unit/Checkout_Editor_Assets_Test.php` around lines 41 - 45, The current
test in Checkout_Editor_Assets_Test.php uses a whitespace-sensitive
assertStringContainsString with an exact "\n\t\t\t" indentation; update this to
avoid coupling to formatting by replacing the single whitespace-dependent
assertion with two independent assertions that check for the presence of
"wp_add_inline_style(" and the handle "'wu-checkout-form-editor'" separately
(both against $admin_page_contents), or alternatively normalize whitespace
(e.g., preg_replace('/\s+/', ' ', $admin_page_contents)) before asserting;
ensure the check still verifies that register_scripts() triggers
wp_add_inline_style with the wu-checkout-form-editor handle.
|
Performance Test Results Performance test results for a7534d3 are in 🛎️! Note: the numbers in parentheses show the difference to the previous (baseline) test run. Differences below 2% or 0.5 in absolute values are not shown. URL:
|
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.
Summary
Fixes three usability defects that made the checkout form editor and its "Add new Field" modal effectively unusable on phones (viewport
<= 782px).T..s it e_ ur linstead ofType: site_url) and overlap the value::beforedata-colname label absolutely in a 32 %-wide strip on the left; inside the narrow checkout-editor postbox that strip is too thinposition: static; display: block; white-space: normal)wubox.jssets the modal width inline (600pxfor this dialogue,630pxdefault) and the existing responsive rule only kicks in below400px400pxto782px(WP admin mobile breakpoint) and override the inline pixel width withwidth: 100vw !importantPASSWORD,TEMPLATES,DOMAIN SELECTIONget clippedwu-w-1/4(25 %) is fine on desktop but too narrow on phones.wu-w-1\/4 { width: 50% !important }), scoped to theadd_checkout_form_fieldVue app so it does not affect other 4-column gridsWhy this also touches
wp_add_inline_stylePR #1135 established that feature branches must not hand-edit
.min.cssbecause those files are regenerated only at release time. Production users loadcheckout-editor.min.cssandadmin.min.css, so a source-only fix would not reach them until the next release.This PR follows the pattern PR #1135 introduced for the toolbar fix:
assets/css/checkout-editor.cssandassets/css/admin.css(so the next release rebuild captures them naturally).@media (max-width: 782px)block is also injected viawp_add_inline_style('wu-checkout-form-editor', ...)fromCheckout_Form_Edit_Admin_Page::register_scripts(), so production users on the current.min.cssget the fix immediately.checkout-editor.min.cssandadmin.min.cssare not modified on this branch (the existingCheckout_Editor_Assets_Test::test_checkout_editor_min_css_should_not_be_modified_on_feature_branchesguard from PR GH#1134: guard checkout editor generated CSS state #1135 still passes).Tests
tests/unit/Checkout_Editor_Assets_Test.phpextended with a new test:test_checkout_editor_mobile_styles_are_injected_inline_for_min_css_users— assertswp_add_inline_styleis wired up onwu-checkout-form-editorand contains the expected selectors (hidden ORDER column, fixed expanded SLUG cell,#WUB_windowviewport cap, scopedadd_checkout_form_fieldselector, 2-column grid override).PHPCS, PHPStan, and Stylelint (on touched files) all clean.
Verification
Verified manually in the dev WordPress install at
wordpress.local:8080usingagent-browserwith logged-in admin cookies:Files changed
assets/css/checkout-editor.css— adds responsive@mediarules for expanded rows, MOVE column, modal, gridassets/css/admin.css— bumps wubox responsive breakpoint400px -> 782px, addswidth: 100vw !importantinc/admin-pages/class-checkout-form-edit-admin-page.php—wp_add_inline_stylecall inregister_scripts()mirroring the source CSStests/unit/Checkout_Editor_Assets_Test.php— new test asserting the inline registrationCloses the mobile-usability follow-ups from PR #1073 and PR #1135.
Summary by CodeRabbit
Bug Fixes
Tests