To achieve your goal:
-
All of your React logic will need to be in your edit.js file and not your save.js file. The save.js file is only for viewing the final data on the WP Admin after you save a post or on the live post.
-
The view.js file can only contain Vanilla JavaScript (from the way you are using it). Then when you save your block, on the saved post WP Admin screen or the live post screen you the React JSX you added in your save.js file will be converted to HTML and your view.js file will need to be Vanilla JavaScript that interacts with this HTML.
Let em know if this makes sense.
Related Posts:
- lodash dependency in a Gutenberg plugin
- creating elements/innerblocks via rangecontrol
- Looking for callback function after Gutenberg is rendered?
- Gutenberg: useDispatch is not a function – @wordpress/data included
- Make a list with header and subtext in Gutenberg blocks
- Gutenberg – What is the best way to save/update post meta?
- How to prevent UNDO on guternberg block editor
- Do I have to worry about useState causing a re-render?
- Creating a custom Gutenberg block with columns
- Gutenberg: import dependency or assign from global variable?
- How to control an elements classes from multiple Gutenberg sidebar controls?
- Developing the save function in Gutenberg blocks
- Gutenberg – is it ok to load dependencies multiple times?
- Preventing double loading JS scripts (like React) when developing for Gutenberg
- Getting incorrect filepath inside custom block front-end output using @wordpress/create-block tutorial
- Trigger function on Remove block or add new block in Gutenberg JavaScript
- Rerender core Templates with with ToggleControl but it doesnt recognize block type
- HTMLCollection not counting right in editor? / for loop not working on elements in DOM
- What happens/fires when you select a block in the editor?
- Is “document loaded” different on admin side than public side?
- How to use setAttributes outside of the edit function return
- why is apiFetch throwing Unhandled Promise Rejection: TypeError: Object is not a function
- Reading plugin settings in esnext wordpress block
- How can i add insertion point between inner blocks in my custom block like core blocks
- Reinitiate Gutenburg’s blocks using javascript
- Insert text programmatically in WordPress Gutenberg Editor
- How to move custom gutenberg block controls from settings to styles tab?
- How to use useSelect to retrieve the currently default fontFamily?
- Event when Modal is opened/visible
- Cannot call a class as a function in block plugin react component
- useBlockProps() nests wrapper with class name inside block wrapper in the editor
- Gutenberg move post/page title to Editor sidebar document panel
- configure additonal build files in the @wordpress/create-block
- Is It Possible to Use the Block Editor’s Notification Feature to Send Another Notification After the Post Is Saved?
- WP Gutenberg Blocks – How to limit first/root blocks
- How to get boolean value from register_meta properly?
- “import declarations may only appear at top level of a module” when importing WooCommerce API node module
- JSX in WordPress Plugin Development
- ResizableBox with RangeControl not working
- How can I get the selected string when using a toolbar button in Gutenberg?
- jQuery selectors for editor elements safe to use?
- wp.template() returns tags in Ajax response
- There is a problem in the gutenberg block I developed. Problem is with withInstanceId
- My WordPress plugin cannot load my JavaScript file
- javascript datatables in a plugin
- add javascript files only when plugin is called?
- Inserting code to HTML view from a pop up initiated from visual view
- Gutenberg table block with Bootstrap .table class
- Plugin – Make sure jquery is loaded in my settings page plus my JS file
- How can I avoid conflicts between plugin and theme?
- How should I go about registering JavaScript that isn’t a file? [duplicate]
- What action hook can I use to add a JavaScript to a page post using a theme template that is not including get_header() nor get_footer()?
- How to add a gradient component to a custom block
- should i be checking for jquery before enqueing it in a plugin
- How to only load css for used blocks on frontend
- Additional classes `undefined` after saving post in Gutenberg
- How do you submit a Gutenberg plugin?
- Loading custom js file on the admin page through plugin
- Run JavaScript validation script on form submit in plugin
- Custom Plugin – CSS works, JS doesn’t
- Catching Gutenberg sidebar switch event
- Translate javascript with WordPress built-in localization API for static strings
- Invalid hook call on save, not edit when using swiper slider
- Proper way to use useSelect
- Use npm and wp-env to make production bundle
- How to add template colors to custom block options in WordPress Gutenberg editor sidebar?
- Passing the name of selected color from the custom component to `render_callback`
- How to save post meta as an array in Gutenberg?
- Need help about understand api, wp, $ syntax in WordPress plugin script
- How to use apiFetch to get author information in Gutenberg properly?
- Gutenberg blocks error: Each child in a list should have a unique “key” prop
- How to add a panel/box/widget/are/screen to the right side of edit post/page confusion
- Insert Into Post Not Working For Audio File Using jQuery
- Service Worker Uncaught (in promise) DOMException
- How to properly package a block plugin
- Setting global block attribute value
- WordPress Gutenberg InnerBlocks renderAppender not showing with template
- About a programming language starts with [closed]
- Referencing files in JavaScript in WordPress Plugin
- How to insert HTML/CSS/JS into my iframe plugin?
- Is there a WordPress plugin to design WebGL? [closed]
- Should I put my plugin javascript inline?
- How to write a shopping queue line plugin with a queue button?
- Modify custom block plugin without losing content
- WordPress – Get Posts with Category data
- Set Button in PluginDocumentSettingPanel Content (WordPress Gutenberg)
- Console errors in 6.0-RC1 Widget screen
- Custom Block Not Shown in Block Inserter
- How to override supports of innerBlocks?
- wp.media libary pdf type
- How to use attributes in competent of Gutenberg
- var(–text-color) in style.scss works once but not twitch
- When setting styles to an extended block that was saved as a pattern, it doesn’t remove the style that was there
- wordpress full site editing problem when extending core blocks
- Pass custom props to
- wp.media gallery collection sometimes undefined
- Query String Filtering API
- How to extend SelectControl with data from my theme
- extraprops override existing props
- Multiple TinyMCE on button click is initialized and appended but why only last one is writeable?