Creating reusable component fields?

• jobiplugin

• December 8, 2022 at 11:53 pm

Hi,

I would like to know how could i use ACF to create reusable component fields that can be managed from one place, let’s say inside the options page.

I’ve tried using clone fields for that but the values don’t get synced between the main and the clones. No matter if the slug has a prefix or not.

Right now i’ve created a way in which i use ACF prepare_field filter. This works for simple fields but i’m not sure how could i use the same logic on for example repeater fields.

Here’s the code i’m running right now

add_filter('acf/prepare_field', function($field){

    $current_screen = get_current_screen();
    if($current_screen && $current_screen->id == 'toplevel_page_theme-settings') return $field;

    $components = get_field('components', 'option');

    foreach($components as $component){

        if(array_key_exists($field['_name'], $component)){
            
            if(isset($field['sub_fields'])){
                   
                foreach($field['sub_fields'] as $field_key => $sub_field){
                    foreach($component[$field['_name']] as $sub_component){
                        if(array_key_exists($sub_field['_name'], $sub_component)){
                            
                            //$field['sub_fields'][$field_key]['value'] = $sub_component[$sub_field['_name']];
                            //consoleLog([$field, $sub_field, $sub_component[$sub_field['_name']]]);

                        }
                    }
                }
            }else{
                $field['value'] = $component[$field['_name']];
            }
            
        }

    }

    return $field;
    
},10,3)

And here’s the ACF output for components field group

{
                "key": "field_638edca18a922",
                "label": "Components",
                "name": "",
                "aria-label": "",
                "type": "tab",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "placement": "left",
                "endpoint": 0
            },
            {
                "key": "field_638edcad8a923",
                "label": "Components",
                "name": "components",
                "aria-label": "",
                "type": "flexible_content",
                "instructions": "Reusable components that can be managed from one place",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "layouts": {
                    "layout_638edcb3c4b41": {
                        "key": "layout_638edcb3c4b41",
                        "name": "get_in_touch",
                        "label": "Get In Touch",
                        "display": "block",
                        "sub_fields": [
                            {
                                "key": "field_638edcc28a924",
                                "label": "Heading",
                                "name": "get_in_touch_heading",
                                "aria-label": "",
                                "type": "textarea",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "maxlength": "",
                                "rows": 3,
                                "placeholder": "",
                                "new_lines": ""
                            },
                            {
                                "key": "field_638edcd28a925",
                                "label": "Button",
                                "name": "get_in_touch_button",
                                "aria-label": "",
                                "type": "link",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "return_format": "array"
                            }
                        ],
                        "min": "",
                        "max": ""
                    },
                    "layout_638f209874700": {
                        "key": "layout_638f209874700",
                        "name": "icon_group",
                        "label": "Icon group",
                        "display": "block",
                        "sub_fields": [
                            {
                                "key": "field_638f20b774701",
                                "label": "Icon group",
                                "name": "icon_group",
                                "aria-label": "",
                                "type": "repeater",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "layout": "table",
                                "min": 0,
                                "max": 0,
                                "collapsed": "",
                                "button_label": "Add Row",
                                "rows_per_page": 20,
                                "sub_fields": [
                                    {
                                        "key": "field_638f20ca74702",
                                        "label": "Icon",
                                        "name": "icon",
                                        "aria-label": "",
                                        "type": "image",
                                        "instructions": "",
                                        "required": 0,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": "",
                                            "class": "",
                                            "id": ""
                                        },
                                        "return_format": "array",
                                        "library": "all",
                                        "min_width": "",
                                        "min_height": "",
                                        "min_size": "",
                                        "max_width": "",
                                        "max_height": "",
                                        "max_size": "",
                                        "mime_types": "",
                                        "preview_size": "thumbnail",
                                        "parent_repeater": "field_638f20b774701"
                                    },
                                    {
                                        "key": "field_638f20da74703",
                                        "label": "Background",
                                        "name": "background",
                                        "aria-label": "",
                                        "type": "color_picker",
                                        "instructions": "",
                                        "required": 0,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": "",
                                            "class": "",
                                            "id": ""
                                        },
                                        "default_value": "",
                                        "enable_opacity": 0,
                                        "return_format": "string",
                                        "parent_repeater": "field_638f20b774701"
                                    }
                                ]
                            }
                        ],
                        "min": "",
                        "max": ""
                    }
                },
                "min": "",
                "max": "",
                "button_label": "Add component"
            }

For “Get In Touch” gield group it works but for “Icon Group” i’m not sure how to exactly achieve that.