Linux 软件免费装

Pattern CSS - Pattern and Block Styles

开发者 kbat82
更新时间 2024年11月21日 02:53
WordPress版本: 6.7
版权: GPL-2.0-or-later
版权网址: 版权信息

标签

css styles inline border margin

下载

1.1.0 1.2.0 1.0.0 1.2.1 1.2.3 1.2.4 1.0.1 1.2.2 1.2.5 1.2.6

详情介绍:

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. How to Features 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

安装:

  1. Activate the plugin through the 'Plugins' screen in WordPress

屏幕截图:

  • Supports reusable and synced patterns too
  • Will warn you if your CSS is invalid

常见问题:

Error about application/wasm mime type

Your server needs to be able to identify the mime type being used. See here: https://wordpress.org/support/topic/webassembly-instantiatestreaming-failed-because-your-server-does-not-serve-wasm/

Can I use something other than [block]?

You can add a custom selector via a PHP constant. It requires setting a type (type, attribute, etc) and the name. Here's an example for "foo { color: red }", where foo will be replaced with .pcss-h3Hso39bsK (or something similar): Add this to functions.php: define('PATTERN_CSS_SELECTOR_OVERRIDE', ['name' => 'foo', 'type' => 'type']);

更新日志:

1.2.6 - 2024-09-20 1.2.5 - 2024-07-28 1.2.4 - 2024-07-21 1.2.3 - 2024-05-09 1.2.2 - 2024-04-19 1.2.1 - 2024-02-22 1.2.0 - 2024-02-20 1.1.0 - 2024-02-18 1.0.1 - 2023-11-04 1.0.0 - 2023-07-15