Ecommerce Shopify WordPress Discussion

Built a gutenberg block in edit.js, just not sure how to import it to save.js

I am a newbie to building custom Gutenberg blocks.I've built a block in edit.js import { __ } from '@wordpress/i18n'; import { useBlockProps, InspectorControls, PanelColorSettings } from '@wordpress/block-editor'; import apiFetch from '@wordpress/api-fetch'; import { PanelBody, PanelRow } from '@wordpress/components'; import { useState } from '@wordpress/element'; import './editor.scss'; let options = []; let catagories = []; apiFetch({ path: '/wp/v2/posts?_embed=wp:term' }).then((posts) => { if (posts.length) { posts.forEach((post) => { options.push({ value: post.id, label: post.title.rendered, content: post.excerpt.rendered, image: post.featured_image_url, link: post.link, catagory: post._embedded['wp:term']['0']['0']['name'] }); catagories.push({ catagory: post._embedded['wp:term']['0']['0']['name'] }); }) } } , options); export default function Edit({ attributes, setAttributes }) { const blockProps = useBlockProps(); const { backgroundColor, textColor } = attributes; const updateGroupId = (val) => { setAttributes({ GroupId: parseInt(val) }); } const onChangeBackgroundColor = (BackgroundColor) => { setAttributes({ backgroundColor: BackgroundColor }) } const onChangeTextColor = (TextColor) => { setAttributes({ textColor: TextColor }) } const stringArray = catagories.map(JSON.stringify); const uniqueStringArray = new Set(stringArray); const uniqueArray = Array.from(uniqueStringArray, JSON.parse); const [selectedValue, setSelectedValue] = useState('vtalk'); const handleSelectChange = (event) => { setSelectedValue(event.target.value); console.log(event.target.value); } const mapFile = options.filter((m, idx) => idx < 5 && m.catagory == selectedValue).map((m) => { return (<div class="blog-stamp"><img src={m.image} width="200" height="200" /><h3 class="stamp-title">{m.label}</h3><p class="stamp-excerpt">{m.content}</p><p class="button-parent"><a href={m.link} class="sfs-button" style={{ backgroundColor: backgroundColor, color: textColor }}>Read more</a></p></div>) }); return ( <div {...blockProps}> <InspectorControls> <PanelColorSettings title={__('Button Color settings', 'sfs-block')} initialOpen={false} colorSettings={[ { value: textColor, onChange: onChangeTextColor, label: __('Button Text color', 'sfs-block') }, { value: backgroundColor, onChange: onChangeBackgroundColor, label: __('Button Background color', 'sfs-block') } ]} /> <PanelBody title={__('catagory filter', 'sfs-block')} initialOpen={true} > <PanelRow> <fieldset> <select value={selectedValue} onChange={handleSelectChange}> {uniqueArray.map((cat) => { return <option value={cat.catagory}>{cat.catagory}</option> })} </select> </fieldset> </PanelRow> </PanelBody> </InspectorControls> {console.log(uniqueArray)} <p class="blog-stamp-parent">{mapFile}</p> </div> ); } However, I call a .map() in edit.js, I am not really sure what I need to do code wise so it renders in save.js. I've been research this for days but can't come up with a solution. But, every solution just gives me loads of errors. I am not sure if i should create a seperate file and import everything in there using registerBlockType() However I think I will still have the same problem of what to put in save. Please help
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.