{"id":126516,"date":"2023-11-04T08:00:00","date_gmt":"2023-11-04T08:00:00","guid":{"rendered":"https:\/\/www.weixiaoduo.com\/plugins\/2024\/02\/22\/pattern-css\/"},"modified":"2025-09-27T21:09:00","modified_gmt":"2025-09-27T21:09:00","slug":"pattern-css","status":"publish","type":"post","link":"https:\/\/www.weixiaoduo.com\/plugins\/pattern-css\/","title":{"rendered":"Pattern CSS \u2013 The CSS Editor For Blocks"},"content":{"rendered":"<p>The missing inline block CSS editor for the Gutenberg editor. Very powerful with synced patterns as well. And it pairs well with global styles.<\/p>\n<p>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\u2019t leak outside of the block, and only valid block CSS is persisted.<\/p>\n<p>Star it on <a href=\"https:\/\/github.com\/KevinBatdorf\/pattern-css\" rel=\"nofollow ugc\">GitHub<\/a><br \/>\nFollow me on Twitter <a href=\"https:\/\/twitter.com\/kevinbatdorf\" rel=\"nofollow ugc\">@kevinbatdorf<\/a><\/p>\n<h4>How to<\/h4>\n<ul>\n<li>Every block will have a new \u201cPattern CSS\u201d settings panel<\/li>\n<li>Open it and add any CSS. It will be scoped to the block<\/li>\n<li>To target the block directly, you must use the <code>[block]<\/code> selector<\/li>\n<li>To target any element <em>inside<\/em> the block, use the normal CSS selector<\/li>\n<li>Use <code>!important<\/code> to override your theme styles (use sparingly)<\/li>\n<\/ul>\n<h4>Global Editor<\/h4>\n<ul>\n<li>Access global styles under the options menu (three dots) in the top right corner of the editor<\/li>\n<li>Additionaly, you can open from the Pattern CSS block editor controls<\/li>\n<\/ul>\n<h4>Features<\/h4>\n<ul>\n<li>Powered by WebAssembly for fast and secure CSS parsing<\/li>\n<li>Smart loading. Only loads the CSS when the block is present<\/li>\n<li>Styles persist when changing themes<\/li>\n<li>Scopes styles to the block so that parent\/sibling blocks are not affected<\/li>\n<li>It\u2019s fast<\/li>\n<li>CSS is minified and optimized<\/li>\n<li>It\u2019s safe. Invalid, non-spec CSS is never persisted<\/li>\n<li>Supports reusable (synced or not-synced) patterns<\/li>\n<li>See changes on the page as you make them<\/li>\n<li>Combines adjacent rules (to decrease size)<\/li>\n<li>Minifies colors and math functions to simplify according to spec<\/li>\n<li>Supports CSS nesting<\/li>\n<\/ul>\n<h4>Basic Example<\/h4>\n<pre><code>\/* Target the block directly *\/\n[block] {\n  background: antiquewhite;\n  padding: 2rem;\n}\n\/* Target any inner elements *\/\na {\n  text-decoration-color: burlywood;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid !important;\n}\na:hover {\n  text-decoration-color: darkgoldenrod;\n}\n\n\/* Output: *\/\n.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}\n<\/code><\/pre>\n<h4>Supports Media Queries<\/h4>\n<pre><code>@media (prefers-color-scheme: dark) {\n  [block] {\n    border-color: blue;\n  }\n}\n\n\/* Output: *\/\n@media (prefers-color-scheme:dark){.pcss-cddaa023{border-color:#00f}}\n<\/code><\/pre>\n<h4>Combines Rules<\/h4>\n<pre><code>[block] {\n  color: red;\n}\n.bar {\n  color: red;\n}\n\n\/* Output: *\/\n.pcss-3aa0f0fc,.pcss-3aa0f0fc .bar{color:red}\n<\/code><\/pre>\n<h4>Fixes redundant properties<\/h4>\n<pre><code>[block] {\n  padding-top: 5px;\n  padding-left: 50px;\n  padding-bottom: 15px;\n  padding-right: 5px;\n}\n\n\/* Output: *\/\n.pcss-3aa0f0fc{padding:5px 5px 15px 50px}\n<\/code><\/pre>\n<h4>Supports CSS nesting<\/h4>\n<pre><code>[block] {\n  padding: 1rem;\n  a {\n    color: red;\n  }\n  background: white;\n  \/* Including media queries *\/\n  @media (prefers-color-scheme: dark) {\n    background: black;\n    color:white;\n  }\n}\n\n\/* Output: *\/\n.pcss-f526bb2d{background:#fff;padding:1rem;& a{color:red}@media (prefers-color-scheme:dark){&{color:#fff;background:#000}}}\n<\/code><\/pre>\n<p>Check browser support for <a href=\"https:\/\/caniuse.com\/css-nesting\" rel=\"nofollow ugc\">CSS nesting<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Add a CSS editor to your blocks and patterns! Loads only where necessary. Supports adding global CSS too.<\/p>\n","protected":false},"author":65,"featured_media":320224,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"Pattern CSS \u2013 The CSS Editor For Blocks - \u8587\u6653\u6735\u63d2\u4ef6\u76ee\u5f55","description":"Add a CSS editor to your blocks and patterns! Loads only where necessary. Supports adding global CSS too."},"footnotes":""},"categories":[1],"tags":[288,93,574,9566,1487],"class_list":["post-126516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-block","tag-css","tag-editor","tag-inline","tag-styles"],"_links":{"self":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/126516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/comments?post=126516"}],"version-history":[{"count":0,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/126516\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media\/320224"}],"wp:attachment":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media?parent=126516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/categories?post=126516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/tags?post=126516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}