Pattern CSS – The CSS Editor For Blocks vs Purify Menus

The missing inline block CSS editor for the Gutenberg editor. Very powerful with synced patterns as well. And it pairs well with global styles. This plugin is perfect for users looking to add CSS for blocks without needing to create a child theme, or use a bloated plugin. Client safe too. CSS won’t leak outside of the block, and only valid block CSS is persisted. Star it on GitHub Follow me on Twitter @kevinbatdorf How to Every block will have a new “Pattern CSS” settings panel Open it and add any CSS. It will be scoped to the block To target the block directly, you must use the [block] selector To target any element inside the block, use the normal CSS selector Use !important to override your theme styles (use sparingly) Global Editor Access global styles under the options menu (three dots) in the top right corner of the editor Additionaly, you can open from the Pattern CSS block editor controls Features Powered by WebAssembly for fast and secure CSS parsing Smart loading. Only loads the CSS when the block is present Styles persist when changing themes Scopes styles to the block so that parent/sibling blocks are not affected It’s fast CSS is minified and optimized It’s safe. Invalid, non-spec CSS is never persisted Supports reusable (synced or not-synced) patterns See changes on the page as you make them Combines adjacent rules (to decrease size) Minifies colors and math functions to simplify according to spec Supports CSS nesting Basic Example /* Target the block directly */ [block] { background: antiquewhite; padding: 2rem; } /* Target any inner elements */ a { text-decoration-color: burlywood; text-decoration-thickness: 2px; text-decoration-style: solid !important; } a:hover { text-decoration-color: darkgoldenrod; } /* Output: */ .pcss-a1b7b016{background:#faebd7;padding:2rem}.pcss-a1b7b016 a{text-decoration-color:#deb887;text-decoration-thickness:2px;text-decoration-style:solid!important}.pcss-a1b7b016 a:hover{text-decoration-color:#b8860b} Supports Media Queries @media (prefers-color-scheme: dark) { [block] { border-color: blue; } } /* Output: */ @media (prefers-color-scheme:dark){.pcss-cddaa023{border-color:#00f}} Combines Rules [block] { color: red; } .bar { color: red; } /* Output: */ .pcss-3aa0f0fc,.pcss-3aa0f0fc .bar{color:red} Fixes redundant properties [block] { padding-top: 5px; padding-left: 50px; padding-bottom: 15px; padding-right: 5px; } /* Output: */ .pcss-3aa0f0fc{padding:5px 5px 15px 50px} Supports CSS nesting [block] { padding: 1rem; a { color: red; } background: white; /* Including media queries */ @media (prefers-color-scheme: dark) { background: black; color:white; } } /* Output: */ .pcss-f526bb2d{background:#fff;padding:1rem;& a{color:red}@media (prefers-color-scheme:dark){&{color:#fff;background:#000}}} Check browser support for CSS nesting

Improve page speed by letting slim down the HTML code of menus and category lists to the only CSS classes and attributes your theme needs. The plugin is available in English, Spanish (Español) and German (Deutsch). Less code, higher page speed This plugin deletes the CSS classes you do not need in a navigation menu, page menu and category list. It slims down the HTML code of WordPress menus and category lists to the only neccessary CSS classes you want for your theme. This results in less HTML code and thus in higher page speed. If you are very concerned about the loading time of your website and you do not manage to gain seconds or tenths in the loading of the site with 3rd party caching plugins, you may find it interesting to experiment with the plugin Purify WordPress Menus and evaluate its possibilities. What users said …interesante experimentar… in Reduce CSS en WordPress y mejora la carga by Luis Méndez Alejo on August 20, 2015 Number 1 in Cool List of Free Navigation Menu WordPress Plugins by Inspiration on January 8, 2015 Number 7 in 13 Excellent Free WordPress Widgets for Menus by mike on November 24, 2014 Number 6 in 13 Great Free HTML Widgets for WordPress by sam on August 27, 2014 Number 8 in 10 Magnificent Free Menus Widgets for WordPress by jatin on July 26, 2014 No undesirable visual effects The visual appearance of menus and category lists in the frontend remains unchanged in most cases. If you should see an undesirable visual effect to the menus and category lists in your theme, then you can activate the needed CSS classes on the plugin’s options page. Deactivate it and keep your settings If you deactivate the plugin, your settings remains. If you activate the plugin again, your last settings will be used. You do not need to go over all settings again. Residue-free deletion If you delete the plugin via the WordPress ‘Plugin’ menu, your settings will be deleted, too. No useless option remains in the WordPress database. Default setting: Marks the current menu item only The default setting is to output only the CSS classes for the navigation menu items of the current post and the current category. Stops displaying CSS classes of parents and ancestors of menu items and category list items If activated by yourself, then items which are parents of the current item will not be classified as ancestors additionally. You can set that separately for both menus and category lists. Stops displaying CSS classes of outdated page menus This plugin filters out the old CSS classes of page menus in navigation menus. Using the WordPress menu configurator the page menu classes are not necessary anymore. Stops displaying #menu-{id} This plugin deletes the ID attribute of each menu item. In most cases the ID of every menu item is not needed. Stops displaying CSS classes of category lists This plugin filters out the CSS classes of each item in category lists. Uses WordPress standard functions This plugin hooks into the WordPress core functions wp_nav_menu(), wp_page_menu() and wp_list_categories(). It changes the results of those functions to the settings you have done. Switch on and off every CSS menu item class You can: select and deselect in detail every CSS menu item class the WordPress core functions wp_nav_menu(), wp_page_menu() and wp_list_categories() generate control whether the id attribute of each navigation menu item is printed out or not control whether parent items will be additionally classified as ancestors item or not. You can activate to print out both classes on parent items or just parents classes control whether navigation menus will be additionally classified with the older page menu classes for compatibility or not. Languages Purify WordPress Menus is available in multiple languages maintained by the amazing WordPress community. Your language is missing? Please be part of the community and help to translate Purify WordPress Menus on GlotPress. Thank you!