[wp-trac] [WordPress Trac] #59288: Blocks API JSX Map in Save function does not rerender

[WordPress Trac]

#59288: Blocks API JSX Map in Save function does not rerender
----------------------------+-----------------------------
 Reporter:  frankastin2023  |      Owner:  (none)
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Plugins         |    Version:  6.3.1
 Severity:  normal          |   Keywords:
  Focuses:                  |
----------------------------+-----------------------------
 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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/59288>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform