diff --git a/CHANGELOG.md b/CHANGELOG.md index 85422fde..9a98f86a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,115 +1,126 @@ +# 5.5.0 + +- Ajout du réglage `is_lcp` à `get_the_image()` (fetchpriority high, decoding sync, pas de lazy loading) +- Ne jamais produire `fetchpriority="high"` avec `loading="lazy"` dans les helpers d’images +- Ajout des helpers `get_theme_static_image_markup()` : images statiques du thème avec width/height (CLS) et conservation de `alt=""` pour les images décoratives +- Abaissement du `fetchpriority` du logo personnalisé pour ne pas concurrencer l’image LCP +- Ajout du filtre `bea_theme_framework_preload_fonts` (vide par défaut) pour précharger les polices above-the-fold +- Réécriture de `Animation` avec des IntersectionObservers partagés au lieu d’une boucle au scroll (mêmes options et callbacks) +- Ajout de l’utilitaire JS `deferInitialization()` pour exécuter du code non critique à idle (INP) +- Documentation de la base Core Web Vitals dans le README + # 5.3.2 -- Update CHANGELOG.md and package.json files with the last BFF version number -- Enforce tab indentation in codebase -- Replace all deprecated rules in latest dart sass changes -- Add role attribute option in link service -- Delete customised index.php file content -- Remove browsersync package -- Add a11y improvemenst (skip link, image block, table block) -- Add bluesky share link -- Delete custom JS each function -- Add URL parameter logic to disable JS/CSS animations -- Update oneloop js package version -- Change node version from 20.11.0 to 22.13.0 -- Add RTL logical behavior -- Update CSS ACF rules to Gutenberg -- Change Custom CSS breakpoints to match default WordPress CSS breakpoints -- Add no lazyload image tpl file -- Change yarn version from 1.22.21 to 4.5.0 -- Add external link default styles -- Add SCSS Fluid feature -- Add Gravity Forms service -- Add svg/avif/webp file extensions to post build JS script -- Update webpack image sizes configuration -- Fix common W3C errors -- Add FacetWP service -- Fix ACF loading priority -- Fix breadcrumb behavior on 404 template -- Fix PHPCS ans WPCS errors -- Update SCSS files structure and behavior - -# 5.3.0 & 5.3.1 - -- Fix namespace example -- Inject data into get_terms_list +- Mise à jour de CHANGELOG.md et package.json avec le numéro de version BFF le plus récent +- Indentation par tabulations imposée dans la base de code +- Remplacement de toutes les règles dépréciées des dernières évolutions Dart Sass +- Ajout d’une option d’attribut role dans le service link +- Suppression du contenu personnalisé du fichier index.php +- Suppression du package browsersync +- Améliorations a11y (skip link, bloc image, bloc tableau) +- Ajout du lien de partage Bluesky +- Suppression du custom JS each function +- Ajout de la logique de paramètre URL pour désactiver les animations JS/CSS +- Mise à jour de la version du package oneloop js +- Passage de Node 20.11.0 à 22.13.0 +- Ajout du comportement logique RTL +- Mise à jour des règles CSS ACF vers Gutenberg +- Alignement des breakpoints Custom CSS sur les breakpoints CSS WordPress par défaut +- Ajout d’un fichier tpl d’image sans lazyload +- Passage de Yarn 1.22.21 à 4.5.0 +- Ajout des styles par défaut des liens externes +- Ajout de la fonctionnalité SCSS Fluid +- Ajout du service Gravity Forms +- Ajout des extensions svg/avif/webp au script JS post-build +- Mise à jour de la configuration des tailles d’images Webpack +- Correction d’erreurs W3C courantes +- Ajout du service FacetWP +- Correction de la priorité de chargement ACF +- Correction du comportement du fil d’Ariane sur le template 404 +- Correction des erreurs PHPCS et WPCS +- Mise à jour de la structure et du comportement des fichiers SCSS + +# 5.3.0 et 5.3.1 + +- Correction de l’exemple de namespace +- Injection de données dans get_terms_list # 5.2.1 -- Update SCSS heading mixin +- Mise à jour du mixin SCSS heading # 5.2.0 -- Update @wordpress npm packages -- Refactor editor scripts to use @wordpress packages. -- Update asset registration to use the new asset data mecanism -- Add new method to load data -- Add and configure dependency-extraction-webpack-plugin pacjkage +- Mise à jour des packages npm @wordpress +- Refactor des scripts éditeur pour utiliser les packages @wordpress +- Mise à jour de l’enregistrement des assets avec le nouveau mécanisme asset data +- Ajout d’une nouvelle méthode pour charger les données +- Ajout et configuration du package dependency-extraction-webpack-plugin # 5.1.6 -- Update post css npm packages +- Mise à jour des packages npm postcss # 5.1.5 -- Update browser-sung npm package +- Mise à jour du package npm browser-sync # 5.1.4 -- Add post-scss npm package +- Ajout du package npm post-scss # 5.1.3 -- Create SCSS palette variables +- Création des variables de palette SCSS # 5.1.2 -- Update canvas npm package -- Fix webpack image sizes script +- Mise à jour du package npm canvas +- Correction du script webpack des tailles d’images # 5.1.1 -- Update npm linting packages -- Update JS and SCSS linting rules -- Clean and fix linting issues for SCSS files +- Mise à jour des packages npm de linting +- Mise à jour des règles de linting JS et SCSS +- Nettoyage et correction des problèmes de linting sur les fichiers SCSS # 5.1 -- Big update of the SCSS folder content and organization +- Refonte majeure du contenu et de l’organisation du dossier SCSS # 5.0.9 -- Add invisible scrollbar SCSS mixin +- Ajout d’un mixin SCSS scrollbar invisible # 5.0.8 -- Fix filename for editor script and editor style +- Correction du nom de fichier pour le script et la feuille de style éditeur # 5.0.7 -- Add hook to load minified CSS for login page +- Ajout d’un hook pour charger le CSS minifié de la page de connexion # 5.0.6 -- Add some templating helpers ( the_image, the_text, the_link ...) +- Ajout de helpers de templating (the_image, the_text, the_link, etc.) # 5.0.0 -- Add Webpack 5 -- Set build configuration files into config directory -- Remove bash scripts -- Frontend image optimization -- Remove static templates -- Make BrowserSync working with Lando -- Replace Babel with Esbuild -- IE11 is not supported anymore +- Ajout de Webpack 5 +- Déplacement des fichiers de configuration build dans le dossier config +- Suppression des scripts bash +- Optimisation des images côté front +- Suppression des templates statiques +- BrowserSync fonctionnel avec Lando +- Remplacement de Babel par Esbuild +- IE11 n’est plus pris en charge # 4.7.0 -- Handle Editor patterns -- Handle Editor patterns categories -- Handle Editor Backend JS -- Handle Editor frontend/backend CSS -- PHP 7.2 min version -- Delete loadFont.php and use regular script enqueuing -- Add esc_attr on defer/async script +- Gestion des patterns éditeur +- Gestion des catégories de patterns éditeur +- Gestion du JS backend éditeur +- Gestion du CSS frontend/backend éditeur +- Version PHP minimale 7.2 +- Suppression de loadFont.php et utilisation de l’enqueue de scripts classique +- Ajout de esc_attr sur defer/async script diff --git a/README.md b/README.md index 4326e1da..72aa7755 100644 --- a/README.md +++ b/README.md @@ -4,23 +4,23 @@ [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://GitHub.com/Naereen/StrapDown.js/graphs/commit-activity) -## What is BFF ? +## Qu’est-ce que BFF ? -**Be API Frontend Framework** *(or BFF)* is a WordPress theme boilerplate designed to assist you in launching your own WordPress theme using modern tools. +**Be API Frontend Framework** *(ou BFF)* est un boilerplate de thème WordPress conçu pour vous aider à lancer votre propre thème WordPress avec des outils modernes. -## Requirements +## Prérequis -### PHP & WordPress +### PHP et WordPress -- PHP **8.3** or higher -- WordPress **6.3** or higher +- PHP **8.3** ou supérieur +- WordPress **6.3** ou supérieur ### Composer -You need composer to autoload all your classes from the inc folder. +Composer est nécessaire pour autoloader toutes vos classes depuis le dossier `inc`. -Use the `beapi/composer-scaffold-theme` package that add it automatically to the composer.json file. -You can add it yourself like this : +Utilisez le package `beapi/composer-scaffold-theme`, qui l’ajoute automatiquement au fichier `composer.json`. +Vous pouvez aussi l’ajouter vous-même ainsi : ```composer.json "autoload": { @@ -32,15 +32,15 @@ You can add it yourself like this : ### Autoload -The autoload is based on psr-4 and handled by composer. +L’autoload repose sur PSR-4 et est géré par Composer. ### Node.js -You need [the latest stable version of Node.js](https://nodejs.org/). +Vous avez besoin de [la dernière version stable de Node.js](https://nodejs.org/). ## Installation -Download the latest release of BFF [here](https://github.com/BeAPI/beapi-frontend-framework/releases) and extract the zip archive into your `themes` WordPress's folder. +Téléchargez la dernière release de BFF [ici](https://github.com/BeAPI/beapi-frontend-framework/releases) et extrayez l’archive zip dans le dossier `themes` de WordPress. ```bash |____wp-admin @@ -52,133 +52,133 @@ Download the latest release of BFF [here](https://github.com/BeAPI/beapi-fronten |____wp-includes ``` -Of course, you can rename `beapi-frontend-framework` to define your WordPress theme's name. +Vous pouvez bien sûr renommer `beapi-frontend-framework` pour définir le nom de votre thème WordPress. -Next, go to your theme folder (in the following example, I didn't rename `beapi-frontend-framework`) with your favorite Term software. +Ensuite, rendez-vous dans le dossier du thème (dans l’exemple ci-dessous, je n’ai pas renommé `beapi-frontend-framework`) avec votre terminal préféré. ```bash cd wp-content/themes/beapi-frontend-framework ``` -Then install node dependencies with Yarn. +Puis installez les dépendances Node avec Yarn. ```bash yarn ``` -Alternatively, you can use NPM. +Vous pouvez aussi utiliser NPM. ```bash npm install ``` -## Local development with wp-env +## Développement local avec wp-env -BFF ships with a [wp-env](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/) configuration (`.wp-env.json`) to run a local WordPress instance with Docker. +BFF inclut une configuration [wp-env](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/) (`.wp-env.json`) pour exécuter une instance WordPress locale avec Docker. -### Requirements +### Prérequis -- [Docker Desktop](https://www.docker.com/products/docker-desktop/) (or a compatible Docker runtime) -- Node.js (see [Requirements](#nodejs)) +- [Docker Desktop](https://www.docker.com/products/docker-desktop/) (ou un runtime Docker compatible) +- Node.js (voir [Prérequis](#nodejs)) -### Installing wp-env +### Installation de wp-env -You can run wp-env without a global install via `npx @wordpress/env`, or install the CLI once and use the `wp-env` command: +Vous pouvez lancer wp-env sans installation globale via `npx @wordpress/env`, ou installer la CLI une fois et utiliser la commande `wp-env` : ```bash # Global install (npm or yarn) npm install -g @wordpress/env -# or +# ou yarn global add @wordpress/env ``` -After installation, replace `npx @wordpress/env` with `wp-env` in the commands below. +Après l’installation, remplacez `npx @wordpress/env` par `wp-env` dans les commandes ci-dessous. -### Getting started +### Démarrage -From the theme root: +Depuis la racine du thème : ```bash yarn npx @wordpress/env start -# or, if wp-env is installed globally: +# ou, si wp-env est installé globalement : wp-env start ``` -On first start, wp-env will: +Au premier démarrage, wp-env va : -- Spin up WordPress (PHP 8.3) -- Mount this theme from the current directory -- Install and activate the [Advanced Custom Fields](https://wordpress.org/plugins/advanced-custom-fields/) plugin +- Démarrer WordPress (PHP 8.3) +- Monter ce thème depuis le répertoire courant +- Installer et activer l’extension [Advanced Custom Fields](https://wordpress.org/plugins/advanced-custom-fields/) -### URLs and credentials +### URLs et identifiants | | | |---|---| | Site | http://localhost:8888 | | Admin | http://localhost:8888/wp-admin | -| Username | `admin` | -| Password | `password` | +| Identifiant | `admin` | +| Mot de passe | `password` | -### Common commands +### Commandes courantes ```bash -# Start the environment -npx @wordpress/env start # or: wp-env start +# Démarrer l’environnement +npx @wordpress/env start # ou : wp-env start -# Stop containers (data is preserved) -npx @wordpress/env stop # or: wp-env stop +# Arrêter les conteneurs (les données sont conservées) +npx @wordpress/env stop # ou : wp-env stop -# Remove containers and volumes -npx @wordpress/env destroy # or: wp-env destroy +# Supprimer conteneurs et volumes +npx @wordpress/env destroy # ou : wp-env destroy -# Run WP-CLI inside the environment +# Exécuter WP-CLI dans l’environnement npx @wordpress/env run cli wp plugin list -# or: wp-env run cli wp plugin list +# ou : wp-env run cli wp plugin list -# Run a command in the theme directory +# Exécuter une commande dans le dossier du thème npx @wordpress/env run cli --env-cwd=wp-content/themes/beapi-frontend-framework composer install -# or: wp-env run cli --env-cwd=wp-content/themes/beapi-frontend-framework composer install +# ou : wp-env run cli --env-cwd=wp-content/themes/beapi-frontend-framework composer install ``` -### Development workflow +### Workflow de développement -With wp-env running, start the Webpack watcher in a second terminal: +Avec wp-env en cours d’exécution, lancez le watcher Webpack dans un second terminal : ```bash yarn start ``` -Changes to PHP, SCSS, and JavaScript assets are reflected after Webpack rebuilds. Theme PHP changes are picked up immediately thanks to the mounted volume. +Les changements sur les assets PHP, SCSS et JavaScript sont pris en compte après rebuild Webpack. Les modifications PHP du thème sont appliquées immédiatement grâce au volume monté. ## Configuration -The configurations files are in `config` directory. +Les fichiers de configuration se trouvent dans le dossier `config`. ### Webpack -You can find the common Webpack settings file in `webpack.common.js`. For development mode purpose, you can edit `webpack.dev.js` file and for production mode, you can edit `webpack.prod.js`. -You also have the loaders in `loaders.js` file and Webpack's plugin in `plugins.js` file. +Vous trouverez le fichier de paramètres Webpack communs dans `webpack.common.js`. Pour le mode développement, éditez `webpack.dev.js` ; pour la production, `webpack.prod.js`. +Les loaders sont dans `loaders.js` et les plugins Webpack dans `plugins.js`. -## How to use BFF ? +## Comment utiliser BFF ? -After installing dependencies, you can run some commands which are explained below. +Après l’installation des dépendances, vous pouvez exécuter les commandes décrites ci-dessous. -### Start with Browser Sync +### Démarrer avec Browser Sync -BFF is configured to work with [lando](https://lando.dev/). If you have a `.lando.yml` file in your project's root, set the path to your file in the `browsersync.config.js` file. +BFF est configuré pour fonctionner avec [Lando](https://lando.dev/). Si vous avez un fichier `.lando.yml` à la racine de votre projet, indiquez le chemin vers ce fichier dans `browsersync.config.js`. ```js let fileContents = fs.readFileSync('../../../../.lando.yml', 'utf8') ``` -Then, run the following command from the theme : +Puis exécutez la commande suivante depuis le thème : ```bash yarn start ``` -BrowserSync will proxy your lando'server based on the name defined in your `.lando.yml`. +BrowserSync proxifiera votre serveur Lando d’après le nom défini dans votre `.lando.yml`. ### Build @@ -186,19 +186,56 @@ BrowserSync will proxy your lando'server based on the name defined in your `.lan yarn build ``` -### Bundle report +### Rapport de bundle -You can launch a bundle report with the following command : +Vous pouvez générer un rapport de bundle avec la commande suivante : ```bash yarn bundle-report ``` -## WordPress Editor (Gutenberg) +## Core Web Vitals -### Customize blocks +### Ce que le thème fournit -The `bff_editor_custom_settings` filter allow you to customize blocks styles and variations. For example: +- **Image LCP** : passez `'is_lcp' => true` dans les réglages de `get_the_image()` pour l’image principale above-the-fold (hero, couverture). Cela retire `loading="lazy"` et ajoute `fetchpriority="high"` et `decoding="sync"`. À utiliser sur une seule image par page. + +```php +the_image( $image_id, [ 'alt' => '' ], [ 'size' => 'hero', 'is_lcp' => true ] ); +``` + +- **Images décoratives** : passez `'alt' => ''` pour produire `alt=""`, afin que les technologies d’assistance ignorent l’image. Omettre `alt` n’est pas équivalent. +- **Images statiques du thème** (logos, placeholders, illustrations depuis `dist/`) : utilisez `get_theme_static_image_markup()` / `the_theme_static_image()`. `width` et `height` sont lus depuis le fichier (SVG ou raster) pour limiter les décalages de mise en page (CLS). + +```php +the_theme_static_image( 'dist/images/placeholder.svg', [ 'class' => 'card__image', 'loading' => 'lazy' ] ); +``` + +- **Logo personnalisé** : reçoit `fetchpriority="low"` pour ne pas concurrencer la vraie image LCP. +- **Preload des polices** : opt-in, uniquement pour les polices rendues au premier affichage. + +```php +add_filter( 'bea_theme_framework_preload_fonts', fn() => [ 'dist/fonts/my-font-regular.woff2' ] ); +``` + +- **JS** : `Animation` s’appuie sur `IntersectionObserver` (pas de boucle au scroll). Utilisez `deferInitialization()` depuis `src/js/utils` pour exécuter du code non critique lorsque le navigateur est inactif (INP). + +### Ce que chaque projet doit encore configurer + +Cela dépend de l’hébergement, des extensions et du contenu ; ce n’est donc pas inclus dans le thème : + +- Cache de page et réglages WP Rocket (Remove Unused CSS, defer / delay JS et leurs exclusions, exclusions lazyload pour l’image LCP, preconnect limités aux tiers chargés tôt). +- `robots.txt` (endpoints techniques et AJAX) et en-têtes `Cache-Control` pour les assets statiques. +- Réglages du plugin SEO : URLs canoniques sur pagination personnalisée, doublons de données structurées. +- Polices : sous-ensemble des fichiers aux graisses et glyphes réellement utilisés, suppression des fichiers inutiles (italiques, graisses supplémentaires). +- Intégrations tierces (vidéos, formulaires, webinars) : chargement à l’interaction ou à l’entrée dans le viewport. +- Assets des plugins : dequeue des scripts et styles front sur les pages qui ne les utilisent pas. + +## Éditeur WordPress (Gutenberg) + +### Personnaliser les blocs + +Le filtre `bff_editor_custom_settings` permet de personnaliser les styles et variations de blocs. Par exemple : ```php add_filter( 'bff_editor_custom_settings', 'customize_editor_settings', 10, 1 );