Block Development: hamburger module throwing error in save function

This is because you’ve put interactive components inside your save component, which is forbidden.

A save components job is to generate raw HTML strings that get saved in the database. It does this in the editor in javascript, save components never run on the frontend, and there is no way to “save” an interactive or react component.

At the end of the day the block editor saves HTML and HTML comments, not React components.

To fix this, you will need to render save components that are static and not interactive, no state/reducers/stores/context/event hooks/etc. Then, enqueue JS for the frontend that either turns it into a hamburger menu or replaces it. You can use the hamburger component from netlify in this frontend JS file

Note that this is specifically for the save component. Frontend JS and your edit component etc can use state/etc just fine.

Related Posts:

  1. Custom action button in Gutenberg editor (post_submitbox_misc_actions – equivalent)
  2. Adding pre-publish checks with Gutenberg
  3. How to make repeated component/block in Gutenberg
  4. Using Primary Color in Plugin Block
  5. How to get data from WordPress $wpdb into React Gutenberg Blocks Frontend?
  6. Plugin Sidebar is not Saving Meta Attribute to Post/Page after “Update”
  7. What’s the Right Way to get and save remote data for a Gutenberg block?
  8. WordPress: After Gutenberg plugin migration to block.json the localization/ translations with PolyGlot in JavaScript does not work anymore
  9. Looking for callback function after Gutenberg is rendered?
  10. Error : “Updating failed: The response is not a valid JSON response” with custom shortcode
  11. How to disable “Transform to” option in Gutenberg custom blocks
  12. Is there a better way to implement responsive images than what WordPress uses by default?
  13. Gutenberg registerFormatType with Multiple Classes
  14. Gutenberg: useDispatch is not a function – @wordpress/data included
  15. Gutenberg Block add element in the Editor inside InnerBlocks after div – editor-block-list
  16. Make a list with header and subtext in Gutenberg blocks
  17. How do you render_callback for register_block_type to a method in another class?
  18. How insert negative values in Gutenberg box-control
  19. Initial help with official “create a block” tutorial
  20. Are block templates incompatible with serialize_blocks?
  21. How do I dynamically render an InnerBlock inside a dynamic block?
  22. ServerSideRender and Media Object: attributes passing image data object to php renderer even though it’s not set
  23. WordPress Block Development – trouble importing from @wordpress/icons
  24. Is there an additional block.json property to set to get an InnerBlocks child to respect the “supports” property?
  25. How to access noticeOperations from withNotices
  26. Run code once when block is created
  27. How to prevent UNDO on guternberg block editor
  28. How to insert text at the current cursor position in Gutenberg?
  29. How to override gutenberg paragraph block edit property
  30. Do I have to worry about useState causing a re-render?
  31. How to get boolean value from register_meta properly?
  32. JSX in WordPress Plugin Development
  33. ResizableBox with RangeControl not working
  34. How can I get the selected string when using a toolbar button in Gutenberg?
  35. jQuery selectors for editor elements safe to use?
  36. There is a problem in the gutenberg block I developed. Problem is with withInstanceId
  37. How to control an elements classes from multiple Gutenberg sidebar controls?
  38. How to only load css for used blocks on frontend
  39. Additional classes `undefined` after saving post in Gutenberg
  40. How do you submit a Gutenberg plugin?
  41. Invalid hook call on save, not edit when using swiper slider
  42. Proper way to use useSelect
  43. Use npm and wp-env to make production bundle
  44. How to save post meta as an array in Gutenberg?
  45. Developing the save function in Gutenberg blocks
  46. WordPress Gutenberg InnerBlocks renderAppender not showing with template
  47. Gutenberg – is it ok to load dependencies multiple times?
  48. Console errors in 6.0-RC1 Widget screen
  49. How to override supports of innerBlocks?
  50. How to use attributes in competent of Gutenberg
  51. wordpress full site editing problem when extending core blocks
  52. Pass custom props to
  53. Getting incorrect filepath inside custom block front-end output using @wordpress/create-block tutorial
  54. extraprops override existing props
  55. Trigger function on Remove block or add new block in Gutenberg JavaScript
  56. WPGut – Updating failed and shortcode?
  57. Rerender core Templates with with ToggleControl but it doesnt recognize block type
  58. Gutenberg – Call google map render function in save after DOM has been rendered
  59. HTMLCollection not counting right in editor? / for loop not working on elements in DOM
  60. What happens/fires when you select a block in the editor?
  61. Is “document loaded” different on admin side than public side?
  62. How to use setAttributes outside of the edit function return
  63. why is apiFetch throwing Unhandled Promise Rejection: TypeError: Object is not a function
  64. Where do I hook to have the server do something in PHP on block attribute change?
  65. Reading plugin settings in esnext wordpress block
  66. How to integrate plugins into block editor
  67. How to get access the ID of all posts of custom post type in Gutenberg editor
  68. How to create save function for custom Gutenberg style block?
  69. Custom plugin not appearing
  70. Gutenberg’s Popover component position relative to the focused element
  71. How can i add insertion point between inner blocks in my custom block like core blocks
  72. Gutenberg: – Call a function after Server Side Component is rendered
  73. Render raw html in Gutenberg block
  74. get the queried_object of an url
  75. Build a dynamic block using the default attributes
  76. Add custom data-attribute to core Gutenberg block within an template
  77. Call API on post save/update and show the result in admin area
  78. How to replace content of a block in and re-render on change?
  79. extending a core block doesn’t work inside the editor
  80. Adding a navigation with wp_nav_menu() to a custom block in the site editor
  81. Why isn’t custom sidebar panel not showing up in the Gutenberg Editor?
  82. How can I include React useState in a custom gutenberg block plugin?
  83. Remove Gutenberg Buttons Block
  84. Insert text programmatically in WordPress Gutenberg Editor
  85. Translations not making it into Block UI but work in the rest of the plugin
  86. How to move custom gutenberg block controls from settings to styles tab?
  87. How to use useSelect to retrieve the currently default fontFamily?
  88. Event when Modal is opened/visible
  89. move useState variable from edit.js to save.js. How do I do that?
  90. Multiple php files in dynamic gutenberg block
  91. How to detect when the user clicks the publish/update button in Gutenberg Editor
  92. Gutenberg Static blocks: viewScript doesn’t import css for frontend?
  93. useBlockProps() nests wrapper with class name inside block wrapper in the editor
  94. Is It Possible to Use the Block Editor’s Notification Feature to Send Another Notification After the Post Is Saved?
  95. Output HTML Tags In Gutenberg Block
  96. Can you nest columns/column in a gutenberg custom template?
  97. Can we write custom DOM manipulation inside edit.js file while developing custom Gutenberg block?
  98. User set default settings for a Block in Site Editor
  99. how to include an image in the build of a multi block plugin
  100. render_block_context filter and block context inheritance