=== WorkMore StyleScript ===
Contributors: connextsystem
Tags: custom css, custom js, header footer, css, javascript
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Stable tag: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Custom CSS, JavaScript and header/footer code for your whole site: light, theme-independent, with a real code editor and revisions.

== Description ==

WorkMore StyleScript is one place for the code you add to your site yourself: your own CSS, your own JavaScript, and the snippets that belong in the page's `<head>`, right after `<body>` or before `</body>` — site verification tags, analytics and tag manager snippets, pixels, chat widgets, structured data.

**Five boxes, each in the right place**

* **CSS** — printed last in `<head>`, after your theme's stylesheets and after the Customizer's Additional CSS, so a rule with the same selector as the theme's wins.
* **JavaScript** — loaded in the footer or the `<head>`, optionally once the page is ready, optionally with jQuery loaded first (the plugin notices when your code uses `$(` and offers it).
* **In `<head>`**, **After `<body>`** and **Before `</body>`** — markup exactly where those snippets ask to go, early, normal or late among other code there.

Every box can be switched off without losing its code. Pasting a whole `<script>` or `<style>` block into the wrong box is caught and fixed in one click.

**A code editor that works like one**

The editor is WordPress' own CodeMirror, set up properly: syntax highlighting, autocomplete as you type, search and replace, multiple cursors (Ctrl/Cmd+D), comment toggling, folding, full screen (F11), a dark theme and font sizes remembered for each user. Ctrl/Cmd+S saves without leaving the page.

A check flags real mistakes as you type — a missing closing bracket, an unclosed comment, a JavaScript syntax error — and never blocks saving. It knows modern CSS: nesting, `:has()`, `@layer`, `@container`, `color-mix()`.

Format tidies CSS, and Insert adds a media query for your site's breakpoints: Flatsome's, Elementor's (read from your kit) and WooCommerce's when they run, and common ones.

**See it before your visitors do**

Preview shows your real site with the code you have not saved yet — to you only. CSS changes as you type; JavaScript and markup run when you press Run preview. Switch between desktop, tablet and phone widths, and preview any page, post or product.

**Nothing gets lost**

* Every save is a version: compare any of the last 25 with the editor, line by line, and restore it.
* If someone else saved the same box while you were editing, you are asked before anything is overwritten.
* Leaving the page with unsaved changes asks first.

**Recover from a mistake in seconds**

Code that breaks a page can be switched off three ways: a safe-mode link that shows you the site without any of it, a switch that takes all of it off for everyone, and — when the dashboard itself is unreachable — the `WMSS_SAFE_MODE` constant or `wp stylescript safe-mode on` in WP-CLI.

**Bring your code with you**

* Export everything to a file and import it on another site; an import shows what will change before anything is saved.
* Move the Customizer's Additional CSS and Flatsome's custom CSS and header/footer scripts into the boxes in one click.

**Theme-independent**

Your code is stored by the plugin, not by the theme, so it stays when you switch or update themes. It works with any theme and page builder because it uses WordPress' own hooks and its own script and style loading. In page builders' editing canvases (Elementor, Flatsome's UX Builder, Divi, Bricks and others) your CSS applies while your JavaScript and markup stay out of the builder's way.

**Light**

* Visitors never load a file of the plugin itself, and pages make no extra database query for it. Boxes you leave empty add nothing to your pages at all.
* Small code is printed in the page; larger code is served as a file browsers cache, named after its content so it is never stale.
* The page caches of common caching plugins and hosts are cleared every time you save.

**Safe**

Only users WordPress trusts with unfiltered HTML — the administrators of a single site, the network administrators of a multisite — can change code; other administrators see it read-only and are told why. The plugin never runs PHP.

**For developers**

* `wp stylescript status | rebuild | safe-mode | export | import` in WP-CLI.
* The `wmss_render_items` filter adds or removes code per request — CSS only on the contact page, for example.
* A REST API under `workmore-stylescript/v1`.

**Source code**

The plugin's JavaScript ships minified for performance; the human-readable source is included in the plugin's `src/` directory together with the build configuration (`vite.config.js`).

**Pro add-on**

Everything above is free and complete. A separate plugin, WorkMore StyleScript Pro, sold on [workmore.connextsystem.com](https://workmore.connextsystem.com/stylescript), adds code per post, page and product, and a library of ready-made effects such as skeleton loading and image-sequence and video scroll animations. Inside this plugin the add-on is only mentioned on the "Upgrade to Pro" tab; nothing here is locked or limited.

== Installation ==

1. Install and activate WorkMore StyleScript from Plugins → Add New.
2. Open Appearance → StyleScript, write your code in a box and press Save (or Ctrl/Cmd+S).

== Frequently Asked Questions ==

= Who can add or change code? =

Administrators who hold WordPress' "unfiltered HTML" permission: the administrators of a single site, and the network administrators of a multisite. That is the permission WordPress itself requires before anyone may add scripts to a site, because code here runs in every visitor's browser. Other administrators — and everyone on a site that sets `DISALLOW_UNFILTERED_HTML` — see the code read-only, with a note explaining why.

= Will it slow my site down? =

No. The plugin loads no file of its own for visitors and adds no database query; it decides once per request whether there is anything to print, and does nothing at all when every box is empty. Measured on a test site, printing every box costs less than a tenth of a millisecond per page.

= What happens to my code when I change themes? =

Nothing: it is stored by the plugin, not by the theme. That is the difference from the Customizer's Additional CSS and from theme options.

= Where exactly is my CSS printed? =

As the last stylesheet in `<head>`: after your theme's stylesheets and after the Customizer's Additional CSS. A rule with the same selector as the theme's therefore wins. Under Settings you can print it with the theme's stylesheets instead.

= My site broke after I saved some code. How do I undo it? =

Open the box, press History and restore an earlier version. To look at the site without the custom code first, use the safe-mode link on the Tools tab — it affects only you. If you cannot reach the dashboard at all, add `define( 'WMSS_SAFE_MODE', true );` to `wp-config.php` or run `wp stylescript safe-mode on`; nothing is deleted either way.

= Does it work with Elementor, Flatsome, Divi and other page builders? =

Yes. Your code is printed on every page the builder produces. Inside a builder's editing canvas your CSS applies, so you see it while you design, while your JavaScript and markup are left out so they cannot get in the builder's way (Settings → "Keep JavaScript and markup out of page builder editors").

= Does it work with caching and optimization plugins? =

Yes. Saving clears the page cache of WP Rocket, LiteSpeed Cache, W3 Total Cache, WP Super Cache, WP Fastest Cache, WP-Optimize, Breeze, Cache Enabler, Autoptimize and others, and of hosts such as WP Engine and Pantheon. Files are named after their content, so a cached page never points at a stale or missing file. If your host caches pages some other way, clear that cache after saving.

= Can I move my existing Customizer CSS or Flatsome code? =

Yes. Tools → "Bring in code from elsewhere" shows what it found and moves it into the boxes, after what they already hold; every box keeps its history, so the move can be undone. By default the original is emptied so the code does not run twice.

= Can I add PHP code? =

No, by design: the plugin never runs PHP. For PHP, use a child theme or a code snippets plugin.

= Does the plugin connect to any external service or collect data? =

No. The plugin makes no network requests of its own, collects nothing and adds no credit or link to your site. On its screen, the only link to our website is on the "Upgrade to Pro" tab, and it opens only when you click it.

= What happens if I uninstall the plugin? =

Deactivating never deletes anything. Uninstalling removes the code, its history and the settings only if you opted in under Settings → Uninstall; otherwise everything stays for a later reinstall.

== Screenshots ==

1. The CSS box beside the live preview: the page changes as you type, before anything is saved.
2. The editor in full screen with the dark theme: autocomplete, a check that knows modern CSS, and your site's own breakpoints in Insert — here Elementor's and WooCommerce's.
3. JavaScript with its options: where it loads, waiting for the page, and jQuery.
4. Header & Footer: markup for the `<head>`, right after `<body>` and before `</body>`.
5. History: every save is kept; compare a version with the editor and restore it.
6. The preview at phone width: the page is laid out at the device's real width.
7. Tools: what visitors get, safe mode, export and import, and moving the Customizer's Additional CSS into the CSS box.
8. Settings: how code is delivered, and the switches that keep a site safe.

== Changelog ==

= 1.0.0 =
* Initial release: CSS, JavaScript, `<head>`, after-`<body>` and before-`</body>` code for the whole site; WordPress' code editor with a check that knows modern CSS; preview, history and restore, safe mode; export and import, and importers for the Customizer's Additional CSS and Flatsome; page caches cleared on every save; WP-CLI commands.
