Re-organize Docs

docs/fields/accordion.md

@@ -0,0 +1,10 @@
+# Accordion
+
+The Accordion Field in Advanced Custom Fields that lets users separate other fields in collapsible
+sections.
+
+This field is for administrative display purposes and is not exposed in WPGraphQL.
+
+----
+
+- **Next Field:** [Button Group](./button-group.md)

docs/fields/button-group.md

@@ -0,0 +1,41 @@
+# Button Group Field
+
+Button Group fields are added to the WPGraphQL Schema as a field with the Type `String`.
+
+Button Group fields can be queried and a String will be returned.
+
+Here, we have a Button Group field named `button_group` on the Post Edit screen within the "ACF Docs" Field Group, and "Choice 2" is selected.
+
+![Button Group field in the Edit Post screen](../img/button-group-field-input.png?raw=true)
+
+This field can be Queried in GraphQL like so:
+
+```graphql
+{
+  post(id: "acf-example-test", idType: URI) {
+    acfDocs {
+      buttonGroup
+    }
+  }
+}
+```
+
+and the results of the query would be:
+
+```json
+{
+  "data": {
+    "post": {
+      "acfDocs": {
+        "buttonGroup": "choice_2"
+      }
+    }
+  }
+}
+```
+
+----
+
+- **Previous Field:** [Accordion](./accordion.md)
+- **Next Field:** [Checkbox](./checkbox.md)
+

docs/fields/checkbox.md

@@ -0,0 +1,43 @@
+# Checkbox Field
+
+Checkbox fields are added to the WPGraphQL Schema as a field with the Type `[ 'list_of' => 'String' ]`.
+
+Checkbox fields can be queried and a list (array) of Strings (the selected values) will be returned.
+
+Here, we have a Checkbox field named `checkbox` on the Post Edit screen within the "ACF Docs" Field Group, and "Choice 1" is selected.
+
+![Checkbox field in the Edit Post screen](../img/checkbox-field-input.png?raw=true)
+
+This field can be Queried in GraphQL like so:
+
+```graphql
+{
+  post(id: "acf-example-test", idType: URI) {
+    acfDocs {
+      checkbox
+    }
+  }
+}
+```
+
+and the results of the query would be:
+
+```json
+{
+  "data": {
+    "post": {
+      "acfDocs": {
+        "checkbox": [
+          "choice_1"
+        ]
+      }
+    }
+  }
+}
+```
+
+----
+
+- **Previous Field:** [Button Group](./button-group.md)
+- **Next Field:** [Clone](./clone.md)
+

docs/fields/clone.md

@@ -0,0 +1,9 @@
+# Clone Field
+
+The clone field is not fully supported (yet). We plan to support it in the future.
+
+----
+
+- **Previous Field:** [Checkbox](./checkbox.md)
+- **Next Field:** [Color Picker](./color-picker.md)
+

docs/fields/color-picker.md

@@ -0,0 +1,40 @@
+# Color Picker Field
+
+The Color Picker field is added to the WPGraphQL Schema as field with the Type `String`.
+
+Color Picker fields can be queried and a String will be returned.
+
+Here, we have a Color Picker field named `color_picker` on the Post Edit screen within the "ACF Docs" Field Group, and "#dd3333" is the value.
+
+![Color Picker field in the Edit Post screen](../img/color-picker-field-input.png?raw=true)
+
+This field can be queried in GraphQL like so:
+
+```graphql
+{
+  post(id: "acf-example-test", idType: URI) {
+    acfDocs {
+      colorPicker
+    }
+  }
+}
+```
+
+and the result of the query would be:
+
+```json
+{
+  "data": {
+    "post": {
+      "acfDocs": {
+        "colorPicker": "12:30 am"
+      }
+    }
+  }
+}
+```
+
+----
+
+- **Previous Field:** [Clone](./clone.md)
+- **Next Field:** [Date Picker](./date-picker.md)

docs/fields/date-picker.md

@@ -0,0 +1,40 @@
+# Date Picker Field
+
+The Date Picker field is added to the WPGraphQL Schema as field with the Type `String`.
+
+Date Picker fields can be queried and a String will be returned.
+
+Here, we have a Date Picker field named `date_picker` on the Post Edit screen within the "ACF Docs" Field Group, and "13/03/2020" is the date set.
+
+![Date Picker field in the Edit Post screen](../img/date-picker-field-input.png?raw=true)
+
+This field can be queried in GraphQL like so:
+
+```graphql
+{
+  post(id: "acf-example-test", idType: URI) {
+    acfDocs {
+      datePicker
+    }
+  }
+}
+```
+
+and the result of the query would be:
+
+```json
+{
+  "data": {
+    "post": {
+      "acfDocs": {
+        "datePicker": "13/03/2020"
+      }
+    }
+  }
+}
+```
+
+----
+
+- **Previous Field:** [Color Picker](./color-picker.md)
+- **Next Field:** [Date/Time Picker](./date-time-picker.md)

docs/fields/date-time-picker.md

@@ -0,0 +1,40 @@
+# Date/Time Picker Field
+
+The Date/Time Picker field is added to the WPGraphQL Schema as field with the Type `String`.
+
+Date/Time Picker fields can be queried, and a String will be returned.
+
+Here, we have a Date/Time Picker field named `date_time_picker` on the Post Edit screen within the "ACF Docs" Field Group, and "20/03/2020 8:15 am" is the value.
+
+![Date Picker field in the Edit Post screen](../img/date-time-picker-field-input.png?raw=true)
+
+This field can be queried in GraphQL like so:
+
+```graphql
+{
+  post(id: "acf-example-test", idType: URI) {
+    acfDocs {
+      dateTimePicker
+    }
+  }
+}
+```
+
+and the result of the query would be:
+
+```json
+{
+  "data": {
+    "post": {
+      "acfDocs": {
+        "dateTimePicker": "20/03/2020 8:15 am"
+      }
+    }
+  }
+}
+```
+
+----
+
+- **Previous Field:** [Date Picker](./date-picker.md)
+- **Next Field:** [Email](./email.md)

docs/fields/email.md

@@ -0,0 +1,40 @@
+# Email Field
+
+Email fields are added to the WPGraphQL Schema as a field with the Type `String`.
+
+Email fields can be queried and a String will be returned.
+
+Here, we have an Email field named `email` on the Post Edit screen within the "ACF Docs" Field Group.
+
+![Email field in the Edit Post screen](../img/email-field-input.png?raw=true)
+
+This field can be Queried in GraphQL like so:
+
+```graphql
+{
+  post( id: "acf-example-test" idType: URI ) {
+    acfDocs {
+      email
+    }
+  }
+}
+```
+
+and the results of the query would be:
+
+```json
+{
+  "data": {
+    "post": {
+       "acfDocs": {
+         "email": "test@example.com"
+       }
+    }
+  }
+}
+```
+
+----
+
+- **Previous Field:** [Date/Time Picker](./date-time-picker.md)
+- **Next Field:** [File](./file.md)

docs/fields/file.md

@@ -0,0 +1,48 @@
+# File Field
+
+File fields are added to the WPGraphQL Schema as a field with the Type `MediaItem`.
+
+File fields can be queried and a MediaItem will be returned.
+
+The `MediaItem` type is an Object type that has it's own fields that can be selected. So, instead of _just_ getting the File ID returned and having to ask for the MediaItem object in a follow-up request, we can ask for fields available on the MediaItem Type. For this example, we ask for the `id` and `mediaItemUrl`.
+
+Here, we have a File field named `file` on the Post Edit screen within the "ACF Docs" Field Group.
+
+![File field in the Edit Post screen](../img/file-field-input.png?raw=true)
+
+This field can be Queried in GraphQL like so:
+
+```graphql
+{
+  post(id: "acf-example-test", idType: URI) {
+    acfDocs {
+      file {
+        id
+        mediaItemUrl
+      }
+    }
+  }
+}
+```
+
+And the results of the query would be:
+
+```json
+{
+  "data": {
+    "post": {
+      "acfDocs": {
+        "file": {
+          "id": "YXR0YWNobWVudDozMjQ=",
+          "mediaItemUrl": "http://acf2.local/wp-content/uploads/2020/03/little-ceasars-receipt-01282020.pdf"
+        }
+      }
+    }
+  }
+}
+```
+
+----
+
+- **Previous Field:** [Email](./email.md)
+- **Next Field:** [Flexible Content](./flexible-content.md)