Page Builder Tina Visual Editing#751
Conversation
✅ Deploy Preview for juel-life ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for juel-ancestry ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for marronage-staging ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for padp-staging ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for pss-scavenger-hunt ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
✅ Deploy Preview for juel-staging ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for relnet-staging ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
camdendotlol
left a comment
camdendotlol
left a comment
There was a problem hiding this comment.
The code looks good to me but I did not run it so I suggest waiting for Ben's approval too.
blms
left a comment
blms
left a comment
There was a problem hiding this comment.
Code looks great! I like just showing the images for the components that can't be rendered in preview—just a minor question about asset size for those. I also think styles.ts is a great solution to the shared CSS issue 👍
Also tested it out locally with a few different pages and block types and this is looking great, like a full-featured WYSIWYG page builder at this point. Really nice work @ajolipa.
There was a problem hiding this comment.
Could we use something like tinypng to compress these and/or could they be lower quality? 1.29MB seems like a big file to load on each preview with an image carousel
| const IMAGE_SCALE = 1.75; | ||
| const BACKGROUND_SCALE = 1.65; | ||
| const SCREEN_WIDTH_LG = 1024; | ||
| const instanceState = new WeakMap(); |
There was a problem hiding this comment.
Nice, I had never heard of WeakMap before!
| > | ||
| { _.map(items, (item) => ( | ||
| <ColumnContent item={item} /> | ||
| <ColumnContent item={item} isTinaPrevew={isTinaPreview} t={t} /> |
3 participants
In this PR
Add visual editor functionality to the Tina page builder! The major steps involved in this are as follows:
@tinacms/astrointegration;page) to tell Tina how to re-render the body of a page while editing it. This involves updating the API calls to include thefetchWithMetadatawrapper so that the Tina code has what it needs to map between the form and the page components;isTinaPreviewflag to handle rendering a trimmed-down version of the header in the visual editor; this enabled the preview to update accurately when the "transparent navbar" field is toggled in the editor, which was otherwise causing the refresh to fail.isTinaPreviewflag is also used in thePageBody.astrocomponent in a few cases to determine whether to render a React component or a static preview image;TextImagecomponent is reworked as an Astro component with some vanilla JS controlling the image resizing; this allows us to avoid maintaining a bunch of duplicate components in both Astro and TSX form;TabsandCard--Cardbecause it is used both in the page builder and on the post/path index pages, andTabsbecause a generic preview image did not seem sufficient for the visual editor in this case, so instead I made an Astro version that just stacks the tab content previews on top of each other. In both of these cases, I grouped the components into a subfolder and added astyles.tsfile that contains all of the actual Tailwind classes applied within the component. Definitely open to better ideas about how to handle this part, but at least this avoids just having duplicate CSS that has to be edited twice in any future updates.Demo video:
Recording.2026-07-16.145819.mp4