Just a question: is this made to work in the full-site-editor (FSE) editor? I’m using the default theme Twenty-Twenty-Four and I’ve added CSS to some blocks in “Edit Site” mode. In the source code, I see that the classes are there, but the styles for those classes aren’t included.

If this is only for page-edit mode, totally cool. Just curious.

Got a new one for you. Seems like when I use a @media query in my inline CSS, it gets cut off prematurely in the output, while it works fine in the editor.

I have a vertical stack group with the following inline style defined:

[block] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  padding-top: 1vw!important;
}

@media (max-width:1919px) {
  [block] {
    padding-top: 10px;
  }
}

The output looks like this:

<style id="pcss-block-pcss-7beda7c1-inline-css">
    .pcss-7beda7c1 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        padding-top: 1vw!important
    }

    @media (width </style>
<style id="wp-block-heading-inline-css">
    h1.has-background,h2.has-background,h3.has-background,h4.has-background,h5.has-background,h6.has-background {
        padding: 1.25em 2.375em
    }

It looks good until @media (width </style>

I have not looked at whether or not this is happening in all instances and I have not tried in a vanilla environment yet. I’ll add more info as I look into it.

Thanks!

I keep getting this in the console and it’s triggered by a JS file in Pattern CSS

WebAssembly.instantiateStreaming failed because your server does not serve wasm with application/wasm MIME type. Falling back to WebAssembly.instantiate which is slower. Original error:
TypeError: Failed to execute ‘compile’ on ‘WebAssembly’: Incorrect response MIME type. Expected ‘application/wasm’.

Not faulting the plugin at all. I’m sure I need to mod PHP or Apache on my server. Just documenting it here. I’ll follow up when I resolve.

The Site Logo block does not get a pcss- class if you add some CSS to it. I can wrap it in a group block and it’s fine, but it would be ideal if I could add CSS to the Site Logo block directly.

I’m trying to replace Otter Block’s Custom CSS panel for blocks. I like yours, but theirs has a few perks to consider…
1. on-the-fly validation and syntax highlight
2. they use selector { } for current block scope – not a huge deal that you used [block] { } , but theirs is similar to elementor, feels a little cleaner – might be work considering
3. the example code you auto-show when we expand the panel – I have to delete a bunch of stuff each time – might be worth putting as a code note below the input panel.

I know developing plugins is a lot of work so don’t get me wrong – I am not complaining. Love what you’ve done so far.