P1 Component Library

The P1 component library provides content creators with a catalog of pre-built, design-system-compliant blocks that can be added to any page in the visual editor. These blocks are REACT components built for Next.js and P1, maintained by our development team. They are offering a starting point for site builders without having to build all components from scratch.

Your organization can use them as is or simply use them as a base and fork them in a different repository. You could also build your own component library for your organization following the same architecture. The value for the users and business: a simple way to enforce and control your organization's brand and layout standards across your fleet of websites.

Browse the full catalog at components.p1.pantheon.io.

Using blocks in the Visual Editor

Adding a Block to a Page

1. Open any page in the P1 visual editor.
2. Drag a component from the component panel on the left, once you do so, you create a block on the page and can edit its content on the canvas or right sidebar.

Editing a block's content

Each block exposes editable fields in the right-hand properties panel when selected. Fields may include:

• Text content (headings, body copy, labels)
• Images (upload or select from the media library)
• Links (internal pages or external URLs)
• Layout options (column count, alignment, spacing)

The available fields depend on how your developer configured the block. Fields you do not see cannot be changed from the editor — contact your developer to add or expose additional options.

Removing a block

Select the block on the canvas, then click the trash icon in the properties panel or press the Delete key. Blocks can be undone with Cmd+Z immediately after removal.

What content creators can and cannot change

Content creators work within the boundaries of each block's design. This means:

• You can change the text, images, and links inside a block.
• You can change layout properties as defined in the block (example: move image from left to right)
• You cannot change the full block's layout beyond the exposed properties. Typically, colors, fonts, or spacing are governed by the design system and you can not set them manually.

This governance model ensures brand consistency across all pages and sites while giving editors the freedom to create rich, varied content.

Keeping your blocks up to date

When your developer updates a block in the library, the updated version is automatically available in the visual editor on your next session. You do not need to take any action. Existing pages that use the block continue to render correctly.

If a block no longer appears in the catalog, your developer may have removed it. Pages that already contain the block are not affected.

Troubleshooting

Block not appearing in the catalog

Your developer may not have installed the block yet. Share the block name from components.p1.pantheon.io with your developer and ask them to add it to your project.

Block shows placeholder content after saving

The block may require a required field that was left empty. Select the block and check the properties panel for any fields marked as required.

Changes not saving

Ensure you are on an active workstream branch. Changes on the main branch may be restricted depending on your organization's workflow settings.