Puck 0.24 doesn’t introduce any breaking changes, but it updates how fields are exposed to the fields override and makes field placeholders visible in the canvas when inline editing is enabled.

This guide covers the steps for upgrading to Puck 0.24:

• Installing Puck 0.24
• Breaking changes
• New deprecations
• Notable changes
• Full changelog

If you encounter any bugs as you upgrade to Puck 0.24, please report them via GitHub.

For a list of all the new features added to Puck 0.24, check out the release blog post.

Installing Puck 0.24

Run the following command to install the latest version of Puck:

npm install @puckeditor/core@latest

pnpm add @puckeditor/core@latest

yarn add @puckeditor/core@latest

bun add @puckeditor/core@latest

Breaking changes

No breaking changes were introduced in this release.

New deprecations

No deprecations were introduced in this release.

Notable changes

Update fields overrides that use React.Children

The fields override now receives the component’s individual field nodes through the fields prop.

The children prop still contains the complete field layout, but it no longer exposes each field as a direct child. If your override uses React.Children to arrange individual fields, use the new fields prop instead:

// Before
const overrides = {
  fields: ({ children }) => (
    <div className="FieldGrid">
      {React.Children.map(children, (field) => (
        <div>{field}</div>
      ))}
    </div>
  ),
};

// After
const overrides = {
  fields: ({ fields }) => (
    <div className="FieldGrid">
      {Object.entries(fields).map(([name, field]) => (
        <div key={name}>{field}</div>
      ))}
    </div>
  ),
};

Overrides that render children without inspecting or rearranging its contents will continue to work.

Inline field placeholders

The placeholder on text and textarea fields is now visible in the canvas when contentEditable is enabled.

Full changelog

Check out the full changelog, including known issues, on the GitHub release.