plugin development – Trying to create an array of attributes. The array isn’t populating

Question

I am converting an array thats being pulled for apiFetch call into attributes using the .map function. I used this article as my reference. It was working but now has stopped so my question is why is my array empty? Did I not map the attributes correctly? Or, can you just not do this with attributes?

I am looking to try to map the apiFetch values into an array of attributes that would be pulled by my save. js and displayed. I’ve included my code with the hope someone can unpick it and tell me where I’ve goofed.

I am a newbie so be kind please.

Here is my code:
edit.js

const { backgroundColor, textColor, selectedValue, myNumber, menuItems2} = attributes;
...
    function upadateMenuItems(src, heading, para, href, index){
        const updateMenuItems= [...menuItems2];
        updateMenuItems[index]= {src: src, heading: heading, para: para, href: href};
        setAttributes({menuItems2: updateMenuItems});
    }
...
{options.filter((m, idx) => idx < myNumber && m.catagory == selectedValue).map((m) => { 
    
        return (
        <div class="blog-stamp">
            <img src={m.image} width="200" height="200" />
            <RichText 
                tagName="h3"
                class="stamp-title"
                onChange={(heading) => upadateMenuItems(src, heading, para, href)}
                value={ m.label }
            />
            <RichText 
                tagName="p"
                class="stamp-excerpt"
                onChange={(para) => upadateMenuItems(src, heading, para, href)}
                value={m.content}
            />
            <p class="button-parent">
            <ExternalLink 
                href={ m.link}
                className="sfs-button" 
                style={{ backgroundColor: backgroundColor, color: textColor }}
            >
                    { 'Read more' }
            </ExternalLink>
                </p>
            </div>) })}
...

block.json

    "attributes": {
        "content": {
          "type": "string",
          "source": "html",
          "selector": "h2"
        },
        "backgroundColor": {
            "type": "string"
        },
        "textColor": {
            "type": "string"
        },
        "selectedValue": {
            "type":"string",
            "default": "Uncategorised"
        },
        "myNumber":{
            "type":"number",
            "default": "4"

        },
        "menuItems2":{
            "type":"array",
            "source": "query",
            "selector": "div",
            "default": [],
            "query" : {
                "src": {
                    "type":"string",
                    "source": "attribute",
                    "selector": "img",
                    "attribute": "src"
                },
                "heading": {
                    "type": "string",
                    "selector": "h3.stamp-title",
                    "source" : "text"
                },
                "para": {
                    "type": "string",
                    "selector": "p.stamp-excerpt",
                    "source" : "text"
                },
                "href": {
                    "type":"string",
                    "source": "attribute",
                    "selector": "a",
                    "attribute": "href"
                }
            }
        }
      },

save.js

import { useBlockProps } from 'wordpress user/block-editor';

export default function save({attributes}) {
    const { backgroundColor, textColor, selectedValue,myNumber, menuItems2  } = attributes;
    const mapFile = menuItems2 && menuItems2.map(({src, heading, para, href}) => { 
        return (
        <div class="blog-stamp"><img src={src} width="200" height="200" /><h3 class="stamp-title">{heading}</h3><p class="stamp-excerpt">{para}</p><p class="button-parent"><a href={href} class="sfs-button" style={{ backgroundColor: backgroundColor, color: textColor }}>Read more</a></p></div>) });
    return (
        <div{ ...useBlockProps.save() }>
        <p class="blog-stamp-parent">{mapFile}</p>
        </div>
    );
}

Thanks in advance for your help

0
Dave B 2 weeks 2024-02-10T07:18:40-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse