YAOTW Stylo – Design System Importer

FAQ

Ai-je besoin de l’application WPStylo ?

Oui. Vous créez votre design system visuellement dans l’application gratuite WPStylo sur app.wpstylo.dev et vous exportez un fichier JSON. Cette extension importe ce fichier et l’applique à votre site WordPress.

Est-ce gratuit ?

Oui, l’extension et l’application WPStylo sont gratuites.

Est-ce compatible avec Elementor ?

Oui. L’extension applique vos couleurs, votre typographie et vos styles de boutons au Kit global d’Elementor. Si vous utilisez le design Atomic d’Elementor (v4+), vous pouvez en plus injecter les variables CSS et les classes utilitaires correspondantes.

Does it work with the block editor and block themes?

Yes, and on classic themes too. The recommended action, « Apply (no theme file changes) », hands your tokens to the block editor without ever modifying your theme’s theme.json file, whatever your theme is. On a block theme you can also write them into the file with the advanced « Write » (non-destructive) and « Overwrite » (clean slate) modes. Either way, you get five button block styles you can pick in the editor, on any theme.

My pages are built with Elementor but my posts are written in blocks. Does this help?

Yes, this is exactly what the Block Editor / theme.json target is for. Turn on « Apply (no theme file changes) » and your posts pick up your palette, font sizes and font families in the editor and on the front end, while your pages keep being built with Elementor as before. Nothing is written to your theme and nothing about your page builder changes. The five Stylo button block styles become selectable on Button blocks as well.

Two limits worth knowing. If your theme keeps the WordPress default font sizes, WordPress’ own « Small » size takes precedence over the Small role of your design system, so that one role is not applied in the block editor; every other role works. And on WordPress below 7.0 with a classic theme that ships no theme.json of its own, WordPress only passes the CSS variables through, so colors and font sizes do not appear as presets — the button variants still work.

Mon design system a disparu après une mise à jour de thème. Que faire ?

Ouvrez la page de l’extension : si vos tokens avaient été écrits dans theme.json et qu’une mise à jour de thème a remplacé ce fichier, WPStylo le détecte et vous l’indique, avec la version du thème depuis laquelle la mise à jour a eu lieu. Vous avez alors deux options, proposées directement dans ce message : écrire vos tokens à nouveau, ou basculer sur « Appliquer (sans modifier les fichiers du thème) », qui les applique sans toucher aux fichiers de votre thème, de sorte qu’aucune mise à jour future ne pourra les supprimer. La seconde option est la solution durable. Vous pouvez masquer le message ; il ne réapparaîtra que si la situation change à nouveau.

Qu’arrive-t-il à mon design system lorsque mon thème se met à jour ?

Si vous avez utilisé « Appliquer (sans modifier les fichiers du thème) », rien : vos tokens sont appliqués à la volée et vivent dans l’extension, pas dans le thème, une mise à jour de thème ne peut donc pas y toucher. Si vous les avez écrits dans theme.json, une mise à jour de thème remplace ce fichier (comme le fait WordPress lorsqu’il réinstalle un thème livré avec lui) et les tokens qui s’y trouvaient sont perdus. Vous pouvez alors restaurer la sauvegarde de votre theme.json depuis l’onglet Outils, appliquer à nouveau, ou basculer sur l’option à la volée.

J’ai injecté les variables Elementor mais je ne les vois pas. Pourquoi ?

« Injecter les variables et les classes CSS » fait deux choses distinctes : elle injecte des classes CSS utilitaires, qui fonctionnent toujours, et elle écrit des Global Variables dans votre Kit Elementor, qu’Elementor lui-même rend sous deux conditions qui lui sont propres. Premièrement, Elementor ne charge son module Global Variables que si l’expérimentation « Atomic Widgets » est activée (Elementor > Réglages > Fonctionnalités). Elle l’est par défaut sur les sites dont la première installation d’Elementor était en version 4.0 ou supérieure, et désactivée par défaut sur les sites mis à jour depuis une 3.x. Deuxièmement, Elementor ne rend les variables de type « taille » qu’avec Elementor Pro : sur une installation gratuite, les variables de taille de police restent inutilisées tandis que les variables de couleur et de famille de polices fonctionnent normalement. WPStylo détecte les deux cas et vous indique lequel s’applique sur la carte Elementor, dans le message de résultat et dans l’onglet Résumé. Rien n’est bloqué et aucun réimport n’est nécessaire : les variables sont déjà écrites et sont utilisées dès que la condition est remplie. Si aucun des deux ne s’applique à votre site, utilisez plutôt les classes CSS utilitaires, qui portent les mêmes valeurs et ne dépendent ni de l’une ni de l’autre.

Ai-je besoin d’Elementor Pro ?

Non. Tout ce que fait WPStylo fonctionne avec la version gratuite d’Elementor, à une exception près qui relève d’Elementor et non de cette extension : Elementor ne rend les variables globales de type « taille » que si Pro est actif, les variables de taille de police injectées restent donc inutilisées. Vos couleurs, vos polices, vos styles de boutons, les classes CSS utilitaires et toutes les autres cibles ne sont pas concernés.

Je n’utilise ni Elementor ni un thème de blocs. Puis-je quand même l’utiliser ?

Yes, twice over. The CSS Custom Properties target works on any theme: it injects --wps-* variables and utility classes you can use in your own CSS or templates. And the Block Editor / theme.json target also works on any theme, so content written in blocks picks up your design system even on a classic theme.

Est-ce que cela va écraser mes réglages existants ?

It depends on the target and the action. Applying to Elementor updates the global Kit’s system colors, typography and button; your custom colors and custom fonts are preserved. On a block theme, « Write » merges alongside your theme’s palette and fonts, while « Overwrite » replaces them with yours (a backup is always created first). You are always in control of which action you run.

Puis-je annuler les modifications ?

Yes. You can turn the runtime application off in one click, restore the previous theme.json from the automatic backup, deactivate the injected CSS, or delete the imported configuration entirely from the Tools tab. That backup is the state of the file just before your last apply, not your theme’s original file — the Tools tab shows its date and content so you know what you are restoring, and the file it replaces is itself saved first, so a restore can be undone. Note that natively written values (the Elementor Kit and a written theme.json) remain until you restore or change them, while CSS variables, injected classes, block styles, scroll effects and the runtime block editor application are removed when you deactivate the plugin.

Est-ce que cela va ralentir mon site ?

Non. Les styles sont livrés de manière efficace (en ligne quand c’est pertinent, mis en cache quand c’est possible), et les scripts publics ne sont chargés que lorsqu’une fonctionnalité comme les effets au défilement en a besoin. L’interface d’administration est légère et cloisonnée, elle n’affecte pas le reste de wp-admin.

Que sont les effets d’apparition au défilement ?

Optional animations (Fade Up, Fade In, Slide Left, Slide Right, Zoom In) that reveal page sections as visitors scroll. They apply to the Elementor and block theme targets, honor the reduced-motion accessibility setting, and never hide content when JavaScript is unavailable.

Comment empêcher un élément de s’animer ?

Ajoutez-lui la classe CSS wps-no-reveal : dans Elementor depuis les réglages avancés du conteneur, et dans l’éditeur de blocs depuis les réglages avancés du bloc. L’exclusion couvre cet élément et tout son contenu, rien de ce qu’il contient n’est donc animé. C’est l’outil adapté à un élément très court situé tout en bas d’une page, un pied de page d’une seule ligne par exemple. Pour désactiver l’effet partout, utilisez plutôt la carte « Effets d’apparition au défilement » de l’onglet Importer & appliquer.

Où trouver de l’aide ?

La documentation, les tutoriels et les actualités sont disponibles sur wpstylo.dev. Vous pouvez aussi utiliser le forum de support sur WordPress.org.