Opis:

Opracowałem niestandardowy blok o nazwie „Stylizowana lista” dla edytora bloków WordPress (Gutenberg), który umożliwia użytkownikom tworzenie zaawansowanych stylizowanych list z dostosowywalnymi tytułami, elementami i ikonami. Blok jest przeznaczony do wielokrotnego użytku, a użytkownicy mogą dodawać wiele jego wystąpień do swoich postów lub stron.

Problem:

Głównym problemem, przed którym stoi blok „Stylizowana lista”, jest to, że elementy listy nie są poprawnie renderowane, a treść jest zapętlana między różnymi instancjami bloku. Kiedy dostosowuję elementy listy dla jednego bloku „Stylizowana lista”, te same elementy pojawiają się we wszystkich innych blokach „Stylizowanej listy” na stronie.

Kroki ku reprodukcji:

Dodaj wiele wystąpień bloku „Stylizowana lista” do posta lub strony. Dostosuj elementy listy (tytuły i ikony) dla każdego bloku indywidualnie. Zapisz wpis lub stronę.

Spodziewane zachowanie:

Każde wystąpienie bloku „Stylizowana lista” powinno mieć własne unikalne elementy listy, a zawartość powinna być wyświetlana poprawnie zgodnie z dostosowaniami wprowadzonymi w każdym bloku.

Rzeczywiste zachowanie:

Elementy listy jednego bloku „Stylizowana lista” pojawiają się we wszystkich innych wystąpieniach bloku, powodując powielanie i nieprawidłowe renderowanie treści.

Fragmenty kodu:

Oto odpowiedni kod dla bloku „Stylizowana lista”:

block.json:

{
  "$schema": "
  "apiVersion": 2,
  "name": "lgb/stylized-list",
  "version": "1.0.0",
  "title": "Stylized List",
  "category": "lgb-custom-category",
  "description": "Create advanced styled list",
  "supports": {
    "html": false
  },
  "attributes": {
    "listHeading": {
      "type": "string"
    },
    "listItems": {
      "type": "string",
      "default": "[{\"title\":\"\",\"icon\":\"\"}]"
    },
    "listCaption": {
      "type": "string"
    }
  },
  "textdomain": "lendeducom",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css"
}

edit.js:

// Edit component code
// ...

const parseListItems = JSON.parse(listItems);
// ...

return (
  <div {...blockProps}>
    {/* SidebarSettings and other components */}
    {/* ... */}

    <section className="stylized-list-container">
      <div className="lists">
        <div className="lists-title">
          {/* Title Placeholder */}
        </div>
        <ul>
          {parseListItems.map((item, index) => {
            return (
              <List
                // List component props
                // ...
                listItems={parseListItems}
              />
            );
          })}
        </ul>
        {/* Add New Item Button */}
      </div>
      {/* RichText for List Caption */}
    </section>
  </div>
);

list.js:

// List component code
// ...

const List = (props) => {
  const {
    // List component props
    // ...
    listItems,
  } = props;

  // ...

  return (
    <li>
      {/* List item content */}
      {/* ... */}
    </li>
  );
};

export default List;

console.log of attributes:

{listItems: '[{"title":"item one[1]","icon":""},{"title":"item two[1]","icon":"yes"},{"title":"Item three[1]"}]'}

{listItems: '[{"title":"item one [two]","icon":""},{"title":"Item two[two]"},{"title":"Item three[two]"}]'}

Zrzuty ekranu:

Oczekiwane rozwiązanie:
Zwracam się o pomoc do społeczności WordPress, aby pomóc zidentyfikować główną przyczynę tego problemu i zapewnić rozwiązanie zapewniające, że każda instancja bloku „Stylizowana lista” będzie zachowywać własne unikalne elementy listy bez ingerencji w inne instancje. Doceniam wszelkie uwagi i sugestie dotyczące rozwiązania tego problemu i ulepszenia funkcjonalności bloku „Stylizowana lista”. Z góry dziękuję za Twoją pomoc!