Broken Hubspot Form block in Full Site Editor

  • Resolved kit21

    (@kit21)


    12 months ago

    The “Hubspot Form” block don’t function very well in FSE. The block looks like a plain-text block with no styling at all and is very difficult to use.

    Most of the style and assets failed to load because FSE wrapped it’s block within a iframe with blob: as part of the iframe’s src. I believe this breaks all webpack imports that uses relative path.

    Are there any ways to fix that?

    • This topic was modified 12 months ago by kit21.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support cheffernan

    (@cheffernan)

    Hi @kit21

    Sorry to hear you are having issues with the HubSpot blocks. Hopefully I can help debug the issue but I will need some more details from you.

    Would you be able to send me:

    1. The version of the plugin you have installled
    2. The version of PhP that your site uses
    3. A screen recording of the problem that you are having
    4. an error messages in your console logs or network tab.

    I look forward to hearing from you soon.

    Best,

    Conor

    Thread Starter kit21

    (@kit21)

    Plugin version: 11.0.32. I tested again with the latest version and it’s still broken in FSE
    PHP version: 8.2. This shouldn’t matter as it’s not a php issue.

    No related error message.

    The block looks broken without any style applied
    https://ibb.co/ypB27W1

    FSE render blocks inside an iframe with a src that is “blob:…”. I believe the root directory for relative path within an iframe is calculated based on the iframe src and this breaks some style related import of your plugin’s js

    • This reply was modified 11 months, 2 weeks ago by kit21.
    Plugin Support cheffernan

    (@cheffernan)

    Thanks for the info @kit21, that is very helpful. We have been able to reproduce this on our end.

    We are investigating possible workarounds for this problem now. You mentioned specifically webpack imports with a relative path will be broken. Are you implying here that in your opinion if we replace relative imports with absolute imports this should resolve the issue?

    Best,

    Conor

    Thread Starter kit21

    (@kit21)

    Yes, I guess that could be the solution after I noticed images using relative path aren’t loading in the FSE editor and did a bit of googling.

    • This reply was modified 11 months, 1 week ago by kit21.
    Plugin Support cheffernan

    (@cheffernan)

    Hi @kit21,

    After some investigation we have determined that significant refactoring on the Gutenberg blocks would be required for us to support the full site editor. This work is not currently in our priorities for this quarter.

    For this reason, in version 11.0.55 of the plugin (just released today) we have officially dropped support for our blocks inside the Full Site editor.

    We hope to revisit this at a later date and carry out the work necessary to have our blocks function in the full site editor, for now however I am marking this conversation as resolved as the plugin officially now does not support Gutenberg blocks in the full site editor.

    You should still be able to use the HubSpot blocks in the page and block editors. Please let me know if there is any page editing functionality that you would like to do which you cannot do in these editors and I am happy to suggest further workarounds.

    Best,

    Conor

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Broken Hubspot Form block in Full Site Editor’ is closed to new replies.