feat(template-switch): redesign customer panel with current-template card and persistent grid#1110
Merged
superdav42 merged 1 commit intomainfrom May 5, 2026
Merged
Conversation
…card and persistent grid The customer-panel template-switching page is reorganised so customers can see what template they are on, reset it inline, and pick a different one without losing context. Changes: 1. Current-template summary card at the top — thumbnail, title, description, and the Reset Current Template button co-located. Replaces the bare page-title-then-grid layout where 'what am I currently using?' had no visible answer and the Reset action was a stray red link floating below the grid. 2. Visual separator with an 'Available Templates' heading — the grid is clearly demarcated from the current-template summary above it. 3. Grid stays visible during selection — previously the entire grid was hidden via v-show='template_id == original_template_id' the moment a customer clicked a different template, replacing the list with the confirm panel. Customers now see the grid, the new selection's 'Selected' state, and the confirm panel together, so they can change their mind or pick a third template without scrolling away from a disappeared list. 4. Removed the duplicate bottom-right red 'Reset current template' link; that action is now inside the current-template card at the top. The new view file views/ui/template-switching-current.php is loaded via wu_get_template() so site-overriding via the standard child-theme path (see ultimatemultisite.com/docs/user-guide/miscellaneous/frequently-asked-questions) works for the new card markup as well. Tests: - Adds three render-level tests in Template_Switching_Element_Test: current-template card markup is emitted, the grid wrapper does NOT carry the legacy hide directive, and the legacy bottom-right red reset link is gone. - All 6 tests in Template_Switching_Element_Test pass (3 existing + 3 new). Browser-verified end-to-end on the kpcust1 customer site against http://kpcust1.wordpress.local:8080/wp-admin/admin.php?page=wu-template-switching: the current-template card renders 'Template Blue' with the Reset button to its right, 'Available Templates' separator displays, and clicking Template Pink keeps the grid + Pink/Blue/Site cards fully visible while the confirm panel appears below.
Contributor
📝 WalkthroughWalkthroughThis PR reorganizes the template-switching customer panel UI by introducing a dedicated "current template" summary card that displays the site's current template state, removing the prior conditional grid hiding during selection, and adding regression tests to verify the updated rendering behavior. ChangesTemplate Switching UI Reorganization
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
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)
tests/WP_Ultimo/UI/Template_Switching_Element_Test.php (1)
317-372: ⚡ Quick winAdd one positive-path render test for active current-template state.
These assertions are useful, but they currently don’t verify the branch where a real current template exists (including the “Reset Current Template” CTA). Adding that test would better protect the new UX path from regressions.
🤖 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/WP_Ultimo/UI/Template_Switching_Element_Test.php` around lines 317 - 372, Add a new positive-path test (e.g. test_render_shows_reset_cta_when_current_template_present) that sets up a non-null current template in the element context, calls render_element_with_context(), and asserts the rendered HTML includes the current-template card’s Reset CTA; specifically check for the visible CTA text "Reset Current Template" (or the exact reset link text used in the UI) and the reset link/button selector used by the component (reference render_element_with_context and the wu-template-switching-current current-template card wrapper to locate where to set up the current template and where to assert presence).
🤖 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 `@views/ui/template-switching-current.php`:
- Around line 35-40: The image src is being escaped with esc_attr() which is for
attributes; replace
esc_attr($current_template->get_featured_image('wu-thumb-medium')) with esc_url(
$current_template->get_featured_image('wu-thumb-medium') ) so the URL is
properly sanitized for an src context (keep esc_attr for the alt using
$current_template->get_title()). Locate the img tag using
current_template->get_featured_image and update only the src escaping to
esc_url.
---
Nitpick comments:
In `@tests/WP_Ultimo/UI/Template_Switching_Element_Test.php`:
- Around line 317-372: Add a new positive-path test (e.g.
test_render_shows_reset_cta_when_current_template_present) that sets up a
non-null current template in the element context, calls
render_element_with_context(), and asserts the rendered HTML includes the
current-template card’s Reset CTA; specifically check for the visible CTA text
"Reset Current Template" (or the exact reset link text used in the UI) and the
reset link/button selector used by the component (reference
render_element_with_context and the wu-template-switching-current
current-template card wrapper to locate where to set up the current template and
where to assert presence).
🪄 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: e33b01e5-a632-4646-95ae-e7c21abc73fa
📒 Files selected for processing (3)
inc/ui/class-template-switching-element.phptests/WP_Ultimo/UI/Template_Switching_Element_Test.phpviews/ui/template-switching-current.php
Comment on lines
+35
to
+40
| <img | ||
| class="wu-rounded wu-border-solid wu-border wu-border-gray-300 wu-bg-white" | ||
| style="width: 120px; height: 80px; object-fit: cover;" | ||
| src="<?php echo esc_attr($current_template->get_featured_image('wu-thumb-medium')); ?>" | ||
| alt="<?php echo esc_attr($current_template->get_title()); ?>" | ||
| /> |
Contributor
There was a problem hiding this comment.
Use esc_url() for the image source.
Line [38] escapes a URL with esc_attr(). For src, use esc_url() so protocol/value sanitization is context-correct.
Proposed fix
- src="<?php echo esc_attr($current_template->get_featured_image('wu-thumb-medium')); ?>"
+ src="<?php echo esc_url($current_template->get_featured_image('wu-thumb-medium')); ?>"📝 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
| <img | |
| class="wu-rounded wu-border-solid wu-border wu-border-gray-300 wu-bg-white" | |
| style="width: 120px; height: 80px; object-fit: cover;" | |
| src="<?php echo esc_attr($current_template->get_featured_image('wu-thumb-medium')); ?>" | |
| alt="<?php echo esc_attr($current_template->get_title()); ?>" | |
| /> | |
| <img | |
| class="wu-rounded wu-border-solid wu-border wu-border-gray-300 wu-bg-white" | |
| style="width: 120px; height: 80px; object-fit: cover;" | |
| src="<?php echo esc_url($current_template->get_featured_image('wu-thumb-medium')); ?>" | |
| alt="<?php echo esc_attr($current_template->get_title()); ?>" | |
| /> |
🤖 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 `@views/ui/template-switching-current.php` around lines 35 - 40, The image src
is being escaped with esc_attr() which is for attributes; replace
esc_attr($current_template->get_featured_image('wu-thumb-medium')) with esc_url(
$current_template->get_featured_image('wu-thumb-medium') ) so the URL is
properly sanitized for an src context (keep esc_attr for the alt using
$current_template->get_title()). Locate the img tag using
current_template->get_featured_image and update only the src escaping to
esc_url.
|
Performance Test Results Performance test results for 0b1197c 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:
|
Collaborator
Author
SummaryRedesigns the customer-panel template-switching page so customers can see what template they are on, reset it inline, and pick a different one without losing visual context. WhyThe previous layout had three usability gaps:
What changed
Files
Verification
Backwards compatibility
aidevops.sh v3.14.67 plugin for OpenCode v1.14.33 with claude-sonnet-4-6 spent 1d 14h on this as a headless worker. Merged via PR #1110 to main. |
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
Redesigns the customer-panel template-switching page so customers can see what template they are on, reset it inline, and pick a different one without losing visual context.
Why
The previous layout had three usability gaps:
Selectedon one of the cards inside the grid.Reset current templateaction lived as a small red link at the bottom-right of the page, far from the current-template state it acts on.v-show="template_id == original_template_id"and replaced by the confirm panel. If the customer changed their mind or wanted to compare a third template, they had to back out and lose their selection.What changed
Reset Current Templatebutton, all co-located. Always visible regardless of grid selection state.Available Templatesheading separator between the summary card and the grid.v-showhide is removed. The "Selected"/"Select" state on each card still updates from$parent.template_id, so the visual cue for "queued for switching" is preserved.Files
inc/ui/class-template-switching-element.php— restructureoutput(): insertcurrent_template_cardfield that renders the new view, remove thev-showdirective fromtemplate_element, remove the duplicatereset_current_templatefield.views/ui/template-switching-current.php— NEW: the current-template summary card view, loaded viawu_get_template()so customer-facing template-overrides work the same as for other UI views.tests/WP_Ultimo/UI/Template_Switching_Element_Test.php— three new render-level tests:test_render_includes_current_template_cardtest_render_grid_is_not_hidden_during_selectiontest_render_does_not_emit_legacy_bottom_reset_linkVerification
vendor/bin/phpunit --filter Template_Switching_Element_Test --no-coverage— 6/6 pass (3 existing AJAX tests + 3 new render tests).vendor/bin/phpstan analyseon changed files — clean.php -lon changed files — no syntax errors.http://kpcust1.wordpress.local:8080/wp-admin/admin.php?page=wu-template-switchingagainst the new branch:Template Bluethumbnail + title withReset Current Templatebutton to its right.Available Templatesheading separates the summary from the grid.SelectonTemplate Pinkkeeps the full grid (Pink/Blue/Site cards) visible.Template PinkshowsSelected, the others showSelect, and the confirm panel (← BACK TO TEMPLATE SELECTION,CONFIRM TEMPLATE SWITCH?) appears below the still-visible grid.switch_template_missing_site_emits_json_error,switch_template_missing_template_id_emits_json_error,switch_template_rejects_unauthorized_caller) still pass — the AJAX request path is unchanged.Backwards compatibility
wu_template_switching_formVue model is unchanged —template_id,original_template_id,confirm_switch,readystill bind the same way.assets/js/template-switching.jsis untouched.reset_template()is still called fromv-on:click.prevent="reset_template()"on the new button (same handler that was on the old red link).wu_get_template('ui/template-switching-current', …)resolves through the standard view loader so customer-facing template overrides for the new view are supported.aidevops.sh v3.14.67 plugin for OpenCode v1.14.33 with claude-sonnet-4-6 spent 1d 14h on this as a headless worker.
Summary by CodeRabbit
New Features
Updates
Tests