Make WordPress Core

Opened 9 months ago

#59288 new defect (bug)

Blocks API JSX Map in Save function does not rerender

Reported by: frankastin2023's profile frankastin2023 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.3.1
Component: Plugins Keywords:
Focuses: Cc:

Description

Hi,

I am building a custom block, it is a hero slider.

In the parameters I am defining an attribute called slides which has an empty array as it's default value.

In the Edit function :

registerBlockType("fa-gutenberg-blocks/fa-01-hero-slider", {
  edit: Edit,
  save: Save,
});

It loads fine and I can create add new elements to it like so

const addSlide = () => {
    const emptySlide = {
      title: "",
      description: "",
      media: { url: "", id: null },
      ctaLabel: "",
      ctaURL: "",
      backgroundColor: "#CCC",
    };

    const newCurrentSlide = slides.length;

    setAttributes({
      slides: [...slides, emptySlide],
    });

    setTimeout(() => {
      setAttributes(
        {
          currentSlide: newCurrentSlide,
        },
        200
      );
    });
  };

However in the Save function it does not load an empty array the attribute is undefined. To try and solve this I set the slides attribute to an empty array if undefined, as I added objects to the slides array they appeared in the Save function. I then called a array map method on the slides in the returned JSX in the save function which returned some html for each array item. When I loaded the the block on the actual page (not the edit screen) it did not render the mapped JSX html, but the attribute slides does contain the updated array.

To see the full code view the repo here : https://github.com/frankastin2023/fa-hero-slider

Change History (0)

Note: See TracTickets for help on using tickets.