Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Formation WordPress FSE

Formation WordPress FSE

Supports de cours WordPress FSE. Février 2023.

More Decks by Jeremy Desvaux de Marigny

Other Decks in Programming

Transcript

  1. Sup de Web 2023
    Formation WordPress

    View Slide

  2. Présentation
    Jérémy DESVAUX DE MARIGNY
    Consultant
    - Direction Technique
    - Développement WordPress
    @jdmweb

    View Slide

  3. 1
    2
    3
    Coder des
    templates
    &
    parts
    Roadmap d’apprentissage
    4
    Maîtriser
    theme.json
    5
    Utilisation
    des Patterns
    &
    Reusable
    blocks
    6
    Coder des
    Custom
    Blocs
    Apprendre
    les
    capacités
    natives de
    l’outil
    Déclarer un
    bloc thème

    View Slide

  4. 01
    Installer WordPress

    View Slide

  5. wordPress.com ou wordpress.org
    .com .org
    Solution SASS
    100% en ligne
    Payante
    Bridée
    Le coût couvre l’hébergement, la
    maintenance, la scalabilité, la sécurité.
    Solution téléchargeable
    A héberger soi-même
    Gratuite
    Non bridée
    Ne couvre pas l’hébergement, la
    maintenance, la scalabilité, la sécurité.
    Il faut s’en occuper soi-même.
    Si pas fait : problèmes

    View Slide

  6. Téléchargement d’une archive officielle
    https://fr.wordpress.org/download/

    View Slide

  7. Installation alternative via composer
    Architecture bedrock
    https://roots.io/bedrock/
    $ composer create-project roots/bedrock

    View Slide

  8. Installation d’un serveur local, puis d’un vhost
    Installation d’un serveur local:
    Mamp, wamp, local, docker image…
    Création d’un vhost pour les urls (dépend de l’outil choisi).
    C’est une étape primordiale, à maîtriser impérativement.

    View Slide

  9. Hello World

    View Slide

  10. 02
    La théorie avant la pratique
    Apprendre les
    capacités natives de
    l’outil

    View Slide

  11. 1/6
    Apprendre
    les capacités
    natives de
    l’outil
    Objectif : Maîtriser ce qu’on peut ou ne peut pas faire
    de base.
    Comment ?
    L’installer
    S’éduquer
    Tout essayer : Les blocks, les options,
    l’éditeur FSE
    Expérimenter des layouts
    Toucher les limites

    View Slide

  12. WordPress.tv

    View Slide

  13. learn.wordpress.org

    View Slide

  14. 1/6
    Apprendre
    les capacités
    natives de
    l’outil
    Ecueils
    Beaucoup de nouvelles fonctionnalités natives à
    appréhender.
    Peu de ressources communautaires pour l’instant
    Temps à investir : Entre une à deux semaines
    Difficulté : 2/5

    View Slide

  15. 03
    Theming & Templating
    La nouvelle façon de construire des thèmes via l’éditeur FSE

    View Slide

  16. Qu’est-ce qui compose un thème?
    Déclaration du thème
    Template
    Header
    Footer
    Contenu
    + Couleurs & Fonts etc

    View Slide

  17. 2/6
    Déclarer un
    bloc thème
    Objectif : Avoir un block thème avec support FSE
    Comment ?
    Comparer les architectures classiques vs FSE
    Tenter de créer un block theme

    View Slide

  18. Comment déclarer un thème ?
    Configuration minimale
    Classique Block Theme
    - index.php
    - style.css (avec meta données)
    - index.php
    - style.css (avec meta données)
    - templates/index.html ⬅
    https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/#basic-structure

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. 2/6
    Déclarer un
    bloc thème
    Temps à investir : 1 jour
    Difficulté : 1/5

    View Slide

  23. Déclaration du bloc thème FSE : ✅
    Déclaration du thème

    View Slide

  24. Déclaration d’un template et de morceaux ?
    Déclaration du thème
    Template ?
    Header ?
    Footer ?

    View Slide

  25. 3/6
    Réapprendre
    les notions de
    templating
    Objectif : Être autonome dans la création de thèmes
    et de templates.
    Comment ?
    Essayer de créer des templates
    Comparer les architectures
    Inclure des template parts
    S’inspirer d’exemples existants

    View Slide

  26. Comment déclarer un template ?
    Classique (PHP) Block Theme (HTML)
    Concept équivalent, mais nouvelle syntaxe

    View Slide

  27. Template parts
    Morceaux de template, comme pour les templates le concept reste équivalent
    Classique
    (twentytwenty)
    Block Theme
    (twentytwentytwo)

    View Slide

  28. Comment apprendre la nouvelle syntaxe?
    On ne l’apprend pas vraiment
    - Templates
    - Editeur FSE -> Templates -> Ajouter un template
    - Monter la structure
    - Passer en mode code
    - Copier le code généré
    - Créer un fichier correspondant dans le dossier des templates
    - Coller le code copié depuis l’éditeur
    - Editeur FSE -> Templates -> Rafraichir la page
    - Ou utiliser le plugin Create Block Theme
    -
    - Parts
    - Editeur FSE -> Template parts -> Ajouter
    - Monter la structure
    - Passer en mode code
    - Copier le code généré
    - Créer un fichier correspondant dans le dossier des templates parts
    - Coller le code copié depuis l’éditeur
    - Editeur FSE -> Templates -> Rafraichir la page

    View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. 3/6
    Réapprendre
    les notions de
    templating
    Ecueils :
    Nouvelle façon de travailler
    Nouvelle syntaxe (HTML & blocks en commentaires)
    Temps à investir :
    - Compréhension : très rapide (qq heures).
    - Autonomie : un thème ou deux (1 mois cumulé).
    - Maîtrise ?
    Difficulté : 3.5/5

    View Slide

  37. Template & parts : ✅
    Déclaration du thème
    Template
    Header
    Footer

    View Slide

  38. Configuration de l’esthétique ?
    Déclaration du thème
    Template
    Header
    Footer
    + Couleurs & Fonts etc ?

    View Slide

  39. 4/6
    theme.json
    Objectif : Comprendre et exploiter ce nouveau moteur
    de configuration.
    Comment ?
    - Schema
    - Couleurs / palettes
    - Fonts
    - Dynamic variables
    - Global Styles
    - Variations
    - …

    View Slide

  40. View Slide

  41. 4/6
    theme.json
    Ecueils :
    Nouveau concept
    Nouvelle syntaxe
    Gros schéma à apprendre
    Documentation pas évidente
    Temps à investir : 1 semaine
    Difficulté : 3/5

    View Slide

  42. Theme config : ✅
    Block Theme
    Template
    Template Part Header
    Template Part Footer
    + Couleurs, Fonts et config via theme.json

    View Slide

  43. Qu’est-ce qui compose un thème?
    Déclaration du thème
    Template
    Header
    Footer
    Contenu ?
    + Couleurs & Fonts etc

    View Slide

  44. 05
    Low Code
    Patterns, Reusable blocks

    View Slide

  45. 5/6
    Patterns
    &
    Reusable
    blocks
    Objectif : Savoir monter des briques en assemblant
    des blocs existants
    Comment ?
    Créer des blocs réutilisables
    Créer des block patterns

    View Slide

  46. Différence entre patterns et reusable blocks
    Patterns Reusable
    - Permet de prémonter une
    structure de blocs.
    - Créées en code (PHP ou
    HTML)
    - par fonction
    - par commentaire
    - theme.json
    - Désynchronisées
    - Permet de sauvegarder une
    structure de blocs
    - Créées via l’éditeur
    - Synchronisation du code et du
    contenu
    - Ce sera toujours le même bloc
    sur toutes les pages

    View Slide

  47. Différence entre patterns et reusable blocks
    Patterns Reusable

    View Slide

  48. 5/6
    Patterns
    &
    Reusable
    blocks
    Ecueils
    - Comment créer et déclarer ces nouveaux
    éléments?
    - Quelle différence de synchronisation?
    - Quand utiliser l’un ou l’autre ?
    Temps à investir : 1 semaine
    Difficulté : 2/5

    View Slide

  49. 06
    Custom Blocks
    Pour créer vos propres briques

    View Slide

  50. 6/6
    Apprendre à
    créer des
    blocs
    Objectif : Savoir créer de nouvelles briques.
    Comment ?
    Tooling
    Static blocks
    Dynamic blocks

    View Slide

  51. Statique vs Dynamique
    Génération
    Statique Dynamique
    npx @wordpress/create-block monblock npx @wordpress/create-block monblock –variant dynamic

    View Slide

  52. Statique vs Dynamique
    Différences d’architecture
    Dynamique
    Statique

    View Slide

  53. Statique vs Dynamique
    Différences de concepts
    Statique Dynamique
    - Une méthode edit pour l’éditeur
    - Une méthode save pour
    générer le rendu.
    - Rendu sauvegardé en BDD
    - Doit resauvegarder une page
    pour modifier le rendu.
    - Permet de mutualiser l’aperçu
    entre edit et save
    - Une méthode edit pour l’éditeur
    - Pas de méthode save
    - Rendu généré dynamiquement
    en PHP
    - Si block modifié, modification
    immédiate sur toutes les pages
    - Si on veut un aperçu, il faut le
    coder en JS et PHP.

    View Slide

  54. 6/6
    Apprendre à
    créer des
    blocs
    statiques
    Ecueils
    Création
    Différence avec les autres types
    Architecture
    Tooling
    Mécanique d’édition et de sauvegarde
    Mécanique de synchronisation et de mise à jour
    React !
    Temps à investir : Entre 1 et 3 semaines hors React
    Difficulté : 5/5

    View Slide

  55. 6/6
    Apprendre à
    créer des
    blocs
    dynamiques
    Ecueils
    Création
    Différence avec les autres types
    Architecture
    Tooling
    Mécanique d’édition et de sauvegarde
    Mécanique de synchronisation et de mise à jour
    React !
    Temps à investir : Comme statique + 2 semaines
    Difficulté : 5/5

    View Slide

  56. FSE : ✅
    Déclaration du thème
    Template
    Header
    Footer
    Contenu
    + Couleurs & Fonts etc

    View Slide

  57. 1
    2
    3
    Templates
    &
    parts
    Résumé de la roadmap
    4
    theme.json
    5
    Patterns
    &
    Reusable
    blocks
    6
    Custom
    Blocs
    Apprendre
    les
    capacités
    natives de
    l’outil
    Déclarer un
    bloc thème
    2/5 | 2s
    1/5 | 1j
    3.5/5 | 1m
    3/5 | 1s
    2/5 | 1s
    5/5 | 2m

    View Slide

  58. TODO
    - X Installer WordPress (15mn max)
    - X Déclarer un bloc theme (15mn)
    - Remplir theme.json (palette, font families, font sizes, spacing) (1h)
    - X Déclarer une template part header (1h)
    - X Déclarer une template part footer (1h)
    - Déclarer un template qui exploite le header et footer, titre et contenu de la page, auteur, date (1h)
    - X Creer 3 posts de contenu avec des compositions de blocs natifs (30mn)
    - Créer un bloc statique (4h)
    - Créer un bloc dynamique (4h)

    View Slide

  59. MERCI !

    View Slide