Using the Component Library

Reuse blocks across sites and browse the marketplace for starter templates.

The Component Library is your personal collection of reusable blocks. Once you create a block, it’s saved to your library and available across all your sites. This guide covers managing your library, reusing blocks, and exploring the marketplace.

What is the Component Library?

The Component Library stores all the blocks you create:

• Blocks you build - Your custom components
• Available everywhere - Use blocks in any site
• Version controlled - Track changes and updates
• Shareable - Export and import blocks

Blocks in your library are independent of sites. Create a block once, use it in multiple sites, update it everywhere at once.

Managing Your Library

Viewing Your Blocks

1. Open the Component Library

   Click “Component Library” in the sidebar of any site.

2. Browse your blocks

   You’ll see all blocks you’ve created, organized by:

   • Recently used - Blocks you’ve used recently
   • All blocks - Complete list of your blocks
   • Categories - If you’ve organized them

   Use the search bar to quickly find blocks by name or description.

Creating New Blocks

1. Create a new block

   Click “Create Block” in the Component Library.

2. Write your component

   Use the in-browser editor to write your component code.

   The editor provides syntax highlighting, auto-completion, and instant preview.

3. Add fields

   Attach content fields to make the block editable.

   See the Working with Fields guide for details.

4. Save to library

   Click “Save Block” and give it a name. The block is now in your library.

Editing Existing Blocks

1. Find the block

   Browse or search for the block you want to edit.

2. Open the block

   Click on the block to open it in the editor.

3. Make changes

   Update the component code, fields, or settings as needed.

4. Save changes

   Click “Save” to update the block.

   Changes to blocks affect all sites using that block. Test changes carefully.

Organizing Blocks

Keep your library organized:

1. Use descriptive names

   Name blocks clearly:

   • ✅ “Hero Block”
   • ✅ “Text with Image”
   • ✅ “Card Grid”
   • ❌ “Block 1”
   • ❌ “Test”
2. Add descriptions

   Include descriptions that explain what each block does:

3. Use categories (if available)

   Group related blocks:

   • Content: Text, Image, Video
   • Layout: Grid, Columns, Container
   • Interactive: Form, Button, CTA
   • Specialized: Testimonials, Pricing, FAQ

Reusing Blocks Across Sites

Adding Blocks to a Site

Once a block is in your library, use it in any site:

1. Open page type editor

   Go to Page Types and edit the page type where you want to use the block.

2. Add available blocks

   In the “Available Blocks” section, click “Add Block” and select from your library.

3. Blocks are now available

   Editors can now use these blocks when creating pages of this type.

Blocks in your library are available to all your sites. Create once, use everywhere.

Updating Blocks Globally

When you update a block in your library:

1. Edit the block

   Make your changes in the Component Library.

2. Save changes

   Click “Save” to update the block.

3. Changes apply everywhere

   All sites using that block get the update automatically.

   Test updates carefully. Breaking changes affect all sites using the block.

Block Versions

Pala tracks block versions:

• View history - See previous versions of a block
• Revert changes - Go back to an earlier version if needed
• Compare versions - See what changed between versions

Use version history to safely experiment with block changes. You can always revert if something breaks.

Building a Server Library

Start with Essentials

Build a core set of blocks:

1. Hero - Landing page hero sections
2. Text - Rich text content
3. Image - Image with optional caption
4. Card Grid - Flexible grid layouts
5. Call-to-Action - CTA sections
6. Footer - Site footer

Expand Gradually

Add blocks as you need them:

• Content blocks - Text, Image, Video, Code
• Layout blocks - Grid, Columns, Container, Spacer
• Interactive blocks - Form, Button, CTA, Modal
• Specialized blocks - Testimonials, Pricing Table, FAQ, Team

Refine and Improve

Continuously improve your blocks:

• Add features - New fields, variants, options
• Improve styling - Better responsive design, animations
• Fix bugs - Address issues as you find them
• Optimize - Better performance, smaller code

Your library grows with every project. Blocks you build for one site become reusable assets for future projects.

Block Patterns

Simple Content Blocks

Basic blocks for common content:

Text Block:

• Rich text content
• Alignment options
• Background color

Image Block:

• Image upload
• Alt text
• Caption
• Full-width option

Video Block:

• Video upload or embed
• Autoplay options
• Caption

Layout Blocks

Blocks for organizing content:

Card Grid:

• Repeater for cards
• Configurable columns
• Responsive layout

Columns:

• 2, 3, or 4 column layouts
• Equal or custom widths
• Responsive stacking

Container:

• Max-width container
• Padding options
• Background styling

Interactive Blocks

Blocks with user interaction:

Call-to-Action:

• Headline and description
• CTA button
• Background styling

Form:

• Form fields (repeater)
• Submit action
• Success message

Modal:

• Trigger button
• Modal content
• Close options

Sharing Blocks

Exporting Blocks

Export blocks to share or backup:

1. Select a block

   Open the block you want to export.

2. Export

   Click “Export” to download the block as a file.

3. Share or backup

   Share the file with others or keep it as a backup.

Importing Blocks

Import blocks from others:

1. Open import

   Click “Import Block” in the Component Library.

2. Select file

   Choose the block file to import.

3. Review and import

   Review the block code and fields, then import.

Only import blocks from trusted sources. Review the code before importing to ensure it’s safe.

Marketplace (Future Feature)

Pala will include a marketplace for:

• Starter sites - Complete site templates
• Block packs - Collections of related blocks
• Individual blocks - Single blocks from the community
• Themes - Design system templates

The marketplace will let you discover blocks built by the community and share your own creations.

Best Practices

1. Build Reusable Blocks

Design blocks to work in multiple contexts by choosing field names carefully:

<!-- Good: Flexible and reusable field names -->
<h1 class="hero-{variant}">{headline}</h1>
<!-- Fields: headline, variant (select: default, large, small) -->

<!-- Avoid: Too specific field names -->
<h1>{homepage_headline}</h1>
<!-- Field: homepage_headline (limits reusability) -->

Use generic field names like headline, content, image instead of context-specific names like homepage_headline or about_page_content.

2. Document Your Blocks

Add clear descriptions:

Hero Block A flexible hero section with headline, subheadline, CTA, and optional background image. Supports multiple variants (default, large, minimal) and works on any page type.

3. Version Carefully

Test updates before saving:

1. Make changes in the editor
2. Test with preview
3. Check on multiple sites if possible
4. Save when confident

4. Organize Early

Start organizing from the beginning:

• Use clear naming conventions
• Add descriptions immediately
• Group related blocks
• Keep a consistent structure

5. Reuse and Refine

Don’t recreate blocks:

• Check your library first
• Adapt existing blocks when possible
• Improve blocks over time
• Remove unused blocks

Common Workflows

Creating a New Site

1. Check your library

   Review existing blocks before creating new ones.

2. Reuse what you can

   Add existing blocks to your new site’s page types.

3. Create only what's needed

   Build new blocks only for site-specific needs.

Updating a Block

1. Identify the block

   Find the block in your library.

2. Review usage

   Check which sites use this block.

3. Test changes

   Make changes and test thoroughly.

4. Save and verify

   Save changes and verify they work on all sites.

Next Steps

Writing Components

Learn how to build effective reusable components.

Working with Fields

Add fields to make blocks editable.

Your First Site

See how to build a library of blocks for a complete site.

Defining Page Types

Use library blocks in your page types.

Your Component Library is an investment. Every block you create saves time on future projects. Build thoughtfully, and your library becomes a valuable asset.