Skip to content
Arc XP
Product Documentation

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 Themes components and blocks storybooks.

Prerequisites for developing custom blocks

Before developing custom blocks, you must configure a local development environment. Ensure to follow the quickstart guides:

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

The blocks.json file specifies which out-of-the-box Arc Blocks to install and make 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.

    The blocks.json file is in the root directory of your bundle.

  3. Copy the blocks.json file 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:

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.

To start PageBuilder Engine, run the following command on your terminal:

npx fusion start

Step 4. Start developing custom blocks

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