Group Custom Field by Tab

[datgausaigon]

Problem to Solve

Hi,
I use your plugin for all my websites. Thanks for your beautiful work ❤️.
When I create many Custom Field for my Post and CTP (Custom Post Type). This leads to the display of custom fields becoming confusing because there are too many of them. There are many Plugins that solve this problem by grouping Custom Fields with Tabs. Like WooCommerce, The SEO Framework, RankMath, etc...
And ACF (Advance Custom Fields) Free version also has this function. Reference link here.
https://www.advancedcustomfields.com/resources/tab/
Can you develop this feature further?

Proposed Solution

Possible Workaround

No response

Examples Elsewhere

No response

Screenshots / Screencast

No response

[datgausaigon]

Hi @sc0ttkclark ,

In Field Guide of Pods 2.8 I got:

Pods Admin UI config abstraction – You can now extend the configurations for Pods, Groups, and Fields themselves with their own custom groups/tabs and fields. You can also modify existing ones. This is useful for plugins/add-ons extending Pods as it has now become more powerful.

https://pods.io/2021/02/11/pods-2-8-beta-1-released-and-the-field-guide-to-pods-2-8/

Does this help me on this issue? Does Pods have document about this?

Thanks ❤️

[sc0ttkclark]

The 2.8 functionality allows for adding new tabs and groups of fields to the configs themselves in the admin area where you edit a Pod, Group, or Field.

Tabs in that context are the way that Admin UI works, but they are essentially groups of fields on each config object.

There remains no UI to provide tabs of fields in any WP object themselves like Post Types, Taxonomies, Users, etc.

We have not established any UI for this in those forms and this GitHub issue can serve as a place to organize that effort going forward.

[datgausaigon]

Hi @sc0ttkclark,
Thanks for your reply.
I creating a add-on for this issue. The Custom Field(s) on a Group should be add Custom CSS Class for define the Tab Warp.
Example for expected:

1. Create Pods for Extend Post (Default Post Type of WordPress)
2. Create Group: "Custom Data"
3. In Group "Custom Data" add 4 Custom Field with Custom CSS class (Advanced / Additional CSS Classes)

• Foo Text - Custom CSS class: tab-1
• Foo Text - Custom CSS class: tab-2
• Something Text - Custom CSS class: tab-3
• Something Else Text - Custom CSS class: tab-3

The "Post" admin add/edit will be create 3 Tab in "Custom Data" with the Custom Field(s) belong to Custom CSS Tab-Class.

• The CSS for beautiful Tab will be next version
• The Label-Title of Tab I will be next version.

The PHP code is:

<?php
/**
 * Plugin Name: Dev Draft
 * Version: 1.0.0
 */

add_action( 'admin_enqueue_scripts', '__enqueue_pods_tabs_assets' );

function __enqueue_pods_tabs_assets(): void {

	wp_enqueue_style( 'pods-tabs-style',
		plugin_dir_url( __FILE__ ) . 'dev.css',
		null,
		null );

	wp_enqueue_script( 'pods-tabs-script',
		plugin_dir_url( __FILE__ ) . 'dev.js',
		null,
		null );
}

/**-----------------------------------------------------**/


add_filter('pods_form_ui_field_row', 'custom_tabbed_interface', 10000, 6);

function custom_tabbed_interface($output, $name, $value, $options, $pod, $id) {
	$custom_class = $options['class'] ?? '';

	if (preg_match('/tab-(\d+)/', $custom_class, $matches)) {
		$tab_index = $matches[1];

		static $current_tab = 0;
		if ($tab_index !== $current_tab) {
			if ($current_tab !== 0) {
				$output = '</div>' . $output;
			}
			$output = '<div class="pods-tab" id="tab-' . $tab_index . '">' . $output;
			$current_tab = $tab_index;
		}
	}

	add_action('pods_form_pre_footer', function() use ($current_tab) {
		if ($current_tab !== 0) {
			echo '</div>';
		}
	});

	return $output;
}

The JS code: (dev.js)

document.addEventListener('DOMContentLoaded', function() {
    const tabs = document.querySelectorAll('.pods-tab-nav li');
    const tabPanels = document.querySelectorAll('.pods-tab');

    tabs.forEach((tab, index) => {
        tab.addEventListener('click', () => {
            tabs.forEach(node => node.classList.remove('active'));
            tabPanels.forEach(panel => panel.classList.remove('active'));

            tab.classList.add('active');
            tabPanels[index].classList.add('active');
        });
    });
    
    const defaultTab = document.querySelector('.pods-tab-nav li:first-child');
    if (defaultTab) {
        defaultTab.click();
    }
});

The CSS code: (dev.css)

.pods-tab {
    display: none;
}

.pods-tab.active {
    display: block;
}

.pods-tab-nav {
    display: flex;
    list-style-type: none;
    padding: 0;
}

.pods-tab-nav li {
    margin-right: 10px;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f9f9f9;
}

.pods-tab-nav li.active {
    background-color: #e2e2e2;
    border-color: #888;
}

The stack is I wrong the PHP Pods Hook/Filter. I think 'pods_form_ui_field_row' used is don't right.

**And by the way I got the custom CSS class don't add to <tr> of custom field. It's add to <td> of Label. I use Gutenberg Editor.**

Please view my code and help.

Thanks ❤️