Block Gutemberg avec tri en drag en drop

WordPress :6.2
Statut : résolu

Ce sujet contient 3 réponses, 2 participants et a été mis à jour pour la dernière fois par Ostalada, le il y a 3 mois et 4 semaines.

4 sujets de 1 à 4 (sur un total de 4)

Auteur

Messages
3 juin 2023 à 13 h 02 min #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.
3 juin 2023 à 16 h 43 min #2455570

momofr@free.fr
Modérateur

Maître WordPress
6315 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.

3 juin 2023 à 18 h 04 min #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.

5 juin 2023 à 18 h 57 min #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>
		);
	},
});
```
Auteur

Messages