114 lines
3.6 KiB
JavaScript
114 lines
3.6 KiB
JavaScript
import { render, useState, useEffect } from "@wordpress/element";
|
|
import { FocalPointPicker } from "@wordpress/components";
|
|
import { useSelect, useDispatch } from "@wordpress/data";
|
|
|
|
const InlineGutenbergFocalPointPicker = () => {
|
|
// Récupérer l'ID et l'URL de l'image mise en avant
|
|
const { featuredImageId, featuredImageUrl, focalPoint } = useSelect((select) => {
|
|
const featuredMedia = select("core/editor").getEditedPostAttribute("featured_media");
|
|
const media = featuredMedia ? select("core").getMedia(featuredMedia) : null;
|
|
const meta = select("core/editor").getEditedPostAttribute("meta");
|
|
|
|
return {
|
|
featuredImageId: featuredMedia,
|
|
featuredImageUrl: media?.source_url || null,
|
|
focalPoint: meta?.thumbnail_focal_point || { x: 0.5, y: 0.5 },
|
|
};
|
|
});
|
|
|
|
const { editPost } = useDispatch("core/editor");
|
|
|
|
// Ne rien afficher si pas d'image mise en avant
|
|
if (!featuredImageId || !featuredImageUrl) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div style={{ marginTop: "16px", paddingTop: "16px", borderTop: "1px solid #ddd" }}>
|
|
<div style={{ marginBottom: "12px" }}>
|
|
<strong style={{ fontSize: "13px", color: "#1e1e1e" }}>Point focal de recadrage</strong>
|
|
</div>
|
|
<p style={{ marginBottom: "12px", fontSize: "13px", color: "#757575" }}>
|
|
Cliquez sur l'image pour définir le point focal utilisé lors du recadrage automatique.
|
|
</p>
|
|
<FocalPointPicker
|
|
url={featuredImageUrl}
|
|
value={focalPoint}
|
|
onChange={(value) => {
|
|
editPost({
|
|
meta: {
|
|
thumbnail_focal_point: value,
|
|
},
|
|
});
|
|
}}
|
|
/>
|
|
<p style={{ marginTop: "12px", fontSize: "12px", color: "#757575" }}>
|
|
Position :{" "}
|
|
<strong style={{ color: "#2271b1" }}>
|
|
{Math.round(focalPoint.x * 100)}% / {Math.round(focalPoint.y * 100)}%
|
|
</strong>
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Fonction pour injecter le focal point picker dans le panneau de featured image
|
|
function injectGutenbergFocalPointPicker() {
|
|
// Chercher le panneau de featured image
|
|
const featuredImagePanel = document.querySelector('.editor-post-featured-image, [aria-label="Featured image"]');
|
|
|
|
if (!featuredImagePanel) {
|
|
return false;
|
|
}
|
|
|
|
// Vérifier qu'il y a une image
|
|
const hasImage = featuredImagePanel.querySelector("img");
|
|
if (!hasImage) {
|
|
return false;
|
|
}
|
|
|
|
// Créer le conteneur s'il n'existe pas
|
|
let container = document.getElementById("gutenberg-focal-point-inline-root");
|
|
|
|
if (!container) {
|
|
container = document.createElement("div");
|
|
container.id = "gutenberg-focal-point-inline-root";
|
|
featuredImagePanel.appendChild(container);
|
|
}
|
|
|
|
// Render le composant React
|
|
render(<InlineGutenbergFocalPointPicker />, container);
|
|
return true;
|
|
}
|
|
|
|
// Observer pour détecter quand le panneau de featured image est ajouté/modifié
|
|
const observer = new MutationObserver(() => {
|
|
injectGutenbergFocalPointPicker();
|
|
});
|
|
|
|
// Démarrer l'observation quand le DOM est prêt
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
// Essayer d'injecter immédiatement
|
|
setTimeout(() => {
|
|
if (injectGutenbergFocalPointPicker()) {
|
|
// Si réussi, continuer à observer pour les changements
|
|
const editorRoot = document.querySelector(".editor-styles-wrapper, .edit-post-visual-editor");
|
|
if (editorRoot) {
|
|
observer.observe(document.body, {
|
|
childList: true,
|
|
subtree: true,
|
|
});
|
|
}
|
|
}
|
|
}, 500);
|
|
});
|
|
|
|
// Réessayer périodiquement pendant les premières secondes
|
|
let retryCount = 0;
|
|
const retryInterval = setInterval(() => {
|
|
if (injectGutenbergFocalPointPicker() || retryCount > 10) {
|
|
clearInterval(retryInterval);
|
|
}
|
|
retryCount++;
|
|
}, 500);
|