Components are prepackaged groups of fields that allow you to add structured information to your content. You used to add these items through the text editor, either by using buttons which put the item inline, or by having to remember a “shortcode” involving brackets. On our new site, you are instead offered a list of component types to add to your content, which provide the fields you need.

The editing interface for the Image component with its various fields.
The image component allows us to bundle together information that would have been disjointed and hard to add in previous versions of our site, such as an image caption and photo credit. Additionally, as a component, the editor does not need to worry about positioning the image inside a text field.

When you are editing content, the current components will appear as collapsed rows identifying the type of component with a short blurb about the content of the component, and a button which allows you to Edit or Delete the component. Clicking on Edit will expand the component and provide its editing form with its options. Clicking on Delete will display another button requiring you to click to confirm that you wish to delete the component and its content.

The Drupal editing interface for components, showing fix collapsed components and the drop down list for adding a new component.

Below the list of existing components, if any, is a drop-down dialog listing the types of components available on this content type. See the Components section of our documentation for information on each type of component. To add a component, select the type you wish to add and click the Add another Component button.

Reordering Components

To the left of each component in the list is a handle icon which you can click, hold, and drag to change the order in which a component appears on the page. This can be used to move a video from the top of the page to the middle or bottom.

When reordering components, it may be necessary to move text from one Text component to another. You can do this by clicking the Edit button next to each of the components and using copy-and-paste to move the content.