CWA 2.0 is in alpha: try it, build with it, give feedback. APIs can still change between releases; see Releases.
Introduction

Key Ideas

The handful of terms the guides use — layouts, pages, component groups, IRIs, uiComponent, page data and edit mode — each in a sentence or two.

The guides build a layout, a page template and a component. They use a few CWA terms. Each one is explained here in a sentence or two, so you can start building. Core Concepts covers each idea in depth, and its Glossary defines every CWA term in one place.

IMAGE: One page in edit mode, labelled: the layout around the edge, the page inside it, two component groups outlined, and a component selected with the manager panel open below

What a page is made of

Layout. The outer shell every page shares: header, footer, navigation. You write it as a Vue file in app/app/cwa/layouts/.

Page. The content structure inside a layout. Each page is a record in the database. It names the layout and page template it uses, and usually has a URL, called its route.

Page template. The Vue file a page renders through, in app/app/cwa/pages/. It places the page's regions. Many pages can use the same page template. In the admin it's the Page UI.

Component group. A named region where editors add content, such as main or banner. You declare one with <CwaComponentGroup reference="main"> in a layout, page template or component. The guides also call it a "group" or a "region"; it's the same thing.

Component. One piece of content in a group: a title, a quote, an image. Each component type is a PHP entity that holds the data and a Vue file that displays it.

Component position. The slot that holds one component in a group, and decides its order. You rarely deal with positions directly: the admin creates them when an editor adds a component.

How records are identified

IRI. Every record in the API has an IRI, a path that identifies it, such as /_/pages/018e… or /component/titles/018e…. The module passes a record's IRI to its Vue file as the iri prop, and you pass an IRI to <CwaComponentGroup> as its location, to say which record owns the group.

uiComponent. The field on a layout, page or component record that names the Vue file it renders through. A layout file landing.vue is stored as CwaLayoutLanding. The admin's Layout UI and Page UI selects set it for you. Your First Layout explains the naming rule.

Editing

Editor. Anyone signed in with ROLE_ADMIN, who can change content. These docs say "editor" for the person, and "admin" for the screens and tools they use.

Edit mode. Signed in as an editor, you see the admin bar at the top of every page. Click Edit to turn on edit mode: an empty group shows a + to add content, and clicking a component selects it.

Manager panel. The panel that slides up from the bottom when you select something in edit mode. Its tabs hold the forms for editing the selected component. The tabs you write for a component type are its admin tabs, in its admin/ folder.

Draft and published. A publishable component has two versions. Editors change the draft; visitors see the published version until an editor clicks Publish.

Repeating content

Page data. A record for one item of repeating content, such as one blog article. It has its own route and its own fields. Each page data record renders through a template page.

Template page. A page record with isTemplate: true. It has no URL of its own; every page data record of one type renders through it. In the admin, a template page is a Dynamic page.

"Page template" and "template page" are different things. A page template is a Vue file (TwoColumnPageTemplate.vue). A template page is a page record shared by many page data records. A template page renders through a page template, like any other page. Your First Dynamic Page builds one.

Next: Core Concepts

Core Concepts explains how a CWA site works, one idea per page. Then the guides build a site step by step. If you'd rather build first, you know enough to start with Your First Layout.