Skip to content

Feature/template filtering search in post form #1621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Jul 30, 2025
Merged

Feature/template filtering search in post form #1621

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
c649a64
fix- template filtering search in post form
arifulhoque7 Jul 7, 2025
0da7e33
Merge branch 'weDevsOfficial:develop' into feature/template_filtering…
arifulhoque7 Jul 8, 2025
eb4b03b
fix: minor changes
arifulhoque7 Jul 8, 2025
aa96798
fix: potential cause of fatal errors
arifulhoque7 Jul 8, 2025
57bb3a0
fix: category select issue and template drop shadow issues
arifulhoque7 Jul 9, 2025
fbc9df7
fix: some design consistency like previous form
arifulhoque7 Jul 9, 2025
2f5e644
fix: Pro_Prompt no found
arifulhoque7 Jul 11, 2025
41c89c9
fix: coderabbit inconsistency issue
arifulhoque7 Jul 11, 2025
63fd136
chore: Follwed DRY principle
arifulhoque7 Jul 14, 2025
8ffe86e
fix: code rabbit issues and other design related fix
arifulhoque7 Jul 14, 2025
3bf7bd2
fix: animation issues
arifulhoque7 Jul 14, 2025
ef85d93
fix: Fix syntax error in href attribute
arifulhoque7 Jul 14, 2025
692eadb
fix: pro prompt not found
arifulhoque7 Jul 14, 2025
cbc5582
fix: design suggestion change
arifulhoque7 Jul 15, 2025
b0a644d
Merge branch 'weDevsOfficial:develop' into feature/template_filtering…
arifulhoque7 Jul 15, 2025
6467969
chore: changelog added
arifulhoque7 Jul 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 98 additions & 0 deletions assets/css/admin/form-builder.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1305,6 +1305,20 @@ html {
justify-self: end;
}

.wpuf-modal-open,
.wpuf-modal:target,
.wpuf-modal-toggle:checked + .wpuf-modal,
.wpuf-modal[open] {
pointer-events: auto;
visibility: visible;
opacity: 1;
}

:root:has(:is(.wpuf-modal-open, .wpuf-modal:target, .wpuf-modal-toggle:checked + .wpuf-modal, .wpuf-modal[open])) {
overflow: hidden;
scrollbar-gutter: stable;
}
Comment on lines +1317 to +1320
Copy link

@coderabbitai coderabbitai bot Jul 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

:has() is still an experimental selector – add a JS/utility‐class fallback

Relying solely on :root:has(.wpuf-modal-open …) will silently fail in Safari ≤15.6 and old Chromium/Firefox builds shipped with WordPress Core.
Recommend toggling a simple class (e.g. wpuf-modal-lock) on <html> via the same JS that opens the modal and targeting that instead; keep the :has() rule as progressive enhancement.

🤖 Prompt for AI Agents 
In assets/css/admin/form-builder.css around lines 1317 to 1320, the use of the
experimental :has() selector for modal state styling will fail in older browsers
like Safari ≤15.6 and legacy Chromium/Firefox. To fix this, add a JavaScript
utility that toggles a class such as wpuf-modal-lock on the <html> element when
the modal opens or closes, then update the CSS to target this class for the
overflow and scrollbar-gutter styles as a fallback, keeping the :has() rule as a
progressive enhancement.


.wpuf-radio {
flex-shrink: 0;
--chkbg: var(--bc);
Expand Down Expand Up @@ -1715,6 +1729,16 @@ input.wpuf-tab:checked + .wpuf-tab-content,
margin-top: 0;
}

.wpuf-modal-open .wpuf-modal-box,
.wpuf-modal-toggle:checked + .wpuf-modal .wpuf-modal-box,
.wpuf-modal:target .wpuf-modal-box,
.wpuf-modal[open] .wpuf-modal-box {
--tw-translate-y: 0px;
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes modal-pop {
0% {
opacity: 0;
Expand Down Expand Up @@ -2453,6 +2477,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
top: 0px;
}

.wpuf-top-1\/2 {
top: 50%;
}

.wpuf-top-1\/3 {
top: 33.333333%;
}
Expand Down Expand Up @@ -2563,11 +2591,21 @@ input.wpuf-tab:checked + .wpuf-tab-content,
margin-right: 0.25rem;
}

.wpuf-mx-10 {
margin-left: 2.5rem;
margin-right: 2.5rem;
}

.wpuf-mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}

.wpuf-mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}

.wpuf-mx-auto {
margin-left: auto;
margin-right: auto;
Expand Down Expand Up @@ -2669,6 +2707,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
margin-bottom: 3rem;
}

.wpuf-mb-14 {
margin-bottom: 3.5rem;
}

.wpuf-mb-2 {
margin-bottom: 0.5rem;
}
Expand Down Expand Up @@ -2705,6 +2747,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
margin-left: 0.25rem;
}

.wpuf-ml-10 {
margin-left: 2.5rem;
}

.wpuf-ml-2 {
margin-left: 0.5rem;
}
Expand Down Expand Up @@ -2865,6 +2911,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
display: none;
}

.wpuf-aspect-square {
aspect-ratio: 1 / 1;
}

.wpuf-size-4 {
width: 1rem;
height: 1rem;
Expand Down Expand Up @@ -3068,6 +3118,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
width: 2rem;
}

.wpuf-w-80 {
width: 20rem;
}

.wpuf-w-\[104\%\] {
width: 104%;
}
Expand Down Expand Up @@ -3183,6 +3237,11 @@ input.wpuf-tab:checked + .wpuf-tab-content,
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wpuf--translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.wpuf--translate-y-\[50\%\] {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
Expand Down Expand Up @@ -3309,6 +3368,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
justify-content: space-evenly;
}

.wpuf-gap-12 {
gap: 3rem;
}

.wpuf-gap-2 {
gap: 0.5rem;
}
Expand Down Expand Up @@ -3865,6 +3928,20 @@ input.wpuf-tab:checked + .wpuf-tab-content,
--tw-bg-opacity: 0.75;
}

.wpuf-bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.wpuf-from-blue-500 {
--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.wpuf-to-purple-600 {
--tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.\!wpuf-stroke-primary {
stroke: #059669 !important;
}
Expand Down Expand Up @@ -3953,6 +4030,11 @@ input.wpuf-tab:checked + .wpuf-tab-content,
padding-bottom: 10px !important;
}

.\!wpuf-py-\[4px\] {
padding-top: 4px !important;
padding-bottom: 4px !important;
}

.wpuf-px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
Expand Down Expand Up @@ -5439,6 +5521,12 @@ button.swal2-cancel.swal2-styled.swal2-default-outline {
opacity: 1;
}

.hover\:wpuf-shadow-md:hover {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:wpuf-shadow-sm:hover {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
Expand Down Expand Up @@ -5487,6 +5575,11 @@ button.swal2-cancel.swal2-styled.swal2-default-outline {
border-color: transparent !important;
}

.focus\:wpuf-border-primary:focus {
--tw-border-opacity: 1;
border-color: rgb(5 150 105 / var(--tw-border-opacity));
}

.focus\:wpuf-bg-amber-600:focus {
--tw-bg-opacity: 1;
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -5571,6 +5664,11 @@ button.swal2-cancel.swal2-styled.swal2-default-outline {
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}

.focus\:wpuf-ring-primary:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(5 150 105 / var(--tw-ring-opacity));
}

.focus\:wpuf-ring-primaryHover:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity));
Expand Down
118 changes: 118 additions & 0 deletions assets/less/admin.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1243,6 +1243,124 @@ span.pro-icon:hover .wpuf-pro-field-tooltip {
height: unset !important;
}

// ==========================================================================
// Template Modal Styles
// Target: includes/Admin/template-parts/modal-v4.2.php
// ==========================================================================

/* Modal Base Styles - High specificity to override admin styles */
#wpwrap .wpuf-form-template-modal[role="dialog"] {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 999999;
background-color: #f8fafc;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

/* Modal Show State */
&.wpuf-modal-show {
opacity: 1;
visibility: visible;
}

/* Modal Content Container Animation */
.wpuf-relative {
transform: scale(0.95);
transition: transform 0.3s ease-in-out;
}

&.wpuf-modal-show .wpuf-relative {
transform: scale(1);
}
}

/* Body Modal Open State */
body.wpuf-modal-open {
overflow: hidden;
}

/* Template Modal Components */
.wpuf-form-template-modal {
/* Custom aspect ratio for square cards */
.wpuf-aspect-square {
aspect-ratio: 1;
}

/* Tailwind gradient utility classes for template cards */
.wpuf-from-blue-500 {
--tw-gradient-from: #3b82f6;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
}

.wpuf-to-purple-600 {
--tw-gradient-to: #9333ea;
}

.wpuf-bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* Template Items Animation on Load */
.wpuf-template-item {
animation: wpuf-fadeInUp 0.6s ease-out forwards;
opacity: 0;
transform: translateY(20px);

/* Staggered animation delays for template items */
&:nth-child(1) { animation-delay: 0.1s; }
&:nth-child(2) { animation-delay: 0.2s; }
&:nth-child(3) { animation-delay: 0.3s; }
&:nth-child(4) { animation-delay: 0.4s; }
&:nth-child(5) { animation-delay: 0.5s; }
&:nth-child(6) { animation-delay: 0.6s; }
&:nth-child(7) { animation-delay: 0.7s; }
&:nth-child(8) { animation-delay: 0.8s; }
}

/* Close Button Animation - Better specificity */
.wpuf-close-btn {
transform: scale(1);
transition: transform 0.2s ease-in-out;

&:hover {
transform: scale(1.1);
}
}
}

/* Fade in up animation keyframes */
@keyframes wpuf-fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}

/* Responsive improvements */
@media (max-width: 768px) {
#wpwrap .wpuf-form-template-modal[role="dialog"] .wpuf-relative {
padding: 1rem;
}

.wpuf-form-template-modal .wpuf-template-item {
width: calc(50% - 8px);
}
}

@media (max-width: 480px) {
.wpuf-form-template-modal .wpuf-template-item {
width: 100%;
}
}

// ==========================================================================
// End Template Modal Styles
// ==========================================================================

@import "help.less";
@import "whats-new.less";
@import "metabox-tabs.less";
3 changes: 2 additions & 1 deletion includes/Admin/Menu.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
global $_registered_pages;

$capability = wpuf_admin_role();
$wpuf_icon = 'data:image/svg+xml;base64,' . base64_encode( '<svg width="83px" height="76px" viewBox="0 0 83 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="wpuf-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="ufp" fill-rule="nonzero" fill="#9EA3A8"><path d="M49.38,51.88 C49.503348,56.4604553 45.8999295,60.2784694 41.32,60.42 C36.7400705,60.2784694 33.136652,56.4604553 33.26,51.88 L33.26,40.23 L19,40.23 L19,51.88 C19,64.77 29,75.25 41.36,75.26 L41.36,75.26 C47.3622079,75.2559227 53.0954073,72.7693647 57.2,68.39 C61.4213559,63.9375842 63.7575868,58.0253435 63.72,51.89 L63.72,40.23 L49.38,40.23 L49.38,51.88 Z" id="Shape"></path><polygon id="Shape" points="32.96 0.59 0 0.59 3.77 16.68 32.96 16.68"></polygon><path d="M68,0 L49.75,0 L49.75,16.1 L68,16.1 C68.74,16.1 69.39,17.1 69.39,18.24 C69.39,19.38 68.74,20.38 68,20.38 L49.75,20.38 L49.75,36.5 L68,36.5 C76,36.5 82.5,28.31 82.5,18.25 C82.5,8.19 76,0 68,0 Z" id="Shape"></path><polygon id="Shape" points="32.96 20.41 5.31 20.41 9.07 36.5 32.96 36.5"></polygon></g></g></svg>' );

Check warning on line 22 in includes/Admin/Menu.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

base64_encode() can be used to obfuscate code which is strongly discouraged. Please verify that the function is used for benign reasons.

add_menu_page( __( 'WP User Frontend', 'wp-user-frontend' ), __( 'User Frontend', 'wp-user-frontend' ), $capability, $this->parent_slug, [ $this, 'wpuf_post_forms_page' ], $wpuf_icon, '54.2' );

Expand All @@ -42,7 +42,7 @@
do_action( 'wpuf_admin_menu_top' );

if ( 'on' === wpuf_get_option( 'enable_payment', 'wpuf_payment', 'on' ) ) {
// $subscription_hook = add_submenu_page( $this->parent_slug, __( 'Subscriptions', 'wp-user-frontend' ), __( 'Subscriptions', 'wp-user-frontend' ), $capability, 'edit.php?post_type=wpuf_subscription' );

Check warning on line 45 in includes/Admin/Menu.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

This comment is 57% valid code; is this commented out code?

$subscription_hook = add_submenu_page(
$this->parent_slug,
Expand Down Expand Up @@ -122,9 +122,10 @@
break;

default:
wp_enqueue_style( 'wpuf-admin' );
wp_enqueue_style( 'wpuf-forms-list' );
wp_enqueue_script( 'wpuf-forms-list' );
wp_localize_script('wpuf-forms-list', 'wpuf_forms_list',

Check failure on line 128 in includes/Admin/Menu.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Opening parenthesis of a multi-line function call must be the last content on the line
[
'post_counts' => wpuf_get_forms_counts_with_status(),
'rest_nonce' => wp_create_nonce( 'wp_rest' ),
Expand All @@ -149,7 +150,7 @@
break;
}

include WPUF_ROOT . '/includes/Admin/template-parts/modal-v4.1.php';
include WPUF_ROOT . '/includes/Admin/template-parts/modal-v4.2.php';

break;
}
Expand All @@ -158,8 +159,8 @@
/**
* Mark headway as async. Because nothing depends on it, it can run at any time
*/
public function add_async_attribute( $tag, $handle, $src ) {

Check warning on line 162 in includes/Admin/Menu.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

The method parameter $src is never used
if ('wpuf-headway-script' === $handle) {

Check failure on line 163 in includes/Admin/Menu.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

No space before closing parenthesis is prohibited

Check failure on line 163 in includes/Admin/Menu.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

No space after opening parenthesis is prohibited
return str_replace( ' src', ' async src', $tag );
}

Expand Down Expand Up @@ -233,7 +234,7 @@
*
* @return void
*/
public function subscribers_page( $post_ID ) {

Check warning on line 237 in includes/Admin/Menu.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

The method parameter $post_ID is never used
$page = WPUF_INCLUDES . '/Admin/views/subscribers.php';

wpuf_require_once( $page );
Expand Down Expand Up @@ -374,9 +375,9 @@
id="wpuf-headway-icon"
class="wpuf-border wpuf-border-gray-100 wpuf-mr-[16px] wpuf-rounded-full wpuf-p-1 wpuf-shadow-sm hover:wpuf-bg-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
></span>
<a class="canny-link" target="_blank" href="<?php echo esc_url( 'https://wpuf.canny.io/ideas' ); ?>">💡 <?php esc_html_e(

Check failure on line 378 in includes/Admin/Menu.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Opening PHP tag must be on a line by itself

Check failure on line 378 in includes/Admin/Menu.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Opening PHP tag must be on a line by itself
'Submit Ideas', 'wp-user-frontend'

Check failure on line 379 in includes/Admin/Menu.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Multi-line function call not indented correctly; expected 24 spaces but found 20
); ?></a>

Check failure on line 380 in includes/Admin/Menu.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Closing PHP tag must be on a line by itself

Check failure on line 380 in includes/Admin/Menu.php

View workflow job for this annotation

GitHub Actions / Run PHPCS inspection 

Line indented incorrectly; expected at least 16 tabs, found 5
</span>
</h2>
<div class="wpuf-settings-wrap">
Expand Down
Loading
Loading