Skip to content

fix: custom taxonomies are not selectable in post form #1577

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 2 commits into from
May 28, 2025
Merged

fix: custom taxonomies are not selectable in post form #1577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac6cc70
fix: custom taxonomies are not selectable
sapayth May 27, 2025
2a04ba0
permalink notice
sapayth May 27, 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
55 changes: 52 additions & 3 deletions admin/form-builder/assets/js/components/field-multiselect/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,70 @@ Vue.component('field-multiselect', {
value: value
});
}
},

// Dynamic options for taxonomy fields
dynamic_options: function () {
// Check if this is a Selection Terms field for a taxonomy
if (this.option_field.name === 'exclude' &&
this.editing_form_field &&
this.editing_form_field.input_type === 'taxonomy' &&
this.editing_form_field.name) {

var taxonomy_name = this.editing_form_field.name;

// Look for terms in the wp_post_types data
if (wpuf_form_builder && wpuf_form_builder.wp_post_types) {
for (var post_type in wpuf_form_builder.wp_post_types) {
var taxonomies = wpuf_form_builder.wp_post_types[post_type];

if (taxonomies && taxonomies.hasOwnProperty(taxonomy_name)) {
var tax_field = taxonomies[taxonomy_name];

if (tax_field && tax_field.terms && tax_field.terms.length > 0) {
var options = {};
tax_field.terms.forEach(function(term) {
if (term && term.term_id && term.name) {
options[term.term_id] = term.name;
}
});
return options;
}
}
}
}
}

// Return original options if not a taxonomy field or no dynamic options found
return this.option_field.options || {};
}
},

mounted: function () {
this.bind_selectize();
},

watch: {
dynamic_options: function () {
// Refresh selectize when options change
this.$nextTick(function () {
this.bind_selectize();
});
}
},

methods: {
bind_selectize: function () {
var self = this;

$(this.$el).find('.term-list-selector').selectize({}).on('change', function () {
var data = $(this).val();
// Destroy existing selectize if it exists
var $select = $(this.$el).find('.term-list-selector');
if ($select[0] && $select[0].selectize) {
$select[0].selectize.destroy();
}

self.value = data;
$select.selectize({}).on('change', function () {
self.value = $( this ).val();
});
},
},
Expand Down
2 changes: 1 addition & 1 deletion admin/form-builder/assets/js/components/field-multiselect/template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ class="wpuf-w-full wpuf-mt-2 wpuf-border-primary wpuf-z-30"
>
<option
class="checked:wpuf-bg-primary"
v-for="(option, key) in option_field.options"
v-for="(option, key) in dynamic_options"
:value="key">{{ option }}</option>
</select>
</div>
78 changes: 49 additions & 29 deletions admin/form-builder/assets/js/form-builder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1110,46 +1110,66 @@
$('#builder-form-fields').toggleClass('show');
});

$('select#post_type').on('change', function() {
populate_default_categories(this);
// Initialize default categories on page load and bind change event
$(document).ready(function() {
var $postTypeSelect = $('select#post_type');

// Load initial categories if post type select exists
if ($postTypeSelect.length) {
populate_default_categories($postTypeSelect[0], true);
}

// Bind change event
$postTypeSelect.on('change', function() {
populate_default_categories(this, false);
});
});

function populate_default_categories(obj) {
var post_type = $( obj ).val();
function populate_default_categories(obj, isInitialLoad) {
var post_type = $(obj).val();

// Don't proceed if no post type is selected
if (!post_type) {
return;
}
Comment on lines +1128 to +1134
Copy link

@coderabbitai coderabbitai bot May 27, 2025

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

Good parameter addition but verify usage.

The new isInitialLoad parameter is a good addition for distinguishing between initial load and user interactions. However, this parameter doesn't appear to be used in the function logic.

Verify if the isInitialLoad parameter should influence the function behavior:

🏁 Script executed:

#!/bin/bash
# Search for any conditional logic based on isInitialLoad parameter
rg -A 10 -B 5 "isInitialLoad" --type js

Length of output: 2188

Remove or Implement the isInitialLoad Parameter

The isInitialLoad argument in populate_default_categories is currently unused—no conditional logic checks it. This can be confusing and should be addressed:

• In admin/form-builder/assets/js/form-builder.js (line 1128)
• In assets/js/wpuf-form-builder.js (where the same function is defined)

Either:

  • Remove the isInitialLoad parameter from the function signature and all calls, or
  • Implement logic inside populate_default_categories (e.g., if (isInitialLoad) { … } else { … }) and ensure you call it with true on initial page load.

This will keep the code clear and avoid dead parameters.

🤖 Prompt for AI Agents 
In admin/form-builder/assets/js/form-builder.js around lines 1128 to 1134, the
newly added parameter isInitialLoad in the populate_default_categories function
is not used anywhere in the function body, causing confusion. To fix this,
either remove the isInitialLoad parameter from the function signature and all
calls to this function, or implement conditional logic inside the function that
uses isInitialLoad to differentiate behavior on initial load versus user
interaction, ensuring calls pass true during initial page load if applicable.


// Get form ID from the form
var form_id = $('input[name="wpuf_form_id"]').val() || 0;

wp.ajax.send('wpuf_form_setting_post', {
data: {
post_type: post_type,
form_id: form_id,
wpuf_form_builder_setting_nonce: wpuf_form_builder.nonce
},
success: function (response) {
const default_category = 'select#default_category';
let default_category_name = default_category;

if ( post_type !== 'post' ) {
default_category_name = 'select#default_' + post_type + '_cat';
}

const value = $(default_category_name).data('value');

$(default_category).parent('.wpuf-my-4.wpuf-input-container').remove();
$('select#post_type').parent('.wpuf-my-4.wpuf-input-container').after(response.data);

if (value && ( typeof value === 'string' )) {
$(default_category).val(value.split(","));
} else {
$(default_category).val(value);
// Remove all existing taxonomy containers
$('.taxonomy-container, .wpuf_settings_taxonomy, .wpuf-input-container:has(select[name*="default_"])').remove();

// Find the container to append new content after
var $container = $(obj).closest('.wpuf-input-container');

if ($container.length && response.data) {
// Append the new taxonomy fields
$container.after(response.data);

// Initialize selectize for all new taxonomy selects
$('.tax-list-selector:not(.selectized)').each(function() {
var $select = $(this);

// The select options are already set with selected attributes from PHP
// so we don't need to manually set values here

// Initialize selectize
$select.selectize({
plugins: ['remove_button'],
});
});
}

$(default_category).selectize({
plugins: ['remove_button'],
});

},
error: function ( error ) {
console.log(error);
error: function (error) {
console.log('Error loading default categories:', error);
}
});
}


})(jQuery);
29 changes: 24 additions & 5 deletions assets/css/admin/form-builder.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2588,11 +2588,6 @@ input.wpuf-tab:checked + .wpuf-tab-content,
margin-bottom: 0.5rem;
}

.wpuf-my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}

.wpuf-my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
Expand Down Expand Up @@ -3693,6 +3688,16 @@ input.wpuf-tab:checked + .wpuf-tab-content,
border-color: transparent;
}

.wpuf-border-yellow-200 {
--tw-border-opacity: 1;
border-color: rgb(254 240 138 / var(--tw-border-opacity));
}

.wpuf-border-yellow-300 {
--tw-border-opacity: 1;
border-color: rgb(253 224 71 / var(--tw-border-opacity));
}

.wpuf-border-yellow-500 {
--tw-border-opacity: 1;
border-color: rgb(234 179 8 / var(--tw-border-opacity));
Expand Down Expand Up @@ -5372,6 +5377,11 @@ button.swal2-cancel.swal2-styled.swal2-default-outline {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.hover\:wpuf-bg-yellow-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 249 195 / var(--tw-bg-opacity));
}

.hover\:\!wpuf-bg-none:hover {
background-image: none !important;
}
Expand Down Expand Up @@ -5566,6 +5576,15 @@ button.swal2-cancel.swal2-styled.swal2-default-outline {
--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
}

.focus\:wpuf-ring-yellow-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity));
}

.focus\:wpuf-ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}

.checked\:focus\:\!wpuf-bg-primary:focus:checked {
--tw-bg-opacity: 1 !important;
background-color: rgb(5 150 105 / var(--tw-bg-opacity)) !important;
Expand Down
2 changes: 1 addition & 1 deletion assets/css/admin/subscriptions.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/css/forms-list.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/js-templates/form-components.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,7 @@ class="wpuf-w-full wpuf-mt-2 wpuf-border-primary wpuf-z-30"
>
<option
class="checked:wpuf-bg-primary"
v-for="(option, key) in option_field.options"
v-for="(option, key) in dynamic_options"
:value="key">{{ option }}</option>
</select>
</div>
Expand Down
34 changes: 34 additions & 0 deletions assets/js/components/FormsList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {HollowDotsSpinner} from 'epic-spinners';

// store only counts without 0 values
const postCounts = wpuf_forms_list.post_counts;
const isPlainPermalink = wpuf_forms_list.is_plain_permalink;
const permalinkUrl = wpuf_forms_list.permalink_settings_url;
const postType = wpuf_forms_list.post_type ? wpuf_forms_list.post_type : 'wpuf_forms';
const formType = postType === 'wpuf_forms' ? 'post' : 'profile';

Expand Down Expand Up @@ -309,6 +311,38 @@ onMounted(() => {

<template>
<Header utm="wpuf-form-builder" />

<!-- Permalink Notice -->
<div v-if="isPlainPermalink" class="wpuf-bg-yellow-50 wpuf-border wpuf-border-yellow-200 wpuf-rounded-md wpuf-p-4 wpuf-mt-6">
<div class="wpuf-flex">
<div class="wpuf-flex-shrink-0">
<svg class="wpuf-h-5 wpuf-w-5 wpuf-text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
</svg>
</div>
<div class="wpuf-ml-3">
<h3 class="wpuf-text-sm wpuf-font-medium wpuf-text-yellow-800">
{{ __( 'WordPress REST API Issue Detected', 'wp-user-frontend' ) }}
</h3>
<div class="wpuf-mt-2 wpuf-text-sm wpuf-text-yellow-700">
<p>
{{ __( 'Your WordPress permalinks are set to "Plain" which may cause issues with fetching the forms. For better functionality, please consider changing your permalink structure.', 'wp-user-frontend' ) }}
</p>
</div>
<div class="wpuf-mt-4">
<div class="wpuf-flex">
<a
:href="permalinkUrl"
class="wpuf-bg-yellow-50 wpuf-text-yellow-800 wpuf-rounded-md wpuf-border wpuf-border-yellow-300 wpuf-px-3 wpuf-py-2 wpuf-text-sm wpuf-font-medium hover:wpuf-bg-yellow-100 focus:wpuf-outline-none focus:wpuf-ring-2 focus:wpuf-ring-offset-2 focus:wpuf-ring-yellow-500"
>
{{ __( 'Go to Permalink Settings', 'wp-user-frontend' ) }}
</a>
</div>
</div>
</div>
</div>
</div>

<div class="wpuf-flex wpuf-justify-between wpuf-items-center wpuf-mt-9">
<h3 class="wpuf-text-2xl wpuf-font-bold wpuf-m-0 wpuf-p-0 wpuf-leading-none">{{ __( 'Post Forms', 'wp-user-frontend' ) }}</h3>
<div>
Expand Down
30 changes: 15 additions & 15 deletions assets/js/forms-list.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/js/forms-list.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

55 changes: 52 additions & 3 deletions assets/js/wpuf-form-builder-components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -441,21 +441,70 @@ Vue.component('field-multiselect', {
value: value
});
}
},

// Dynamic options for taxonomy fields
dynamic_options: function () {
// Check if this is a Selection Terms field for a taxonomy
if (this.option_field.name === 'exclude' &&
this.editing_form_field &&
this.editing_form_field.input_type === 'taxonomy' &&
this.editing_form_field.name) {

var taxonomy_name = this.editing_form_field.name;

// Look for terms in the wp_post_types data
if (wpuf_form_builder && wpuf_form_builder.wp_post_types) {
for (var post_type in wpuf_form_builder.wp_post_types) {
var taxonomies = wpuf_form_builder.wp_post_types[post_type];

if (taxonomies && taxonomies.hasOwnProperty(taxonomy_name)) {
var tax_field = taxonomies[taxonomy_name];

if (tax_field && tax_field.terms && tax_field.terms.length > 0) {
var options = {};
tax_field.terms.forEach(function(term) {
if (term && term.term_id && term.name) {
options[term.term_id] = term.name;
}
});
return options;
}
}
}
}
}

// Return original options if not a taxonomy field or no dynamic options found
return this.option_field.options || {};
}
},

mounted: function () {
this.bind_selectize();
},

watch: {
dynamic_options: function () {
// Refresh selectize when options change
this.$nextTick(function () {
this.bind_selectize();
});
}
},

methods: {
bind_selectize: function () {
var self = this;

$(this.$el).find('.term-list-selector').selectize({}).on('change', function () {
var data = $(this).val();
// Destroy existing selectize if it exists
var $select = $(this.$el).find('.term-list-selector');
if ($select[0] && $select[0].selectize) {
$select[0].selectize.destroy();
}

self.value = data;
$select.selectize({}).on('change', function () {
self.value = $( this ).val();
});
},
},
Expand Down
Loading
Loading