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. check if Gutenberg is currently in use
  2. How to use PanelColorSettings in custom Gutenberg block?
  3. Custom action button in Gutenberg editor (post_submitbox_misc_actions – equivalent)
  4. How to save block attributes when the output doesn’t change
  5. How to remove unwanted panels inside InspectorControls from core blocks in Gutenberg
  6. Using Primary Color in Plugin Block
  7. Gutenberg ServerSideRender is deprecated, how to work with new wp.serverSideRender component?
  8. Create Element From Dynamic HTML String [closed]
  9. Plugin Sidebar is not Saving Meta Attribute to Post/Page after “Update”
  10. creating elements/innerblocks via rangecontrol
  11. WordPress: After Gutenberg plugin migration to block.json the localization/ translations with PolyGlot in JavaScript does not work anymore
  12. Looking for callback function after Gutenberg is rendered?
  13. How to Parse an Array of Elements in Gutenberg Block
  14. Using the component outside the editor. select(‘core’) is null
  15. Gutenberg is there a way to know if the current block is reusable?
  16. How to allow core Gutenberg blocks selection only when you are inside a custom inner block
  17. Is there a better way to implement responsive images than what WordPress uses by default?
  18. Gutenberg registerFormatType with Multiple Classes
  19. Saving data from block editor to the database
  20. Gutenberg Block add element in the Editor inside InnerBlocks after div – editor-block-list
  21. Gutenberg – What is the best way to save/update post meta?
  22. How do you render_callback for register_block_type to a method in another class?
  23. How to create multiple Gutenberg blocks in one plugin
  24. How to get color name in PanelColorSettings in custom Gutenberg block?
  25. Gutenberg Block showing invalid content on edit
  26. WordPress Block Development – trouble importing from @wordpress/icons
  27. Gutenberg blocks not getting styled on back end
  28. Is there an additional block.json property to set to get an InnerBlocks child to respect the “supports” property?
  29. How to setAttributes in Gutenberg block?
  30. How to access noticeOperations from withNotices
  31. Best way to save custom css for an block
  32. How to prevent UNDO on guternberg block editor
  33. How to insert text at the current cursor position in Gutenberg?
  34. How to override gutenberg paragraph block edit property
  35. How can I listen to events in Gutenberg block?
  36. It’s possible to passing a ref to FormTokenField from parent component using forwardRef?
  37. Do I have to worry about useState causing a re-render?
  38. What’s the right way to instantiate new blocks and/or the plugin itself in toto when using wppb architecture?
  39. WP Gutenberg Blocks – How to limit first/root blocks
  40. Creating a custom Gutenberg block with columns
  41. How to get boolean value from register_meta properly?
  42. How can I get the selected string when using a toolbar button in Gutenberg?
  43. jQuery selectors for editor elements safe to use?
  44. Gutenberg: import dependency or assign from global variable?
  45. Gutenberg table block with Bootstrap .table class
  46. How to control an elements classes from multiple Gutenberg sidebar controls?
  47. How to add a gradient component to a custom block
  48. How to only load css for used blocks on frontend
  49. Additional classes `undefined` after saving post in Gutenberg
  50. How do you submit a Gutenberg plugin?
  51. Invalid hook call on save, not edit when using swiper slider
  52. Proper way to use useSelect
  53. How to add template colors to custom block options in WordPress Gutenberg editor sidebar?
  54. How to save post meta as an array in Gutenberg?
  55. How to properly package a block plugin
  56. Developing the save function in Gutenberg blocks
  57. WordPress Gutenberg InnerBlocks renderAppender not showing with template
  58. Modify custom block plugin without losing content
  59. Console errors in 6.0-RC1 Widget screen
  60. How to override supports of innerBlocks?
  61. How to use attributes in competent of Gutenberg
  62. When setting styles to an extended block that was saved as a pattern, it doesn’t remove the style that was there
  63. Getting incorrect filepath inside custom block front-end output using @wordpress/create-block tutorial
  64. extraprops override existing props
  65. Trigger function on Remove block or add new block in Gutenberg JavaScript
  66. WPGut – Updating failed and shortcode?
  67. Rerender core Templates with with ToggleControl but it doesnt recognize block type
  68. Gutenberg – Call google map render function in save after DOM has been rendered
  69. Gutenberg block breaks when showing new data
  70. HTMLCollection not counting right in editor? / for loop not working on elements in DOM
  71. Is “document loaded” different on admin side than public side?
  72. How to re-render inspector controls?
  73. How to use setAttributes outside of the edit function return
  74. why is apiFetch throwing Unhandled Promise Rejection: TypeError: Object is not a function
  75. Where do I hook to have the server do something in PHP on block attribute change?
  76. Where to save Gutenberg plugin data?
  77. Gutenberg component in a plugin admin
  78. How to integrate plugins into block editor
  79. Add custom html classes to gutenberg wrapper
  80. How to get access the ID of all posts of custom post type in Gutenberg editor
  81. How to create save function for custom Gutenberg style block?
  82. Gutenberg and custom blocks messed up pagespeed score. What did I wrong?
  83. Gutenberg text field validation
  84. Undo operation not working in Rich text [Gutenberg]
  85. How can i add insertion point between inner blocks in my custom block like core blocks
  86. Gutenberg: – Call a function after Server Side Component is rendered
  87. Accept only PDF file for upload
  88. Render raw html in Gutenberg block
  89. get the queried_object of an url
  90. Build a dynamic block using the default attributes
  91. Add custom data-attribute to core Gutenberg block within an template
  92. Call API on post save/update and show the result in admin area
  93. How to get custom user meta by id in custom Gutenberg block
  94. How to replace content of a block in and re-render on change?
  95. extending a core block doesn’t work inside the editor
  96. Adding a navigation with wp_nav_menu() to a custom block in the site editor
  97. Why isn’t custom sidebar panel not showing up in the Gutenberg Editor?
  98. REST API error in block editor for custom templates
  99. How can I include React useState in a custom gutenberg block plugin?
  100. Remove Gutenberg Buttons Block