v0.14.0

Puck v0.14.0 introduces the long awaited viewport switching feature, with drag-and-drop-friendly iframe rendering for full CSS media query support.

TLDR

1. Viewport switching: Render your entire Puck preview inside an iframe for full CSS media query support. Override the viewports using the viewports API.
2. New field APIs: Array and number fields now accept min/max params, and external fields can now render search filters using the familiar fields API.
3. New component label API: Provide a custom label to use as your component name.
4. Contentful field package: Easily load your Contentful content into Puck with this pre-configured field.
5. Color, accessibility and keyboard improvements: A new 12-tint color palette for improved contrast, amongst various other accessibility fixes.

Highlights

📱 Viewport switching

Puck now supports viewport switching with full iframe rendering, without compromising the drag-and-drop experience. This was a significant effort that required patching the underlying drag-and-drop library to support iframes and CSS transforms, and introducing a new library for syncing styles between host and iframe.

Puck.Viewport.Switching.mp4

Viewports are enabled by default, and can be customized by passing an array to the viewports API.

import { Puck } from "@measured/puck";

export function Editor() {
  return (
    <Puck
      viewports={[
        {
          width: 1440,
          height: "auto", // Optional height. Can be numeric or "auto". Defaults to "auto".
          label: "My Viewport", // Optional. Shown in tooltip.
          icon: <svg />, // Optional. Use lucide-icons to align with Puck UI.
        },
      ]}
      // ...
    />
  );
}

🔢 New field APIs

Both number and array fields now accept min and max parameters, allowing you to control the minimum and maximum values (or number of values) for user input. Thanks to @jabba-the-bug and @jperasmus for their contributions.

const numberField =  {
  type: "number",
  max: 10,
};

The new filterFields API on external fields allows you to render filters that are provided to your fetchList method using the familiar fields API.

const externalField = {
  type: "external",
  fetchList: async ({ filters }) => {
    // Query content and apply filters
  },
  filterFields: {
    rating: {
      type: "number", // Render a number field
    },
  },
},

🔡 New component label API

Customize the name of your component with the new label API. Thanks to @bwat-dev for contributing this feature.

const config = {
  components: {
    HeadingBlock: {
      label: "Heading Block",
      render: () => <h1>Hello, World</h1>,
    },
  },
};

Contentful field package

Use the new field-contentful package to load content out of your Contentful space.

NB An issue occurred publishing @measured/puck-field-contentful@v0.14.0. We will be introducing @measured/puck-field-contentful@v0.14.1 soon to address this.

import createFieldContentful from "@measured/puck-field-contentful";

const config = {
  components: {
    Example: {
      fields: {
        movie: createFieldContentful("movies", {
          space: "my_space",
          accessToken: "abcdefg123456",
        }),
      },
      render: ({ data }) => {
        return <p>{data?.fields.title || "No data selected"}</p>;
      },
    },
  },
};

Breaking changes

iframes are enabled by default

Viewport rendering with iframes is enabled by default. If you need to disable this, you can pass iframes={{ enabled: false }} to the Puck component.

Changelog

Features

• add "name" prop to componentItem override (45bbceb)
• add min and max APIs to array fields (53b7937)
• add API to opt-out of iframes (03dd90b)
• add Contentful field package (d944288)
• add filter fields to ExternalFields (7a55053)
• add iframe support (1d0bf57)
• add min and max APIs to number fields (4932a6e)
• add selectedItem convenience param to usePuck (c1224d0)
• add viewport switching (ccf9149)
• enable mapping of table rows in external fields (d50c56e)
• expose history via usePuck hook (1b907cb)
• hide array Add button when array is readOnly (4e27c3f)
• improve touch, contrast & keyboard a11y (f975d87)
• refine UI for external field modal (6a2afa1)
• support custom component labels via the new label param (712fb8e)
• update to 12-tint color palette (d43da58)
• use InterVariable font (88532fb)

Bug Fixes

• avoid FOUC of side bars on mobile (83be956)
• correctly infer objectFields type from props (e8991cc)
• don't attempt to resolve data if component missing from config (cc7d391)
• don't flash nested DropZones on first drag (38c3dc4)
• don't unexpectedly show DropZone background (2001fa2)
• ensure font loads for ExternalFields (e9bca75)
• ensure heading-analyzer updates when content changes (d75df7a)
• ensure select and radio fields support read only arrays (cbdf66d)
• fix array field when used on root (95280e6)
• fix renderDropZone method in editor (2c738dd)
• lower opacity of DropZone background to support dark backgrounds (9a5c0b8)
• make getItemSummary optional on ExternalFields, as expected (26bc4ff)
• only import Puck CSS on editor pages (22a4182)
• prevent unexpected field behaviour when pressing "Enter" key (bf4f527)
• use strict return type for resolveData (777cd3c)
• vertically align field icons (fa92436)

New Contributors

• @jperasmus made their first contribution in #306
• @nguyendhst made their first contribution in #338
• @prashanthvdckap made their first contribution in #342
• @jabba-the-bug made their first contribution in #341
• @mfakhrys made their first contribution in #370
• @hjbrand made their first contribution in #368
• @bwat-dev made their first contribution in #367
• @jonduarte made their first contribution in #375

Full Changelog: v0.13.1...v0.14.0