v0.14.0

[chrisvxd]

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 TBD and TBD 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 TBD 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/[email protected]. Please use @measured/[email protected].

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 Add min and max properties to number field #306
• @nguyendhst made their first contribution in Fix broken link in AppState API Reference #338
• @prashanthvdckap made their first contribution in exposed history state in usePuck hook #342
• @jabba-the-bug made their first contribution in added possibility to set a max and min amount of items in the array f… #341
• @mfakhrys made their first contribution in Update multi-column-layouts.mdx #370
• @hjbrand made their first contribution in fix: Correct inference of objectFields in ObjectField type #368
• @bwat-dev made their first contribution in Feature: add label params to component config #367
• @jonduarte made their first contribution in fix: "Enter" keypress when using ExternalInput together with ArrayFields #375

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

---

This discussion was created from the release v0.14.0.