Skip to content
Arc XP

Local development process for custom blocks

The local development process for custom blocks leverages the local installation of PageBuilder Engine. This guide walks you through the requirements and key configurations you must set up before developing custom blocks.

Out-of-the-box Arc Blocks

As an Arc XP customer, you can access a collection of Arc Blocks and components that are ready to use in PageBuilder Editor. However, if the out-of-the-box Arc Blocks do not meet your needs, you can develop and test custom blocks in your local environment. For a complete list and details of Arc Blocks and components, see Components and blocks storybooks.

Prerequisites for developing custom blocks

Before developing custom blocks, you must configure a local development environment following these quickstart guides:

Step 1. Add the blocks.json file to your project

The blocks.json file specifies which blocks you want available in your bundle and contains various configurations for your organization’s websites. To add the blocks.json file to your project, take the following steps:

  1. Download your live bundle
  2. Open (extract) your downloaded bundle and find blocks.json
  3. Copy blocks.json to the root directory of your project

Step 2. Add the arc-themes-components dependency to your project

To use Arc Blocks locally, you must add the arc-themes-components dependency to your project. On the terminal, run the following command:

Terminal window
npm install @wpmedia/arc-themes-components@arc-themes-release-version-2.x.x

Step 3. Start PageBuilder Engine

Before starting PageBuilder Engine, open the Docker desktop application to start the Docker daemon. Then run the following command:

Terminal window
npx fusion start

Step 4. Start developing custom blocks

At this point, you are ready to start developing custom blocks. Use the following guides: