Skip to content

section

Alberto Parziale edited this page Nov 15, 2019 · 3 revisions

Section

Sections are the most powerful field in Aeria. A section is a special field, which can contain fields itself. It can even contain other sections!

Now, let's create a section to save reviews inside a book post. We want to insert the reviewer's name, his review, and an optional photo.

We'll declare our 3 required fields:

  • "name" defines the name for this section.
  • "kind" defines the type of configuration: we're gonna set it to "section" this time.
  • "spec" defines the specific configurations for the object.
{
 "name": "review",
 "spec": {},
 "kind": "section"
}

If you want to leave this configuration disabled for now, you can add "enabled": false to these fields.

Specs

The section's specs contain its basic informations.

  • "id" will be used by WP to recognize this specific section type.
  • "label" contains the section type's title.
  • "description" is a short summary describing the section's contents.
{
    "name": "review",
    "spec": {
      "id": "review",
      "label": "Review",
      "description": "A reader's review.",
      "fields": []
    },
    "kind": "section"
  }

Adding fields to the section

We're now able to add fields to our section. We'll add 3 fields:

First, a text box to save the reader name. This needs to be a "text" field, and we want it to be required.

{
  "id": "reader-name",
  "type": "text",
  "label" : "Reader name",
  "description": "Insert here the name of the review's writer.",
  "size": "full",
  "placeholder": "Reader",
  "required": true
}

Now, let's add a text area to insert the review. This one is required as well.

{
  "id": "review-text",
  "type": "textarea",
  "label": "Review",
  "description": "Insert here the review's text.",
  "size": "full",
  "placeholder": "Review",
  "required": true
}

Finally, we'll add a picture field for the reader's picture of the book.

{
  "id": "book-photo",
  "type": "picture",
  "label": "Book photo",
  "description": "You can upload a photo of the book here.",
  "size": "full",
  "required":false,
  "ctaLabel": "Insert book photo"

Our section configuration is now ready, and looks like this:

{
    "name": "review",
    "spec": {
      "id": "review",
      "label": "Review",
      "description": "A reader's review.",
      "fields": [
        {
          "id": "reader-name",
          "type": "text",
          "label" : "Reader name",
          "description": "Insert here the name of the review's writer.",
          "size": "full",
          "placeholder": "Reader",
          "required": true
        },
        {
            "id": "review-text",
            "type": "textarea",
            "label": "Review",
            "description": "Insert here the review's text.",
            "size": "full",
            "placeholder": "Review",
            "required": true
        },
        {
            "id": "book-photo",
            "type": "picture",
            "label": "Book photo",
            "description": "You can upload a photo of the book here.",
            "size": "full",
            "required": false,
            "ctaLabel": "Insert book photo"
        }
      ]
    },
    "kind": "section"
  }

Adding the section to a metabox

Now that we've created the section, we need to add it to a metabox. Open your metabox config file, and add to the fields a section:

{
  "id": "reviews",
  "type": "sections",
  "accepts": ["review"]
} 

This section field only accepts review sections.

You can create a new book and insert a review.

Clone this wiki locally