Complex Nesting Example

This is how the backend looks like, with nested reusable button/headshot component fields in testimonial component field.

complex-backend-screenshot




Array
(
    [0] => Array
        (
            [headshot] => Array
                (
                    [0] => Array
                        (
                            [headshot_image] => 161
                            [border_color] => 
                            [background] => 
                            [shape] => circle
                        )

                )

            [testimonials] => <p>Nullam rhoncus, metus eu bibendum consectetur, tellus nisi gravida diam, a interdum enim sem vulputate arcu. Aliquam erat volutpat. Donec eget tempus metus. Fusce tempus condimentum erat non porttitor. Donec congue auctor nisl. Maecenas rhoncus ultrices nibh, ut consequat nisl lacinia vitae. Proin a tempus mauris, eget mattis lacus. Aliquam tempor lorem eget enim volutpat, vitae viverra magna laoreet. Integer ultricies pharetra egestas.</p>

            [buttons] => Array
                (
                    [0] => Array
                        (
                            [button_type] => page_link
                            [button_style] => default
                            [button_text] => Profile
                            [page_link] => https://acf-component-field.gummi.io/
                            [custom_link] => 
                            [new_tab] => 
                            [frame_width] => 
                            [width_unit] => Array
                                (
                                )

                            [frame_height] => 
                            [height_unit] => Array
                                (
                                )

                            [iframe_url] => 
                            [wysiwyg] => 
                            [html] => 
                            [video_source] => Array
                                (
                                )

                            [video_id] => 
                            [file] => 
                            [force_download] => 
                        )

                    [1] => Array
                        (
                            [button_type] => custom_link
                            [button_style] => default
                            [button_text] => Facebook
                            [page_link] => 
                            [custom_link] => 
                            [new_tab] => 1
                            [frame_width] => 
                            [width_unit] => Array
                                (
                                )

                            [frame_height] => 
                            [height_unit] => Array
                                (
                                )

                            [iframe_url] => 
                            [wysiwyg] => 
                            [html] => 
                            [video_source] => Array
                                (
                                )

                            [video_id] => 
                            [file] => 
                            [force_download] => 
                        )

                )

        )

    [1] => Array
        (
            [headshot] => Array
                (
                    [0] => Array
                        (
                            [headshot_image] => 162
                            [border_color] => 
                            [background] => 
                            [shape] => polygon
                        )

                )

            [testimonials] => <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat faucibus eros ac posuere. Praesent auctor bibendum fringilla. Sed volutpat nunc lobortis massa rhoncus pulvinar. Mauris ullamcorper tincidunt auctor. Nulla semper sollicitudin urna. Quisque elit sapien, lacinia eu metus vel, vehicula efficitur justo. Vivamus sit amet ligula faucibus, lobortis elit at, aliquam dui. Nam mi nisi, faucibus sed leo ac, iaculis pharetra justo. Nunc lectus sapien, pellentesque ut porta non, euismod id odio.</p>

            [buttons] => 
        )

    [2] => Array
        (
            [headshot] => Array
                (
                    [0] => Array
                        (
                            [headshot_image] => 163
                            [border_color] => #1e73be
                            [background] => #dd3333
                            [shape] => circle
                        )

                )

            [testimonials] => <p>Cras commodo est vel urna varius semper. Curabitur ante erat, dapibus nec scelerisque consectetur, facilisis quis sapien. Vivamus eu urna vitae risus consectetur efficitur. Curabitur porta lorem ante. Quisque vehicula tempor dictum. Nam sit amet eleifend odio, non commodo velit. Nunc mattis et ante sit amet posuere. Vestibulum id imperdiet leo. Vestibulum eu pulvinar metus, ut aliquam eros. Praesent at condimentum quam, sit amet rhoncus nunc.</p>

            [buttons] => Array
                (
                    [0] => Array
                        (
                            [button_type] => page_link
                            [button_style] => default
                            [button_text] => Invite
                            [page_link] => https://acf-component-field.gummi.io/advanced-usage-nesting-repeating-components/
                            [custom_link] => 
                            [new_tab] => 
                            [frame_width] => 
                            [width_unit] => Array
                                (
                                )

                            [frame_height] => 
                            [height_unit] => Array
                                (
                                )

                            [iframe_url] => 
                            [wysiwyg] => 
                            [html] => 
                            [video_source] => Array
                                (
                                )

                            [video_id] => 
                            [file] => 
                            [force_download] => 
                        )

                )

        )

)