{"id":326239,"date":"2026-06-22T20:12:19","date_gmt":"2026-06-22T20:12:19","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/wpstylo-companion\/"},"modified":"2026-06-22T20:11:55","modified_gmt":"2026-06-22T20:11:55","slug":"yaotw-stylo","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/yaotw-stylo\/","author":23102817,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.6.0","stable_tag":"1.6.0","tested":"7.0","requires":"6.5","requires_php":"7.4","requires_plugins":null,"header_name":"YAOTW Stylo - Design System Importer","header_author":"YAOTW","header_description":"Import design system configurations from WPStylo and apply them to Elementor, FSE, or CSS custom properties.","assets_banners_color":"5b4d94","last_updated":"2026-06-22 20:11:55","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wpstylo.dev","header_author_uri":"https:\/\/yaotw.fr","rating":0,"author_block_rating":0,"active_installs":0,"downloads":46,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.6.0":{"tag":"1.6.0","author":"yaotw","date":"2026-06-22 20:11:55"}},"upgrade_notice":{"1.4.1":"<p>Non-destructive re-apply: user-created Elementor Custom Colors, Custom Fonts, Global Variables, and FSE palette entries are now preserved.<\/p>"},"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3582383,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256},"icon.svg":{"filename":"icon.svg","revision":3582383,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1554x500.png":{"filename":"banner-1554x500.png","revision":3582383,"resolution":"1554x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3582383,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.6.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3582383,"resolution":"1","location":"assets","locale":"","width":2532,"height":1182},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3582383,"resolution":"2","location":"assets","locale":"","width":2550,"height":1181},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3582383,"resolution":"3","location":"assets","locale":"","width":2528,"height":1183}},"screenshots":{"1":"The YAOTW Stylo admin page showing the three available targets.","2":"The CSS Classes reference table with copy buttons.","3":"The configuration summary panel."}},"plugin_section":[],"plugin_tags":[268408,254228,76538,201618,5126],"plugin_category":[43],"plugin_contributors":[268409],"plugin_business_model":[],"class_list":["post-326239","plugin","type-plugin","status-publish","hentry","plugin_tags-css-custom-properties","plugin_tags-design-tokens","plugin_tags-elementor","plugin_tags-full-site-editing","plugin_tags-typography","plugin_category-customization","plugin_contributors-yaotw","plugin_committers-yaotw"],"banners":{"banner":"https:\/\/ps.w.org\/yaotw-stylo\/assets\/banner-772x250.png?rev=3582383","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/yaotw-stylo\/assets\/icon.svg?rev=3582383","icon":"https:\/\/ps.w.org\/yaotw-stylo\/assets\/icon.svg?rev=3582383","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/yaotw-stylo\/assets\/screenshot-1.png?rev=3582383","caption":"The YAOTW Stylo admin page showing the three available targets."},{"src":"https:\/\/ps.w.org\/yaotw-stylo\/assets\/screenshot-2.png?rev=3582383","caption":"The CSS Classes reference table with copy buttons."},{"src":"https:\/\/ps.w.org\/yaotw-stylo\/assets\/screenshot-3.png?rev=3582383","caption":"The configuration summary panel."}],"raw_content":"<!--section=description-->\n<p>YAOTW Stylo connects your WordPress site to the <a href=\"https:\/\/app.wpstylo.dev\">WPStylo app<\/a> \u2014 a free visual design system configurator for colors, typography, buttons, and global elements.<\/p>\n\n<p>Design your system once in the app, export a JSON config file, then apply it in one click via three independent targets:<\/p>\n\n<p><strong>CSS Custom Properties (universal)<\/strong>\nInjects <code>--wps-color-*<\/code>, <code>--wps-font-*<\/code>, and <code>--wps-btn-*<\/code> CSS variables plus <code>.wps-text-*<\/code> and <code>.wps-btn-*<\/code> utility classes into every front-end page. Works with any theme or page builder.<\/p>\n\n<p><strong>Elementor integration<\/strong>\nUpdates system colors, system typography, and global button styles via the Kit Manager API. Injects Elementor Global Variables (colors, font families, font sizes) and utility CSS classes (<code>.wps_h1<\/code>--<code>.wps_nav<\/code>, <code>.wps_btn_*<\/code>) directly into the active Kit's custom CSS. User-created Custom Colors, Custom Fonts, and Global Variables are preserved on re-apply.<\/p>\n\n<p><strong>FSE \/ theme.json<\/strong>\nMerges WPStylo design tokens into the active block theme's <code>theme.json<\/code> (color palette, font families, font sizes, heading and body styles, button element) while preserving all other theme settings. Automatic backup before every write.<\/p>\n\n<h4>Key features<\/h4>\n\n<ul>\n<li>JSON import via file upload or paste, validated against the <code>wpstylo\/v1<\/code> schema<\/li>\n<li>Responsive typography via <code>clamp()<\/code> (CSS) and automatic tablet size interpolation (Elementor)<\/li>\n<li>Non-destructive re-apply \u2014 user content preserved in Elementor and FSE<\/li>\n<li>Automatic <code>theme.json.wpstylo-backup<\/code> before every FSE write<\/li>\n<li>Copy-to-clipboard class reference table in the admin<\/li>\n<\/ul>\n\n<h4>Requirements<\/h4>\n\n<ul>\n<li>Elementor 3.0+ \u2014 required for the Elementor target only (optional)<\/li>\n<li>A block theme \u2014 required for the FSE target only (optional)<\/li>\n<\/ul>\n\n<p>The CSS Custom Properties target works with any theme and any builder.<\/p>\n\n<h3>External services<\/h3>\n\n<p>This plugin loads the Google Fonts stylesheet from Google's CDN (fonts.googleapis.com) on the plugin's admin settings page only, to render a live preview of the typography defined in your imported configuration.<\/p>\n\n<p>When you open the YAOTW Stylo admin page, your browser requests the selected font families from fonts.googleapis.com. The selected font family names are included in the request URL. No personal data is sent by the plugin, and this request never happens on your site's front end.<\/p>\n\n<p>Google Fonts is a service provided by Google LLC. Terms of service: https:\/\/policies.google.com\/terms \u2014 Privacy policy: https:\/\/policies.google.com\/privacy<\/p>\n\n<!--section=installation-->\n<ol>\n<li>In your WordPress admin, go to Plugins \u2192 Add New Plugin.<\/li>\n<li>Search for YAOTW Stylo and click Install Now.<\/li>\n<li>Click Activate.<\/li>\n<li>Navigate to YAOTW Stylo in the admin sidebar.<\/li>\n<\/ol>\n\n<h4>Manual installation<\/h4>\n\n<ol>\n<li>Download the zip from the WordPress.org plugin page.<\/li>\n<li>In your WordPress admin, go to Plugins \u2192 Add New Plugin \u2192 Upload Plugin.<\/li>\n<li>Select the zip and click Install Now, then Activate.<\/li>\n<\/ol>\n\n<h4>First steps<\/h4>\n\n<ol>\n<li>Visit <a href=\"https:\/\/app.wpstylo.dev\">app.wpstylo.dev<\/a>, configure your design system, and export <code>wpstylo-config.json<\/code>.<\/li>\n<li>In your WordPress admin under YAOTW Stylo, import the JSON file.<\/li>\n<li>Click Apply on the target(s) you want to use.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20the%20plugin%20modify%20my%20theme%20files%3F\"><h3>Does the plugin modify my theme files?<\/h3><\/dt>\n<dd><p>Only the FSE target writes to your theme's <code>theme.json<\/code>. A backup (<code>theme.json.wpstylo-backup<\/code>) is always created first. Use Download theme.json to get the file without writing to the server.<\/p><\/dd>\n<dt id=\"what%20happens%20if%20i%20deactivate%20the%20plugin%3F\"><h3>What happens if I deactivate the plugin?<\/h3><\/dt>\n<dd><p>CSS injection stops immediately. Elementor global settings and theme.json entries that were previously applied remain \u2014 they are not reverted on deactivation.<\/p><\/dd>\n<dt id=\"is%20it%20compatible%20with%20elementor%20free%20and%20elementor%20pro%3F\"><h3>Is it compatible with Elementor Free and Elementor Pro?<\/h3><\/dt>\n<dd><p>Yes. The plugin uses the Kit Manager API available in both Free and Pro, stable since Elementor 3.0.<\/p><\/dd>\n<dt id=\"can%20i%20use%20it%20without%20elementor%20or%20a%20block%20theme%3F\"><h3>Can I use it without Elementor or a block theme?<\/h3><\/dt>\n<dd><p>Yes. Each target is independent. The CSS Custom Properties target works with any theme and any builder.<\/p><\/dd>\n<dt id=\"will%20re-applying%20overwrite%20my%20custom%20elementor%20colors%20or%20fonts%3F\"><h3>Will re-applying overwrite my custom Elementor colors or fonts?<\/h3><\/dt>\n<dd><p>No. Since v1.4.1, re-applying preserves user-created Custom Colors, Custom Fonts, and Global Variables in Elementor, and user-added palette entries in FSE theme.json.<\/p><\/dd>\n<dt id=\"where%20do%20i%20get%20the%20wpstylo%20config%20file%3F\"><h3>Where do I get the WPStylo config file?<\/h3><\/dt>\n<dd><p>Visit <a href=\"https:\/\/app.wpstylo.dev\">app.wpstylo.dev<\/a>. The app is free and requires no account.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.6.0<\/h4>\n\n<ul>\n<li>Added: Tools tab \u2014 delete, create (app link), export (client-side JSON backup of the imported config), restore theme.json from backup (FSE), and learn more.<\/li>\n<li>Added: Guide tab with step-by-step usage notes for the Elementor, FSE, and CSS Custom Properties targets, and what persists after uninstalling.<\/li>\n<li>Added: FSE restore \u2014 one-click restore of theme.json from the WPStylo backup (Tools tab), with a confirmation modal.<\/li>\n<li>Added: a safety warning on the Import &amp; Apply tab (use on development\/staging; back up before applying on production).<\/li>\n<li>Changed: admin reorganized into five deep-linkable tabs (Import &amp; Apply, Reference, Summary, Tools, Guide) and is now full width.<\/li>\n<li>Changed: Configuration summary opens the Colors panel by default and shows the font family per typography role.<\/li>\n<li>Changed: Reference and Summary show an empty-state hint when no configuration is imported.<\/li>\n<li>Fixed: the Copy and Copy all class-name buttons now work on non-secure contexts (plain HTTP, e.g. *.local) via a clipboard fallback.<\/li>\n<\/ul>\n\n<h4>1.5.0<\/h4>\n\n<ul>\n<li>Renamed to \"YAOTW Stylo - Design System Importer\". No change to functionality, settings, or output.<\/li>\n<\/ul>\n\n<h4>1.4.3<\/h4>\n\n<ul>\n<li>Fixed: escaped integer outputs in the admin UI; switched to wp_is_writable() for the FSE writability check.<\/li>\n<li>Changed: Plugin Check \/ PHPCS compliance pass (documented nonce-routing and uninstall cleanup annotations).<\/li>\n<\/ul>\n\n<h4>1.4.2<\/h4>\n\n<ul>\n<li>Security: all configuration-derived values (colors, font families, slugs) are now strictly sanitized before being output in CSS, preventing any markup breakout.<\/li>\n<li>Changed: front-end and Elementor CSS variable blocks are now output via wp_add_inline_style().<\/li>\n<li>Changed: removed load_plugin_textdomain() (handled automatically by WordPress).<\/li>\n<\/ul>\n\n<h4>1.4.1<\/h4>\n\n<ul>\n<li>Fix: Elementor re-apply no longer destroys user-created Custom Colors and Custom Fonts (<code>custom_colors<\/code> \/ <code>custom_typography<\/code> are now left untouched).<\/li>\n<li>Fix: Elementor Global Variables injection now preserves user-created variables \u2014 only WPStylo-managed entries (prefix <code>color-<\/code> \/ <code>font-<\/code>) are rebuilt.<\/li>\n<li>Fix: FSE apply now merges color palette, font families, and font sizes by slug instead of overwriting, preserving user-added entries.<\/li>\n<li>Fix: Removed leftover debug statement in Elementor apply.<\/li>\n<\/ul>\n\n<h4>1.4.0<\/h4>\n\n<ul>\n<li>Added: Custom color roles are now included in Elementor Global Variables and the front-end CSS variables block.<\/li>\n<li>Fixed: Missing <code>--wps-color-secondary-background<\/code> and <code>--wps-color-secondary-text<\/code> in the front-end CSS block.<\/li>\n<\/ul>\n\n<h4>1.3.0<\/h4>\n\n<ul>\n<li>Added: CSS Classes reference table shown when only CSS Custom Properties target is active.<\/li>\n<li>Fixed: <code>borderWidth = 0<\/code> now removes all border properties across Elementor, FSE, and utility CSS.<\/li>\n<li>Fixed: Button padding uses px values to prevent Elementor Kit Editor from silently resetting them.<\/li>\n<\/ul>\n\n<h4>1.2.0<\/h4>\n\n<ul>\n<li>Redesigned admin interface with four sections and a CSS Classes reference table.<\/li>\n<\/ul>\n\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>Added Elementor Global Variables injection and utility CSS classes.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>First stable release.<\/li>\n<\/ul>","raw_excerpt":"Import design system configurations from WPStylo and apply them to Elementor, FSE theme.json, or CSS custom properties.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/326239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=326239"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/yaotw"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=326239"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=326239"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=326239"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=326239"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=326239"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=326239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}