Summary

Some screen plugins need a different UI than a sidebar or a popup. It would be nice to get all of the ergonomic benefits of a screen, w/o needing to use the Tina sidebar UI or popup UI.

Basic example

// 1. Import `useScreenPlugin`
import { useScreenPlugin } from 'tinacms'

// 2. Define the screen plugin
const ScreenPlugin = {
  name: 'Focus Mode',
  Component() {
    return (
     <div className="focus-mode-wrapper">
        <h1>This is a screen!</h1>
     </div>
   )
  },
  Icon: () => <span>🦙</span>,
  layout: 'none'
}

export default function Page() {
  // 3. Register the plugin
  useScreenPlugin(ScreenPlugin)

  return (
      //...
  )
}

Motivation

Screens w/ totally custom UI w/o having to re-write the entire screen plugin logic yourself.