Themes 2.0 FAQ
Introduction
Arc XP is excited to announce the release of Themes 2.0, which introduces the ability to extensively customize the styling of Themes components and blocks. Since the launch of Themes blocks, we’ve heard that many customers want greater control of the look-and-feel of their Themes website while staying on the upgrade path, and this release makes that possible.
The new architecture in Themes 2.0 enables styling of out-of-the-box blocks, along with a set of atomic components for you to style and compose within your custom blocks. The robust design system based on global tokens, breakpoints, and alias tokens gives you a flexible and scalable solution to create a website that represents your brand. For example, your organization may want to implement a particular button styling. Your development team can update the style in the appropriate styles folder, and that change applies wherever the button component is used.
Our developer documentation has all the details on how to utilize the block styling configurations. Our goal is that you can now utilize more Themes blocks without needing to fork them – which means your organization can spend less time on custom code maintenance.
Blocks Styling
Where can I learn more about the styling capabilities in Themes 2.0?
You can find the new design system details in our Themes Design System documentation.
What component and block tokens are supported?
You can view a full list of supported tokens here:
What are some common use cases for the new design system?
You now have more flexibility than ever to update style properties with the design tokens. Beyond the examples provided in our developer documentation, you can also add the CSS properties needed to support your design use cases. Some common use cases we’ve observed to align with organization’s branding and style guides include:
Setting site font and typography styles at the component or block level
Updating the border radius of a component, like a button or pill
Changing the background color of a block and consequently in line text, for better contrast
Applying a specific color, size, and/or font weight to an overline, to highlight specific topics or sections
Updating hover styles on components or blocks
Adding or reducing spacing on components or blocks
Increasing or decreasing line height on the paragraph text component
Changing the alignment of a component on a block, like left aligning the header, instead of center
Setting the case on a text component, like uppercase/capitalized overlines
Defining a variant in styling for a component, based on a css selector on the page
and many more
Other scenarios where your organization can greatly benefit from using Block Styling is during a site redesign or rebranding because styles can easily be applied at the component or block level, rather than having to update the CSS for every individual component.
Can our custom blocks utilize the new design system? Do we still need custom blocks?
You can still use Arc XP blocks, alongside your custom blocks in the new v2 architecture. For the initial release of Themes 2.0, the styling applies to out-of-the-box components and blocks. This includes Arc XP components used on your custom blocks. Full custom blocks, not comprised of Arc XP components, will not be watched by our StyleBuilder script, but you can still apply your custom styling.
Where can I see the design files for Themes 2.0 blocks?
You can find the Themes 2.0 components, blocks, and styling system in Themes 2.0 - Blocks Styling Figma Library. Our design files are hosted in Figma. For organizations that also utilize Figma, you have the option to copy or branch the files as well.
Do you support an integration with any design software?
Themes does not currently support an out-of-the-box integration with any design software; however, we are capturing interest for this functionality and monitoring opportunities for keeping your design tokens source of truth in tools like Figma, and having an easy path to automate importing your tokens into the design system. You also can continue to import your own stylesheet into your output types.
Why does block styling use JSON? Will you support .css, .scss, .js files for styling blocks?
JSON provides a structured syntax that enables design system frameworks to output and compile styles to other formats easily and also lays the foundation for low-code design system changes in a UI.
Can I create block styles variants?
Variants using custom Themes blocks styling, is supported by creating a new unique token for a style based on CSS selectors to differentiate your variant by its relationship to other elements on the page. For more details, see variants and custom tokens. Currently there is no support for data-driven variants unless you create a custom chain that wraps your blocks with a unique class name based on this data or by forking the block.
Planning
Do I need to make any changes to prepare for Themes 2.0? How do I deploy the new version?
If you are currently on V1, you must follow this upgrade guide prior to deploying the new version to your environment. If you deploy prior to following the necessary migration steps, your deployment will not complete. The latest Themes 2.x versions are available in the Theme Settings deployment version picker, or you may set the version in your manifest. If you are setting your version in the manifest, review Recommended Versioning and ensure the compatible engine version is also set.
To deploy, the blocks array in blocks.json needs to match the selection in Themes Settings, and Fusion needs to be run locally so that the Stylebuilder script can make a proper _index.scss. After that, you can run npx fusion zip and upload the bundle to Theme Settings.
Do I need to make updates for Image Resizer V2?
Themes out-of-the-box blocks supports Image Resizer V2. If you also maintain custom blocks with images, you must make the necessary updates for Image Resizer V2 on those blocks only.
How long do I have to make these changes? Will Themes V1 be deprecated?
Because Themes 2.0 is a major breaking change release, our previous 1.x version will be available for six months before being fully deprecated. During this time, we will support V1; however, only V2 blocks will receive enhancements. For a deprecation timeline, see Arc XP deprecations.
What’s being deprecated in Themes 2.0?
Updates will no longer be made to engine-theme-sdk and news-theme-css. We have converted engine-theme-sdk exports to arc-themes-components.For a full list of deprecations and recommended replacements, see the Deprecated Libraries table.
What level of effort will it take me to prepare for a migration to Themes 2.0?
It depends on how many custom blocks your organization built and whether you’ve implemented any (previously unsupported) styling overrides. You will also need to consider your current v1 dependencies usage on blocks, and what changes you need to make based on the above deprecations. For the full migration steps, see our Upgrade to V2 guide. This is a great opportunity to review your custom blocks and see if a Themes block now exists that you can adopt. Otherwise, if you have blocks that require custom feature code, see our Convert Custom Blocks guide.
Which version of Fusion is Themes 2.0 compatible with?
See Recommended Versioning for Themes platform and tool compatibility. We are prioritizing Fusion and Node.js upgrades following the initial release.
If we are migrating from Themes V1 to V2, do we need to retest our site?
With any major migration, we encourage following your standard QA/UAT processes as you may have dependencies or custom implementations unique to your organization. To understand how your existing curated pages/blocks may be impacted, see Themes 2.0 - Blocks and Configuration 1.x Change Log
Where can I read more developer focused FAQ considerations for planning our site build?
You can read answers to commonly asked questions around developing on Themes in our Themes 2.0 - Developer FAQ.
Value
Aside from the new design system, what are the benefits of Themes blocks?
Improved speed to market with pre-built, data-driven blocks, pages, and templates that makes site setup and maintenance easier
Low maintenance efforts with ongoing support and upgrades for out-of-the-box blocks integrated with the Arc XP product suite
Optimized components that are built with best practices in performance, SEO, and accessibility in mind
Out-of-the-box components and blocks mean you can focus your resources on brand differentiation and compelling user experiences
What other changes will we see on the blocks?
Themes 2.0 also includes support for Image Resizer V2 and is mostly in parity with V1 blocks and features. For a list of block updates, see Themes 2.0 - Blocks and Configuration 1.x Change Log.
Why should we upgrade?
For Developers
You spend less time maintaining styling updates and forked blocks that were developed because of those styling requirements.
With the new component-based architecture, you can use our components to build new blocks, and focus on those brand differentiation features.
You remain on the upgrade path, which means you automatically receive new features that we release when you deploy the new version. You also receive updates on our components that you have used to build custom blocks.
Themes focuses on providing an integrated product suite, so we’re constantly coordinating and supporting platform upgrades, like Fusion/Node compatibility, Image Resizer V2 support, and other content upgrades for articles and videos.
For Leadership
You remain on the upgrade path to upcoming improvements around static components to optimize SEO and continuous integrations with the Arc XP product suite.
If you partner with a software development firm, the new Block Styling lessens the scope of custom styling required for your site.
Your development team can now focus on those innovative and brand differentiation projects you’ve been planning around general front-end code maintenance.
For PageBuilder Editor Curators
For a list of Themes V2 block changes, see Themes 2.0 - Blocks and Configuration 1.x Change Log.
In your role, you may not immediately experience many changes in V2, but the new flexible architecture opens up many opportunities for improving the PageBuilder Editor experience. We continue to explore possibilities for low code UIs, block configuration enhancements, and improvements to our Theme Settings application.
Migrating customers only
If you plan to adopt Themes blocks and removing your custom blocks, you must configure those blocks on the pages/templates.
If you are changing layouts, you must ensure blocks are in the appropriate region of the layout, as blocks do shift.
For any pages, templates, or blocks that were already configured in V1 and you plan on using in V2, you do not need to take any action on re-configuring those or the custom fields as no changes exist.
How do I know if Themes 2.0 is not the best solution for our organization?
If your site has specific psuedo-class or selectors requirements or other extremely unique CSS requirements, does not utilize our PageBuilder Editor solution, or prefers to fully maintain your own custom front-end solution, Themes may not be the best solution for your organization. You may still use the rest of the Arc XP product suite that best fits your needs and maintain your own front-end code.
If you do have unique CSS requirements, contact Arc XP Customer Support so we can consider them for future enhancements.