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 include jQuery and JavaScript files correctly?
- check if Gutenberg is currently in use
- How to use PanelColorSettings in custom Gutenberg block?
- How can I run AJAX on a button click event?
- Can I use the wp media uploader for my own plugin?
- Customizing the 3.5 “Add Media” popup (Backbone.js)
- Test to see if jQuery or Prototype is queued by another plugin?
- jQuery in header or footer
- Hook the Keydown Event in the TinyMCE Post Editor
- Adding pre-publish checks with Gutenberg
- Managing two editable fields in gutenberg
- How to make repeated component/block in Gutenberg
- How to get data from WordPress $wpdb into React Gutenberg Blocks Frontend?
- wp_localize_script $handle
- How do I only load js on the post-new.php and post.php pages in admin?
- What’s the Right Way to get and save remote data for a Gutenberg block?
- Error : “Updating failed: The response is not a valid JSON response” with custom shortcode
- How to disable “Transform to” option in Gutenberg custom blocks
- Create custom blocks for bootstrap
- Passing select control value to block
- Saving data from block editor to the database
- How do I store information in a dynamic block in WordPress?
- How to Load Plugin JS in theme’s footer section
- How insert negative values in Gutenberg box-control
- Initial help with official “create a block” tutorial
- Are block templates incompatible with serialize_blocks?
- How do I dynamically render an InnerBlock inside a dynamic block?
- ServerSideRender and Media Object: attributes passing image data object to php renderer even though it’s not set
- Gutenberg blocks not getting styled on back end
- How to add Internationalization in WordPress using Javascript/React?
- Run code once when block is created
- How can I listen to events in Gutenberg block?
- It’s possible to passing a ref to FormTokenField from parent component using forwardRef?
- WP Gutenberg Blocks – How to limit first/root blocks
- JSX in WordPress Plugin Development
- ResizableBox with RangeControl not working
- javascript datatables in a plugin
- 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()?
- should i be checking for jquery before enqueing it in a 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
- Use npm and wp-env to make production bundle
- Passing the name of selected color from the custom component to `render_callback`
- 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
- Service Worker Uncaught (in promise) DOMException
- Setting global block attribute value
- About a programming language starts with [closed]
- Referencing files in JavaScript in WordPress Plugin
- Should I put my plugin javascript inline?
- WordPress – Get Posts with Category data
- Custom Block Not Shown in Block Inserter
- var(–text-color) in style.scss works once but not twitch
- jQueryUI draggable doesn’t work in WordPress plugin
- Get value of custom checkbox from Gutenberg sidebar in plugin
- Where to save Gutenberg plugin data?
- Gutenberg component in a plugin admin
- XMLHttpRequest to open PHP file responds with Missing Page
- Replace the WordPress Media Library Uploader
- How to display archive by selecting year and then selecting month
- Custom plugin not appearing
- Gutenberg’s Popover component position relative to the focused element
- Gutenberg: – Call a function after Server Side Component is rendered
- How react js and other Javascript Technologies works on WordPress plugin?
- Accept only PDF file for upload
- get the queried_object of an url
- Trigger a JavaScript function based on the data fetched from Woo commerce hook
- Add custom data-attribute to core Gutenberg block within an template
- Call API on post save/update and show the result in admin area
- How to get custom user meta by id in custom Gutenberg block
- Remove Gutenberg Buttons Block