{"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-07-13T07:06:45","modified_gmt":"2026-07-13T07:06:45","slug":"yaotw-stylo","status":"publish","type":"plugin","link":"https:\/\/os.wordpress.org\/plugins\/yaotw-stylo\/","author":23102817,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.0.0","stable_tag":"2.0.0","tested":"7.0.2","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-07-13 07:06:45","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":196,"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"},"1.7.0":{"tag":"1.7.0","author":"yaotw","date":"2026-06-27 11:26:59"},"1.9.0":{"tag":"1.9.0","author":"yaotw","date":"2026-07-08 20:58:54"},"2.0.0":{"tag":"2.0.0","author":"yaotw","date":"2026-07-13 07:06:45"}},"upgrade_notice":{"2.0.0":"<p>Adds scroll appearance effects, a new FSE &quot;Overwrite theme.json&quot; mode, automatic Text\/Background color mapping, and a redesigned admin. Back up your site before applying on production.<\/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-1544x500.png":{"filename":"banner-1544x500.png","revision":3605575,"resolution":"1544x500","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","1.7.0","1.9.0","2.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3605575,"resolution":"1","location":"assets","locale":"","width":2537,"height":1177},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3605575,"resolution":"2","location":"assets","locale":"","width":2331,"height":1172},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3605575,"resolution":"3","location":"assets","locale":"","width":2347,"height":1182},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3605575,"resolution":"4","location":"assets","locale":"","width":2352,"height":1177},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3605575,"resolution":"5","location":"assets","locale":"","width":2326,"height":1181}},"screenshots":{"1":"Import &amp; Apply: import your JSON configuration and apply it to Elementor, Full Site Editing, or CSS custom properties.","2":"Reference: copy-ready CSS class names for typography and buttons, plus the FSE button block styles.","3":"Summary: a clear overview of the imported design system (colors, typography, buttons, element tokens).","4":"Tools: export your configuration, restore theme.json from backup, or delete the configuration.","5":"Guide: built-in documentation for every target."}},"plugin_section":[],"plugin_tags":[215460,254228,76538,201618,205718],"plugin_category":[43],"plugin_contributors":[268409],"plugin_business_model":[],"class_list":["post-326239","plugin","type-plugin","status-publish","hentry","plugin_tags-design-system","plugin_tags-design-tokens","plugin_tags-elementor","plugin_tags-full-site-editing","plugin_tags-theme-json","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":"https:\/\/ps.w.org\/yaotw-stylo\/assets\/banner-1544x500.png?rev=3605575","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=3605575","caption":"Import &amp; Apply: import your JSON configuration and apply it to Elementor, Full Site Editing, or CSS custom properties."},{"src":"https:\/\/ps.w.org\/yaotw-stylo\/assets\/screenshot-2.png?rev=3605575","caption":"Reference: copy-ready CSS class names for typography and buttons, plus the FSE button block styles."},{"src":"https:\/\/ps.w.org\/yaotw-stylo\/assets\/screenshot-3.png?rev=3605575","caption":"Summary: a clear overview of the imported design system (colors, typography, buttons, element tokens)."},{"src":"https:\/\/ps.w.org\/yaotw-stylo\/assets\/screenshot-4.png?rev=3605575","caption":"Tools: export your configuration, restore theme.json from backup, or delete the configuration."},{"src":"https:\/\/ps.w.org\/yaotw-stylo\/assets\/screenshot-5.png?rev=3605575","caption":"Guide: built-in documentation for every target."}],"raw_content":"<!--section=description-->\n<p><strong>Bring one consistent design system to your whole WordPress site, whether you build with Elementor, the block editor (Full Site Editing), or plain CSS.<\/strong><\/p>\n\n<p>YAOTW Stylo turns a design system (colors, typography, buttons, spacing, effects) into real WordPress settings. You design your system visually in the free <strong>WPStylo app<\/strong> (<a href=\"https:\/\/app.wpstylo.dev\">app.wpstylo.dev<\/a>), export a single JSON file, then import it here and apply it to your site in one click.<\/p>\n\n<p>No more copying hex codes by hand, no more mismatched headings between your page builder and your block templates. Define your tokens once, apply them everywhere, and keep every page on brand.<\/p>\n\n<p>Design your system at <a href=\"https:\/\/app.wpstylo.dev\">app.wpstylo.dev<\/a>. Learn more at <a href=\"https:\/\/wpstylo.dev\">wpstylo.dev<\/a>.<\/p>\n\n<h4>Why designers and developers use it<\/h4>\n\n<ul>\n<li><strong>One source of truth.<\/strong> Your colors, fonts and button styles come from a single JSON file, so your whole site stays consistent.<\/li>\n<li><strong>Works with your stack.<\/strong> Apply the same design system to Elementor, to block themes (FSE \/ theme.json), or to any theme through CSS custom properties.<\/li>\n<li><strong>No code required.<\/strong> Design visually, import, apply. The plugin writes the settings for you.<\/li>\n<li><strong>Non-destructive by default.<\/strong> Your existing content is preserved, backups are created before risky operations, and everything can be restored or removed.<\/li>\n<li><strong>Lightweight.<\/strong> Styles are delivered efficiently and the admin stays fast; nothing heavy is loaded on your front-end unless a feature needs it.<\/li>\n<li><strong>Free.<\/strong> The plugin and the WPStylo app are free to use.<\/li>\n<\/ul>\n\n<h4>Apply your design system to three targets<\/h4>\n\n<p><strong>1. CSS Custom Properties (works on any theme)<\/strong>\nInjects <code>--wps-*<\/code> CSS custom properties and ready-to-use utility classes (for headings, body text and buttons) into your site. Use them anywhere in your own CSS or templates. Perfect when you are not on Elementor or a block theme.<\/p>\n\n<p><strong>2. Elementor<\/strong>\nApplies your tokens to Elementor's global Kit (Site Settings): colors, typography and button styles, including button box-shadow. Using Elementor's newer Atomic design (v4+)? One extra click injects matching variables and utility CSS classes, without overwriting your existing global variables.<\/p>\n\n<p><strong>3. Full Site Editing (theme.json)<\/strong>\nApplies your tokens to a block theme's <code>theme.json<\/code>, with two modes:<\/p>\n\n<ul>\n<li><strong>Write<\/strong> (non-destructive): merges your palette and fonts alongside the theme's existing ones.<\/li>\n<li><strong>Overwrite<\/strong>: replaces the palette, font families and font sizes with yours only, for a clean slate (other theme.json settings such as spacing and layout are left untouched).<\/li>\n<\/ul>\n\n<p>Either way, a backup is created first and can be restored in one click. On block themes you also get five ready-made button block styles (<strong>Stylo Primary, Secondary, Outline, Ghost, Link<\/strong>) selectable directly from the editor.<\/p>\n\n<h4>Scroll appearance effects<\/h4>\n\n<p>Give your pages a polished feel with built-in scroll animations (<strong>Fade Up, Fade In, Slide Left, Slide Right, Zoom In<\/strong>) that reveal sections as visitors scroll. They run on the Elementor and FSE targets, respect the \"reduced motion\" accessibility preference, and never hide your content when scripting is off. Enable or disable them any time, no re-import needed.<\/p>\n\n<h4>What gets imported<\/h4>\n\n<p>Colors (semantic roles), fluid typography (responsive <code>clamp()<\/code> sizing), button variants with hover and focus states, button box-shadow, border radius, transitions, and scroll appearance effects.<\/p>\n\n<h4>Built for real workflows<\/h4>\n\n<ul>\n<li>Re-import an updated design system any time; applying again keeps your custom content intact.<\/li>\n<li>Export the currently imported configuration as a JSON backup you can re-import later.<\/li>\n<li>Clear, tabbed admin: Import &amp; Apply, Reference (copy-ready classes), Summary, Tools, and an in-plugin Guide.<\/li>\n<\/ul>\n\n<p>Design your system at <a href=\"https:\/\/app.wpstylo.dev\">app.wpstylo.dev<\/a>. Full documentation and tutorials at <a href=\"https:\/\/wpstylo.dev\">wpstylo.dev<\/a>.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Install the plugin from your WordPress dashboard (Plugins &gt; Add New &gt; search for \"YAOTW Stylo\"), or upload the plugin zip via Plugins &gt; Add New &gt; Upload Plugin.<\/li>\n<li>Activate the plugin through the Plugins menu.<\/li>\n<li>Open <strong>YAOTW Stylo<\/strong> in your admin menu.<\/li>\n<li>Design your system at <a href=\"https:\/\/app.wpstylo.dev\">app.wpstylo.dev<\/a> and export a JSON configuration (or paste one you already have).<\/li>\n<li>On the <strong>Import &amp; Apply<\/strong> tab, upload or paste your JSON, click <strong>Import configuration<\/strong>, then apply it to the target you use (CSS Custom Properties, Elementor, or Full Site Editing).<\/li>\n<\/ol>\n\n<p>Tip: always try the plugin on a staging or development site first, and back up your files and database before applying on production.<\/p>\n\n<!--section=faq-->\n<dl>\n<dt id=\"do%20i%20need%20the%20wpstylo%20app%3F\"><h3>Do I need the WPStylo app?<\/h3><\/dt>\n<dd><p>Yes. You design your system visually in the free WPStylo app at <a href=\"https:\/\/app.wpstylo.dev\">app.wpstylo.dev<\/a> and export a JSON file. This plugin imports that file and applies it to your WordPress site.<\/p><\/dd>\n<dt id=\"is%20it%20free%3F\"><h3>Is it free?<\/h3><\/dt>\n<dd><p>Yes, both the plugin and the WPStylo app are free to use.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20elementor%3F\"><h3>Does it work with Elementor?<\/h3><\/dt>\n<dd><p>Yes. It applies your colors, typography and button styles to Elementor's global Kit. If you use Elementor's Atomic design (v4+), you can additionally inject matching CSS variables and utility classes.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20block%20themes%20and%20full%20site%20editing%3F\"><h3>Does it work with block themes and Full Site Editing?<\/h3><\/dt>\n<dd><p>Yes. On a block theme it writes your tokens to <code>theme.json<\/code> (with a non-destructive \"Write\" mode and a clean-slate \"Overwrite\" mode) and adds five button block styles you can pick in the editor.<\/p><\/dd>\n<dt id=\"i%20don%27t%20use%20elementor%20or%20a%20block%20theme.%20can%20i%20still%20use%20it%3F\"><h3>I don't use Elementor or a block theme. Can I still use it?<\/h3><\/dt>\n<dd><p>Yes. The CSS Custom Properties target works on any theme: it injects <code>--wps-*<\/code> variables and utility classes you can use in your own CSS or templates.<\/p><\/dd>\n<dt id=\"will%20it%20overwrite%20my%20existing%20settings%3F\"><h3>Will it overwrite my existing settings?<\/h3><\/dt>\n<dd><p>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 FSE, \"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.<\/p><\/dd>\n<dt id=\"can%20i%20undo%20the%20changes%3F\"><h3>Can I undo the changes?<\/h3><\/dt>\n<dd><p>Yes. You can restore your <code>theme.json<\/code> from the automatic backup, deactivate the injected CSS, or delete the imported configuration entirely from the Tools tab. 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 and scroll effects are removed when you deactivate the plugin.<\/p><\/dd>\n<dt id=\"will%20it%20slow%20down%20my%20website%3F\"><h3>Will it slow down my website?<\/h3><\/dt>\n<dd><p>No. Styles are delivered efficiently (inline where appropriate, cached where possible), and front-end scripts are only loaded when a feature such as scroll effects actually needs them. The admin interface is lightweight and scoped so it does not affect the rest of wp-admin.<\/p><\/dd>\n<dt id=\"what%20are%20the%20scroll%20appearance%20effects%3F\"><h3>What are the scroll appearance effects?<\/h3><\/dt>\n<dd><p>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 FSE targets, honor the reduced-motion accessibility setting, and never hide content when JavaScript is unavailable.<\/p><\/dd>\n<dt id=\"where%20can%20i%20get%20help%3F\"><h3>Where can I get help?<\/h3><\/dt>\n<dd><p>Documentation, tutorials and updates are available at <a href=\"https:\/\/wpstylo.dev\">wpstylo.dev<\/a>. You can also use the support forum on WordPress.org.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>2.0.0<\/h4>\n\n<ul>\n<li>New: Scroll appearance effects (Fade Up, Fade In, Slide Left, Slide Right, Zoom In) for the Elementor and FSE targets, with a runtime on\/off switch and reduced-motion support.<\/li>\n<li>New: Full Site Editing \"Overwrite theme.json\" mode, which replaces the palette, font families and font sizes with yours only (alongside the existing non-destructive \"Write\" mode). A backup is always created first.<\/li>\n<li>New: Redesigned plugin admin (brand header, clearer target cards with guidance, restyled Guide and Tools).<\/li>\n<li>Improved: Full Site Editing now maps the Text and Background colors automatically to your design system roles.<\/li>\n<li>Improved: Summary now shows transitions and scroll appearance effect tokens, with an accurate element-tokens count.<\/li>\n<li>Improved: clearer descriptions and warnings across the Import &amp; Apply, Reference and Guide tabs.<\/li>\n<\/ul>\n\n<h4>1.9.0<\/h4>\n\n<ul>\n<li>New: Full Site Editing button block styles (Stylo Primary, Secondary, Outline, Ghost, Link) selectable from the editor.<\/li>\n<\/ul>\n\n<p>For the complete version history, see changelog.txt in the plugin files.<\/p>","raw_excerpt":"Import a full design system (colors, typography, buttons, effects) into Elementor, Full Site Editing, or CSS variables. No code needed.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/os.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/326239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/os.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/os.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/os.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=326239"}],"author":[{"embeddable":true,"href":"https:\/\/os.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/yaotw"}],"wp:attachment":[{"href":"https:\/\/os.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=326239"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/os.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=326239"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/os.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=326239"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/os.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=326239"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/os.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=326239"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/os.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=326239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}