This week we have a few breaking changes, a couple small features, and some bug fixes to share with you!

Last week the TinaCMS team finished up it's first 6-week project on improving inline editing with blocks. To learn more about inline editing checkout our new guide: Working with Inline Blocks. We are no taking 2 weeks to cool down, reorient, and pick our next round of projects.

Have any questions about the release or opinions on what we should focus on next? Head over to the the Forum Topic for this week's release and leave a comment!

Breaking Changes

react-tinacms-date 💥

The date field plugin is no longer one of the default fields provided by tinacms.

This change has reduced the js bundle impact of tinacms by over 700kb

How to Upgrade

To use the DateFieldPlugin on your website you must now install react-tinacms-date and register it with your cms.

import { DateFieldPlugin } from "react-tinacms-date"

cms.plugins.add(DateFieldPlugin)

For more information on how you can reduce the size of your bundle by dynamically loading the DateFieldPlugin checkout the Pull Request or visit the docs.

react-tinacms-github 💥

Since this package was made back in the days before we had cms.events or cms.enabled there is a bit of an awkward interaction between it and the CMS. This week we released a change that addressed those issues.

How to Upgrade

First we need to change the TinaGithubProvider props to:

1. Remove editMode
2. Rename enterEditMode to onLogin
3. Rename exitEditMode to onLogout

<TinaGithubProvider
  error={pageProps.error}
- editMode={pageProps.preview}
- enterEditMode={enterEditMode}
- exitEditMode={exitEditMode}
+ onLogin={enterEditMode}
+ onLogout={exitEditMode}
/>

Next you'll want to replace all references useGithubEditing with useCMS . For example:

- import { useGithubEditing } from 'react-tinacms-github'
+ import { useCMS } from 'tinacms'

export const EditLink = () => {
- const github = useGithubEditing()
+ const cms = useCMS()

  return (
    <button
      onClick={
-       github.editMode ? github.exitEditMode : github.enterEditMode
+       cms.enabled ? cms.disable() : cms.enable()
      }
    >
-     {isEditing ? 'Exit Edit Mode' : 'Edit This Site'}
+     {cms.enabled ? 'Exit Edit Mode' : 'Edit This Site'}
    </button>
  )
}

tinacms 💥

The third breaking change of this release is updates to the Sidebar and Toolbar APIs. Due to an awkward transition period, those APIs were inconsistent and awkward to work with. This pull request tries to address that.

• Both the Sidebar and Toolbar are opt-in now
• Passing true is enough; no need for a full config object.
• The hidden property is removed from both the Sidebar and the Toolbar. This is instead controlled via cms.enabled .

Checkout the docs to learn more.

Other Changes

react-tinacms-inline

Maximum and Minimum Block Count

The InlineBlocks field now accepts two more props: max and min . These optional fields can be used to limit how many blocks the user can add and remove from the field.

<InlineBlocks 
  name="feature-list"
  blocks={FEATURE_BLOCKS}
  min={1}
  max={3}
/>

For more information on how blocks work, check out the docs or read the new guide

react-tinacms-editor

Bug Fixes

• Fixed an issue where creating a table added an extra paragraph to the document.
• When a Code Block is copied the language setting is now preserved.

Contributors

Thanks to everyone for contributing!

GitHub Milestones

Checkout the GitHub Milestone for all the details on this weeks release!