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.

Prerequisites

• A local development environment
• Access to the PageBuilder Deployer UI in your Arc XP organization

Download your live bundle

Note

Take the steps in this section if:

• You have not previously downloaded a live bundle
• The code in your remote or local repositories is not in sync with the code from your live bundle

Otherwise, proceed to Step 2. Modify Arc Blocks Settings

To download your live bundle, take the following steps:

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
4. On the top navigation menu, click the Developer Tools tab to expose the submenu
5. 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.
6. On the top right of your live bundle, click the *** button.
7. Click the Download option
   • Your browser downloads a timestamped zip file.

Modify Arc Blocks settings

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.

KEY	DESCRIPTION	REFERENCE VALUE
themesReleaseVersion (string)	The Themes version to use in your deployment	arc-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 bundle	See the blocks.json example file for a complete list
siteProperties (object)	key-value pairs to configure site properties	See the blocks.json example for example values

blocks.json example file

Click here to display

{
  "themesReleaseVersion": "arc-themes-release-version-2.4.1",
  "themeComponents": "@wpmedia/arc-themes-components",
  "theme": "news",
  "blocks": [
    "@wpmedia/ad-taboola-block",
    "@wpmedia/ads-block",
    "@wpmedia/alert-bar-block",
    "@wpmedia/alert-bar-content-source-block",
    "@wpmedia/alias-tokens",
    "@wpmedia/article-body-block",
    "@wpmedia/article-tag-block",
    "@wpmedia/author-content-source-block",
    "@wpmedia/author-bio-block",
    "@wpmedia/breakpoint-tokens",
    "@wpmedia/byline-block",
    "@wpmedia/card-list-block",
    "@wpmedia/collections-content-source-block",
    "@wpmedia/content-api-source-block",
    "@wpmedia/full-author-bio-block",
    "@wpmedia/date-block",
    "@wpmedia/default-output-block",
    "@wpmedia/double-chain-block",
    "@wpmedia/divider-block",
    "@wpmedia/extra-large-manual-promo-block",
    "@wpmedia/extra-large-promo-block",
    "@wpmedia/footer-block",
    "@wpmedia/global-phrases-block",
    "@wpmedia/global-tokens",
    "@wpmedia/gallery-block",
    "@wpmedia/header-block",
    "@wpmedia/header-nav-chain-block",
    "@wpmedia/headline-block",
    "@wpmedia/htmlbox-block",
    "@wpmedia/identity-block",
    "@wpmedia/large-manual-promo-block",
    "@wpmedia/large-promo-block",
    "@wpmedia/lead-art-block",
    "@wpmedia/links-bar-block",
    "@wpmedia/masthead-block",
    "@wpmedia/medium-manual-promo-block",
    "@wpmedia/medium-promo-block",
    "@wpmedia/numbered-list-block",
    "@wpmedia/overline-block",
    "@wpmedia/quad-chain-block",
    "@wpmedia/related-content-content-source-block",
    "@wpmedia/results-list-block",
    "@wpmedia/right-rail-advanced-block",
    "@wpmedia/right-rail-block",
    "@wpmedia/search-content-source-block",
    "@wpmedia/search-results-list-block",
    "@wpmedia/section-title-block",
    "@wpmedia/share-bar-block",
    "@wpmedia/signing-service-content-source-block",
    "@wpmedia/simple-list-block",
    "@wpmedia/single-chain-block",
    "@wpmedia/single-column-layout-block",
    "@wpmedia/site-hierarchy-content-block",
    "@wpmedia/small-manual-promo-block",
    "@wpmedia/small-promo-block",
    "@wpmedia/story-feed-author-content-source-block",
    "@wpmedia/story-feed-query-content-source-block",
    "@wpmedia/story-feed-sections-content-source-block",
    "@wpmedia/story-feed-tag-content-source-block",
    "@wpmedia/subheadline-block",
    "@wpmedia/tag-title-block",
    "@wpmedia/tags-content-source-block",
    "@wpmedia/top-table-list-block",
    "@wpmedia/triple-chain-block",
    "@wpmedia/unpublished-content-source-block",
    "@wpmedia/video-player-block"
  ],
  "values": {
    "default": {
      "siteProperties": {
        "websiteDomain": "https://www.arcintelligencer.com",
        "websiteName": "Website Display Name",
        "lightBackgroundLogo": "https://static.themebuilder.aws.arc.pub/orgid-custom1-env/1646855268779.png",
        "primaryLogo": "https://static.themebuilder.aws.arc.pub/orgid-custom1-env/1646855268868.png",
        "fallbackImage": "https://static.themebuilder.aws.arc.pub/orgid-custom1-env/1636037887909.png",
        "primaryLogoAlt": "The Arc Intelligencer",
        "facebookPage": "arcintelligencer",
        "twitterUsername": "arcintelligencer",
        "resizerURL": "https://orgid-siteid-env.web.arc-cdn.net/resizer/v2/",
        "rssUrl": "http://feeds.arcintelligencer.com/rss/homepage",
        "copyrightText": "arcintelligencer.com © 2024 The Arc Intelligencer",
        "dangerouslyInjectJS": [],
        "dateLocalization": {
          "language": "en",
          "timeZone": "America/New_York",
          "dateTimeFormat": "%B %d, %Y at %l:%M %P %Z",
          "dateFormat": "%B %d, %Y"
        },
        "locale": "en",
        "taboolaPublisherId": "arc",
        "fontUrl": [
          "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lora:wght@400;700&display=swap"
        ],
        "chartbeatAccountId": "12345",
        "chartbeatDomain": "arcintelligencer.com",
        "textDirection": "ltr",
        "textFlow": "horizontal-tb",
        "api": {
          "identity": {
            "origin": "https://orgid-siteid-prod.api.cdn.arcpublishing.com"
          }
        }
      }
    },
    "sites": {
      "arc-demo-1": {
        "siteProperties": {
          "websiteDomain": "https://www.arcdemo1.com",
          "websiteName": "Arc Demo 1",
          "primaryLogoAlt": "Arc Demo 1 logo",
          "facebookPage": "https://www.facebook.com/arcdemo1fb",
          "twitterUsername": "arcdemo1twitter"
        }
      },
      "arc-demo-2": {
        "siteProperties": {
          "websiteDomain": "https://www.arcdemo2.com",
          "websiteName": "Arc Demo 2",
          "primaryLogoAlt": "Arc Demo 2 logo",
          "facebookPage": "https://www.facebook.com/arcdemo2fb",
          "twitterUsername": "arcdemo2twitter"
        }
      }
    }
  }
}

important

In the siteProperties object, If you want to set different resizerURL values per environment, you must create and deploy different bundles for each environment. Ensure you update the value using the following format:

"resizerURL": "https://{org}-{environment}.web.arc-cdn.net/resizer/v2"

Substitute {org} with your organization’s name and {environment} with sandbox, staging, or prod.

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.

Deploy your bundle with PageBuilder Deployer

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

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 to expose the submenu
5. On the 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 the previous step
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.