You can add a custom selector via a PHP constant. It requires setting a type (type, attribute, etc) and the name.<\/p>\n\n
Here's an example for \"foo { color: red }\", where foo will be replaced with .pcss-h3Hso39bsK (or something similar):<\/p>\n\n
Add this to functions.php:<\/p>\n\n
define('PATTERN_CSS_SELECTOR_OVERRIDE', ['name' => 'foo', 'type' => 'type']);\n<\/code><\/pre><\/dd>\nCan I manually set the class ID?<\/h3><\/dt>\nBy default, class IDs are auto-generated. If you need to manually set or change a block's class ID (e.g. to match an existing class), you can enable this by adding the following constant to wp-config.php or functions.php:<\/p>\n\n
define('PATTERN_CSS_ALLOW_MANUAL_OVERRIDE', true);\n<\/code><\/pre>\n\nOnce enabled, the ID field in the Advanced panel becomes editable. Type your desired class name and press \"Apply\" to save it. The value will be slugified automatically.<\/p><\/dd>\n\n<\/dl>\n\n\n
1.5.5 - 2026-03-24<\/h4>\n\n\n- Added manual class ID override (opt-in via constant)<\/li>\n
- Warns when duplicate class IDs are detected in the editor<\/li>\n
- Prevents duplicate inline styles on the frontend<\/li>\n
- Switched to Biome for linting and formatting<\/li>\n
- Switched to Playwright and WP Playground for testing<\/li>\n<\/ul>\n\n
1.5.4 - 2026-03-23<\/h4>\n\n\n- Fixed dynamic blocks with POST<\/li>\n<\/ul>\n\n
1.5.3 - 2025-09-27<\/h4>\n\n\n- Fixes an issue where filtered attributes sent wp\/v2\/block-renderer causes a block validation error<\/li>\n<\/ul>\n\n
1.5.2 - 2025-05-21<\/h4>\n\n\n- Fixes an overflow bug in the editor<\/li>\n<\/ul>\n\n
1.5.1 - 2025-05-18<\/h4>\n\n\n- Retagging for release<\/li>\n<\/ul>\n\n
1.5.0 - 2025-05-18<\/h4>\n\n\n- Adds support for global styles via a new editor<\/li>\n<\/ul>\n\n
1.4.0 - 2025-05-12<\/h4>\n\n\n- Adds a draggable, resizable popout mode<\/li>\n
- Updates CSS engine to include recent CSS features<\/li>\n
- Allows \"supports\" support scoped to the block<\/li>\n<\/ul>\n\n
1.3.0 - 2025-01-27<\/h4>\n\n\n- Switches to useStyleOverride for injecting styles<\/li>\n<\/ul>\n\n
1.2.6 - 2024-09-20<\/h4>\n\n\n- Removes an unecessary html escape that mangled some css.<\/li>\n<\/ul>\n\n
1.2.5 - 2024-07-28<\/h4>\n\n\n- Fixed a small bug where a block may not have attributes when we access them.<\/li>\n<\/ul>\n\n
1.2.4 - 2024-07-21<\/h4>\n\n\n- Renamed the panel to Pattern CSS to differenciate it from the core panel on FSE<\/li>\n<\/ul>\n\n
1.2.3 - 2024-05-09<\/h4>\n\n\n- Removed globals like @import, @font-face, and @keyframes (and others)<\/li>\n<\/ul>\n\n
1.2.2 - 2024-04-19<\/h4>\n\n\n- Fixed an issue where CSS media queries using <= were stripped out<\/li>\n
- Removed loading the viewer for users without the edit_css cap<\/li>\n
- Removed the tag stripping output - now only privlidged users can use<\/li>\n
- Updated tests to run on modern WP (by disabling the iframe)<\/li>\n<\/ul>\n\n
1.2.1 - 2024-02-22<\/h4>\n\n\n- Removed the example code and added a useful default<\/li>\n
- Render blocks now work - now adds the id to the main class list<\/li>\n<\/ul>\n\n
1.2.0 - 2024-02-20<\/h4>\n\n\n- Feature: Adds support for CSS nesting<\/li>\n
- Removes the code example on focus and adds it back on blur (if empty)<\/li>\n
- Lets users define an additional block selector<\/li>\n
- Adds a notice that the site logo isn't currently supported<\/li>\n<\/ul>\n\n
1.1.0 - 2024-02-18<\/h4>\n\n\n- Prevent adding classes to blocks unless CSS is added<\/li>\n
- Force the settings area to the bottom (mainly for custom blocks)<\/li>\n<\/ul>\n\n
1.0.1 - 2023-11-04<\/h4>\n\n\n- Fixed a bug where the it would crash on the pattern manager page<\/li>\n<\/ul>\n\n
1.0.0 - 2023-07-15<\/h4>\n\n\n- Feature: Now supports reusable blocks\/patterns<\/li>\n
- Update: Removed the \"per page\" functionality to limit the scope of this plugin to blocks and reusable patterns only<\/li>\n
- Performance: Added global loading strategy to prevent per block n+1 loading issues<\/li>\n
- Improvement: Added the option to update the CSS selector used for scoping (useful for duplicating blocks)<\/li>\n
- Improvement: Added some examples when no CSS is present<\/li>\n
- Improvement: Removed the public className attribute requirement from the Additional Settings area<\/li>\n
- Improvement: Instead of saving as meta on a post, it now pulls from the attribute directly during page load (via the pre_render_block filter).<\/li>\n
- Fix: Now it will only show on post types with the public setting set to true<\/li>\n<\/ul>","raw_excerpt":"Add a CSS editor to your blocks and patterns! Loads only where necessary. Supports adding global CSS too.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/183876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=183876"}],"author":[{"embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/kbat82"}],"wp:attachment":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=183876"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=183876"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=183876"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=183876"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=183876"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=183876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}