Themes FAQ

The following serves as guidance for developers building and maintaining their site using the Themes 2.0 design system.

As a developer using Themes, how do I...

Get Started on Local Development

You can use the following guides to get started on local development by configuring your feature pack and running PageBuilder Engine locally:

Access the Arc Blocks Repository

Click the button to go to the public blocks repository:

Arc Blocks Repository

You can eject (fork) blocks from this repository to customize within your own bundle as needed. The Arc XP CLI offers helper commands for this.

Set Environment Variables for Your Themes Repository

See the required environment settings you need to configure in the /environment directory of your repository.

Add a Custom Font

You can manage fonts through the Blocks Styling token method. You can set the fonts as comma-separated values within parentheses in your alias.json file. For example:

{
  "default": {
    "font-family-primary": "('Merriweather Sans', sans-serif)"
  }
}

Declare a New Font Family

Custom font files should be included in the /resources/ directory. To declare a new font family:

Set the font family via css.
Load the css file via the output type.

The following section provide examples of the contents of each file.

fonts.css

@font-face {
  font-family: 'MyFont';
  src: ...; //file in resources folder or cdn url
....

output-types/default.jsx

import './fonts.css'

alias.json

{
  "default": {
    "font-family-primary": "('MyFont', sans-serif)"
  }
}

Eject (Fork) a Block

For full details on ejecting a Themes block as a starter for your custom needs, see Ejecting (Forking) an Arc Block.

Use Block Styling on Custom Blocks

For full details on applying Themes 2.0 block styling capabilities to custom blocks, see Creating a Custom Block with Styling.

Update Blocks for AMP Compatibility

Due to the updates in the page experience ranking by Google, AMP is not supported out-of-the-box on Arc XP components, blocks, and pages. You may build a custom block to your specific requirements and will need to create a custom output type to meet the AMP HTML specification.

For more details, see PageBuilder Engine Best Practices: AMP.

Internationalize Your Site

For full details on Themes supported languages and site properties, see Internationalization.

Set Site Properties

To set site properties in your bundle, see Migrating from Theme Settings UI to PageBuilder Deployer

For more information about site properties that are not supported out-of-the-box, see:

Add or Remove Blocks from Your Bundle

You can add or remove blocks from your bundle by changing your blocks.json file of your feature pack.

Complete a Deployment

To complete a deployment using PageBuilder Deployer, see see Migrating from Theme Settings UI to PageBuilder Deployer. The Arc XP CLI has helper commands to compile styles, upload and deploy bundles.