Field Type Configuration Block

[jasonbahl]

As a content writer, I would like to be able to add a an ACF Block to the "Field Type" post type that lets me show how an ACF Field Type can be added the GraphQL Schema using the ACF UI, PHP or JSON.

As a reader of the content, I would like to see this information in a tabbed UI, where I could see the GraphQL Settings for a field how it would look in the ACF UI, PHP or JSON.

---

i.e.

If I were documenting the "ACF Extended Advanced Link Field Type", I would want to be able to show users an example of how the field type can be added to the GraphQL Schema via ACF UI, PHP or JSON.

ACF UI

If I clicked the "ACF UI" tab, I would see something like this (could potentially be made with HTML/CSS instead of a screenshot, but maybe first pass is a screenshot?):

PHP

If I clicked the "PHP" tab, I would see something like this:

<?php
add_action( 'acf/include_fields', function() {
    if ( ! function_exists( 'acf_add_local_field_group' ) ) {
        return;
    }

    acf_add_local_field_group( array(
    'key' => 'group_64711c50ee8ae',
    'title' => 'Docs: ACF Extended Free Kitchen Sink',
    'fields' => array(
        array(
            'key' => 'field_64711c51a5e5d',
            'label' => 'Advanced Link',
            'name' => 'advanced_link',
            'aria-label' => '',
            'type' => 'acfe_advanced_link',
            'instructions' => '',
            'required' => 0,
            'conditional_logic' => 0,
            'wrapper' => array(
                'width' => '',
                'class' => '',
                'id' => '',
            ),
            'post_type' => '',
            'taxonomy' => '',
                         // Maybe highlight these rows?
            'show_in_graphql' => 1,
            'graphql_description' => '',
            'graphql_field_name' => 'advancedLink',
        ),
    ),
        // Customize your field group location 
    'location' => array(
        array(
            array(
                'param' => 'page',
                'operator' => '==',
                'value' => '352',
            ),
        ),
    ),
    'menu_order' => 0,
    'position' => 'normal',
    'style' => 'default',
    'label_placement' => 'left',
    'instruction_placement' => 'label',
    'hide_on_screen' => '',
    'active' => true,
    'description' => '',
    'show_in_rest' => 0,
    'acfe_autosync' => '',
    'acfe_form' => 0,
    'acfe_display_title' => '',
        // Maybe highlight these next few rows?
    'show_in_graphql' => 1,
    'graphql_field_name' => 'acfExtendedFreeKitchenSink',
    'map_graphql_types_from_location_rules' => 0,
    'graphql_types' => [ 'Page' ],
    'acfe_meta' => '',
    'acfe_note' => '',
) );
} );

JSON

If I clicked the "JSON" tab, I would see something like this:

[
    {
        "key": "group_64711c50ee8ae",
        "title": "Docs: ACF Extended Free Kitchen Sink",
        "fields": [
            {
                "key": "field_64711c51a5e5d",
                "label": "Advanced Link",
                "name": "advanced_link",
                "aria-label": "",
                "type": "acfe_advanced_link",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "post_type": "",
                "taxonomy": "",
                "show_in_graphql": 1,
                "graphql_description": "",
                "graphql_field_name": "advancedLink"
            },
        ],
        "location": [
            [
                {
                    "param": "page",
                    "operator": "==",
                    "value": "352"
                }
            ]
        ],
        "menu_order": 0,
        "position": "normal",
        "style": "default",
        "label_placement": "left",
        "instruction_placement": "label",
        "hide_on_screen": "",
        "active": true,
        "description": "",
        "show_in_rest": 0,
        "acfe_autosync": "",
        "acfe_form": 0,
        "acfe_display_title": "",
        "show_in_graphql": 1,
        "graphql_field_name": "acfExtendedFreeKitchenSink",
        "map_graphql_types_from_location_rules": 0,
        "graphql_types": "",
        "acfe_meta": "",
        "acfe_note": ""
    }
]

[josephfusco]

This is more conceptual and is not intended to be copy and pasted by the user.