search

storyblok / field-plugin

Create and deploy Storyblok Field Plugin
https://www.storyblok.com/docs/plugins/field-plugins/introduction
25 stars 3 forks source link

fix(template): adapting to the new way resizing of the field plugin is handled #275

Closed BibiSebi closed 11 months ago

BibiSebi commented 11 months ago

What?

Resizing of the field plugin UI inside the iFrame has changed and been release in the previous sprint. Now once the plugin is loaded it sends a property to the Storyblok App --> modalFullHeight: true. This property signals to the Container that in case the modal is open, the iframe should add size=auto inside the inline styles.

By adding this option, it should be easier for the user to create sticky headers and footers. Before there have been issues where such designs were not easily possible. This PR adds some styles to enable this feature.

In the following video, I demonstrate the new possible implementation. The div with green background is sticky to top. The red div is sticky to bottom.

https://www.loom.com/share/5cc5211c2ec6491c887ec1b78ad82336

Why?

JIRA: EXT-1926

How to test? (optional)

As the new functionality where the field plugin sends the new modalFullHeight property to the container, you need to run it locally and connect the local version of the field plugin to your template.

  1. Rebuild field-plugin package --> cd packages/field-plugin && yarn build
  2. Replacing dependency inside the react template to "@storyblok/field-plugin": "workspace:*"
  3. cd into React Template and run --> yarn install && yarn dev

Then open the Partner Portal and go to the Field Plugin Development Environment.

vercel[bot] commented 11 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
plugin-sandbox ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 21, 2023 10:04am
BibiSebi commented 11 months ago

Can someone test the react template for now so that we know if it fixes all the issues. Once we approve it i can put it inside the other templates :)

PS: With this change there are no changes needed inside the storyfront!

eunjae-lee commented 11 months ago

Can someone test the react template for now so that we know if it fixes all the issues. Once we approve it i can put it inside the other templates :)

PS: With this change there are no changes needed inside the storyfront!

it's working well!

(in both field plugin editor and visual editor)

BibiSebi commented 11 months ago

Are we going to also add the same adjustment for the vanilla JS version @BibiSebi?

I've tested the adjustment made and it worked nicely. 💯

@demetriusfeijoo I added the styles also to the js template now :) and thank you for noticing the typo. My IDE is so weird recently, it never does what I want it to do :D

eunjae-lee commented 11 months ago

Are we going to also add the same adjustment for the vanilla JS version @BibiSebi? I've tested the adjustment made and it worked nicely. 💯

@demetriusfeijoo I added the styles also to the js template now :) and thank you for noticing the typo. My IDE is so weird recently, it never does what I want it to do :D

time to try vim? 🤣