Basic Example

This is how the backend looks like, with multiple reusable button component fields.

basic-backend-screenshot




Array
(
    [custom_sidebar_button] => Array
        (
            [0] => Array
                (
                    [button_type] => page_link
                    [button_style] => blue
                    [button_text] => Go to Home
                    [page_link] => https://acf-component-field.gummi.io/
                    [custom_link] => 
                    [new_tab] => 
                    [frame_width] => 
                    [width_unit] => 
                    [frame_height] => 
                    [height_unit] => 
                    [iframe_url] => 
                    [wysiwyg] => 
                    [html] => 
                    [video_source] => 
                    [video_id] => 
                    [file] => 
                    [force_download] => 
                )

        )

    [optional_content_buttons] => Array
        (
            [0] => Array
                (
                    [button_type] => custom_link
                    [button_style] => default
                    [button_text] => Go to Google
                    [page_link] => 
                    [custom_link] => http://google.ca
                    [new_tab] => 1
                    [frame_width] => 
                    [width_unit] => 
                    [frame_height] => 
                    [height_unit] => 
                    [iframe_url] => 
                    [wysiwyg] => 
                    [html] => 
                    [video_source] => 
                    [video_id] => 
                    [file] => 
                    [force_download] => 
                )

            [1] => Array
                (
                    [button_type] => html
                    [button_style] => default
                    [button_text] => See Sample Code
                    [page_link] => 
                    [custom_link] => 
                    [new_tab] => 
                    [frame_width] => 50
                    [width_unit] => %
                    [frame_height] => 30
                    [height_unit] => %
                    [iframe_url] => 
                    [wysiwyg] => 
                    [html] => <div class="content-holder">
    <h2>Heading</h2>
    <hr />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper nisl quis mollis volutpat. Nunc imperdiet gravida magna quis rutrum.</p>
</div>
                    [video_source] => 
                    [video_id] => 
                    [file] => 
                    [force_download] => 
                )

            [2] => Array
                (
                    [button_type] => wysiwyg
                    [button_style] => hollow
                    [button_text] => More Info
                    [page_link] => 
                    [custom_link] => 
                    [new_tab] => 
                    [frame_width] => 800
                    [width_unit] => px
                    [frame_height] => 600
                    [height_unit] => px
                    [iframe_url] => 
                    [wysiwyg] => <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Integer ullamcorper nisl quis mollis volutpat. Nunc imperdiet gravida magna quis rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis at dignissim ipsum, nec porta mi. Nunc elementum mi urna, sed suscipit mauris ultrices facilisis. Donec ut nibh bibendum, finibus erat eget, tempor nulla. Aenean fringilla enim elit, sit amet vestibulum ex dignissim ut.</p>
<hr />
<p>Nunc a leo sit amet augue fringilla tincidunt. Ut ut ex eget ipsum lacinia fringilla at vel lacus. Quisque eleifend quam est, eu vehicula elit efficitur ac. Praesent venenatis est in nunc egestas fermentum. Praesent condimentum quam eu nisl hendrerit faucibus. Praesent at pharetra ex.</p>
<ul>
<li>Vivamus sodales est et scelerisque ornare.</li>
<li>Donec eget purus ac ligula pharetra sollicitudin id sit amet mauris.</li>
<li>Maecenas est nunc, aliquet in massa a, faucibus mollis magna.</li>
<li>Sed ornare, est ut tristique sagittis,</li>
<li>nulla dolor commodo metus, vitae aliquet nulla urna in sem.</li>
</ul>
<p>In dignissim tortor purus. Ut arcu sem, euismod et elit at, consequat varius massa. Aliquam erat volutpat. Sed posuere augue sem, id lobortis felis feugiat et. Ut pulvinar fringilla justo at hendrerit. Mauris quis facilisis sapien, dictum porttitor elit. Integer eu risus tristique, interdum ipsum quis, condimentum dui. Nulla lacinia mi hendrerit risus accumsan efficitur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed iaculis libero tortor, at commodo felis faucibus quis. Ut bibendum nulla nunc, eu varius eros faucibus nec. Sed faucibus est vel leo dignissim placerat.</p>

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

            [3] => Array
                (
                    [button_type] => video
                    [button_style] => default
                    [button_text] => See Trailer
                    [page_link] => 
                    [custom_link] => 
                    [new_tab] => 
                    [frame_width] => 
                    [width_unit] => px
                    [frame_height] => 
                    [height_unit] => px
                    [iframe_url] => 
                    [wysiwyg] => 
                    [html] => 
                    [video_source] => youtube
                    [video_id] => wh2JyX9cxos
                    [file] => 
                    [force_download] => 
                )

            [4] => Array
                (
                    [button_type] => download
                    [button_style] => default
                    [button_text] => Download
                    [page_link] => 
                    [custom_link] => 
                    [new_tab] => 
                    [frame_width] => 
                    [width_unit] => 
                    [frame_height] => 
                    [height_unit] => 
                    [iframe_url] => 
                    [wysiwyg] => 
                    [html] => 
                    [video_source] => 
                    [video_id] => 
                    [file] => 119
                    [force_download] => 1
                )

        )

)