{"id":239124,"date":"2025-07-18T22:25:06","date_gmt":"2025-07-18T22:25:06","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/studio-immens-css-classes\/"},"modified":"2026-07-27T22:25:51","modified_gmt":"2026-07-27T22:25:51","slug":"studio-immens-css-classes","status":"publish","type":"plugin","link":"https:\/\/pirate.wordpress.org\/plugins\/studio-immens-css-classes\/","author":21166743,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.3.5","stable_tag":"2.3.5","tested":"7.0.2","requires":"5.8","requires_php":"7.4","requires_plugins":null,"header_name":"ClassyBlocks \u2014 Custom CSS Classes, Design System & Live Preview for Gutenberg","header_author":"Studio Immens","header_description":"Add custom CSS classes to Gutenberg blocks with live preview.","assets_banners_color":"f3f1f0","last_updated":"2026-07-27 22:25:51","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/studioimmens.com\/classyblocks-pro\/","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":0,"downloads":740,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"innovazioneweb","date":"2025-08-07 17:38:57"},"1.1.0":{"tag":"1.1.0","author":"innovazioneweb","date":"2025-08-08 20:40:36"},"1.1.1":{"tag":"1.1.1","author":"innovazioneweb","date":"2025-08-12 16:20:33"},"1.2.1":{"tag":"1.2.1","author":"innovazioneweb","date":"2025-08-14 10:14:40"},"2.0.0":{"tag":"2.0.0","author":"innovazioneweb","date":"2026-04-02 09:13:42"},"2.2.1":{"tag":"2.2.1","author":"innovazioneweb","date":"2026-05-28 20:09:45"},"2.2.4":{"tag":"2.2.4","author":"innovazioneweb","date":"2026-05-28 22:39:26"},"2.2.5":{"tag":"2.2.5","author":"innovazioneweb","date":"2026-06-05 09:56:35"},"2.3.0":{"tag":"2.3.0","author":"innovazioneweb","date":"2026-06-05 13:11:01"},"2.3.5":{"tag":"2.3.5","author":"innovazioneweb","date":"2026-07-27 22:25:51"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3552715,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":3552833,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3552833,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3552833,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":{"studioimmens\/css-editor":{"name":"studioimmens\/css-editor","title":"Studioimmens Css Editor"}},"tagged_versions":["1.0.0","1.1.0","1.1.1","1.2.1","2.0.0","2.2.1","2.2.4","2.2.5","2.3.0","2.3.5"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3562188,"resolution":"1","location":"assets","locale":"","width":1440,"height":900},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3562188,"resolution":"2","location":"assets","locale":"","width":1440,"height":900},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3562188,"resolution":"3","location":"assets","locale":"","width":1425,"height":1871},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3562188,"resolution":"4","location":"assets","locale":"","width":1440,"height":900},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3562188,"resolution":"5","location":"assets","locale":"","width":1440,"height":900},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3552833,"resolution":"6","location":"assets","locale":"","width":268,"height":594}},"screenshots":{"1":"Custom CSS class creation and management dashboard.","2":"New CSS Class creation modal with interactive preview.","3":"Settings page with CSS framework toggles and Tailwind configuration.","4":"Pack Manager for importing, exporting, and organizing CSS class packs.","5":"Resources page showcasing other Studio Immens plugins.","6":"CSS classes grid with live preview and search functionality."}},"plugin_section":[],"plugin_tags":[356,245102,4072,2250,202682],"plugin_category":[59],"plugin_contributors":[245112],"plugin_business_model":[],"class_list":["post-239124","plugin","type-plugin","status-publish","hentry","plugin_tags-css","plugin_tags-custom-classes","plugin_tags-design","plugin_tags-frontend","plugin_tags-utility-classes","plugin_category-utilities-and-tools","plugin_contributors-innovazioneweb","plugin_committers-innovazioneweb"],"banners":{"banner":"https:\/\/ps.w.org\/studio-immens-css-classes\/assets\/banner-772x250.png?rev=3552833","banner_2x":"https:\/\/ps.w.org\/studio-immens-css-classes\/assets\/banner-1544x500.png?rev=3552833","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/studio-immens-css-classes\/assets\/icon-128x128.png?rev=3552715","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/studio-immens-css-classes\/assets\/screenshot-1.png?rev=3562188","caption":"Custom CSS class creation and management dashboard."},{"src":"https:\/\/ps.w.org\/studio-immens-css-classes\/assets\/screenshot-2.png?rev=3562188","caption":"New CSS Class creation modal with interactive preview."},{"src":"https:\/\/ps.w.org\/studio-immens-css-classes\/assets\/screenshot-3.png?rev=3562188","caption":"Settings page with CSS framework toggles and Tailwind configuration."},{"src":"https:\/\/ps.w.org\/studio-immens-css-classes\/assets\/screenshot-4.png?rev=3562188","caption":"Pack Manager for importing, exporting, and organizing CSS class packs."},{"src":"https:\/\/ps.w.org\/studio-immens-css-classes\/assets\/screenshot-5.png?rev=3562188","caption":"Resources page showcasing other Studio Immens plugins."},{"src":"https:\/\/ps.w.org\/studio-immens-css-classes\/assets\/screenshot-6.png?rev=3552833","caption":"CSS classes grid with live preview and search functionality."}],"raw_content":"<!--section=description-->\n<p><strong>Every Gutenberg block needs custom styling. And that's where your time disappears.<\/strong><\/p>\n\n<p>You write the same CSS across 30 blocks. You switch between editor and customizer. One typo in a class name and the layout breaks. Your client calls because they can't change a button color.<\/p>\n\n<p>There's a faster way.<\/p>\n\n<p><strong>ClassyBlocks gives you a design system command center right inside the WordPress block editor.<\/strong><\/p>\n\n<p>Create your classes once \u2014 name them, write the rules, preview them live \u2014 and apply them anywhere with one click.<\/p>\n\n<h3>What you get<\/h3>\n\n<ul>\n<li><strong>Your own class library<\/strong> \u2014 Create and organize CSS classes with full support for <code>:hover<\/code>, <code>:focus<\/code>, <code>:active<\/code>, and <code>:visited<\/code>. Each class documented and ready to use across your entire site.<\/li>\n<li><strong>9 built-in CSS frameworks<\/strong> \u2014 Bootstrap 5.3, Tailwind CSS 3.4, Foundation, Bulma, UIkit, Materialize, Pure CSS, Spectre, and Semantic UI. Toggle each on\/off for editor and frontend independently.<\/li>\n<li><strong>Live preview<\/strong> \u2014 See how every class looks in real time inside the block editor. No reloads, no switching tabs.<\/li>\n<li><strong>One-click apply<\/strong> \u2014 Apply any class to any block with a single click. No typing class names manually.<\/li>\n<li><strong>Pack Manager<\/strong> \u2014 Export and import complete class sets as packs. Share your design system across client sites in seconds.<\/li>\n<\/ul>\n\n<h3>Benefits that move the needle<\/h3>\n\n<ul>\n<li><strong>Ship sites 3x faster<\/strong> \u2014 Build your class library once. Apply across pages and posts in minutes, not hours.<\/li>\n<li><strong>Kill support tickets<\/strong> \u2014 Clients style their own content using your pre-built classes. They stop calling you for every color change.<\/li>\n<li><strong>Zero performance impact<\/strong> \u2014 Minimal stylesheet, zero JavaScript on the frontend. No bloat. No harm to Core Web Vitals.<\/li>\n<li><strong>Works with every theme<\/strong> \u2014 Blocksy, GeneratePress, Astra, Twenty Twenty-Four. If it runs Gutenberg, ClassyBlocks works.<\/li>\n<\/ul>\n\n<h3>Trusted by agencies and freelancers<\/h3>\n\n<p>Used by digital agencies managing 50+ client sites and solo freelancers who want a professional design workflow without the overhead.<\/p>\n\n\n\n<p><strong>Need scroll-driven animations, priority support, and advanced features?<\/strong> <a href=\"https:\/\/studioimmens.com\/classyblocks-pro\/\">Get ClassyBlocks Pro \u2192<\/a><\/p>\n\n<h3>How it works<\/h3>\n\n<ol>\n<li>Install and activate the plugin.<\/li>\n<li>Go to the CSS Classes section and create your own classes with the properties you want.<\/li>\n<li>Go to the page editor (Gutenberg).<\/li>\n<li>In the \"CSS Classes\" section of each block, you can select the plugin's custom classes.<\/li>\n<\/ol>\n\n<p>You can easily combine classes to achieve complex results.<\/p>\n\n<h3>Credits<\/h3>\n\n<p>Developed by <a href=\"https:\/\/www.studioimmens.com\">Studio Immens<\/a> \u2013 Modular digital solutions for professionals and businesses.<\/p>\n\n<h3>License<\/h3>\n\n<p>This plugin is licensed under the GPL v2 or later.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Download the plugin from GitHub or the repository.<\/li>\n<li>Upload the <code>studioimmens-css-classes<\/code> folder to the <code>\/wp-content\/plugins\/<\/code> directory.<\/li>\n<li>Activate the plugin from the WordPress \"Plugins\" section.<\/li>\n<li>Go to the CSS Classes section and create your own classes with the properties you want.<\/li>\n<li>Start using advanced CSS classes in your Gutenberg blocks.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"is%20it%20compatible%20with%20all%20themes%3F\"><h3>Is it compatible with all themes?<\/h3><\/dt>\n<dd><p>Yes, but it's designed to integrate seamlessly with Blocksy, GeneratePress, Astra, and other themes with a modern structure and clean semantics.<\/p><\/dd>\n<dt id=\"can%20i%20add%20my%20own%20custom%20classes%3F\"><h3>Can I add my own custom classes?<\/h3><\/dt>\n<dd><p>Of course. Go to the CSS Class section and create as many classes with the properties you want.<\/p><\/dd>\n<dt id=\"will%20the%20plugin%20slow%20down%20my%20site%3F\"><h3>Will the plugin slow down my site?<\/h3><\/dt>\n<dd><p>No. The CSS file is minimal, loads optimally, and doesn't include JavaScript.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>2.3.0<\/h4>\n\n<ul>\n<li>Added WordPress.org SVN deploy automation via GitHub Actions.<\/li>\n<li>Updated screenshots and WordPress.org assets.<\/li>\n<li>Improved readme.txt description and formatting.<\/li>\n<li>Fixed Tested up to version consistency.<\/li>\n<\/ul>\n\n<h4>2.2.0<\/h4>\n\n<ul>\n<li>Tailwind CSS now bundled locally (no external CDN dependency)<\/li>\n<li>Enhanced security: CSS sanitization, file upload validation, XSS fixes<\/li>\n<li>Improved localization: all JavaScript strings are translatable<\/li>\n<li>Replaced uniqid() with wp_generate_uuid4() for stronger IDs<\/li>\n<li>Added HTTP method checks to all AJAX handlers<\/li>\n<li>Various performance and security improvements<\/li>\n<\/ul>\n\n<h4>2.1.0<\/h4>\n\n<ul>\n<li>Rebrand: Studio Immens CSS Classes \u2192 ClassyBlocks<\/li>\n<li>Introdotto ClassyBlocks Pro: animazioni scroll-driven, Pack Manager e funzionalit\u00e0 premium<\/li>\n<\/ul>\n\n<h4>1.2.1<\/h4>\n\n<ul>\n<li>bug fix<\/li>\n<li>Added setting page options<\/li>\n<\/ul>\n\n<h4>1.1.1<\/h4>\n\n<ul>\n<li>bug fix<\/li>\n<\/ul>\n\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>Added multiple set of framework CSS easly selectable from editor ( bootstrap, materialize, purecss, uikit, spectre, bulma, semantic )<\/li>\n<li>Added setting page<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial stable release<\/li>\n<li>Added core set of CSS utility classes<\/li>\n<li>Compatibility with Gutenberg and Blocksy, GeneratePress, and Astra themes<\/li>\n<\/ul>","raw_excerpt":"Stop fighting with CSS. Create reusable classes with live preview, apply in one click, and ship sites faster with 9 built-in frameworks (Bootstrap, Ta &hellip;","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pirate.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/239124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pirate.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pirate.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pirate.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=239124"}],"author":[{"embeddable":true,"href":"https:\/\/pirate.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/innovazioneweb"}],"wp:attachment":[{"href":"https:\/\/pirate.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=239124"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pirate.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=239124"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pirate.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=239124"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pirate.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=239124"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pirate.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=239124"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pirate.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=239124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}