Skip to content
Arc XP

Migrating from Theme Settings UI to PageBuilder Deployer

The Theme Settings UI is being deprecated but the underlying functionality of Theme Settings is not. Bundles will continue to read values from blocks.json. This guide walks you through managing settings locally and deploying your changes using the PageBuilder Deployer.

Prerequisites

  1. A local development environment
  2. Access to the PageBuilder Deployer UI in your Arc XP organization

Download your live bundle

To download your live bundle, take the following steps:

  1. On the top-right of the Arc XP dashboard, select the environment you want to deploy to from the drop-down menu
  2. Click the PageBuilder Editor tile in the Arc XP dashboard
  3. On the top navigation menu, click the Developer Tools tab to expose the submenu
  4. On the submenu, click the Deployer tab
    • The Deployer section opens and lists running and uploaded bundles. The live bundle appears first on the list in the running bundles section.
  5. On the top right of your live bundle, click the *** button.
  6. Click the Download option
    • Your browser downloads a timestamped zip file.

Modify Arc Blocks settings

When changes are made in Theme Settings UI and then a build is run, the blocks.json file is overwritten using the stored settings. Once you transition over to this workflow, you will maintain the blocks.json settings directly.

Option 1: Use the CLI helper scripts

The helper scripts allow you to output the stored settings to the Terminal or save them to a specified file. If you prefer to do this manually, skip to Option 2 below. Note that there may be changes that were made in the UI but never deployed, so we recommend the CLI helper scripts to ensure you have the most recent settings.

The CLI also offers an option to convert blocks.json into an xlsx document, and then back to blocks.json once editing is completed. These scripts provide default options for filenames so existing files aren’t overwritten, but you can also choose your own filename.

  1. Download and install the Arc XP CLI npm package:   [package download]   [setup instructions]
  2. Use the Themes-specific commands to print the stored settings in your terminal, or write the settings to a local file
  3. Move on to step Zip your bundle and the follow the remaining steps

Option 2: Manually modify the file

Using an IDE or a code editor, open the blocks.json file located in the root directory of your project. This contains key-value pairs that the Theme Settings UI updated during the last deployment, using values from the input fields. You can directly modify the blocks.json file to change your Arc Blocks settings.

The following table describes the keys and values that must be in the blocks.json file to ensure successful deployments with PageBuilder Deployer.

KEYDESCRIPTIONREFERENCE VALUE
themesReleaseVersion
(string)		The Themes version to use in your deploymentarc-themes-release-version-2.4.1
themeComponents
(string)		Specifies and enables the use of arc-themes React components to build custom blocks@wpmedia/arc-themes-components
theme
(string)		Specifies the default style for the website. Arc XP currently only supports the News theme.news
blocks
(array)		Lists the blocks available in your bundleSee the blocks.json example file for a complete list
siteProperties
(object)		key-value pairs to configure site propertiesSee the blocks.json example for example values

Zip your bundle

Before zipping your bundle, start the Docker daemon by opening the Docker Desktop application. See Setting Up Your Dev Playground for Docker resources requirements.

From the root directory of your project, run the following command:

Terminal window
# If you have modified any styles, run this first, then zip:
npx fusion start


# If you have not changed any styles:
npx fusion zip

This command will build your code and create a timestamped .zip file in the /dist/ directory.

Deploy your bundle with PageBuilder Deployer

To upload your bundle and deploy your changes using PageBuilder Deployer UI, take the following steps:

  1. On the top-right of the Arc XP dashboard, select the environment you want to deploy to from the drop-down menu
  2. Click the PageBuilder Editor tile in the Arc XP dashboard
    • The PageBuilder Pages section displays
  3. On the top navigation menu, click the Developer Tools tab to expose the submenu
  4. On the submenu, click the Deployer tab
    • The Deployer section opens and lists running and uploaded bundles.
  5. In the uploaded bundles section, click the Upload Bundle button
    • The Upload Bundle panel appears
  6. Provide a name for your bundle in the Bundle Name text field
  7. Click the Upload Bundle button
    • A system file explorer window opens
  8. Navigate to your project’s /dist/ directory
  9. Select the bundle zip file you created in the previous step
  10. On the bottom of the Upload Bundle panel, click the Upload Bundle button
    • Your bundle shows in the uploaded bundles list with the Unused badge.
  11. On the top right of your uploaded bundle, click the *** button
  12. Click the deploy option.