Skip to content
Arc XP
Product Documentation

Migrating from Theme Settings UI to PageBuilder Deployer

This guide walks you through changing settings locally and deploying your changes using the PageBuilder Deployer UI.

Step 1. Download Your Live Bundle

To download your live bundle, take the following steps:

  1. Access your Arc XP organization.

  2. On the top-right of the Arc XP dashboard, select the environment you want to deploy to from the drop-down menu.

  3. Click the PageBuilder Editor tile in the Arc XP dashboard.

    The PageBuilder Pages section displays.

  4. On the top navigation menu, click the Developer Tools tab.

    The Developer Tools submenu appears below.

  5. On the Developer Tools 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..

  6. On the top right of your uploaded live bundle, click the *** button.

  7. Click the Download option

    Your browser downloads a timestamped zip file.

Step 2. Modify Arc Blocks Settings

Using an IDE or a code editor, open the blocks.json file located in the root directory of your project. The blocks.json contains key-value pairs that the Theme Settings UI updated through text 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.

KeyTypeDescriptionReference value
themesReleaseVersionstringSets the Themes version to use in your deploymentarc-themes-release-version-2.4.1
themeComponentsstringSpecifies and enables the use of arc-themes React components to build custom blocks@wpmedia/arc-themes-components
themestringSpecifies the default style for the website. Arc XP currently only supports the News themenews
blocksarrayLists the Arc blocks available in your bundleSee the blocks.json example file for a complete list
sitePropertiesobjectContains key-value pairs to configure site propertiesSee the blocks.json example for example values

Step 3. 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:

npx fusion zip

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

Step 4. Deploy Your bundle with PageBuilder Deployer

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

  1. Access your Arc XP organization.

  2. On the top-right of the Arc XP dashboard, select the environment you want to deploy to from the drop-down menu.

  3. Click the PageBuilder Editor tile in the Arc XP dashboard.

    The PageBuilder Pages section displays.

  4. On the top navigation menu, click the Developer Tools tab.

    The Developer Tools submenu appears below.

  5. On the Developer Tools submenu, click the Deployer tab.

    The Deployer section opens and lists running and uploaded bundles.

  6. In the uploaded bundles section, click the Upload Bundle button.

    The Upload Bundle panel appears.

  7. Provide a name for your bundle in the Bundle Name text field.

  8. Click the Upload Bundle button.

    A system file explorer window opens.

  9. Navigate to your project’s /dist/ directory.

  10. Select the bundle zip file you created in Step 3.

  11. 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.

  12. On the top right of your uploaded bundle, click the *** button.

  13. Click the deploy option.




Alternate Method (Use with Caution)

This method requires you to use the following tools:

  • PageBuilder Deployer UI
  • Plain text editor
  • File compression application (zip)

Take the steps in this section to download your live bundle, modify Arc Blocks settings, and compress, upload, and deploy your updated bundle.

Step 1. Download Your Live Bundle

To download your live bundle, take the following steps:

  1. Access your Arc XP organization.

  2. On the top-right of the Arc XP dashboard, select the environment you want to deploy to from the drop-down menu.

  3. Click the PageBuilder Editor tile in the Arc XP dashboard.

    The PageBuilder Pages section displays.

  4. On the top navigation menu, click the Developer Tools tab.

    The Developer Tools submenu appears below.

  5. On the Developer Tools submenu, click the Deployer tab.

    The Deployer section opens and lists running and uploaded bundles. In the running bundles section, the live bundle appears first on the list.

  6. On the top right of your uploaded live bundle, click the *** button.

  7. Click the Download option

    Your browser downloads a timestamped zip file.

Step 2. Decompress Your Bundle

Using a file compression application, extract the contents of your bundle zip file.

The resulting directory contains the blocks.json file that you must modify.

Step 3. Modify Arc Blocks Settings

Using a plain text editor (like TextEdit on MacOS), open the blocks.json file, located in the root directory of your bundle. The blocks.json contains key-value pairs that the Themes Settings UI updates through text fields. You can directly modify the blocks.json file to change your Themes settings.

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

KeyTypeDescriptionReference value
themesReleaseVersionstringSets the Themes version to use in your deploymentarc-themes-release-version-2.4.1
themeComponentsstringSpecifies and enables the use of arc-themes React components to build custom blocks@wpmedia/arc-themes-components
themestringSpecifies the default style for the website. Arc XP currently only supports the News themenews
blocksarrayLists the Arc blocks available in your bundleSee the blocks.json example file for a complete list
sitePropertiesobjectContains key-value pairs to configure site propertiesSee the See the blocks.json example for example values

Step 4. Compress Your Bundle

Using a file compression application, compress the files and folders of the bundle as a zip file.

Step 5. Deploy Your Bundle with PageBuilder Deployer UI

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

  1. Access your Arc XP organization.

  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.

    The Developer Tools submenu appears below.

  4. On the Developer Tools 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 the folder where you compressed your bundle zip file.

  9. Select your bundle zip file.

  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.