v0.12.0

The Puck docs now live at https://puckeditor.com/.

Summary

This release introduces support for React Server Components (thanks @4leite), makes huge improvements to responsive behaviour (🙇‍♂️ @monospaced) and introduces a Remix recipe (ty @earthlingdavey).

⚡️ React Server Components

Puck now supports React server components via the included @measured/puck/rsc bundle. You should import Render from this bundle instead of the main bundle if you need to support RSC:

import { Render } from "@measured/puck/rsc";
 
export function Page() {
  return <Render config={config} data={data} />;
}

Docs: https://puckeditor.com/docs/integrating-puck/server-components

📱 Responsive Improvements

Puck now behaves much better on small viewports! We’ll continue to iterate on this experience.

✨ Remix Recipe

The new Remix recipe enables you to generate a Remix Run v2 application configured with Puck.

💅 New CSS imports

You can now import your CSS directly from the Puck package, instead of reaching into dist. This is backwards compatible.

@import "@measured/puck/puck.css";

Changelog

Features

• support React server components via @measured/puck/rsc bundle (90ac161)
• add explicit rsc and css exports (0b6a527)
• improve responsive behaviour (889b4c7)
• add visibility toggle for right-hand sidebar (3d6c5d4)
• allow custom fields to set UI state during onChange (388793c)
• expose field "id" to custom fields (849161e)
• improve IconButton accessibility (4c71d39)
• add new monospaced font stack (c484ea6)
• tweak Field input focus state (8012afd)

Bug Fixes

• don't enable style pollution of input background color (bb1a76b)
• don't reset array item labels when changing order (57563e1)
• ensure field icon and label are vertically aligned (caa40e0)
• ensure root render receives props from latest data API (abb6ff1)
• export missing PuckAction type (f22f32d)
• fix rootResolver behaviour when using recommended root data API (5c13de5)
• migrate to @hello-pangea/dnd to fix defaultProps warning (2c97362)
• prevent inconsistent default input font-size (99f90b3)
• show a default value when no placeholder set on external fields (e30b5b6)
• stop zones getting wiped out if data prop updated (0c4514f)
• stop style pollution into array field items (03b89d5)
• stretch external field table to width of modal (f6d89f6)
• use correct root data API in next recipe example database (b598144)
• use Inter font in button type Buttons (1973847)

Full Changelog: v0.11.0...v0.12.0

New Contributors

• @4leite made their first contribution in #197
• @monospaced made their first contribution in #230
• @earthlingdavey made their first contribution in #227

v0.11.3

Bug Fixes

• ensure field debounce doesn't sporadically lock preview update (487ab83)
• stop generator crashing on Windows due to commits with single quotes (ab9d43f)

New Contributors

@ahmedrowaihi made their first contribution in #218

Full Changelog: v0.11.2...v0.11.3

v0.11.2

Bug Fixes

• add missing database.json back to generated next recipe (3c15255)

v0.11.1

Bug Fixes

• include next recipe in generator (5b833ef)

v0.11.0

v0.11.0 - Categories and dynamic props

Summary

This release introduces new APIs for categories and dynamic prop resolution, and updates the Next.js recipe to render static pages.

Categories API

The categories API enables the user to group their components in the left side bar.

Users can configure categories using the new categories configuration on the Puck config. They can also override this behaviour by using the renderComponentList API, accessible via the Puck root or plugins.

  categories: {
    layout: {
      components: ["Columns", "Flex", "VerticalSpace"],
    },
    typography: {
      components: ["Heading", "Text"],
    },
    interactive: {
      title: "Actions",
      components: ["ButtonGroup"],
    },
  },

Dynamic prop resolution

Dynamic prop resolution is an extremely powerful feature that enables developers to dynamically change props after the user has changed them. Full documentation available in the README.

This can be paired with external fields to query data from a third-party API, and also allows you to set fields as read-only.

const config = {
  components: {
    HeadingBlock: {
      fields: {
        heading: {
          type: "text",
        },
        title: {
          type: "text",
        },
      },
      resolveData: async (props) => {
        return {
          props: {
            title: props.heading, // map `heading` to `title`
          },
          readOnly: {
            title: true, // make `title` read-only
          },
        };
      },
      render: ({ title }) => {
        return <h1>{title}</h1>;
      },
    },
  },
};

Next.js recipe now supports static rendering

The default Next.js recipe has been updated to support static rendering, enabling Puck to generate static pages.

If you’ve already generated from this recipe and want to enable static rendering, we recommend manually updating your code to follow the latest best practices.

Deprecations

This release includes various backwards-compatible deprecations that will be breaking in a future release.

Deprecate use of props under root in Puck data in favour of root.props (7593584)

This affects all existing data payloads that make use of root. This allows us to align the behaviour of root with other components, including the new resolveData API.

Migration

Before

{
  "root": {
    "title": "Hello, world"
  }
}

After

{
  "root": {
    "props": {
      "title": "Hello, world"
    },
  }
}

We may consider making this permanently backwards compatible via the transformers proposal.

Deprecate adaptor in favour of new external field APIs (7f13efc)

The adaptor API on external field types has been removed in favour of keeping them at the root of the field configuration.

Migration

Before

{
  myField: {
    type: "external",
    adaptor: {
      name: "External Source",
      fetchList: () => {}
    }
  }
}

After

{
  myField: {
    type: "external",
    placeholder: "Select from External Source",
    fetchList: () => {}
  }
}

Deprecate magic _data API in favour of resolveData (4ee31e7)

The magic _data field name previously allowed you to spread the result of your adaptor call across your object. This has been replaced in favour of resolveData.

Migration

Before

{
  fields: {
    _data: {
      type: "external",
      adaptor: {
        name: "External Source",
        fetchList: () => {
          return [{ title: "Hello, world" }];
        },
      },
    },
    title: {
      type: "text",
    },
  },
};

After

{
  fields: {
    data: {
      type: "external",
      // Also note adaptor API change
      placeholder: "Load from external Source",
      fetchList: () => {
        return [{ title: "Hello, world" }];
      },
    },
    title: {
      type: "text",
    },
  },
  resolveData: ({ props }) => ({ props: { ...props, ...props.data } }),
};

Features

• add categories API for grouping components in side bar (594cc76)
• add read-only states to all field types (746d896)
• add icon to external fields (a3a018b)
• add loading state to external field modal (5b4fc92)
• add lock icon when field is read-only (a051000)
• add mapProp API to external fields (86c4979)
• add renderComponentList API (ec985e3)
• add resolveData API for modifying props dynamically (c1181ad)
• deprecate adaptors in favour of new external field APIs (7f13efc)
• deprecate magic adaptor _data behaviour in favour of resolveData API (4ee31e7)
• deprecate props under root in favour of root.props (7593584)
• make external field more consistent with other fields (5bfbc5b)
• update next recipe to render to static (a333857)

Bug Fixes

• don't flicker root DropZone when dragging (358435c)
• ensure array fields can render if value is undefined (47ab3c9)
• isolate external field modal from high z-indexes (fdf97c7)
• make Field types required based on type (daf36ac)
• prevent global style pollution in external fields (429731d)
• prevent long header titles from rendering over actions (4613df4)
• use correct heading component for external inputs (462266d)

Performance Improvements

• cache data between fetchList calls in external fields (04b7322)
• improve render performance of fields (d92de7f)

New Contributors

• @sagarchoudhary96 made their first contribution in #180

Full Changelog: v0.10.0...v0.11.0

v0.10.0

This release introduces powerful new plugin APIs and draggable array items.

The new plugin APIs enable plugin developers to fully control the Puck application UI and current data object by exposing Puck's internal state and dispatcher. Documentation available in the README.

Draggable array items allows users to reorder items when using the array field type. We also introduces a refreshed UI for array items.

Breaking changes

• The data prop on plugin render methods has been deprecated. Use state.data instead.

Features

• align component list UI with refreshed array fields (74cd3a7)
• enable drag-and-drop of array items (12800f8)
• expose state dispatcher to plugins (e94accb)
• expose state to plugins, removing data (89f9f2e)
• expose state to renderHeader, removing data (29ddaaf)
• record application state in undo/redo history (0f2d7c5)
• refresh UI for array fields (5ef8a96)

Bug Fixes

• ensure layer tree consistently shows selected item (6a9145c)
• only render strings or numbers in external adaptors (3c337be)
• prevent style pollution for select fields (fa7af7d)

New Contributors

• @JakeSidSmith made their first contribution in #140
• @FreddieRidell made their first contribution in #146

Full Changelog: v0.9.0...v0.10.0

v0.9.0

This release introduces undo/redo history with hotkey support, thanks to the amazing @Yuddomack!

It also fixes some bugs introduced in 0.8.0.

Features

• add undo/redo history (222697e)
• make actions sticky to component scroll (f3e5b50)

Bug Fixes

• fill empty space under puck-root (d42cfb6)
• prevent global pollution of Heading color (327721c)
• render icon if provided to FieldLabel (ae01891)
• reset stacking context for each item (a826492)

New Contributors

• @Yuddomack made their first contribution in #111
• @leweyse made their first contribution in #131
• @xaviemirmon made their first contribution in #130

Full Changelog: v0.8.0...v0.9.0

v0.8.0

Features

• introduce DropZone API for nesting components and advanced layouts (5053a84)
• introduce new outline UI (e32c4ff)
• redesign action overlay and move outside of component (5145cba)
• cast number field types to Number (d5df959)

Bug Fixes

• add missing id type to render props (18753cf)
• add missing optional chaining operator to next recipe (a368319)
• don't show margin underneath placeholder when dragging in (2620455)
• don't switch between controlled/uncontrolled inputs (b20e298)
• ensure form styles override global styles (104091a)
• ensure hooks can always be used within render functions (cbf8e8e)
• ensure types allow for nested arrays (06b145b)
• fix unpredictable rendering of drop placeholder (bf5f16b)
• only show sidebar scroll bars if necessary (87c8736)
• prevent global styles from overwriting fieldset styles (550bd0e)
• respect labels for array item fields (f2e7843)
• prevent global styles from overwriting outline styles (1dc222c)
• prevent styles from clashing with dark mode root element (8506e8e)
• upgrade next version in recipe to ensure vercel builds pass (c2d7fae)

Performance Improvements

• reduce bundle size by 61% by removing unused react-feather icons (f4b0563)

New Contributors

• @philipodev made their first contribution in #80
• @gothfemme made their first contribution in #107
• @soudasuwa made their first contribution in #120

Full Changelog: v0.7.0...v0.8.0

v0.7.0

Features

• add support for custom fields (b46b721)

New Contributors

• @eltociear made their first contribution in #54
• @abhishek276533 made their first contribution in #59

Full Changelog: v0.6.2...v0.7.0

v0.6.2

Bug Fixes

• bust cache in generated app on publish (6e1c8ed)
• don't 404 on homepage in generated app (8fd7b3b)
• don't call API when building generated app (8041fc1)
• fix type issues in generated app (b16e98e)