pde-plugin-designblock

Plugin Payload CMS 3.0 qui fournit une bibliothèque complète de design blocks, collections, globals et composants prêts à l'emploi pour construire des sites web.

Contenu du plugin

| Type | Nombre | Description | | ----------- | ------ | ------------------------------------------------------------ | | Blocks | 77 | Blocs de design (Hero, FAQ, Carousel, Team, Pricing, etc.) | | Collections | 13 | Pages, Posts, Blog, Media, Clients, Testimonials, etc. | | Globals | 3 | Settings, Footer, Header | | Components | 50+ | Composants React réutilisables (UI, animations, cards, etc.) |

Installation

npm install pde-plugin-designblock

Installation locale (développement)

npm install /chemin/vers/pde-plugin-designblock

Important : avec une installation locale (file: link), Node.js résout les dépendances depuis le chemin réel du plugin. Les dépendances peer (payload, @payloadcms/*, next, react) doivent être disponibles dans le node_modules du plugin.

Après npm install, créez des symlinks dans le plugin vers les packages du projet consumer :

cd node_modules/pde-plugin-designblock/node_modules
# Supprimer les copies dupliquées
rm -rf payload @payloadcms next react react-dom
# Créer des symlinks vers le consumer
ln -sf /chemin/vers/votre-projet/node_modules/payload payload
ln -sf /chemin/vers/votre-projet/node_modules/next next
ln -sf /chemin/vers/votre-projet/node_modules/react react
ln -sf /chemin/vers/votre-projet/node_modules/react-dom react-dom
mkdir -p @payloadcms
for pkg in $(ls /chemin/vers/votre-projet/node_modules/@payloadcms/); do
  ln -sf /chemin/vers/votre-projet/node_modules/@payloadcms/$pkg @payloadcms/$pkg
done

Dépendances peer requises

Le projet consumer doit avoir ces packages installés :

| Package | Version | | --------------------------------- | ------- | | payload | ^3.37.0 | | @payloadcms/next | ^3.37.0 | | @payloadcms/richtext-lexical | ^3.37.0 | | @payloadcms/ui | ^3.37.0 | | @payloadcms/plugin-form-builder | ^3.79.0 | | @payloadcms/live-preview-react | ^3.79.0 | | payloadcms-lexical-ext | ^0.5.3 | | next | ^15.0.0 | | react | ^19.0.0 | | react-dom | ^19.0.0 |

Utilisation de base

1. Configuration Payload

// payload.config.ts
import { buildConfig } from 'payload'
import { PDEDesignblockPlugin } from 'pde-plugin-designblock'

export default buildConfig({
  collections: [
    // Vos propres collections ici (elles ont la priorité sur le plugin)
    Users,
  ],
  // Le plugin fournit Header, Footer et Settings comme globals
  // Ne les définissez PAS ici si vous voulez utiliser ceux du plugin
  globals: [],
  plugins: [PDEDesignblockPlugin()],
})

Le plugin fournit automatiquement :

• 13 collections : Pages, Posts, Blog, Media, Clients, Testimonials, JobOffers, Faqs, Categories, Tags, Forms, PrivateMedia, Settings
• 3 globals : Header, Footer, Settings
• 77 blocks : ajoutés au champ layout de la collection Pages

Si vous définissez un global avec le même slug (ex: header, footer), votre version a la priorité et celle du plugin n'est PAS ajoutée.

2. CSS / Design System

Aucune configuration CSS nécessaire. Le composant RenderBlocks injecte automatiquement :

• Toutes les CSS variables (couleurs, spacing, radius)
• Les polices Karla et BricolageGrotesque (via Google Fonts CDN)
• Toutes les animations et styles composants des blocks

// Simple et automatique - styles injectés automatiquement
import { RenderBlocks } from 'pde-plugin-designblock'

export default function Page({ page }) {
  return <RenderBlocks blocks={page.layout} />
}

Composants avancés avec gestion manuelle des styles :

// Pour un contrôle total des styles
import { RenderBlocks, div, usePDEStyles, HeroBlockComponent } from 'pde-plugin-designblock'

export default function Page({ page }) {
  return (
    <div>
      <HeroBlockComponent {...heroData} />
      <RenderBlocks blocks={page.layout} disableStyles />
    </div>
  )
}

// Hook pour injection manuelle
function MonComposant() {
  usePDEStyles() // Injecte les variables CSS
  return <div className="bg-primary">...</div>
}

Pour désactiver l'injection automatique du CSS :

<RenderBlocks blocks={page.layout} disableStyles />

Optionnel : pour utiliser les tokens Tailwind du plugin (bg-primary, font-karla, etc.) dans vos propres composants, ajoutez dans votre globals.css :

/* globals.css */
@import 'tailwindcss';
@import 'pde-plugin-designblock/styles.css'; /* Optionnel : tokens Tailwind */

3. next.config.js

// next.config.js
import { withPayload } from '@payloadcms/next/withPayload'

const nextConfig = {
  transpilePackages: ['pde-plugin-designblock'],
  images: {
    remotePatterns: [
      // Ajouter les hostnames des images utilisées par les blocks du plugin
      { hostname: 'storage.googleapis.com', protocol: 'https' },
      // Ajoutez ici d'autres hostnames si nécessaire
    ],
  },
  webpack: (webpackConfig) => {
    // Résoudre les deps du plugin depuis le node_modules du consumer
    webpackConfig.resolve.modules = [
      ...(webpackConfig.resolve.modules || []),
      new URL('./node_modules', import.meta.url).pathname,
    ]
    return webpackConfig
  },
}

export default withPayload(nextConfig)

⚠️ Images distantes : certains blocks utilisent next/image avec des URLs externes (ex: Google Cloud Storage). Next.js exige que chaque hostname soit déclaré dans images.remotePatterns. Si vous voyez l'erreur hostname is not configured under images in your next.config.js, ajoutez le hostname manquant dans la liste ci-dessus.

Assets statiques (images des blocks)

Les blocks utilisent des images statiques (/search.svg, /arrow.svg, etc.) qui sont automatiquement servies directement depuis le plugin via l'endpoint /api/plugin-assets/.

Aucune configuration nécessaire - les assets sont servis automatiquement sans copie dans votre projet :

• Images des blocks : /api/plugin-assets/blocks/EnergyCarousel.png
• Icônes : /api/plugin-assets/Arrow 5.svg
• Autres assets : /api/plugin-assets/carousel/check.svg

Le plugin configure automatiquement l'endpoint de service des assets. Les images restent dans le plugin et ne sont pas copiées dans votre projet.

Assets disponibles automatiquement via /api/plugin-assets/ :

• Icons : Arrow 5.svg, arrow-down.svg, arrow.svg, search.svg
• UI : fdroite.svg, fgauche.svg, lets-icons_check-fill.svg
• Checks : not incluse check.svg, carousel/check.svg
• Media : mdi_location.svg, material-symbols_upload.png
• Branding : Header/Picto logo PDE.svg
• Backgrounds : backgrounimage/heroMobile.png
• Loading : Site Place des Energies leema version_icon/picto_logo_pde_loading.svg
• Block thumbnails : blocks/EnergyCarousel.png, blocks/HeroTitle.png, etc.

4. Affichage des blocks sur le frontend

// app/(frontend)/[slug]/page.tsx
import { RenderBlocks } from 'pde-plugin-designblock'

export default async function Page({ params }) {
  const page = await getPage(params.slug)
  return <RenderBlocks blocks={page.layout} />
}

RenderBlocks mappe automatiquement les 77 types de blocks vers leurs composants React.

4.b Frontend des collections (Blog, Posts, Job Offers)

Le plugin ajoute les collections dans Payload, mais vous devez creer la partie frontend des pages de collections dans votre projet Next.js.

Minimum a implementer :

• Une page liste pour blog
• Une page liste + detail pour posts
• Une page liste + detail pour job-offers

Structure recommandee (exemple) :

• app/(frontend)/blog/page.tsx
• app/(frontend)/posts/page.tsx
• app/(frontend)/posts/[slug]/page.tsx
• app/(frontend)/job-offers/page.tsx
• app/(frontend)/job-offers/[slug]/page.tsx

Inspirez-vous de l'implementation du projet : ~/pde-website-payload (pages blog, posts, job-offers) pour garder la meme logique de routing, fetch Payload et rendu.

5. Ajouter vos propres blocks à côté de ceux du plugin

Les blocks du plugin s'ajoutent aux blocks existants de votre projet. Si vous avez une collection pages avec des blocks, le plugin ajoutera ses 77 blocks en plus des vôtres.

Pour le rendu frontend, passez vos composants custom via additionalBlockComponents :

// app/(frontend)/[slug]/page.tsx
import { RenderBlocks } from 'pde-plugin-designblock'
import { MyCustomHero } from '@/blocks/MyCustomHero/Component'
import { MyContactForm } from '@/blocks/MyContactForm/Component'

// Vos blocks custom (clé = blockType slug)
const myBlocks = {
  'my-custom-hero': MyCustomHero,
  'my-contact-form': MyContactForm,
}

export default async function Page({ params }) {
  const page = await getPage(params.slug)
  return <RenderBlocks blocks={page.layout} additionalBlockComponents={myBlocks} />
}

Vous pouvez aussi accéder au map des composants du plugin pour le personnaliser :

import { blockComponents } from 'pde-plugin-designblock'

// Remplacer un composant du plugin par le vôtre
const customMap = {
  ...blockComponents,
  heroBlock: MyOwnHeroBlock,        // remplace le hero du plugin
  'my-custom-block': MyCustomBlock, // ajoute un nouveau block
}

<RenderBlocks blocks={page.layout} blockComponentsOverride={customMap} />

Comportement additif (blocks, collections, fields)

Le plugin est additif : il ajoute ses blocks, collections et globals à ceux de votre projet.

• Si votre collection pages a déjà des blocks dans le champ layout, les blocks du plugin s'ajoutent à côté
• Si une collection ou un global avec le même slug existe déjà, le plugin ne la duplique pas (votre version a priorité)
• Les blocks du plugin et vos blocks custom coexistent dans le même layout

Exemple

// payload.config.ts
export default buildConfig({
  collections: [
    Users,
    MyCustomPages, // slug: 'pages' → le plugin n'ajoutera PAS sa collection Pages
    MyCustomMedia, // slug: 'media' → le plugin n'ajoutera PAS sa collection Media
  ],
  globals: [
    MyFooter, // slug: 'footer' → le plugin n'ajoutera PAS son global Footer
  ],
  plugins: [PDEDesignblockPlugin()],
})

Dans cet exemple :

• MyCustomPages (slug pages) → le plugin détecte qu'une collection pages existe déjà et la garde
• MyCustomMedia (slug media) → idem, votre Media est utilisé
• MyFooter (slug footer) → votre Footer global est conservé
• Toutes les autres collections et globals du plugin sont ajoutées normalement

Pour désactiver explicitement via la config

PDEDesignblockPlugin({
  collections: {
    'private-media': false, // ne pas ajouter cette collection
    'job-offers': false, // ne pas ajouter celle-ci non plus
  },
  globals: {
    footer: false, // ne pas ajouter le footer du plugin
  },
})

Configuration & Overrides

PDEDesignblockPlugin({
  // Désactiver le plugin entièrement
  disabled: false,

  // ─── Blocks ───────────────────────────────────────────
  // true (défaut) : tous les 77 blocks sont intégrés
  // false          : aucun block n'est ajouté
  // string[]       : seulement les blocks avec ces slugs
  enableBlocks: true,

  // Exemples :
  // enableBlocks: false,                              // aucun block
  // enableBlocks: ['heroBlock', 'faqs', 'formBlock'], // seulement ces 3

  // ─── Styles / CSS ────────────────────────────────────
  // true (défaut) : utiliser le design system du plugin
  // false          : utiliser votre propre CSS/SCSS custom
  enableStyles: true,

  // Override ou désactiver des collections par slug
  collections: {
    blog: { admin: { group: 'Mon Contenu' } }, // merge avec la config du plugin
    'private-media': false, // désactiver complètement
  },

  // Override ou désactiver des globals par slug
  globals: {
    settings: { label: { fr: 'Configuration' } }, // merge
    header: false, // désactiver
  },

  // Override ou désactiver des blocks par slug
  blocks: {
    faqs: false, // désactiver ce block
    heroBlock: { labels: { singular: 'Mon Hero' } }, // merge
  },

  // Ajouter des collections/globals/blocks supplémentaires
  extraCollections: [myCustomCollection],
  extraGlobals: [myCustomGlobal],
  extraBlocks: [myCustomBlock],

  // ─── Variables d'environnement ───────────────────────
  // Passez les valeurs directement dans la config au lieu de process.env.
  // Ces valeurs ont la priorité sur les variables d'environnement existantes.
  env: {
    gcsPrefix: 'my-bucket/prefix', // remplace GCS_PREFIX
    previewSecret: 'my-secret', // remplace PREVIEW_SECRET
    emailFrom: '[email protected]', // remplace EMAIL_FROM
    serverUrl: 'https://example.com', // remplace SERVER_URL
    nextPublicServerUrl: 'https://example.com', // remplace NEXT_PUBLIC_SERVER_URL
    rootDir: '/app', // remplace ROOT_DIR
    port: '3000', // remplace PORT
  },
})

Contrôle des blocks

| enableBlocks | Comportement | | ----------------------- | ------------------------------------------------------------------------------- | | true (défaut) | Tous les 77 blocks sont ajoutés au layout de Pages | | false | Aucun block n'est ajouté — utilisez allBlockConfigs pour choisir manuellement | | ['heroBlock', 'faqs'] | Seulement les blocks listés sont ajoutés |

Vous pouvez aussi utiliser getBlockConfigs() pour obtenir les blocks filtrés programmatiquement :

import { getBlockConfigs } from 'pde-plugin-designblock'

// Seulement certains blocks
const myBlocks = getBlockConfigs(['heroBlock', 'faqs', 'team-carousel'])

// Tous les blocks sauf certains
const myBlocks = getBlockConfigs(true, {
  estimation: false,
  'iframe-block': false,
})

Contrôle du design CSS

| enableStyles | Dans votre globals.css | | --------------- | -------------------------------------------------------------------- | | true (défaut) | @import 'pde-plugin-designblock/styles.css'; | | false | Utilisez votre propre CSS/SCSS — n'importez PAS le fichier du plugin |

Avec le design du plugin (défaut) :

/* globals.css */
@import 'tailwindcss';
@import 'pde-plugin-designblock/styles.css';

Avec votre propre SCSS custom :

/* globals.css */
@import 'tailwindcss';
/* NE PAS importer pde-plugin-designblock/styles.css */
@import './my-custom-design.scss';

Si vous utilisez votre propre SCSS, vous devez définir les CSS variables utilisées par les blocks :

// my-custom-design.scss
:root {
  --primary: #your-color;
  --secondary: #your-color;
  --background: #ffffff;
  --foreground: #171717;
  --gray-100: #f5f6f9;
  --gray-200: #bfc6cc;
  --gray-300: #939ba0;
  --gray-400: #687175;
  --gray-500: #030303;
  // ... voir la section "Variables CSS" pour la liste complète
}

Et scanner les fichiers du plugin pour Tailwind :

@source "../../../node_modules/pde-plugin-designblock/src/**/*.tsx";
@source "../../../node_modules/pde-plugin-designblock/src/**/*.ts";

Utiliser les blocks individuellement

import {
  HeroBlock,
  TeamCarousel,
  FAQs,
  allBlockConfigs, // tous les 77 blocks
} from 'pde-plugin-designblock'

// Dans votre propre collection
const MyPage = {
  slug: 'my-pages',
  fields: [
    {
      name: 'layout',
      type: 'blocks',
      blocks: [HeroBlock, TeamCarousel, FAQs],
      // ou tous les blocks :
      // blocks: allBlockConfigs,
    },
  ],
}

Utiliser les composants React

// Composants client
import { Carousel, FAQAccordion, ShareComponent } from 'pde-plugin-designblock/client'

// Composants serveur (RSC)
import { getDocument, getURL, generatePreviewPath } from 'pde-plugin-designblock/rsc'

Collections disponibles

| Collection | Slug | Description | | -------------- | ----------------- | ------------------------- | | Blog | blog | Articles de blog | | Categories | categories | Catégories d'articles | | CategoriesBlog | categories-blog | Catégories blog | | Clients | clients | Gestion des clients/logos | | Faqs | faqs | Questions fréquentes | | JobOffers | job-offers | Offres d'emploi | | Media | media | Fichiers médias | | Pages | pages | Pages du site | | Posts | posts | Articles / publications | | PrivateMedia | private-media | Médias privés | | Skills | skills | Compétences | | Tags | tags | Tags | | Testimonials | testimonials | Témoignages |

Globals disponibles

| Global | Slug | Description | | -------- | ---------- | ----------------------- | | Settings | settings | Paramètres généraux | | Footer | footer | Configuration du footer | | Header | header | Configuration du header |

Blocks disponibles

| Block | Slug | Description | | ----------------------------- | ---------------------------------- | ---------------------------- | | AccompagnementBlock | accompagnement | Section accompagnement | | AchatMutualiseBlock | achatMutualise | Bloc achat mutualisé | | AgencyArticlesBlock | agency-articles-block | Articles d'agence | | ArticleProvider | articleProvider | Fournisseur d'articles | | ArticleSocialMediaBlock | article-social-media-block | Partage réseaux sociaux | | BlockJobDetail | blockJobDetail | Détail offre d'emploi | | BlogArticlesBlock | blog-articles-block | Liste articles blog | | BlogBlock | BlogBlock | Bloc blog | | BookAppointment | book-appointment | Prise de rendez-vous | | BoostEmployeesPurchasingPower | boost-employees-purchasing-power | Pouvoir d'achat employés | | BusinessesAlreadySaving | businesses-already-saving | Entreprises économisant | | BusinessPorteurBlock | business-porteur | Bloc porteur d'affaires | | CaseStudy | case-study | Étude de cas | | ControlConsumptionTools | control-consumption-tools | Outils contrôle conso | | CtaArticle | cta-article | CTA dans article | | CustomRelationship | custom-relationship | Relation personnalisée | | DescriptionImage | description-image | Description avec image | | EnergyCarousel | energy-carousel | Carousel énergie | | EnergyContractsControl | energy-contracts-control | Contrôle contrats énergie | | EnergyExpenseAnalysisBlock | energy-expense-analysis | Analyse dépenses énergie | | EnergyExpertiseBlock | energy-expertise-block | Expertise énergie | | EnergyManagementCard | energy-management-card | Carte gestion énergie | | EnergyManagementTools | energy-management-tools | Outils gestion énergie | | EnergySavingsCase | energy-savings-case | Cas économies énergie | | EnergySavingsSustainableBlock | energy-savings-sustainable | Économies durables | | EstimationBlock | estimation | Bloc estimation | | ExpertiseBlock | expertise-block | Bloc expertise | | FAQs | faqs | Questions fréquentes | | FeatureHighlight | feature-highlight | Mise en avant fonctionnalité | | FocusOrganisateursBlock | focus-organisateurs-block | Focus organisateurs | | FooterBlock | footerBlock | Bloc footer | | FooterGroupPurchase | footer-group-purchase | Footer achat groupé | | FormBlock | formBlock | Formulaire | | FranchisePromoBlock | FranchisePromo | Promo franchise | | HeaderBlock | headerBlock | Bloc header | | HeaderGroupPurchase | header-group-purchase | Header achat groupé | | HeroAchatGrouper | hero-achat-grouper | Hero achat groupé | | HeroBlock | heroBlock | Bloc hero principal | | HeroPrincipal | HeroPrincipal | Hero principal | | HeroTitle | hero-title | Hero avec titre | | HistoryBlock | history-block | Bloc historique/timeline | | HumanTeamApproach | teamRelationship | Approche humaine équipe | | IframeBlock | iframe-block | Bloc iframe | | ImmediateGain | immediategain | Gain immédiat | | InfoCards | info-cards | Cartes d'information | | InteractiveBenefitsSection | interactive-benefits-section | Avantages interactifs | | JobOffersBlock | job-offers | Liste offres d'emploi | | KeyFigures | keyFigures | Chiffres clés | | MechanicCaseStudy | mechaniccasestudy | Étude de cas mécanique | | MediaBlock | mediaBlock | Bloc média | | MediaPartners | media-partners | Partenaires médias | | NotFoundBlock | not-found | Page 404 | | PMEMultisitesBlock | PmeMultisites | Bloc PME multisites | | PricingBlock | PricingBlock | Tableau de prix | | QuickEasyProcessBlock | quickeasyprocess | Processus rapide | | RdvConfirmationBlock | rdvConfirmationBlock | Confirmation RDV | | RdvInfoBlock | rdv-info-block | Infos rendez-vous | | RdvTrustedBy | RdvtrustedBy | Confiance RDV | | RessourcesBlockList | ressourcesBlockLIst | Liste ressources | | RichTextBlock | richTextBlock | Texte riche | | SaveTimeAndMoney | savetimeandmoney | Économie temps/argent | | SaveTimeEnergyIssues | savetimeenergyissues | Économie énergie | | SearchEntreprise | search-entreprise | Recherche entreprise | | SelectionProcessBlock | selectionprocess | Processus de sélection | | SimpleTeamCard | SimpleTeamCard | Carte équipe simple | | SolutionsBlock | solutions-block | Bloc solutions | | SyndicVisionBlock | syndic-vision | Vision syndic | | TeamCarousel | team-carousel | Carousel équipe | | TeamGrid | teamGrid | Grille équipe | | TeamSidebar | TeamSidebar | Sidebar équipe | | Testimonial | testimonial | Témoignage | | TestimonialCarousel | testimonialcarousel | Carousel témoignages | | TitleRichTextYouTube | title-richtext-youtube | Titre + texte + YouTube | | TrustedBy | trustedBy | Ils nous font confiance | | ValuesBlock | values-block | Bloc valeurs | | WarningBlock | warning | Bloc avertissement | | WhyChooseUsBlock | why-choose-us-block | Pourquoi nous choisir |

Design System — Variables CSS

Le plugin fournit un design system complet via pde-plugin-designblock/styles.css :

Couleurs principales

| Variable | Valeur | Utilisation Tailwind | | ------------------ | --------- | -------------------------------- | | --primary | #397dff | bg-primary, text-primary | | --primary-hover | #2d6de6 | bg-primary-hover | | --primary-blue | #0d7fff | bg-primary-blue | | --primary-light | #abc8ff | bg-primary-light | | --secondary | #191d1e | bg-secondary, text-secondary | | --secondary-dark | #2a3032 | bg-secondary-dark | | --background | #ffffff | bg-background | | --foreground | #171717 | text-foreground |

Échelle de gris

| Variable | Valeur | Utilisation Tailwind | | -------------- | --------- | ------------------------------ | | --gray-50 | #fafafa | bg-gray-50 | | --gray-100 | #f5f6f9 | bg-gray-100 | | --gray-200 | #bfc6cc | bg-gray-200, text-gray-200 | | --gray-300 | #939ba0 | text-gray-300 | | --gray-400 | #687175 | text-gray-400 | | --gray-500 | #030303 | text-gray-500 | | --gray-light | #d9d9d9 | bg-gray-light | | --gray-dark | #0b0c1b | bg-gray-dark |

Couleurs d'accent

| Variable | Valeur | Utilisation Tailwind | | ---------------- | ----------- | -------------------- | | --emerald | #10d18333 | bg-emerald | | --blue | #0d7fff | bg-blue | | --amber | #f59e0b | bg-amber | | --lilac-violet | #8b5cf6 | bg-lilac-violet | | --yellow-green | #84cc16 | bg-yellow-green |

Polices

| Variable | Valeur | Classe Tailwind | | ------------------ | ------------------------------ | ---------------- | | --font-karla | Karla, sans-serif | font-karla | | --font-bricolage | BricolageGrotesque, sans-serif | font-bricolage |

Exports du package

| Chemin | Description | | ----------------------------------- | -------------------------------------------------------------- | | pde-plugin-designblock | Plugin principal, collections, blocks, globals, RenderBlocks | | pde-plugin-designblock/client | Composants client-side (Carousel, etc.) | | pde-plugin-designblock/rsc | Composants serveur & utilitaires | | pde-plugin-designblock/styles.css | Design system CSS complet | | pde-plugin-designblock/src/* | Accès direct aux fichiers source |

Résumé rapide de l'intégration

1. npm install pde-plugin-designblock
2. Ajouter dans payload.config.ts : plugins: [PDEDesignblockPlugin()]
3. Ajouter dans globals.css :       @import 'pde-plugin-designblock/styles.css'
4. Ajouter dans next.config.js :    transpilePackages: ['pde-plugin-designblock']
5. Frontend :                        import { RenderBlocks } from 'pde-plugin-designblock'

Rappel : Si votre projet définit déjà une collection ou un global avec le même slug, c'est votre version qui sera utilisée. Le plugin ne l'écrasera pas.

Licence

MIT