[Résolu] Block Gutemberg avec tri en drag en drop (Créer un compte)

  • WordPress :6.2
  • Statut : résolu
4 sujets de 1 à 4 (sur un total de 4)
  • Auteur
    Messages
  • #2455552
    Ostalada
    Participant
    Initié WordPress
    16 contributions

    Ma configuration WP actuelle

    • Version de PHP: 8
    • Thème utilisé : Thème custom
    • Extensions en place : Aucune
    • Nom de l’hébergeur : Local

    Problème(s) rencontré(s) :

    Bonjour à tous,

    Voici une question pour les développeurs WP et React. Je viens de finir pour premier thème FSE, c’était très intéressant. Pour ce thème, j’ai été amené à crée plusieurs blocks Gutemberg personnalisés via la librairie officielle create-block. Pour une question d’UX, j’aurais bien aimé que sur certains blocks il y ait un système de tri en drag and drop, comme sur le gif en pièce jointe. Mais je n’ai pas trouvé de solutions. Il y a bien cette librairie https://github.com/lucprincen/gutenberg-sortable, mais elle est obsolete, elle ne veut pas se faire compiler.

    Vous auriez une idée ? Voici un code simplifié que vous pouvez améliorer.

    import { registerBlockType } from "@wordpress/blocks";
    import "./style.scss";
    import metadata from "./block.json";
    import { useBlockProps } from "@wordpress/block-editor";

    registerBlockType(metadata.name, {
    attributes: {
    items: {
    type: "array",
    default: ["carrot", "cabbage", "zucchini"],
    },
    },

    edit: (props) => {
    const blockProps = useBlockProps();
    const {
    attributes: { items },
    setAttributes,
    } = props;

    const sortItems = (sortedItems) => {
    setAttributes({ items: sortedItems });
    };

    return (
    <div {...blockProps}>
    {items.map((item) => (
    <div className="item">{item}</div>
    ))}
    </div>
    );
    },

    save: (props) => {
    const blockProps = useBlockProps.save();
    const {
    attributes: { items },
    } = props;

    return (
    <div {...blockProps}>
    {items.map((item) => (
    <div className="item">{item}</div>
    ))}
    </div>
    );
    },
    });

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2455570
    momofr@free.fr
    Modérateur
    Maître WordPress
    6895 contributions

    Salut, je ne comprend pas précisément où cela doit fonctionner (front ou backend ?), cette vidéo parle de réarrangement des blocs Gutenberg (dans le bloc), ce n’est sans doute pas ce que tu cherches.

    #2455575
    Ostalada
    Participant
    Initié WordPress
    16 contributions

    Bonjour momofr@free.fr,

    Et merci pour cette question. L’idée est que dans le backend, on puisse ordonner les items d’un block Gutemberg personnalisé via un drag and drop.
    En effet, cette video ne m’est pas très utile.

    #2455678
    Ostalada
    Participant
    Initié WordPress
    16 contributions

    Bonjour à tous,

    Après réflexion, le mieux était à coup sûr d’utiliser le drag and drop natif de Gutemberg. Et donc de concevoir deux custom blocks. Un block parent et un block enfant. Le bloc parent possède un innerBlock qui ne peut recevoir que des blocks enfants. Voici le code simplifié.

     

    block.json du parent

    {
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "domain/vegetables",
    "version": "0.1.0",
    "title": "Vegetables",
    "category": "text",
    "icon": "carrot",
    "description": "A sortable list of vegetables",
    "supports": {
    "html": false
    },
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"
    }

     

    index.js du parent

    import { registerBlockType } from "@wordpress/blocks";
    import metadata from "./block.json";
    import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

    registerBlockType(metadata, {
    edit: () => {
    const blockProps = useBlockProps();

    return (
    <div {...blockProps}>
    <InnerBlocks
    allowedBlocks={["domain/vegetable"]}
    template={[["domain/vegetable"]]}
    />
    </div>
    );
    },

    save: (props) => {
    const blockProps = useBlockProps.save();

    return (
    <div {...blockProps}>
    <InnerBlocks.Content />
    </div>
    );
    },
    });

     

    block.json de l’enfant

    {
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "domain/vegetable",
    "version": "0.1.0",
    "title": "Vegetable",
    "category": "text",
    "icon": "carrot",
    "parent": ["domain/vegetables"],
    "description": "A vegetable",
    "supports": {
    "html": false
    },
    "attributes": {
    "name": {
    "type": "string"
    }
    },
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"
    }

     

    index.js de l’enfant

    import { registerBlockType } from "@wordpress/blocks";
    import metadata from "./block.json";
    import { useBlockProps, RichText } from "@wordpress/block-editor";

    registerBlockType(metadata, {
    edit: (props) => {
    const blockProps = useBlockProps();
    const {
    attributes: { name },
    setAttributes,
    } = props;

    return (
    <div {...blockProps}>
    <RichText
    {...blockProps}
    tagName="p"
    value={name}
    allowedFormats={[]}
    onChange={(name) => setAttributes({ name })}
    placeholder={"A vegetable..."}
    />
    </div>
    );
    },

    save: (props) => {
    const blockProps = useBlockProps.save();
    const {
    attributes: { name },
    } = props;

    return (
    <div {...blockProps}>
    <p>{name}</p>
    </div>
    );
    },
    });

4 sujets de 1 à 4 (sur un total de 4)
  • Vous devez être connecté pour répondre à ce sujet.