Upgrade to v2 Arc Blocks

The following sections step through the configuration to get you setup with Arc Blocks v2.

1. Configure Feature Pack

This guide provides the steps to configure your feature pack for Blocks v2.

You can also view the Themes starter repo in our Arc XP Github organization:

• https://github.com/arcxp/Themes-V2-Starter

Recommended Versioning

For compatible node, npm, and Engine versions to use with Themes versions, see How to run PageBuilder Engine locally - Local Environment.

blocks.json

themesReleaseVersion has already been an available configuration option, to get the correct version you’ll need to update this value to the latest 2.x.x version.

themeComponents is a new key which will enable the usage of the arc-themes-components React components for you to construct your own custom blocks with. theme is a new key that defines which OOTB styles will be applied by default.

"themesReleaseVersion": "arc-themes-release-version-2.4.1",
"themeComponents": "@wpmedia/arc-themes-components",
"theme": "news",

All engine-theme-sdk imports must be removed from your bundle in order to succesfully upgrade to v2. The import can also be removed from the blocks.json:

"engineSDK": "@wpmedia/engine-theme-sdk",

We’ve shifted most of engine-theme-sdk over to to arc-themes-components, these imports should be a direct swap. You can continue to include in your blocks.json while you work on updating imports. Check the Deprecated Libraries and Change Log Summary to review the changes from engine-theme-sdk to arc-themes-components. If any imports have changed you will have errors when running your local environment until they are resolved.

Our recommendation when converting old engine-theme-sdk imports is to cherry-pick the styles and components as-needed. Porting over all of the old v1 theme styles is more challenging and can cause compile issues.

There are several new blocks to be included in your blocks array. These need to be included for local development, but do not need to be added to anywhere in the site itself.

"blocks": [
    ...
    "@wpmedia/alias-tokens",
    "@wpmedia/breakpoint-tokens",
    "@wpmedia/global-phrases-block",
    "@wpmedia/global-tokens",
    "@wpmedia/signing-service-content-source-block"
  ],

You likely have a /resizer url defined by site or a default in blocks.json which will need /v2/ append

  "resizerURL": "/resizer/v2/"

Toggle for blocks styling functionality (required setup to use our design system)

Should you choose to import your own styling system and not utilize our styling compiler, you have the ability to toggle it on/off. By default, styles compiling will be turned off. To use our styles compiling, add the following to your blocks.json file:

 "buildSiteStyles": true,

environment/*.json

New environment variables for the latest image resizer will need to be added to your environment .json files. As well as a siteStyles object that should contain your site ID with the site ID you want the styles mapped to as the value. For a single site, this will be a one-to-one mapping.

 "RESIZER_TOKEN_VERSION": "[check the delivery API for current value]",
  "SIGNING_SERVICE_DEFAULT_APP": "resizer",
    "siteStyles": {
      "daily-intelligencer": "daily-intelligencer"
  }

For multi-site, this enables you to define one-to-many styles. Meaning you could have one set of styles applied to multiple sites. Like in this case, daily-intelligencer and the-gazette would both have the same styling applied to their blocks while karc would have it’s own.

"siteStyles": {
      "daily-intelligencer": "daily-intelligencer",
      "the-gazette": "daily-intelligencer",
      "karc": "karc"
  }

package.json

Update your Arc Fusion CLI to the latest vresion.

npm install --save-dev @arc-fusion/cli@latest

Use at least @2.1.0

npm install --save-dev @arc-fusion/cli@2.1.0

2. Set up Design System

This section helps you setup the Block Design System with your own tokens.

Because you’re on a feature pack that wasn’t initialized with the expected design system structure, you must create the themes folder and files and optionally sync to the latest tokens and pull in a block’s styles.

The root of your arc-themes-feature-pack must include:

|-- themes
    |-- styles
        |-- alias.json
        |-- blocks.json
        |-- breakpoints.json
        |-- components.json
        |-- global.json

And for multi-site usage, you can add an optional sites folder to add site-specific styles:

|-- themes
    |-- sites
        |-- site1
            |-- alias.json
            |-- blocks.json
            |-- breakpoints.json
            |-- components.json
            |-- global.json
        |-- site2
            |-- alias.json
            ...

See How to Design for Arc XP Themes.

Script Setup

First let’s add a script to make this easier. From the root of your feature pack folder, run:

touch arc-themes.js

Copy the following code into the arc-themes.js file:

Large Code Block

Click here to display…

const fs = require('fs');
const https = require('https');
const path = require('path');

function parseArgs(args) {
  const parsedArgs = {};
  for (let i = 0; i < args.length; i += 2) {
    if (args[i].startsWith('--') && args[i + 1]) {
      const key = args[i].substring(2);
      const value = args[i + 1];
      parsedArgs[key] = value;
    }
  }
  return parsedArgs;
}

function createFolderStructure(sites = []) {
  const folders = ['themes', 'themes/styles', sites && 'themes/sites'];
  const files = [
    'themes/styles/alias.json',
    'themes/styles/blocks.json',
    'themes/styles/breakpoints.json',
    'themes/styles/components.json',
    'themes/styles/global.json',
  ];

  sites.forEach((site) => {
    folders.push(`themes/sites/${site}`);
    folders.push(`themes/sites/${site}/styles`);
    const siteStyleFiles = [
      `themes/sites/${site}/styles/alias.json`,
      `themes/sites/${site}/styles/blocks.json`,
      `themes/sites/${site}/styles/breakpoints.json`,
      `themes/sites/${site}/styles/components.json`,
      `themes/sites/${site}/styles/global.json`,
    ];
    files.push(...siteStyleFiles);
  });

  folders.forEach((folder) => {
    if (!fs.existsSync(folder)) {
      fs.mkdirSync(folder);
    }
  });

  files.forEach((file) => {
    if (!fs.existsSync(file)) {
      fs.writeFileSync(file, '{}', 'utf-8');
    }
  });

  console.log('Folder structure created successfully');
}

function fetchTokens(theme, version, site) {
  const tokenUrls = [
    {
      url: `https://raw.githubusercontent.com/WPMedia/arc-themes-blocks/arc-themes-release-version-${version}/blocks/global-tokens/themes/${theme}.json`,
      localFile: site ? `themes/sites/${site}/styles/global.json` : 'themes/styles/global.json',
    },
    {
      url: `https://raw.githubusercontent.com/WPMedia/arc-themes-blocks/arc-themes-release-version-${version}/blocks/alias-tokens/themes/${theme}.json`,
      localFile: site ? `themes/sites/${site}/styles/alias.json` : 'themes/styles/alias.json',
    },
    {
      url: `https://raw.githubusercontent.com/WPMedia/arc-themes-blocks/arc-themes-release-version-${version}/blocks/breakpoint-tokens/themes/${theme}.json`,
      localFile: site
        ? `themes/sites/${site}/styles/breakpoints.json`
        : 'themes/styles/breakpoints.json',
    },
  ];

  tokenUrls.forEach(({ url, localFile }) => {
    https
      .get(url, (res) => {
        let data = '';

        res.on('data', (chunk) => {
          data += chunk;
        });

        res.on('end', () => {
          const remoteData = JSON.parse(data);
          fs.writeFileSync(localFile, JSON.stringify(remoteData, null, 2));
          console.log(`Successfully updated ${localFile}`);
        });
      })
      .on('error', (err) => {
        console.error(`Error: ${err.message}`);
      });
  });
}

function fetchStyles(block, theme, version, site) {
  const url = `https://raw.githubusercontent.com/WPMedia/arc-themes-blocks/arc-themes-release-version-${version}/blocks/${block}/themes/${theme}.json`;
  const writePath = site ? `themes/sites/${site}/styles/blocks.json` : 'themes/styles/blocks.json';
  const localFile = path.join(__dirname, writePath);

  https
    .get(url, (res) => {
      let data = '';

      res.on('data', (chunk) => {
        data += chunk;
      });

      res.on('end', () => {
        const remoteData = JSON.parse(data);
        let localData = {};

        if (fs.existsSync(localFile)) {
          localData = JSON.parse(fs.readFileSync(localFile, 'utf-8'));
        }

        const updatedData = { ...localData, ...remoteData };
        fs.writeFileSync(localFile, JSON.stringify(updatedData, null, 2));
        console.log(`Successfully updated ${localFile}`);
      });
    })
    .on('error', (err) => {
      console.error(`Error: ${err.message}`);
    });
}

function fetchComponentStyles(component, theme, version, site) {
  const url = `https://raw.githubusercontent.com/WPMedia/arc-themes-components/arc-themes-release-version-${version}/src/components/${component}/themes/${theme}.json`;
  const writePath = site
    ? `themes/sites/${site}/styles/components.json`
    : 'themes/styles/components.json';
  const localFile = path.join(__dirname, writePath);

  https
    .get(url, (res) => {
      let data = '';

      res.on('data', (chunk) => {
        data += chunk;
      });

      res.on('end', () => {
        const remoteData = JSON.parse(data);
        let localData = {};

        if (fs.existsSync(localFile)) {
          localData = JSON.parse(fs.readFileSync(localFile, 'utf-8'));
        }

        const updatedData = { ...localData, ...remoteData };
        fs.writeFileSync(localFile, JSON.stringify(updatedData, null, 2));
        console.log(`Successfully updated ${localFile}`);
      });
    })
    .on('error', (err) => {
      console.error(`Error: ${err.message}`);
    });
}

const command = process.argv[2];

if (!command) {
  console.error('Usage: node arc-themes.js <command> [options]');
  process.exit(1);
}

switch (command) {
  case 'init':
    const sites = parseArgs(process.argv.slice(3)).sites
      ? parseArgs(process.argv.slice(3)).sites.split(',')
      : [];
    createFolderStructure(sites);
    break;
  case 'get-tokens':
    const { theme, version, site } = parseArgs(process.argv.slice(3));
    if (!theme || !version) {
      console.error(
        'Usage: node arc-themes.js get-tokens --theme <theme> --version <version> [--site <site>]',
      );
      process.exit(1);
    }
    fetchTokens(theme, version, site);
    break;
  case 'get-styles':
    const {
      block,
      theme: blockTheme,
      version: blockVersion,
      site: blockSite,
    } = parseArgs(process.argv.slice(3));
    if (!block || !blockTheme || !blockVersion) {
      console.error(
        'Usage: node arc-themes.js get-styles --block <block> --theme <theme> --version <version> [--site <site>]',
      );
      process.exit(1);
    }
    fetchStyles(block, blockTheme, blockVersion, blockSite);
    break;
  case 'get-component-styles':
    const {
      component,
      theme: compTheme,
      version: compVersion,
      site: compSite,
    } = parseArgs(process.argv.slice(3));
    if (!component || !compTheme || !compVersion) {
      console.error(
        'Usage: node arc-themes.js get-styles --component <component> --theme <theme> --version <version> [--site <site>]',
      );
      process.exit(1);
    }
    fetchComponentStyles(component, compTheme, compVersion, compSite);
    break;
  default:
    console.error(`Unknown command: ${command}`);
    process.exit(1);
}

Add "arc-themes": "node arc-themes.js" to your package.json to make it easy to execute.

{
  "scripts": {
    ...
    "arc-themes": "node arc-themes.js"
  }
}

Now you can run the script using the following commands.

Initialize Folder Structure

To initialize the folder structure, run:

npm run arc-themes -- init

Or for multi-site clients, run the following command using the site IDs that you would like to initialize in your themes/sites folder:

npm run arc-themes -- init --sites site1,site2,site3

Pull Tokens

To all of the out-of-the-box breakpoints, alias tokens, and global tokens, run:

npm run arc-themes -- get-tokens --theme news --version 2.4.1

Or if you’d like to pull the tokens into one of your site folders, run:

npm run arc-themes -- get-component-styles --component button --theme news --version 2.4.1 --site site1

Warning

Do not run get-tokens on an unsaved file or uncommitted file, it will sync to the latest and overwrite it. This is intended to be done for your initial setup and only after if you were willing to do a git diff. You likely do not need all of these tokens in your local, and by including them all you will be permanently overriding Arc block tokens.

Pull Component Styles

To get the styles for a specific component such as button, run:

npm run arc-themes -- get-component-styles --component button --theme news --version 2.4.1

Or if you’d like to pull the component styles into one of your site folders, run:

npm run arc-themes -- get-component-styles --component button --theme news --version 2.4.1 --site site1

Pull Block Styles

To get the styles for a specific block such as card-list-block, run:

npm run arc-themes -- get-component-styles --component button --theme news --version 2.4.1 --site site1

Or if you’d like to pull the block styles into one of your site folders, run:

npm run arc-themes -- get-styles --block card-list-block --theme news --version 2.4.1 --site site1

The above command is useful if you’ve previously ejected out of an Arc block to apply your own custom styling or have done custom style overrides, this gets you scaffolded out to begin setting the styles you want with the out-of-the-box block again.

Keep in mind if it’s ejected and you removed it from your blocks.json, you’d need to re-add it to your blocks.json array.

If it was custom style overrides but you kept the Arc block installed, you’ll just need to begin transferring them over into the styles object.

3. Migrate to Resizer V2

Coinciding with Themes 2.0, we are moving to a newer version of Arc XP Image Resizer (V2) as part of the continuous improvement efforts of our global SaaS platform. Key changes include moving to a more powerful and reliable option resizing service and the ability for you to add SEO-friendly names for images, which can help your site’s SEO performance. Additionally, with the new Resizer, the authentication token is included in the image ANS and is good for all resize variations, so you won’t have to worry about storing the secret key.

After you upgrade to Themes 2.0, the images in all blocks are fully migrated to Image Resizer V2. However, it is important to note specific image components and blocks deprecations that may require updating during your upgrade to Themes 2.0.

For custom content sources that you’ve built, refer to the Arc XP Learning Center - How to migrate from Resizer V1 to V2: User Guide.

4. Convert Custom Blocks

In Themes 2.0, there are cases where you have custom blocks that you want to convert to using the Themes Design System or there is a change released that requires you to adapt your custom code.

Blocks Styling

In cases where you’ve applied custom style overrides or ejected out of an Arc block only to set your own styling. You can update your themes/blocks.json with the blocks and style changes you need.

Refer to the Basics: Blocks guide.

Blocks Styling Using Logical Properties

With the update to support right-to-left languages, blocks now uses CSS logical properties. These properties will conflict with older, physical and shorthand CSS properties causing unexpected results. If you are using custom styling in your blocks, some updates will need to be made, such as using inline-size and max-inline-size, instead of width and max-width. For the full list of CSS logical properties and their older equivalents, see CSS logical properties and values.

arc-themes-feature-pack/themes/styles/blocks.json

{
  "byline": {
    "styles": {
      "default": {
        "font-size": "$body-font-weight-small",
        "line-height": "$body-line-height-tiny",
        "components": {
          "link": {
            "text-decoration": "green wavy underline"
          },
          "link-hover": {
            "text-decoration": "green dashed underline"
          }
        }
      },
      "desktop": {}
    }
  }
}

Deprecated Libraries

@wpmedia/engine-theme-sdk and @wpmedia/shared-styles had components, functions, and utilities available to construct your own custom blocks. Most of these have been shifted into the @wpmedia/arc-themes-components package as a direct replacement.

If you are importing utilities, components, or functions from engine-theme-sdk or shared-styles, refer to the following lists to identify which can be converted to importing from @wpmedia/arc-themes-components and which are deprecated where you must replace the import with your own code or copy the deprecated import into your own codebase as custom code to continue using it.

Deprecated Packages

Below is a list of all exports from our deprecated engine-theme-sdk and shared-styles libraries, indicating if there is library they’ve been migrated to and if the 2.0 implementation is a direct replacement (meaning you can just change the library imported from). If the Direct Replacement column is “TRUE”, it is a direct swap to the new library with no code update. There is also a Github link when the replacement exists, or an example of the component used on a block.

Note

If there is no migrated library it is fully deprecated with no replacement supported by Arc XP. You may add your own custom components and blocks as needed.

@wpmedia/blocks (including image components)

Large Table

Click here to display…

Deprecated	New Library	Reference Link	Replacement	Direct Replacement	Migration Note
ArticleDate	@wpmedia/arc-themes-components	date-block	Date	TRUE
resizer-image-block	@wpmedia/arc-themes-components	example from small-promo-block	see migration notes	FALSE	Depending on the use case, components like  imageANSToImageSrc or getImageFromANS should be used. The author-content-source-block is to retrieve the auth information to build imageURL.
PlaceholderImage	@wpmedia/arc-themes-components	example from card-list-block	fallbackImage	FALSE	fallbackImage is used in promoImageParams
extractImageFromStory	@wpmedia/arc-themes-components	example from gallery-block	imageANSToImageSrc	FALSE
extractResizedParams	@wpmedia/arc-themes-components	example from small-promo-block	getImageFromANS util	FALSE

@wpmedia/shared-style

Large Table

Click here to display…

Deprecated	New Library	Replacement	Direct Replacement	Migration Note
Button	@wpmedia/arc-themes-components	Button	FALSE	See notes below on Button attribute replacements
BUTTON_SIZES		Size	FALSE	Size attribute of Button tag
BUTTON_STYLES		variant	FALSE	variant attribute of Button tag
BUTTON_TYPES		iconLeft, iconRight	FALSE	Icons are optional. When used, add iconLeft and/or iconRight to Button tag
Byline	@wpmedia/arc-themes-blocks	Byline	FALSE	Moved to Arc Themes Blocks as a default OOTB block
ExtraLargePromoPresentation	NONE	NONE	FALSE
Heading	@wpmedia/arc-themes-components	Heading	TRUE
HeadingSection	@wpmedia/arc-themes-components	HeadingSection	TRUE
LargePromoPresentation	NONE	NONE	FALSE
Overline	@wpmedia/arc-themes-components	Overline	TRUE
PrimaryFont	NONE	NONE	FALSE	see style properties
PromoDate	NONE	NONE	FALSE
PromoDescription	NONE	NONE	FALSE
PromoHeadline	NONE	NONE	FALSE
PromoImage	NONE	NONE	FALSE
PromoLabel	@wpmedia/arc-themes-components	labelIconName	FALSE	Label type is been identified by the labelIconName function when useful
SecondaryFont	@wpmedia/arc-themes-components	Paragraph	FALSE	Replaced with paragraph component to specify the text content
MediumPromoPresentation	NONE	NONE	FALSE
SmallPromoContainer	NONE	NONE	FALSE
SmallPromoPresentation	NONE	NONE	FALSE
SmallPromoStyles	NONE	NONE	FALSE
getNavSpecificSecondaryButtonTheme	NONE	NONE	FALSE
getNavSpecificPrimaryButtonTheme	NONE	NONE	FALSE
FormInputField	NONE	NONE	FALSE
FIELD_TYPES	NONE	NONE	FALSE

@wpmedia/engine-theme-sdk

Large Table

Click here to display…

Deprecated	New Library	Replacement	Direct Replacement	Migration Note
localizeDate	@wpmedia/arc-themes-components	localizeDate	TRUE
localizeDateTime	@wpmedia/arc-themes-components	localizeDateTime	TRUE
extractVideoEmbedFromStory	NONE	NONE	FALSE
isServerSide	@wpmedia/arc-themes-components	isServerSide	TRUE
constructSocialURL	@wpmedia/arc-themes-components	formatSocialURL	FALSE
formatURL	@wpmedia/arc-themes-components	formatURL	TRUE
ArcLogo	NONE	NONE	FALSE
ErrorBoundary	NONE	NONE	FALSE
EventEmitter	@wpmedia/arc-themes-components	EventEmitter	TRUE
Gallery	@@wpmedia/arc-themes-components	Carousel	FALSE
Image	@wpmedia/arc-themes-components	Image	FALSE
ImageMetadata	NONE	NONE	FALSE
LazyLoad	@wpmedia/arc-themes-components	LazyLoad	TRUE
Lightbox	NONE	NONE	FALSE
MetaData	@wpmedia/arc-themes-components	MetaData	TRUE
Video	@wpmedia/arc-themes-components	Video	TRUE
VideoPlayer	NONE	NONE	FALSE
videoPlayerCustomFields	NONE	NONE	FALSE
videoPlayerCustomFieldTags	NONE	NONE	FALSE
ArrowDownIcon	NONE	NONE	FALSE
ArrowLeftIcon	@wpmedia/arc-themes-components	ArrowLeft	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
ArrowRightIcon	@wpmedia/arc-themes-components	ArrowRight	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
ArrowUpIcon	NONE	NONE	FALSE
BackwardIcon	NONE	NONE	FALSE
BellIcon	NONE	NONE	FALSE
CalendarIcon	NONE	NONE	FALSE
CameraIcon	@wpmedia/arc-themes-components	Camera	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
ChartIcon	NONE	NONE	FALSE
CheckIcon	NONE	NONE	FALSE
ChevronDownIcon	@wpmedia/arc-themes-components	ChevronDown	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
ChevronLeftIcon	@wpmedia/arc-themes-components	ChevronLeft	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
ChevronRightIcon	@wpmedia/arc-themes-components	ChevronRight	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
ChevronUpIcon	@wpmedia/arc-themes-components	ChevronUp	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
ClosedCaptioningIcon	NONE	NONE	FALSE
CloseIcon	@wpmedia/arc-themes-components	Close	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
CogIcon	NONE	NONE	FALSE
CommentsIcon	NONE	NONE	FALSE
DeleteIcon	NONE	NONE	FALSE
DownloadIcon	NONE	NONE	FALSE
EditIcon	NONE	NONE	FALSE
EllipsisHorizontalIcon	NONE	NONE	FALSE
EllipsisVerticalIcon	NONE	NONE	FALSE
EnvelopeIcon	@wpmedia/arc-themes-components	Envelope	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
EnvelopeOpenIcon	NONE	NONE	FALSE
ErrorIcon	NONE	NONE	FALSE
ExternalLinkIcon	NONE	NONE	FALSE
FacebookAltIcon	NONE	NONE	FALSE
FacebookIcon	@wpmedia/arc-themes-components	Facebook	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
ForwardIcon	NONE	NONE	FALSE
FullscreenIcon	@wpmedia/arc-themes-components	Fullscreen	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
GiftIcon	NONE	NONE	FALSE
GridIcon	NONE	NONE	FALSE
GripVerticalIcon	NONE	NONE	FALSE
HamburgerMenuIcon	@wpmedia/arc-themes-components	HamburgerMenu	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
HeadphonesIcon	NONE	NONE	FALSE
HomeIcon	NONE	NONE	FALSE
InstagramIcon	@wpmedia/arc-themes-components	Instagram	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
LinkedInAltIcon	NONE	NONE	FALSE
LinkedInIcon	@wpmedia/arc-themes-components	LinkedIn	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
LinkIcon	@wpmedia/arc-themes-components	Link	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
LockIcon	NONE	NONE	FALSE
MediumIcon	@wpmedia/arc-themes-components	Medium	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
NextIcon	@wpmedia/arc-themes-components	Next	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
PageIcon	NONE	NONE	FALSE
PauseCircleIcon	@wpmedia/arc-themes-components	PauseCircle	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
PauseIcon	@wpmedia/arc-themes-components	Pause	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
PhoneIcon	NONE	NONE	FALSE
PinterestAltIcon	NONE	NONE	FALSE
PinterestIcon	@wpmedia/arc-themes-components	Pinterest	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
PlayCircleIcon	NONE	NONE	FALSE
PlayIcon	@wpmedia/arc-themes-components	Play	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
PlusIcon	NONE	NONE	FALSE
PreviousIcon	@wpmedia/arc-themes-components	Previous	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
PrintIcon	@wpmedia/arc-themes-components	Print	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
RedditIcon	@wpmedia/arc-themes-components	Reddit	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
RssIcon	@wpmedia/arc-themes-components	Rss	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
SearchIcon	@wpmedia/arc-themes-components	Search	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
ShareIcon	@wpmedia/arc-themes-components	Share	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
ShoppingCartIcon	NONE	NONE	FALSE
SnapchatIcon	@wpmedia/arc-themes-components	Snapchat	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
SoundCloudIcon	@wpmedia/arc-themes-components	SoundCloud	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
SoundOffIcon	@wpmedia/arc-themes-components	SoundOff	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
SoundOnIcon	@wpmedia/arc-themes-components	SoundOn	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
StarHalfIcon	NONE	NONE	FALSE
StarIcon	NONE	NONE	FALSE
TumblrIcon	@wpmedia/arc-themes-components	Tumblr	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
TwitchIcon	@wpmedia/arc-themes-components	Twitch	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
TwitterAltIcon	NONE	NONE	FALSE
TwitterIcon	@wpmedia/arc-themes-components	Twitter	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
UnlockIcon	NONE	NONE	FALSE
UserIcon	@wpmedia/arc-themes-components	User	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
WhatsAppIcon	@wpmedia/arc-themes-components	WhatsApp	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
YoutubeAltIcon	NONE	NONE	FALSE
YoutubeIcon	@wpmedia/arc-themes-components	Youtube	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
ZoomInIcon	@wpmedia/arc-themes-components	ZoomIn	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />
ZoomOutIcon	@wpmedia/arc-themes-components	ZoomOut	FALSE	import is now from `{ Icon }` Usage: <Icon name="IconName" />news-theme-css

@wpmedia/news-theme-css

news-theme-css is not used by any Arc Block in Themes 2.0, and the Arc Themes Design System is replacing the need for the @wpmedia/news-theme-css dependency. With this release of Themes, there is greater flexibility to define your own global CSS variable tokens and aliases through the Arc Themes Design System, as well as applying targeted block styling to every Arc Block. The dependency is no longer included when deploying with Theme Settings and it does not need included in your blocks.json when developing locally. The removal of these dependencies reduces unnecessary CSS in your bundle.

Deprecated	New Library	Reference Link	Replacement	Direct Replacement	Migration Note
LinkedBackgroundHover	@wpmedia/arc-themes-components	- pill - link	Pill	FALSE	The Pill component will render in span for use with backgrounds. If an href is passed as a property, the Pill will render as a simple hyperlink for internal navigation, and is not intended for external navigation. For this functionality, use the Link component as a wrap to the Pill.

If you are using any CSS from @wpmedia/news-theme-css, you must replace it or copy the CSS into your feature pack custom styles. This includes using the JS utilities.

import { framework, calculateRem } from '@wpmedia/news-theme-css/js/framework';

If you need to migrate over any Sass (functions, utilities, variables):

• Link to news-theme-css Sass

If you have specific classes you’d want to copy out as pure css:

• Link to news-theme.css

List of news-theme-css classes

To identify what classes you have in use, refer to the list below (and further down is a helper script to run in your codebase).

Long List

Click here to display…

[
  "margin-xxs-left",
  "margin-xxs-right",
  "margin-xxs-top",
  "margin-xxs-bottom",
  "margin-xxs-all",
  "margin-xs-left",
  "margin-xs-right",
  "margin-xs-top",
  "margin-xs-bottom",
  "margin-xs-all",
  "margin-sm-left",
  "margin-sm-right",
  "margin-sm-top",
  "margin-sm-bottom",
  "margin-sm-all",
  "margin-md-left",
  "margin-md-right",
  "margin-md-top",
  "margin-md-bottom",
  "margin-md-all",
  "margin-lg-left",
  "margin-lg-right",
  "margin-lg-top",
  "margin-lg-bottom",
  "margin-lg-all",
  "margin-xl-left",
  "margin-xl-right",
  "margin-xl-top",
  "margin-xl-bottom",
  "margin-xl-all",
  "margin-xxl-left",
  "margin-xxl-right",
  "margin-xxl-top",
  "margin-xxl-bottom",
  "margin-xxl-all",
  "block-margin-bottom",
  "padding-xxs-left",
  "padding-xxs-right",
  "padding-xxs-top",
  "padding-xxs-bottom",
  "padding-xxs-all",
  "padding-xs-left",
  "padding-xs-right",
  "padding-xs-top",
  "padding-xs-bottom",
  "padding-xs-all",
  "padding-sm-left",
  "padding-sm-right",
  "padding-sm-top",
  "padding-sm-bottom",
  "padding-sm-all",
  "padding-md-left",
  "padding-md-right",
  "padding-md-top",
  "padding-md-bottom",
  "padding-md-all",
  "padding-lg-left",
  "padding-lg-right",
  "padding-lg-top",
  "padding-lg-bottom",
  "padding-lg-all",
  "padding-xl-left",
  "padding-xl-right",
  "padding-xl-top",
  "padding-xl-bottom",
  "padding-xl-all",
  "padding-xxl-left",
  "padding-xxl-right",
  "padding-xxl-top",
  "padding-xxl-bottom",
  "padding-xxl-all",
  "defcon",
  "h1-primary",
  "h1-secondary",
  "h2-primary",
  "h2-secondary",
  "h3-primary",
  "h3-secondary",
  "h4-primary",
  "h4-secondary",
  "h5-primary",
  "h5-secondary",
  "h6-primary",
  "h6-secondary",
  "container-fluid",
  "container",
  "row",
  "reduce-internal-row-col-gap",
  "col-sm-1",
  "col-sm-md-1",
  "col-sm-lg-1",
  "col-sm-xl-1",
  "col-sm-2",
  "col-sm-md-2",
  "col-sm-lg-2",
  "col-sm-xl-2",
  "col-sm-3",
  "col-sm-md-3",
  "col-sm-lg-3",
  "col-sm-xl-3",
  "col-sm-4",
  "col-sm-md-4",
  "col-sm-lg-4",
  "col-sm-xl-4",
  "col-sm-5",
  "col-sm-md-5",
  "col-sm-lg-5",
  "col-sm-xl-5",
  "col-sm-6",
  "col-sm-md-6",
  "col-sm-lg-6",
  "col-sm-xl-6",
  "col-sm-7",
  "col-sm-md-7",
  "col-sm-lg-7",
  "col-sm-xl-7",
  "col-sm-8",
  "col-sm-md-8",
  "col-sm-lg-8",
  "col-sm-xl-8",
  "col-sm-9",
  "col-sm-md-9",
  "col-sm-lg-9",
  "col-sm-xl-9",
  "col-sm-10",
  "col-sm-md-10",
  "col-sm-lg-10",
  "col-sm-xl-10",
  "col-sm-11",
  "col-sm-md-11",
  "col-sm-lg-11",
  "col-sm-xl-11",
  "col-sm-12",
  "col-sm-md-12",
  "col-sm-lg-12",
  "col-sm-xl-12",
  "col-md-1",
  "col-md-lg-1",
  "col-md-xl-1",
  "col-md-2",
  "col-md-lg-2",
  "col-md-xl-2",
  "col-md-3",
  "col-md-lg-3",
  "col-md-xl-3",
  "col-md-4",
  "col-md-lg-4",
  "col-md-xl-4",
  "col-md-5",
  "col-md-lg-5",
  "col-md-xl-5",
  "col-md-6",
  "col-md-lg-6",
  "col-md-xl-6",
  "col-md-7",
  "col-md-lg-7",
  "col-md-xl-7",
  "col-md-8",
  "col-md-lg-8",
  "col-md-xl-8",
  "col-md-9",
  "col-md-lg-9",
  "col-md-xl-9",
  "col-md-10",
  "col-md-lg-10",
  "col-md-xl-10",
  "col-md-11",
  "col-md-lg-11",
  "col-md-xl-11",
  "col-md-12",
  "col-md-lg-12",
  "col-md-xl-12",
  "col-lg-1",
  "col-lg-xl-1",
  "col-lg-2",
  "col-lg-xl-2",
  "col-lg-3",
  "col-lg-xl-3",
  "col-lg-4",
  "col-lg-xl-4",
  "col-lg-5",
  "col-lg-xl-5",
  "col-lg-6",
  "col-lg-xl-6",
  "col-lg-7",
  "col-lg-xl-7",
  "col-lg-8",
  "col-lg-xl-8",
  "col-lg-9",
  "col-lg-xl-9",
  "col-lg-10",
  "col-lg-xl-10",
  "col-lg-11",
  "col-lg-xl-11",
  "col-lg-12",
  "col-lg-xl-12",
  "col-xl-1",
  "col-xl-2",
  "col-xl-3",
  "col-xl-4",
  "col-xl-5",
  "col-xl-6",
  "col-xl-7",
  "col-xl-8",
  "col-xl-9",
  "col-xl-10",
  "col-xl-11",
  "col-xl-12",
  "ie-flex-100-percent-sm",
  "vertical-centered",
  "embed-responsive",
  "embed-responsive-item",
  "btn",
  "3s",
  "btn-block",
  "btn-lg",
  "5rem",
  "btn-sm",
  "disabled",
  "btn-outline",
  "btn-success",
  "btn-warning",
  "btn-danger",
  "btn-outline-success",
  "btn-outline-warning",
  "btn-outline-danger",
  "chain-container",
  "chain-col",
  "layout-section",
  "wrap-bottom",
]

news-theme-css class finder script

To help identify where these are used in your codebase, you can try using this helper script which will produce the file news-theme-css-results.json that lists every class used in your feature pack files with it’s line number.

To create and use the helper script, follow these steps:

1. Install glob to help search your repo. You can remove this after.

npm i glob --save-dev

2. Copy the following script into the file class-finder.js inside your feature pack folder.

Large Code Block

Click here to display…

const fs = require("fs");
const { glob } = require("glob");
const readline = require("readline");


async function processFile(file, deprecatedClasses) {
  const fileStream = fs.createReadStream(file);
  const rl = readline.createInterface({
    input: fileStream,
    crlfDelay: Infinity,
  });


  let lineNumber = 0;
  const highConfidenceOccurrences = [];
  const lowConfidenceOccurrences = [];


  for await (const line of rl) {
    lineNumber++;


    deprecatedClasses.forEach((className) => {
      const classAttributeRegex = new RegExp(
        `class(?:Name)?\\s*=\\s*["'][^"']*\\b${className}\\b[^"']*["']`,
        "i"
      );
      const variableAssignmentRegex = new RegExp(
        `\\s*=\\s*["'][^"']*\\b${className}\\b[^"']*["']`,
        "i"
      );
      const looseMatchRegex = new RegExp(`\\b${className}\\b`, "i");


      if (classAttributeRegex.test(line) || variableAssignmentRegex.test(line)) {
        highConfidenceOccurrences.push({
          file,
          lineNumber,
          className,
          confidence: "high",
        });
      } else if (looseMatchRegex.test(line)) {
        lowConfidenceOccurrences.push({
          file,
          lineNumber,
          className,
          confidence: "low",
        });
      }
    });
  }


  fileStream.close();
  return { highConfidenceOccurrences, lowConfidenceOccurrences };
}


async function main() {
  const deprecatedClasses = [
    "test-class",
    "margin-xxs-left",
    "margin-xxs-right",
    "margin-xxs-top",
    "margin-xxs-bottom",
    "margin-xxs-all",
    "margin-xs-left",
    "margin-xs-right",
    "margin-xs-top",
    "margin-xs-bottom",
    "margin-xs-all",
    "margin-sm-left",
    "margin-sm-right",
    "margin-sm-top",
    "margin-sm-bottom",
    "margin-sm-all",
    "margin-md-left",
    "margin-md-right",
    "margin-md-top",
    "margin-md-bottom",
    "margin-md-all",
    "margin-lg-left",
    "margin-lg-right",
    "margin-lg-top",
    "margin-lg-bottom",
    "margin-lg-all",
    "margin-xl-left",
    "margin-xl-right",
    "margin-xl-top",
    "margin-xl-bottom",
    "margin-xl-all",
    "margin-xxl-left",
    "margin-xxl-right",
    "margin-xxl-top",
    "margin-xxl-bottom",
    "margin-xxl-all",
    "block-margin-bottom",
    "padding-xxs-left",
    "padding-xxs-right",
    "padding-xxs-top",
    "padding-xxs-bottom",
    "padding-xxs-all",
    "padding-xs-left",
    "padding-xs-right",
    "padding-xs-top",
    "padding-xs-bottom",
    "padding-xs-all",
    "padding-sm-left",
    "padding-sm-right",
    "padding-sm-top",
    "padding-sm-bottom",
    "padding-sm-all",
    "padding-md-left",
    "padding-md-right",
    "padding-md-top",
    "padding-md-bottom",
    "padding-md-all",
    "padding-lg-left",
    "padding-lg-right",
    "padding-lg-top",
    "padding-lg-bottom",
    "padding-lg-all",
    "padding-xl-left",
    "padding-xl-right",
    "padding-xl-top",
    "padding-xl-bottom",
    "padding-xl-all",
    "padding-xxl-left",
    "padding-xxl-right",
    "padding-xxl-top",
    "padding-xxl-bottom",
    "padding-xxl-all",
    "defcon",
    "h1-primary",
    "h1-secondary",
    "h2-primary",
    "h2-secondary",
    "h3-primary",
    "h3-secondary",
    "h4-primary",
    "h4-secondary",
    "h5-primary",
    "h5-secondary",
    "h6-primary",
    "h6-secondary",
    "container-fluid",
    "container",
    "row",
    "reduce-internal-row-col-gap",
    "col-sm-1",
    "col-sm-md-1",
    "col-sm-lg-1",
    "col-sm-xl-1",
    "col-sm-2",
    "col-sm-md-2",
    "col-sm-lg-2",
    "col-sm-xl-2",
    "col-sm-3",
    "col-sm-md-3",
    "col-sm-lg-3",
    "col-sm-xl-3",
    "col-sm-4",
    "col-sm-md-4",
    "col-sm-lg-4",
    "col-sm-xl-4",
    "col-sm-5",
    "col-sm-md-5",
    "col-sm-lg-5",
    "col-sm-xl-5",
    "col-sm-6",
    "col-sm-md-6",
    "col-sm-lg-6",
    "col-sm-xl-6",
    "col-sm-7",
    "col-sm-md-7",
    "col-sm-lg-7",
    "col-sm-xl-7",
    "col-sm-8",
    "col-sm-md-8",
    "col-sm-lg-8",
    "col-sm-xl-8",
    "col-sm-9",
    "col-sm-md-9",
    "col-sm-lg-9",
    "col-sm-xl-9",
    "col-sm-10",
    "col-sm-md-10",
    "col-sm-lg-10",
    "col-sm-xl-10",
    "col-sm-11",
    "col-sm-md-11",
    "col-sm-lg-11",
    "col-sm-xl-11",
    "col-sm-12",
    "col-sm-md-12",
    "col-sm-lg-12",
    "col-sm-xl-12",
    "col-md-1",
    "col-md-lg-1",
    "col-md-xl-1",
    "col-md-2",
    "col-md-lg-2",
    "col-md-xl-2",
    "col-md-3",
    "col-md-lg-3",
    "col-md-xl-3",
    "col-md-4",
    "col-md-lg-4",
    "col-md-xl-4",
    "col-md-5",
    "col-md-lg-5",
    "col-md-xl-5",
    "col-md-6",
    "col-md-lg-6",
    "col-md-xl-6",
    "col-md-7",
    "col-md-lg-7",
    "col-md-xl-7",
    "col-md-8",
    "col-md-lg-8",
    "col-md-xl-8",
    "col-md-9",
    "col-md-lg-9",
    "col-md-xl-9",
    "col-md-10",
    "col-md-lg-10",
    "col-md-xl-10",
    "col-md-11",
    "col-md-lg-11",
    "col-md-xl-11",
    "col-md-12",
    "col-md-lg-12",
    "col-md-xl-12",
    "col-lg-1",
    "col-lg-xl-1",
    "col-lg-2",
    "col-lg-xl-2",
    "col-lg-3",
    "col-lg-xl-3",
    "col-lg-4",
    "col-lg-xl-4",
    "col-lg-5",
    "col-lg-xl-5",
    "col-lg-6",
    "col-lg-xl-6",
    "col-lg-7",
    "col-lg-xl-7",
    "col-lg-8",
    "col-lg-xl-8",
    "col-lg-9",
    "col-lg-xl-9",
    "col-lg-10",
    "col-lg-xl-10",
    "col-lg-11",
    "col-lg-xl-11",
    "col-lg-12",
    "col-lg-xl-12",
    "col-xl-1",
    "col-xl-2",
    "col-xl-3",
    "col-xl-4",
    "col-xl-5",
    "col-xl-6",
    "col-xl-7",
    "col-xl-8",
    "col-xl-9",
    "col-xl-10",
    "col-xl-11",
    "col-xl-12",
    "ie-flex-100-percent-sm",
    "vertical-centered",
    "embed-responsive",
    "embed-responsive-item",
    "btn",
    "3s",
    "btn-block",
    "btn-lg",
    "5rem",
    "btn-sm",
    "disabled",
    "btn-outline",
    "btn-success",
    "btn-warning",
    "btn-danger",
    "btn-outline-success",
    "btn-outline-warning",
    "btn-outline-danger",
    "chain-container",
    "chain-col",
    "layout-section",
    "wrap-bottom",
  ];


  // Adjust the file pattern according to the project structure
  const filePattern = "**/*.{html,js,jsx,ts,tsx}";
  const globOptions = {
    ignore: "**/node_modules/**",
  };


  glob(filePattern, globOptions, async (err, files) => {
    if (err) {
      console.error("Error finding files:", err);
      return;
    }


    const allOccurrences = {
      highConfidence: [],
      lowConfidence: [],
    };


    for (const file of files) {
      try {
        const stats = fs.statSync(file);


        if (stats.isDirectory()) {
          continue;
        }


        const { highConfidenceOccurrences, lowConfidenceOccurrences } = await processFile(
          file,
          deprecatedClasses
        );
        allOccurrences.highConfidence.push(...highConfidenceOccurrences);
        allOccurrences.lowConfidence.push(...lowConfidenceOccurrences);
      } catch (error) {
        console.error(`Error processing file ${file}:`, error);
      }
    }


    fs.writeFile("news-theme-css-results.json", JSON.stringify(allOccurrences, null, 2), "utf8", (err) => {
      if (err) {
        console.error("Error writing news-theme-css-results.json:", err);
        return;
      }


      console.log("Results successfully saved to news-theme-css-results.json");
    });
  });
}


main();

3. Run the following command:

node class-finder.js

styleProperties

Defining styleProperties in blocks.json and Theme Settings is no longer needed with Arc Themes 2.0. These properties are:

• primary-font
• secondary-font
• primary-color

Users could then import getThemeStyle from 'fusion:themes'; in their feature pack to use the same style properties the Arc Blocks used. Arc Blocks no longer uses these style properties in Themes 2.0 because the Design System is far more robust and enables defining any number of style properties using global tokens and aliases.

Theme Settings no longer displays fields to define these properties, and you can remove them from your blocks.json styleProperties key. If you are importing from getThemeStyle in custom code, these values would no longer be defined, and you must update your custom code.

Change Log Summary

Key Highlights

• Arc Themes Design System
• Arc Block Styling
• Arc Components
• Resizer v2 support

Breaking Changes

engine-theme-sdk

• @wpmedia/engine-theme-sdk package has been replaced by @wpmedia/arc-themes-components
• See deprecated packages

news-theme-css

Arc Blocks do not use news-theme-css, and the Arc Themes Design System is replacing the need for the @wpmedia/news-theme-css dependency. With this release of Themes, there is greater flexibility to define your own global CSS variable tokens and aliases through the Arc Themes Design System, as well as applying targeted block styling to every Arc Block. The dependency is no longer included when deploying with Theme Settings, and it does not need included in your blocks.json when developing locally. The removal of these reduces unnecessary CSS in your bundle.

If you are using any CSS from @wpmedia/news-theme-css, you must replace it.

Deprecated news-theme-css classes in Themes 2.0:

Long List

Click here to display…

[
  "margin-xxs-left",
  "margin-xxs-right",
  "margin-xxs-top",
  "margin-xxs-bottom",
  "margin-xxs-all",
  "margin-xs-left",
  "margin-xs-right",
  "margin-xs-top",
  "margin-xs-bottom",
  "margin-xs-all",
  "margin-sm-left",
  "margin-sm-right",
  "margin-sm-top",
  "margin-sm-bottom",
  "margin-sm-all",
  "margin-md-left",
  "margin-md-right",
  "margin-md-top",
  "margin-md-bottom",
  "margin-md-all",
  "margin-lg-left",
  "margin-lg-right",
  "margin-lg-top",
  "margin-lg-bottom",
  "margin-lg-all",
  "margin-xl-left",
  "margin-xl-right",
  "margin-xl-top",
  "margin-xl-bottom",
  "margin-xl-all",
  "margin-xxl-left",
  "margin-xxl-right",
  "margin-xxl-top",
  "margin-xxl-bottom",
  "margin-xxl-all",
  "block-margin-bottom",
  "padding-xxs-left",
  "padding-xxs-right",
  "padding-xxs-top",
  "padding-xxs-bottom",
  "padding-xxs-all",
  "padding-xs-left",
  "padding-xs-right",
  "padding-xs-top",
  "padding-xs-bottom",
  "padding-xs-all",
  "padding-sm-left",
  "padding-sm-right",
  "padding-sm-top",
  "padding-sm-bottom",
  "padding-sm-all",
  "padding-md-left",
  "padding-md-right",
  "padding-md-top",
  "padding-md-bottom",
  "padding-md-all",
  "padding-lg-left",
  "padding-lg-right",
  "padding-lg-top",
  "padding-lg-bottom",
  "padding-lg-all",
  "padding-xl-left",
  "padding-xl-right",
  "padding-xl-top",
  "padding-xl-bottom",
  "padding-xl-all",
  "padding-xxl-left",
  "padding-xxl-right",
  "padding-xxl-top",
  "padding-xxl-bottom",
  "padding-xxl-all",
  "defcon",
  "h1-primary",
  "h1-secondary",
  "h2-primary",
  "h2-secondary",
  "h3-primary",
  "h3-secondary",
  "h4-primary",
  "h4-secondary",
  "h5-primary",
  "h5-secondary",
  "h6-primary",
  "h6-secondary",
  "container-fluid",
  "container",
  "row",
  "reduce-internal-row-col-gap",
  "col-sm-1",
  "col-sm-md-1",
  "col-sm-lg-1",
  "col-sm-xl-1",
  "col-sm-2",
  "col-sm-md-2",
  "col-sm-lg-2",
  "col-sm-xl-2",
  "col-sm-3",
  "col-sm-md-3",
  "col-sm-lg-3",
  "col-sm-xl-3",
  "col-sm-4",
  "col-sm-md-4",
  "col-sm-lg-4",
  "col-sm-xl-4",
  "col-sm-5",
  "col-sm-md-5",
  "col-sm-lg-5",
  "col-sm-xl-5",
  "col-sm-6",
  "col-sm-md-6",
  "col-sm-lg-6",
  "col-sm-xl-6",
  "col-sm-7",
  "col-sm-md-7",
  "col-sm-lg-7",
  "col-sm-xl-7",
  "col-sm-8",
  "col-sm-md-8",
  "col-sm-lg-8",
  "col-sm-xl-8",
  "col-sm-9",
  "col-sm-md-9",
  "col-sm-lg-9",
  "col-sm-xl-9",
  "col-sm-10",
  "col-sm-md-10",
  "col-sm-lg-10",
  "col-sm-xl-10",
  "col-sm-11",
  "col-sm-md-11",
  "col-sm-lg-11",
  "col-sm-xl-11",
  "col-sm-12",
  "col-sm-md-12",
  "col-sm-lg-12",
  "col-sm-xl-12",
  "col-md-1",
  "col-md-lg-1",
  "col-md-xl-1",
  "col-md-2",
  "col-md-lg-2",
  "col-md-xl-2",
  "col-md-3",
  "col-md-lg-3",
  "col-md-xl-3",
  "col-md-4",
  "col-md-lg-4",
  "col-md-xl-4",
  "col-md-5",
  "col-md-lg-5",
  "col-md-xl-5",
  "col-md-6",
  "col-md-lg-6",
  "col-md-xl-6",
  "col-md-7",
  "col-md-lg-7",
  "col-md-xl-7",
  "col-md-8",
  "col-md-lg-8",
  "col-md-xl-8",
  "col-md-9",
  "col-md-lg-9",
  "col-md-xl-9",
  "col-md-10",
  "col-md-lg-10",
  "col-md-xl-10",
  "col-md-11",
  "col-md-lg-11",
  "col-md-xl-11",
  "col-md-12",
  "col-md-lg-12",
  "col-md-xl-12",
  "col-lg-1",
  "col-lg-xl-1",
  "col-lg-2",
  "col-lg-xl-2",
  "col-lg-3",
  "col-lg-xl-3",
  "col-lg-4",
  "col-lg-xl-4",
  "col-lg-5",
  "col-lg-xl-5",
  "col-lg-6",
  "col-lg-xl-6",
  "col-lg-7",
  "col-lg-xl-7",
  "col-lg-8",
  "col-lg-xl-8",
  "col-lg-9",
  "col-lg-xl-9",
  "col-lg-10",
  "col-lg-xl-10",
  "col-lg-11",
  "col-lg-xl-11",
  "col-lg-12",
  "col-lg-xl-12",
  "col-xl-1",
  "col-xl-2",
  "col-xl-3",
  "col-xl-4",
  "col-xl-5",
  "col-xl-6",
  "col-xl-7",
  "col-xl-8",
  "col-xl-9",
  "col-xl-10",
  "col-xl-11",
  "col-xl-12",
  "ie-flex-100-percent-sm",
  "vertical-centered",
  "embed-responsive",
  "embed-responsive-item",
  "btn",
  "3s",
  "btn-block",
  "btn-lg",
  "5rem",
  "btn-sm",
  "disabled",
  "btn-outline",
  "btn-success",
  "btn-warning",
  "btn-danger",
  "btn-outline-success",
  "btn-outline-warning",
  "btn-outline-danger",
  "chain-container",
  "chain-col",
  "layout-section",
  "wrap-bottom",
]

Theme Settings

styleProperties

Defining styleProperties in blocks.json and Theme Settings is no longer needed with Arc Themes 2.0. These properties are:

• primary-font
• secondary-font
• primary-color

Users could then import getThemeStyle from 'fusion:themes'; in their feature pack to use the same style properties the Arc Blocks used. These are no longer used by Arc Blocks in Themes 2.0 as the Design System is far more robust and enables defining any number of style properties using global tokens and aliases.

Theme Settings will no longer display fields to define these properties, and they can be removed from your blocks.json styleProperties key. If you are importing from getThemeStyle in custom code, these values would no longer be defined, you will need to update your custom code

siteProperties

Deprecated site properties include:

• navColor (Navigation Bar Color Scheme)
• lightBackgroundLogo (Dark Logo)

The navigation bar properties, including color, may be styled using the new Blocks Styling.

The logo fields have been consolidated, logos may be styled for any background color using Blocks Styling.