Un markup spécifique pour la liste des blocks d'un objet (pour ne pas hériter de .liste_items)

css/blocks_prive.css

@@ -15,28 +15,32 @@
 	align-items: center;
 }
 
-.liste_items.blocks {
+.objet_blocks {
+	position: relative;
 }
 
-.liste_items.blocks .item.block {
+.objet_blocks .objetblock {
 	position: relative;
 	border:1px solid var(--spip-color-gray-light);
 	border-radius:5px;
 	margin-bottom: 1rem;
 	padding: 0;
 }
-.liste_items.blocks .item:hover {
+.objet_blocks .item:hover {
 	background-color: transparent;
 }
 
-.liste_items.blocks .objetblock__header {
+.objet_blocks .objetblock__header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	border-bottom: 1px solid var(--spip-color-gray-lighter);
 	padding-left: calc(var(--spip-form-spacing-x) / 2);
 }
-.liste_items.blocks .actions {
+.objet_blocks .objetblock__header > * {
+	margin: 0;
+}
+.objet_blocks .actions {
 	/*position: absolute;*/
 	/*top: 50%;*/
 	/*transform: translateY(-50%);*/
@@ -46,21 +50,21 @@
 	margin: 0;
 	z-index: 1;
 }
-.liste_items.blocks .actions button,
-.liste_items.blocks .actions .btn {
+.objet_blocks .actions button,
+.objet_blocks .actions .btn {
 	cursor: pointer;
 	background-color: var(--spip-color-gray-lightest);
 	border: none;
 	margin: 0;
 }
-.liste_items.blocks .actions button:hover,
-.liste_items.blocks .actions .btn:hover {
+.objet_blocks .actions button:hover,
+.objet_blocks .actions .btn:hover {
 	background-color: var(--spip-color-gray-lighter);
 }
-.liste_items.blocks .actions .puce_objet_popup {
+.objet_blocks .actions .puce_objet_popup {
 	display: flex;
 }
-.liste_items.blocks .actions .move {
+.objet_blocks .actions .move {
 	cursor:move;
 }
 .item.deplacer-block-placeholder {
@@ -68,13 +72,13 @@
 }
 
 
-.liste_items.blocks .objetblock__content {
+.objet_blocks .objetblock__content {
 	padding: calc(var(--spip-list-spacing-y) / 2) calc(var(--spip-list-spacing-x) / 2);
 }
-.liste_items.blocks .objetblock__content--edit {
+.objet_blocks .objetblock__content--edit {
 	background-color: var(--spip-color-gray-lightest);
 }
-.liste_items.blocks .objetblock__content .formulaire_editer_block {
+.objet_blocks .objetblock__content .formulaire_editer_block {
 	margin: 0 0 calc(var(--spip-list-spacing-y) / -2) 0;
 	padding: 0;
 	border: none;

javascript/gestion_listes_blocks.js.html

@@ -3,24 +3,20 @@
 
 	Gestion des listes de blocks :
 	- Gestion du tri par glisser-déposer
-
-	Markup :
-	- Listes              : .liste_items.blocks
-	- Listes ordonnables  : .liste_items.blocks.ordonner_rang_lien\[data-lien\]
-
+	- Edition en place (ajax)
 */]
 
 /* Gestion du tri des listes de blocks et de leur enregistrement */
 function ordonner_listes_blocks() {
 
 	if (typeof Sortable === 'function') {
-		$(".liste_items.blocks.ordonner_rang_lien[data-lien]").find('> .sortable').each(function () {
+		$(".objet_blocks[data-lien]").find('> .sortable').each(function () {
 			// détruire / recréer le sortable à chaque appel ajax
 			if (Sortable.get(this)) {
 				Sortable.get(this).destroy();
 			}
 			// pas de tri possible s'il n'y a qu'un seul élément.
-			if ($(this).find('> .item').length < 2) {
+			if ($(this).find('> .objetblock').length < 2) {
 				$(this).find('.deplacer-block').hide();
 				$(this).parent().find('.tout_desordonner').hide();
 				return true; // continue
@@ -44,7 +40,7 @@ function ordonner_listes_blocks() {
 					const $item = $(event.item);
 
 					// l'objet lié est indiqué dans l'attribut data-lien sur la liste
-					const [objet_lie, id_objet_lie] = $items.parents(".liste_items.blocks").data("lien").split("/");
+					const [objet_lie, id_objet_lie] = $items.parents(".objet_blocks").data("lien").split("/");
 					const action = '[(#VAL{ordonner_liens_blocks}|generer_url_action{"", 1})]';
 					const params = {
 						objet_source: 'block',
@@ -87,9 +83,9 @@ if (window.jQuery) {
 }
 
 $(function() {
-	$('.liste_items.blocks .actions .editer_block').on('click', function(e) {
+	$('.objet_blocks .actions .editer_block').on('click', function(e) {
 		e.preventDefault();
-		let $parent = $(this).parents('.item.block').first();
+		let $parent = $(this).parents('.objetblock').first();
 		let $content = $parent.find('.objetblock__content');
 		let dest = $(this).attr('href');
 		dest = parametre_url(dest, 'var_zajax', 'contenu');
@@ -103,5 +99,4 @@ $(function() {
 			$content.html(data).addClass('objetblock__content--edit');
 		});
 	});
-
 });

prive/squelettes/inclure/blocks_objet.html

@@ -1,10 +1,10 @@
 <B>
 [<h2>(#GRAND_TOTAL|singulier_ou_pluriel{block:info_1_block,block:info_nb_blocks})</h2>]
 
-<div class="liste_items blocks ordonner_rang_lien" data-lien="#ENV{objet}/#ENV{id_objet}">
+<div class="objet_blocks"[ data-lien="(#ENV{objet})/#ENV{id_objet}"]>
 	<div class="sortable">
 	<BOUCLE(BLOCKS) {objet}{id_objet} {statut?} {par rang_lien}>
-		<div class="item block statut_#STATUT" id="block#ID_BLOCK" data-id="#ID_BLOCK">
+		<div class="objetblock statut_#STATUT" id="block#ID_BLOCK" data-id="#ID_BLOCK">
 			<div class="objetblock__header">
 				<h3 class="titrem objetblock__type">
 					[(#CHEMIN_IMAGE{block-16.png}|balise_img)]