Updated Plugin Editor for New Responsive Engine

Hello everyone! A new version of the Plugin Editor that supports the new responsive engine is now live! Please see the guide below for some tips on how to work in the new plugin editor version and migrating old plugins.

Updating a Plugin

Switching the plugin to Version 3 should enable the new responsive controls and options. Most plugin element code should just work, but you’ll likely want to tweak each element’s code. Publishing a your updated plugin on this new version will create a new version of your plugin like usual.

Some Notes

  • For elements which are marked as “responsive”, check “this element can fit width/height to content” to enable those settings if their element supports that. These options will cause the width/height to be set to max-content rather than expanding to fill the space.
  • properties.bubble.width/height should still work correctly, and will cause your update function to re-run whenever the size of the element changes.
  • There are many new properties in properties.bubble corresponding to the new responsive properties.
  • Plugin elements updated to the new engine should still work in the legacy engine as well
  • The only settings which no longer exist are top, left, fixed_width, min_width, use_max_width, max_width in properties.bubble, so if the plugin element relies on those then it will have to be changed. Other than that it should work fine.
  • instance.setHeight is no longer a thing now - instead, you can just set the height using CSS. Any calls relying on instance.setHeight will have to be changed or removed.
20 Likes

@nick.carroll Starting to play around with this and I noticed that my plugin code is no longer getting optimized via minify/polyfill when I publish changes using the new API version. Not sure if I’m doing something wrong or if the behavior has changed.

Great news, @nick.carroll!

Is there a way to know if a plugin is “ready” for the new engine other than actually installing it and trying it out? And, are any of Bubble’s own plug-ins already updated to use the engine for us to try out?

1 Like

Hi @nick.carroll ,

The only one issue for me so far is that for legacy pages using my plugin’s visual element, the editor preview seems to be broken. In my preview code (for the editor view), I have some css to cover the element with a background image … box.css(“background-size”, “cover”). This no longer seems to work. The background image is cropped and has scrollbars. Works on new responsive pages though.

To be clear …

Plugin Editor Version 3:

  • For a “New Responsive Engine” Page: The preview in the editor looks fine - background image properly stretches to cver the visual element
  • For a legacy page: The preview in the editor is broken - background image does not fill the visual element and has scrollbars

Plugin Editor Version 2 or earlier:

  • For a “New Responsive Engine” Page: Works fine
  • For a legacy page: Works fine

My code:

let box = $(‘

’);
let vHeight = properties.bubble.height();
let vWidth = properties.bubble.width();
box.css(“height”, vHeight)
box.css(“width”, vWidth)
box.css(“background-image”, “url(some-image-url)”)
box.css(“filter”, “grayscale(100%)”)
box.css(“background-size”, “cover”)
box.css(“background-repeat”, “no-repeat”)
box.css(“background-position”, “center”)
instance.canvas.append(box);

For some reason, the first line of my code is not rendering very well above. it is …
image

Please let me know if you need me to log a bug report to share my editor urls etc.

Great questions.

Can someone from bubble answer these questions? It would be helpful to see which plugins are ready.

1 Like

Great questions! Sorry for the delay here. We have been updating our hardcoded plugins that have visual elements in the background. The ones completed so far are: Draggable elements, Slidebar menu, Ionic elements, Google Material Icons, and Progress bar.

The team is also working on a way to differentiate new responsive plugins from legacy responsive plugins in the marketplace (as well as the ability to filter). Will keep you all updated on our progress here.

4 Likes

Will check with the team to see if this is a bug or expected behavior - thanks for flagging

Are you still noticing this behavior, I think we rolled out a fix for this last Thursday?

1 Like

Hi @nick.carroll,

The issue does indeed appear to have been fixed. Thanks for the prompt response and update.

2 Likes