block editor – Child/nested component not updating on drag/drop

Question

I have created a parent “Tabs” component which you can add child “Tab” components to. Tabs can be deleted and they can be dragged/reordered using dnd kit.

On the backend everything is working as it should. I can add tabs, delete tabs, reorder tabs and everything is perfect.

The issue is on the frontend though. If I have 3 tabs and I for example drag the 3rd tab to first position, so the tab order is now as below and it looks like this in the backend which is correct.

Tab3
  Tab 3 content
Tab2
  Tab 2 content
Tab1
  Tab 1 content

On the frontend though, on initial load it looks like the below. But if I click on the tabs then it comes right. It seems like the child component order is not saving.

Tab3
  Tab 1 content
Tab2
  Tab 2 content
Tab1
  Tab 3 content

Code below… I do have a sortable-item.js file as is common using dnd so let me know if I need to post this code as well. Just trying to keep the code to a minimum.

// ADD NEW TAB
const addNewTab = () => {
  const tab = createBlock("blocks/tab");
  const position = tabs.length;
  dispatch("core/block-editor").insertBlock(tab, position, clientId);
  setAttributes({
    tabs: [
      ...tabs,
      {
        uid: tab.clientId,
        title: `Tab ${tabs.length + 1}`,
      },
    ],
  });
  setActiveTab(tab.clientId);
};

// DRAG AND DROP
const handleDragEnd = (event) => {
    
  const { active, over } = event;
    
  if (active && over && active.id !== over.id) {
    const oldIndex = tabs.findIndex((i) => active.id === i.uid);
    const newIndex = tabs.findIndex((i) => over.id === i.uid);
    setAttributes({ tabs: arrayMove(tabs, oldIndex, newIndex) });
    setActiveTab(active.id);
  }
};

// SET ACTIVE TAB
const setActiveTab = (uid) => {
    
  setAttributes({ activeTab: uid });
    
  const parentBlock = select("core/block-editor").getBlock(clientId);

  parentBlock.innerBlocks.forEach((innerBlock) => {
    dispatch("core/block-editor").updateBlockAttributes(
      innerBlock.clientId,
      {
        activeTab: uid,
      }
    );
  });
};

// SAVE FUNCTION / FRONTEND OUTPUT FOR PARENT TABS BLOCK
  <div {...blockProps}>
    <div className={"guten-tabs-nav"}>
      {tabs.map((tab) => {
        return (
          <div
            key={tab.uid}
            className={"guten-tab-item"}
            role="tab"
            tabIndex="0"
          >
            <div data-tab-id={tab.uid} className={`guten-tab-link`}>
              <div>{tab.title}</div>
            </div>
          </div>
        );
      })}
    </div>
    <div className={"guten-tab-content"}>
      <InnerBlocks.Content />
    </div>
  </div>

// SAVE FUNCTION FOR CHILD TAB BLOCK
  save: ({ attributes }) => {
    const { uid } = attributes;

    return (
      <div {...useBlockProps.save()}>
        <div data-tab-id={uid} className={"guten-tab-panel"}>
          <InnerBlocks.Content />
        </div>
      </div>
    );
  },

0
user8463989 1 month 2022-10-25T12:09:43-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse