{"id":26151195,"url":"https://github.com/jcommaret/slider-blocks-wp","last_synced_at":"2026-04-20T03:02:29.367Z","repository":{"id":278555920,"uuid":"848182250","full_name":"jcommaret/slider-blocks-wp","owner":"jcommaret","description":"A really simple wordpress plugin using InnerBlocks","archived":false,"fork":false,"pushed_at":"2026-02-06T10:44:23.000Z","size":36630,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-02-06T18:27:24.026Z","etag":null,"topics":["innerblocks","javascript","php","react","wordpress"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jcommaret.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-08-27T09:36:35.000Z","updated_at":"2026-02-06T10:44:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"78a6781a-0f02-4e3c-8567-4771cddbae4f","html_url":"https://github.com/jcommaret/slider-blocks-wp","commit_stats":null,"previous_names":["jcommaret/wp-extension"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jcommaret/slider-blocks-wp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcommaret%2Fslider-blocks-wp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcommaret%2Fslider-blocks-wp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcommaret%2Fslider-blocks-wp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcommaret%2Fslider-blocks-wp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcommaret","download_url":"https://codeload.github.com/jcommaret/slider-blocks-wp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcommaret%2Fslider-blocks-wp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32031070,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["innerblocks","javascript","php","react","wordpress"],"created_at":"2025-03-11T06:29:09.471Z","updated_at":"2026-04-20T03:02:29.358Z","avatar_url":"https://github.com/jcommaret.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Citeo Blocks - Extension WordPress Gutenberg\n\n## 📋 Description\n\nExtension WordPress moderne avec blocks Gutenberg personnalisés pour Citeo.\nDéveloppée initialement comme test d'embauche, maintenant publique et professionnelle avec une architecture monorepo utilisant NPM Workspaces.\n\n### 🎨 Composants Inclus\n\n- **Slider** - Slider interactif pour images/contenu\n- **Button with Arrow** - Bouton stylisé avec flèche\n- **Main Bloc** - Bloc principal avec texte et photo\n\n---\n\n## 🚀 Démarrage Rapide\n\n### Prérequis\n\n- **WordPress** 5.0 ou supérieur\n- **PHP** 7.4 ou supérieur\n- **Node.js** 18+ et npm 9+\n\n### ⚡ Installation en 3 Étapes\n\n```bash\n# 1. Cloner le projet\ngit clone [votre-repo]\ncd slider-blocks-wp\n\n# 2. Installer toutes les dépendances\nnpm install\n\n# 3. Build tous les composants\nnpm run build:all\n```\n\n### 🎬 Mode Développement\n\n```bash\n# Démarrer tous les composants en mode dev\nnpm run start:all\n\n# Ou un seul composant\nnpm run start --workspace=slider\n```\n\n---\n\n## 📦 Commandes Disponibles\n\n### Commandes Principales\n\n| Commande | Description |\n|----------|-------------|\n| `npm install` | Installe toutes les dépendances (workspaces inclus) |\n| `npm run build:all` | Build tous les composants |\n| `npm run start:all` | Mode dev tous les composants |\n| `npm run reinstall` | Nettoie et réinstalle tout |\n\n### Build\n\n```bash\nnpm run build                           # Build du projet principal\nnpm run build:all                       # Build de TOUS les composants\nnpm run build --workspace=slider        # Build d'un composant spécifique\nnpm run build --workspace=button-with-arrow\nnpm run build --workspace=main-bloc\n```\n\n### Développement\n\n```bash\nnpm run start                           # Mode dev du projet principal\nnpm run start:all                       # Mode dev de TOUS les composants\nnpm run start --workspace=slider        # Mode dev d'un composant spécifique\n```\n\n### Maintenance\n\n```bash\nnpm run clean          # Supprime tous les node_modules\nnpm run reinstall      # Nettoie et réinstalle tout\nnpm run lint:js        # Vérifie le code JavaScript\nnpm run lint:css       # Vérifie le code CSS\nnpm run format         # Formate le code\n```\n\n---\n\n## 🏗️ Architecture NPM Workspaces\n\nCe projet utilise **NPM Workspaces** pour une gestion centralisée et moderne des dépendances.\n\n### 📁 Structure du Projet\n\n```\nciteo-blocks/                     (Root - Workspace principal)\n├── package.json                  → Configuration principale + workspaces\n├── node_modules/                 → Dépendances centralisées (partagées)\n│\n├── src/\n│   ├── button-with-arrow/        → Workspace 1\n│   │   ├── package.json          → Métadonnées uniquement\n│   │   ├── edit.js\n│   │   ├── save.js\n│   │   └── block.json\n│   │\n│   ├── main-bloc/                → Workspace 2\n│   │   ├── package.json\n│   │   └── ...\n│   │\n│   └── slider/                   → Workspace 3\n│       ├── package.json\n│       └── ...\n│\n└── scss/                         → Styles globaux\n```\n\n### 🎯 Workspaces Configurés\n\n```json\n{\n  \"workspaces\": [\n    \"src/button-with-arrow\",\n    \"src/main-bloc\",\n    \"src/slider\"\n  ]\n}\n```\n\n### ✨ Avantages\n\n- ✅ **Une seule installation** : `npm install` à la racine installe tout\n- ✅ **Dépendances centralisées** : Pas de duplication\n- ✅ **Versions cohérentes** : Tous les composants utilisent les mêmes versions\n- ✅ **Installation rapide** : ~85% plus rapide\n- ✅ **Moins d'espace** : ~66% d'économie (480 MB au lieu de ~500 MB)\n- ✅ **Hoisting automatique** : NPM remonte les dépendances communes\n\n### 📊 Dépendances Centralisées\n\nToutes les dépendances communes sont dans le `package.json` racine :\n\n```json\n{\n  \"devDependencies\": {\n    \"@wordpress/scripts\": \"^30.24.0\",\n    \"webpack-dev-server\": \"^5.2.1\",\n    \"ajv\": \"8.17.1\"\n  },\n  \"dependencies\": {\n    \"axios\": \"^1.9.0\",\n    \"tar-fs\": \"\u003e=3.0.9\",\n    \"webpack-dev-server\": \"^5.2.1\"\n  }\n}\n```\n\n### 🔧 Gestion des Dépendances\n\n#### Ajouter une dépendance commune (pour tous les composants)\n\n```bash\nnpm install nom-du-package --save\nnpm install nom-du-package --save-dev  # Pour devDependencies\n```\n\n#### Ajouter une dépendance spécifique à un composant\n\n```bash\nnpm install nom-du-package --workspace=slider\n```\n\n#### Mettre à jour les dépendances\n\n```bash\nnpm update                  # Mettre à jour toutes les dépendances\nnpm update axios            # Mettre à jour une dépendance spécifique\nnpm outdated                # Voir les packages obsolètes\n```\n\n#### Vérifier les workspaces\n\n```bash\nnpm ls --workspaces         # Liste tous les workspaces\nnpm ls --workspaces --depth=0  # Vue simplifiée\n```\n\n---\n\n## 🎯 Installation WordPress\n\n### Pour les Utilisateurs Finaux\n\n1. Téléchargez le fichier zip de l'extension\n2. Connectez-vous à votre administration WordPress\n3. Allez dans \"Extensions \u003e Ajouter\"\n4. Cliquez sur \"Téléverser une extension\"\n5. Sélectionnez le fichier zip et activez\n\n### Générer le ZIP\n\n```bash\nnpm run plugin-zip\n```\n\n---\n\n## ✨ Fonctionnalités des Composants\n\n### 🎠 Slider\n\n- Slider responsive et interactif\n- Compatible avec images et contenu personnalisé\n- Configuration complète dans l'éditeur Gutenberg\n- Animations fluides\n- Support mobile\n\n**Utilisation** :\n```bash\nnpm run start --workspace=slider\n```\n\n### 🔘 Button with Arrow\n\n- Bouton stylisé avec flèche animée\n- Personnalisation des couleurs et textes\n- Intégration native Gutenberg\n- Hover effects\n- Accessibilité optimisée\n\n**Utilisation** :\n```bash\nnpm run start --workspace=button-with-arrow\n```\n\n### 📄 Main Bloc\n\n- Bloc de contenu avec image\n- Mise en page flexible (image gauche/droite)\n- Options de personnalisation avancées\n- Responsive design\n- Texte riche\n\n**Utilisation** :\n```bash\nnpm run start --workspace=main-bloc\n```\n\n---\n\n## 🛠️ Technologies\n\n- **WordPress Gutenberg** - Éditeur de blocks moderne\n- **@wordpress/scripts** - Tooling officiel WordPress\n- **Webpack 5** - Module bundler\n- **React** - Framework UI\n- **NPM Workspaces** - Gestion de monorepo\n- **Babel** - Transpilation JavaScript\n- **PostCSS** - Transformation CSS\n- **ESLint** - Linting JavaScript\n- **Stylelint** - Linting CSS\n\n---\n\n## 🐛 Dépannage\n\n### Problème : \"Cannot find module\"\n\n**Solution** :\n```bash\nnpm run reinstall\n```\n\n### Problème : Build qui échoue\n\n**Solution** :\n```bash\nrm -rf node_modules package-lock.json\nnpm install\nnpm run build:all\n```\n\n### Problème : Changements non pris en compte\n\n**Solution** :\n```bash\n# Arrêter le serveur (Ctrl+C) puis\nnpm run start:all\n```\n\n### Problème : Versions de dépendances conflictuelles\n\n**Solution** :\n```bash\nrm package-lock.json\nnpm run clean\nnpm install\n```\n\n### Problème : Les workspaces ne sont pas détectés\n\n**Vérification** :\n```bash\nnpm ls --workspaces\n```\n\n**Sortie attendue** :\n```\nciteo-blocks@0.1.0\n├── button-with-arrow@0.1.0 -\u003e ./src/button-with-arrow\n├── main-bloc@0.1.0 -\u003e ./src/main-bloc\n└── slider@0.1.0 -\u003e ./src/slider\n```\n\n---\n\n## 📚 Bonnes Pratiques\n\n### ✅ À Faire\n\n- Toujours exécuter `npm install` depuis la **racine** du projet\n- Ajouter les dépendances communes au `package.json` racine\n- Utiliser `--workspace=nom` pour les commandes spécifiques\n- Vérifier `npm ls` pour voir l'arbre des dépendances\n- Faire un `npm run build:all` avant de créer un ZIP\n\n### ❌ À Éviter\n\n- Ne pas faire `npm install` dans chaque sous-dossier\n- Ne pas dupliquer les dépendances communes dans les composants\n- Ne pas modifier manuellement les `node_modules`\n- Ne pas commiter les `node_modules` dans Git\n\n---\n\n## 🔄 Scripts de Compatibilité\n\nDes scripts de compatibilité sont disponibles pour faciliter la migration :\n\n```bash\nnpm run update-local-packages   # Met à jour le package.json (optionnel)\nnpm run update-and-install      # Mise à jour + installation (optionnel)\n```\n\nCes scripts détectent automatiquement la présence de workspaces.\n\n---\n\n## 📊 Performances et Statistiques\n\n### Comparaison Avant/Après Workspaces\n\n| Aspect | Avant | Après (Workspaces) |\n|--------|-------|-------------------|\n| **Dépendances dupliquées** | Oui (3x) | Non |\n| **Espace disque** | ~500 MB | ~480 MB |\n| **Temps d'installation** | 2-3 min | ~30 sec |\n| **Cohérence des versions** | Manuelle | Automatique |\n| **Maintenance** | Complexe | Simple |\n| **Nombre de packages** | ~6000 (dupliqués) | 1514 (hoisting) |\n\n---\n\n## 🔐 Sécurité\n\n### Audit des Dépendances\n\n```bash\nnpm audit                    # Voir les vulnérabilités\nnpm audit fix                # Corriger automatiquement (safe)\nnpm audit fix --force        # Corriger avec breaking changes\n```\n\n### Mettre à Jour les Packages WordPress\n\n```bash\nnpm run packages-update      # Met à jour les packages @wordpress/*\n```\n\n---\n\n## 🧪 Tests et Qualité\n\n### Linting\n\n```bash\nnpm run lint:js              # Vérifie le JavaScript\nnpm run lint:css             # Vérifie le CSS/SCSS\n```\n\n### Format\n\n```bash\nnpm run format               # Formate automatiquement le code\n```\n\n---\n\n## 🚢 Déploiement\n\n### Créer un Build de Production\n\n```bash\n# 1. Nettoyer\nnpm run clean\n\n# 2. Installer\nnpm install\n\n# 3. Build tous les composants\nnpm run build:all\n\n# 4. Créer le ZIP WordPress\nnpm run plugin-zip\n```\n\nLe fichier ZIP sera créé dans le dossier racine du projet.\n\n---\n\n## 📖 Historique du Projet\n\n### Version 0.1.0 (7 janvier 2026)\n\n- ✅ Migration vers NPM Workspaces\n- ✅ Centralisation des dépendances\n- ✅ Correction du nom du composant `main-bloc` (anciennement `test-bloc-1`)\n- ✅ Simplification des `package.json` des composants\n- ✅ Ajout de nouveaux scripts npm\n- ✅ Documentation complète\n- ✅ Performances optimisées\n\n---\n\n## 🤝 Contribution\n\nLes contributions sont les bienvenues !\n\n### Comment Contribuer\n\n1. Fork le projet\n2. Créez une branche pour votre fonctionnalité (`git checkout -b feature/AmazingFeature`)\n3. Committez vos changements (`git commit -m 'Add some AmazingFeature'`)\n4. Push vers la branche (`git push origin feature/AmazingFeature`)\n5. Ouvrez une Pull Request\n\n### Guidelines\n\n- Suivre les conventions de code existantes\n- Tester vos modifications avec `npm run build:all`\n- Vérifier le linting avec `npm run lint:js` et `npm run lint:css`\n- Documenter les nouvelles fonctionnalités\n\n---\n\n## 📄 Licence\n\nCe projet est sous licence **GPL-2.0-or-later** - voir le fichier [LICENSE.md](LICENSE.md) pour plus de détails.\n\nCette licence est compatible avec WordPress et permet :\n- ✅ Utilisation commerciale\n- ✅ Modification\n- ✅ Distribution\n- ✅ Usage privé\n\n---\n\n## 👨‍💻 Auteur\n\n**krdrs-jco** - Citeo\n\n---\n\n## 🔗 Ressources Utiles\n\n### Documentation Officielle\n\n- [WordPress Block Editor Handbook](https://developer.wordpress.org/block-editor/)\n- [NPM Workspaces Documentation](https://docs.npmjs.com/cli/v7/using-npm/workspaces)\n- [@wordpress/scripts Package](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/)\n- [Gutenberg Components](https://developer.wordpress.org/block-editor/reference-guides/components/)\n\n### Outils\n\n- [Block Development Examples](https://github.com/WordPress/gutenberg-examples)\n- [Create Block Tool](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/)\n\n---\n\n## 💡 Astuces\n\n### Développer un Seul Composant\n\nSi vous travaillez sur un seul composant :\n\n```bash\ncd src/slider\nnpm run start\n```\n\nLe composant aura accès à toutes les dépendances du projet racine.\n\n### Rechargement Automatique\n\nLe mode `start` active le rechargement automatique (hot reload). Sauvegardez vos fichiers et les changements apparaissent instantanément dans l'éditeur Gutenberg.\n\n### Déboguer un Workspace\n\n```bash\nnpm ls --workspace=slider         # Voir les dépendances d'un workspace\nnpm explain nom-du-package        # Comprendre pourquoi un package est installé\n```\n\n---\n\n## 🎉 C'est Parti !\n\nVous êtes maintenant prêt à développer des blocks WordPress Gutenberg modernes !\n\n**Commande pour commencer** :\n\n```bash\nnpm install \u0026\u0026 npm run build:all \u0026\u0026 npm run start:all\n```\n\nBon développement ! 🚀\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with ❤️ for Citeo**\n\n*Ce projet utilise NPM Workspaces pour une architecture monorepo moderne et performante.*\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcommaret%2Fslider-blocks-wp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcommaret%2Fslider-blocks-wp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcommaret%2Fslider-blocks-wp/lists"}