[Résolu] [WordPress] identifier action "publier" pour modifications à

Bonjour,
Gutenberg est une véritable révolution pour WordPress, mais pour les développeurs, c'est une véritable remise en question s'ils doivent mettre les main das le cambouis dans ce nouvel environnement.
Actuellement, j'essaie d'adapter mes plugins WordPress à ce nouvel éditeur... La documentation n'est pas encore aussi exhaustive que le codex de WordPress, mais on arrive à glaner des choses de ci de là.
Je suis à présent bloqué sur quelque chose qui devrait être simple, mais je n'arrive pas à trouver l'info. Voici ce que je souhaiterais faire : j'ai créé un élément (node) dans la barre d'outil de l'administration comportant un lien inactif par défaut (href="#"). Je souhaiterais modifier ce lien après la publication de l'article qui se fait à présent sans rechargement de la page. Il me faut donc identifier l'action de publication pour lancer mon code de remplacement du href. J'ai tenté avec quelque chose qui ressemble à ça :

jQuery(".editor-post-publish-button").on("click", function() {
   // le code pour remplacer l'url du lien
);

Mais bien évidemment cela ne fonctionne pas la méthode DOM ne fonctionne plus dans ce cas.
Est-ce que je peux trouver mon bonheur dans cette page ? https://riad.blog/2018/06/07/efficient-client-data-management-for-wordpress-plugins/ (fonction subscribe ?)
Un petit coup de pouce ?
Merci d'avance.

Modifié par jojaba (29 Sep 2019 - 18:58)

J'ai tenté autre chose :

wp.data.subscribe( function() {
   if(wp.data.select( 'core/editor' ).isCurrentPostPublished()) {
      var pId = <?php echo $post->ID ?>;
      var pTitle = wp.data.select('core/editor').getEditedPostAttribute( 'title' );
      if(pTitle != '') {
         // le code pour remplacer ce qui doit être remplacé...
      }
   }
});

Mais la console indique que wp.data est "undefined". J'ai fait inscrire ce code dans le footer en utilisant le hook 'admin_footer' il faut peut-être trouver un autre hook ?
Modifié par jojaba (29 Sep 2019 - 19:33)

Bon j'avance un peu. Il doit y avoir un problème de dépendance à une bibliothèque comme cela est expliqué ici : https://github.com/WordPress/gutenberg/issues/12702
Il faut que je fasse appelle ("register") aux scripts nécessaires (wp-data et wp-editor) comme documenté ici :
https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type/#enqueuing-block-scripts
Mais comment fait-on lorsque le code se trouve dans un fichier php ? Je suis contraint de le laisser dans le .php car il me faut des variables générées au niveau serveur dans mon script JS...
Pas le temps pour l'instant de voir ce que ça donne en indiquant directement le fichier php dans la mise en file d'attente (enqueuing), je verrai ça dès que possible... Le code ressemblerait à ça dans mon plugin (au lieu d'avoir un fichier .js je place le fichier php, dans mon exemple, fichier.php).

/*
Plugin Name: test Jojaba
*/
function gutenberg_test_jojaba() {
   wp_register_script(
      'test_jojaba', plugins_url( 'fichier.php', __FILE__ ), array( 'wp-data', 'wp-editor' )
   );
}
add_action( 'init', 'gutenberg_test_jojaba' );

Modifié par jojaba (30 Sep 2019 - 07:09)

On n'est jamais mieux servi par soi-même Et en plus on apprend plein de choses très intéressantes
J'ai résolu mon problème qui était effectivement lié à une dépendance vis à vis de bibliothèques spécifiques à l'éditeur Gutenberg. Voici comment j'ai fait :
1) J'ai externalisé le code JS dans un fichier .js

wp.data.subscribe( function() {
    if(wp.data.select( 'core/editor' ).isCurrentPostPublished()) {
        const { __, _x, _n, _nx } = wp.i18n; // for translation
        var pId = wp.data.select("core/editor").getCurrentPostId();
        var pTitle = wp.data.select('core/editor').getEditedPostAttribute( 'title' );
        if(pTitle != '') {
            var UpdatedlinkUrl = 'post-new.php?post_type=reminder&simdiaw_p_id=' + pId + '&simdiaw_p_title=' + encodeURI(pTitle);
            jQuery(".simdiaw_publish_for_new_reminder a").attr("href", UpdatedlinkUrl);
            jQuery(".simdiaw_publish_for_new_reminder a").html('<span class="ab-icon dashicons dashicons-pressthis"></span>' + __('Create a reminder for this post', 'simple-diary'));
            jQuery("#wp-admin-bar-new_reminder").attr("class", "simdiaw_new_reminder");
        }
    } else {
        jQuery(".simdiaw_new_reminder a").attr("href", "#");
        jQuery(".simdiaw_new_reminder a").html('<span class="ab-icon dashicons dashicons-pressthis"></span>' + __('Publish the post to create a new reminder', 'simple-diary'));
        jQuery("#wp-admin-bar-new_reminder").attr("class", "simdiaw_publish_for_new_reminder");
    }
});

2) J'ai "registré" (proposition de traduction : "mis à disposition") ce fichier (ici le fichier minifié simple-diary.min.js) et l'ai placé dans la file d'attente des scripts :

function get_dependencies_for_simdiaw_js() {
    wp_set_script_translations( 'dependencies_for_simdiaw_gutenberg_handling', 'simple-diary', plugin_dir_path( 'simple-diary' ) );
    wp_register_script( 'dependencies_for_simdiaw_gutenberg_handling', plugins_url( 'simple-diary.min.js', __FILE__ ), array( 'wp-data', 'wp-editor', 'wp-i18n', 'jquery' ));
    wp_enqueue_script('dependencies_for_simdiaw_gutenberg_handling');
 }
 add_action( 'init', 'get_dependencies_for_simdiaw_js' );

Les dépendances sont indiquées dans le tableau final de la fonction wp_register_script() (donc : wp-data, wp-editor, wp-i18n et jquery.
3) Vous remarquerez qu'une des dépendances est wp-i18n. C'est une trouvaille que j'ai faite, fort pratique, je vous donne une page expliquant l'utilité de ce ce script disponible depuis la version 5 de WordPress : https://pascalbirchler.com/internationalization-in-wordpress-5-0/

Voilà, j'espère que cela pourra être utile pour d'autres

PS : avis aux modérateurs, je pense qu'il faudrait placer cette discussion (ou plutôt ce monologue) dans la catégorie "côté client" ou "JavaScript"... Merci d'avance.
Modifié par jojaba (07 Oct 2019 - 07:04)