Vous êtes arrivés ici soit par hasard, soit parce que vous cherchez désespérément à modifier le DOM des gallery Gutenberg. Pour les 1er c est pas grave ça vous servira peut être un jour, pour les seconds par contre, votre Graal est ici, quelques lignes plus bas.
Graal ? Carrément… t’as craqué mec
Effectivement j’ai bien craqué, quand j’ai passé 5h à chercher comment faire ce truc, à trouver le bon hook. Avant Gutenberg il fallait ajouter un filtre sur post_gallery, ça c’est les 1er articles que j’ai trouvé et j’étais content. Mais Gutenberg a tout changé, et n’a pas re-implelmenté cet event, j’ai remonté les pistes sur le depot git, les Issues ouvertes et fermées, tout ça pour arriver à la fin à un nom… “register_block_type”.
Ba ouai mec “register_block_type”
Arrêtes de m’appeler mec, mon gars
Je vous épargne la lecture de la doc wordpress avec le server-side rendering ou le client-side rendering, PHP ou JS, preview dans Gutenberg ou pas. Dans mon cas je voulais juste ajouter une balise <a> autour de mes <img>, donc server-side rendering (PHP)
Et t’es content maintenant ? T’as passé l’aprem a faire ça, sinon tu ajoutes le plugin FancyBox et t’arrêtes de nous saouler
Moins il y a de plugin plus le site sera robuste face aux mises à jour, de plus je développe mon thème, j ai déjà une version de jQuery, pas besoin qu’un plugin m’ajoute une version en plus, ajoute des filtres et autres trucs qu’on a rien a battre, et non merci au freemium
Alors craches le morceau !
Dans vos headers
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
Dans votre function.php
register_block_type('core/gallery', array(
'render_callback' => 'add_fancyBox',
)
);
function add_fancyBox($data, $content){
$dom = DOMDocument::loadHTML ($content, LIBXML_NOERROR );
$imgNodes = $dom->getElementsByTagName('img');
foreach ($imgNodes as $nodeImg) {
$aNode = $dom->createElement('a');
$aNode->setAttribute('data-fancybox', 'gallery-'.md5(json_encode($data)));
$aNode->setAttribute('href', $nodeImg->getAttribute('src'));
$fragment = $dom->createDocumentFragment();
$aNode->appendChild( $nodeImg->cloneNode(true) );
$fragment->appendChild( $aNode );
$nodeImg->parentNode->replaceChild( $fragment, $nodeImg );
}
return $dom->saveHTML();
}Je ne suis pas développeur de thème expérimenté mais ça fait le job, si vous avez une meilleures façon de faire, je suis preneur.
Commentaires