We'll create fresh WordPress site with Pattern CSS – Inline Block Styles installed. You have 20 minutes to test the plugin after that site we'll be deleted.
The missing inline CSS editor for blocks. Very powerful with synced patterns.
[block]
selector.!important
to override your theme styles (use sparingly)Star it on GitHub
DM me on Twitter @kevinbatdorf
/* 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}
@media (prefers-color-scheme: dark) {
[block] {
border-color: blue;
}
}
/* Output: */
@media (prefers-color-scheme:dark){.pcss-cddaa023{border-color:#00f}}
[block] {
color: red;
}
.bar {
color: red;
}
/* Output: */
.pcss-3aa0f0fc,.pcss-3aa0f0fc .bar{color:red}
[block] {
padding-top: 5px;
padding-left: 50px;
padding-bottom: 15px;
padding-right: 5px;
}
/* Output: */
.pcss-3aa0f0fc{padding:5px 5px 15px 50px}
[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