Content areas

3 min

ContentArea and ContentAreaItem (content array or content properties in the integration API) are Optimizely Content Management System (SaaS) properties where you can create local block (component) instances or embed existing content items. You can restrict which content types can be used within a content area. See the Validation fields section in the Content types documentation.

Index

When a content area is indexed, referenced content is "inlined" into the area, meaning you can query the content area as if it is part of it. The graph schema for a content area property is [IContent] and IContent for a content area item.

Query

When querying a content area, the items are typically cast to user-defined content types (you can use the allowedTypes field when defining the content area property to specify which content types are allowed to be used within the content area). The following is an example of a query for a content area MainContentArea on StandardPage that allows TeaserBlock and EditorialBlock types:

query ExplicitAreaQuery {  
  StandardPage {  
    items {  
      MainContentArea {  
        ... on EditorialBlock {  
          MainBody {  
            html  
          }  
        }  
        ... on TeaserBlock {  
          Heading  
          Text  
          Image {  
            url {  
              default  
            }  
          }  
        }  
      }  
    }  
  }  
}

Recursive queries

Depending on how the content type modeling is done, there can be cases where a content type has a content area where the content type itself is allowed. In that case, a query can often be more compact and readable by using a recursive query. See Recursive queriesRecursive queries in the Optimizely Graph documentation for information.

Queries can also use fragments to improve readability and reusability. See Inline fragments for content schemaInline fragments for content schema in the Optimizely Graph documentation.

The following example shows a content type BlockArea that has a content area property named Area (that allows content types EditorialBlock, TeaserBlock, and BlockArea). The property MainContentArea on StandardPage is configured to allow the same content types.

query RecursiveAreaQuery {  
  StandardPage {  
    items {  
      MainContentArea {  
        ...recursiveArea  
      }  
    }  
  }  
}

fragment recursiveArea on _IContent {  
  ... on AreaBlock {  
    Area @recursive {  
      _metadata {  
        displayName  
      }  
    }  
  }  
  ... on EditorialBlock {  
    MainBody {  
      html  
    }  
  }  
  ... on TeaserBlock {  
    Heading  
    Text  
    Image {  
      url {  
        default  
      }  
    }  
  }  
}