separate print layout from draft layout. add better buttons

sites/shared/components/workbench/layout/print/index.js

@@ -1,11 +1,10 @@
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { useTranslation } from 'next-i18next'
 import Settings from './settings'
 import Draft from '../draft/index'
 import pluginBuilder from './plugin'
 
 const PrintLayout = props => {
-
   useEffect(() => {
     if (props.gist?._state?.xray?.enabled) props.updateGist(
       ['_state', 'xray', 'enabled'],
@@ -15,14 +14,21 @@ const PrintLayout = props => {
 
   const { t } = useTranslation(['workbench'])
 
-  const draft = new props.design(props.gist).use(pluginBuilder(
+  const draft = props.draft
+  draft.use(pluginBuilder(
     props.gist?._state?.layout?.forPrinting?.page?.size,
     props.gist?._state?.layout?.forPrinting?.page?.orientation,
   ))
   let patternProps
+  let layout
   try {
     draft.draft()
     patternProps = draft.getRenderProps()
+    layout = draft.settings.layout === true ? {
+      ...patternProps.autoLayout,
+      width: patternProps.width,
+      height: patternProps.height
+    } : draft.settings.layout
   } catch(err) {
     console.log(err, props.gist)
   }
@@ -47,6 +53,8 @@ const PrintLayout = props => {
         patternProps={patternProps}
         bgProps={bgProps}
         gistReady={props.gistReady}
+        layoutPart="pages"
+        layout={layout}
       />
     </div>
   )