Website Builder > Page Types

Page Types

Learn how to add custom page types to the Website Builder's Create Page dialog.

WHAT YOU'LL LEARN

what page types are and how they work
how to register a custom page type
how to filter or remove existing page types

Overview

When a user clicks Create Page in the Website Builder, a dialog appears with a Page Type dropdown. Each entry in the dropdown is a registered page type — identified by a unique name and displayed with a human-readable label.

By default, only the Static Page type is registered. You can add new types and filter existing ones using the PageType and PageTypeProvider abstractions from webiny/admin/website-builder.

Create a Page dialog with page type options

(click to enlarge)

Add a Page Type

Implement PageType.Interface, which requires two properties: name (a unique identifier stored on the page when created) and label (the text shown in the dropdown):

extensions/customPageTypes/RetailPageType.ts
import { PageType } from "webiny/admin/website-builder";

class RetailPageType implements PageType.Interface {
  name = "retailPage";
  label = "Retail Page";
}

export default PageType.createImplementation({
  implementation: RetailPageType,
  dependencies: []
});

Filter Page Types

To remove or filter existing page types, decorate the PageTypeProvider abstraction. The decorator receives the original provider as decoratee and returns a modified list from getPageTypes():

extensions/customPageTypes/FilterPageTypes.ts
import { PageTypeProvider } from "webiny/admin/website-builder";

class FilterPageTypes implements PageTypeProvider.Interface {
  constructor(private decoratee: PageTypeProvider.Interface) {}

  getPageTypes() {
    return this.decoratee.getPageTypes().filter(type => type.name !== "static");
  }
}

export default PageTypeProvider.createDecorator({
  decorator: FilterPageTypes,
  dependencies: []
});

This removes the built-in Static Page type. Omit the .filter() call if you only want to inspect or reorder the list without removing anything.

Register the Feature

Wire the implementations together using createFeature and RegisterFeature from webiny/admin:

extensions/customPageTypes/index.tsx
import React from "react";
import { createFeature, RegisterFeature } from "webiny/admin";
import RetailPageType from "./RetailPageType.js";
import FilterPageTypes from "./FilterPageTypes.js";

const CustomPageTypes = createFeature({
  name: "CustomPageTypes",
  register(container) {
    container.register(RetailPageType);
    container.registerDecorator(FilterPageTypes);
  }
});

export default () => {
  return <RegisterFeature feature={CustomPageTypes} />;
};

container.register(RetailPageType) — adds the new page type to the dropdown
container.registerDecorator(FilterPageTypes) — applies the filter; omit this line if you don’t need to remove existing types

Then register the extension in webiny.config.tsx:

webiny.config.tsx
import React from "react";
import { Admin } from "webiny/extensions";

export const Extensions = () => {
  return (
    <>
      {/* ... other extensions */}
      <Admin.Extension src={"/extensions/customPageTypes/index.tsx"} />
    </>
  );
};