Title: Pattern CSS – The CSS Editor For Blocks
Author: Kevin Batdorf
Published: <strong>4 Novembre 2023</strong>
Last modified: 11 Aprile 2026

---

Ricerca i plugin

![](https://ps.w.org/pattern-css/assets/icon-256x256.png?rev=3295259)

# Pattern CSS – The CSS Editor For Blocks

 Di [Kevin Batdorf](https://profiles.wordpress.org/kbat82/)

[Scarica](https://downloads.wordpress.org/plugin/pattern-css.1.5.6.zip)

 * [Dettagli](https://it.wordpress.org/plugins/pattern-css/#description)
 * [Recensioni](https://it.wordpress.org/plugins/pattern-css/#reviews)
 *  [Installazione](https://it.wordpress.org/plugins/pattern-css/#installation)
 * [Sviluppo](https://it.wordpress.org/plugins/pattern-css/#developers)

 [Supporto](https://wordpress.org/support/plugin/pattern-css/)

## Descrizione

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.

Segui su [GitHub](https://github.com/KevinBatdorf/pattern-css)
 Seguimi su Twitter
[@kevinbatdorf](https://twitter.com/kevinbatdorf)

#### Tutorial

 * Ogni blocco avrà un nuovo pannello di impostazioni “Pattern CSS”
 * Open it and add any CSS. It will be scoped to the block
 * Per puntare un blocco direttamente, puoi usare il selettore `[block]`
 * Per puntare un elemento _interno_ al blocco, usa il normale selettore CSS
 * Usa `!important` per sovrascrivere lo stile del tuo tema (usalo con parsimonia)

#### Global Editor

 * Access global styles under the options menu (three dots) in the top right corner
   of the editor
 * Additionaly, you can open from the Pattern CSS block editor controls

#### Funzionalità

 * Powered by WebAssembly for fast and secure CSS parsing
 * Caricamento intelligente. Carica il CSS solo quando il blocco è presente
 * Styles persist when changing themes
 * Scopes styles to the block so that parent/sibling blocks are not affected
 * It’s fast
 * CSS is minified and optimized
 * It’s safe. Invalid, non-spec CSS is never persisted
 * Supporta i pattern riutilizzabili (sincronizzati o non sincronizzati)
 * Vedi i cambiamenti nella pagina mentre li fai
 * Combina regole adiacenti (per ridurre la dimensione)
 * Minifies colors and math functions to simplify according to spec
 * Supporta il CSS innestato

#### Esempi di base

    ```
    /* 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}
    ```

#### Corregge le proprietà ridondanti

    ```
    [block] {
      padding-top: 5px;
      padding-left: 50px;
      padding-bottom: 15px;
      padding-right: 5px;
    }

    /* Output: */
    .pcss-3aa0f0fc{padding:5px 5px 15px 50px}
    ```

#### Supporta il CSS innestato

    ```
    [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}}}
    ```

Controlla il supporto dei browser per il [CSS innestato](https://caniuse.com/css-nesting)

## Screenshot

 * [[
 * Add styles not available in the editor (supoprts nesting)
 * [[
 * Add animation using the global editor
 * [[
 * Ti avviserà se il tuo CSS non è corretto
 * [[
 * Works with reusable and synced patterns

## Installazione

 1. Attiva il plugin dalla schermata ‘Plugin’ di WordPress

## FAQ

### 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/

### Posso usare qualcosa di diverso da [block]?

You can add a custom selector via a PHP constant. It requires setting a type (type,
attribute, etc) and the name.

Ecco un esempio per “foo { color: red}”, dove foo verrà rimpiazzato da .pcss-h3Hso39bsK(
o qualcosa di simile):

Aggiungi questo a functions.php:

    ```
    define('PATTERN_CSS_SELECTOR_OVERRIDE', ['name' => 'foo', 'type' => 'type']);
    ```

### Can I manually set the class ID?

By 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:

    ```
    define('PATTERN_CSS_ALLOW_MANUAL_OVERRIDE', true);
    ```

Once 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.

## Recensioni

![](https://secure.gravatar.com/avatar/3346b0eaa50bfea69c171a1642141a02ec50d56afce94ea7dfa5f39f9c091f96?
s=60&d=retro&r=g)

### 󠀁[Essential for pro developers](https://wordpress.org/support/topic/essential-for-pro-developers/)󠁿

 [arcaswebdesign](https://profiles.wordpress.org/arcaswebdesign/) 25 Marzo 2026 
1 risposta

An essential add-on for anyone wanting to make as much use of a proper CSS-first
approach to development without relying on a myriad of styling inputs which often
don’t offer the control that you need. This plugin is lightweight and just adds 
in the functionality required to add whatever custom styling any individual block
requires and the developer was blazingly quick in fixing an issue I experienced 
as well as introducing a new feature I’d requested (the ability to define our own
class names rather than having them auto-generated). Highly recommended.

![](https://secure.gravatar.com/avatar/a7e078d9258fcd64af9f828aae4b7f7859633abff41f9c83297d3c955c75a840?
s=60&d=retro&r=g)

### 󠀁[Need responsiveness? You need this plugin!](https://wordpress.org/support/topic/need-responsiveness-you-need-this-plugin/)󠁿

 [laszloszan](https://profiles.wordpress.org/laszloszan/) 4 Giugno 2025 1 risposta

Until FSE theme blocks can have different styles on different screen sizes this 
is a must for any custom theme builder out there.Maybe hard to use for end users(
content creators), but for site builders it should be natural.

![](https://secure.gravatar.com/avatar/98a6682caa2182261a295b9c9fef872594ca8c6129a02002873300dbe0519a4c?
s=60&d=retro&r=g)

### 󠀁[Best block CSS plugin out there right now](https://wordpress.org/support/topic/best-block-css-plugin-out-there-right-now/)󠁿

 [Aster](https://profiles.wordpress.org/asterselene/) 3 Giugno 2025 1 risposta

By far the best block CSS editor of any of the others I’ve tried, especially with
its efficiency functions like the automatic selection and minifying. This has been
an immense lifesaver.

![](https://secure.gravatar.com/avatar/ab34a41a5eb649b0b55befd7b6bb11a0b6d6d18c92d388326c2c57f9751a694b?
s=60&d=retro&r=g)

### 󠀁[must-have plugin](https://wordpress.org/support/topic/must-have-plugin-548/)󠁿

 [Yasin](https://profiles.wordpress.org/yasinc2/) 15 Febbraio 2025 1 risposta

An awesome and must-have plugin if you know your way around writing CSS.

![](https://secure.gravatar.com/avatar/b448ac5e6e9847bb4e27f0c861a1e6d501bede49d7d9db6d71391436469e8dd9?
s=60&d=retro&r=g)

### 󠀁[Simple CSS editor for blocks!](https://wordpress.org/support/topic/simple-css-editor-for-blocks/)󠁿

 [wpnpc420](https://profiles.wordpress.org/wpnpc420/) 4 Ottobre 2024 1 risposta

Does exactly what it is supposed to do and also has support for me advanced styling(
media queries, CSS variables, etc.). Awesome!

![](https://secure.gravatar.com/avatar/dee401e1fe480a559f65112ceee2d7a9d2f95dfebde8d00eebc9697c6fe63a80?
s=60&d=retro&r=g)

### 󠀁[Extremely useful tool for speeding up your workflow](https://wordpress.org/support/topic/extremely-useful-tool-for-speeding-up-your-workflow/)󠁿

 [onetrev](https://profiles.wordpress.org/onetrev/) 13 Settembre 2024 1 risposta

As a seasoned WP developer often working on tight timelines and sometimes on tight
budgets, this is such an important tool. Thank you for making it! Inline block styles
are such an efficient and performant way to quickly customise the styles of blocks.
Love it!

 [ Leggi tutte le recensioni di 8 ](https://wordpress.org/support/plugin/pattern-css/reviews/)

## Contributi e sviluppo

“Pattern CSS – The CSS Editor For Blocks” è un software open source. Le persone 
che hanno contribuito allo sviluppo di questo plugin sono indicate di seguito.

Collaboratori

 *   [ Kevin Batdorf ](https://profiles.wordpress.org/kbat82/)

“Pattern CSS – The CSS Editor For Blocks” è stato tradotto in 1 lingua. Grazie a
[chi traduce](https://translate.wordpress.org/projects/wp-plugins/pattern-css/contributors)
per il contributo.

[Traduci “Pattern CSS – The CSS Editor For Blocks” nella tua lingua.](https://translate.wordpress.org/projects/wp-plugins/pattern-css)

### Ti interessa lo sviluppo?

[Esplora il codice](https://plugins.trac.wordpress.org/browser/pattern-css/) segui
il [repository SVN](https://plugins.svn.wordpress.org/pattern-css/), segui il [log delle modifiche](https://plugins.trac.wordpress.org/log/pattern-css/)
tramite [RSS](https://plugins.trac.wordpress.org/log/pattern-css/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.5.6 – 2026-04-11

 * Removes class ID from block when CSS is cleared

#### 1.5.5 – 2026-03-24

 * Added manual class ID override (opt-in via constant)
 * Warns when duplicate class IDs are detected in the editor
 * Prevents duplicate inline styles on the frontend
 * Switched to Biome for linting and formatting
 * Switched to Playwright and WP Playground for testing

#### 1.5.4 – 2026-03-23

 * Fixed dynamic blocks with POST

#### 1.5.3 – 2025-09-27

 * Fixes an issue where filtered attributes sent wp/v2/block-renderer causes a block
   validation error

#### 1.5.2 – 2025-05-21

 * Fixes an overflow bug in the editor

#### 1.5.1 – 2025-05-18

 * Retagging for release

#### 1.5.0 – 2025-05-18

 * Adds support for global styles via a new editor

#### 1.4.0 – 2025-05-12

 * Adds a draggable, resizable popout mode
 * Updates CSS engine to include recent CSS features
 * Allows “supports” support scoped to the block

#### 1.3.0 – 2025-01-27

 * Switches to useStyleOverride for injecting styles

#### 1.2.6 – 2024-09-20

 * Removes an unecessary html escape that mangled some css.

#### 1.2.5 – 2024-07-28

 * Fixed a small bug where a block may not have attributes when we access them.

#### 1.2.4 – 2024-07-21

 * Renamed the panel to Pattern CSS to differenciate it from the core panel on FSE

#### 1.2.3 – 2024-05-09

 * Removed globals like @import, @font-face, and @keyframes (and others)

#### 1.2.2 – 2024-04-19

 * Fixed an issue where CSS media queries using <= were stripped out
 * Removed loading the viewer for users without the edit_css cap
 * Removed the tag stripping output – now only privlidged users can use
 * Updated tests to run on modern WP (by disabling the iframe)

#### 1.2.1 – 2024-02-22

 * Removed the example code and added a useful default
 * Render blocks now work – now adds the id to the main class list

#### 1.2.0 – 2024-02-20

 * Feature: Adds support for CSS nesting
 * Removes the code example on focus and adds it back on blur (if empty)
 * Lets users define an additional block selector
 * Adds a notice that the site logo isn’t currently supported

#### 1.1.0 – 2024-02-18

 * Prevent adding classes to blocks unless CSS is added
 * Force the settings area to the bottom (mainly for custom blocks)

#### 1.0.1 – 2023-11-04

 * Fixed a bug where the it would crash on the pattern manager page

#### 1.0.0 – 2023-07-15

 * Feature: Now supports reusable blocks/patterns
 * Update: Removed the “per page” functionality to limit the scope of this plugin
   to blocks and reusable patterns only
 * Performance: Added global loading strategy to prevent per block n+1 loading issues
 * Improvement: Added the option to update the CSS selector used for scoping (useful
   for duplicating blocks)
 * Improvement: Added some examples when no CSS is present
 * Improvement: Removed the public className attribute requirement from the Additional
   Settings area
 * 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).
 * Fix: Now it will only show on post types with the public setting set to true

## Meta

 *  Versione **1.5.6**
 *  Ultimo aggiornamento **2 giorni fa**
 *  Installazioni attive **100+**
 *  Versione WordPress ** 6.7 o superiore **
 *  Testato fino alla versione **7.0**
 *  Versione PHP ** 7.0 o superiore **
 *  Lingue
 * [English (US)](https://wordpress.org/plugins/pattern-css/) e [Italian](https://it.wordpress.org/plugins/pattern-css/).
 *  [Traduci nella tua lingua](https://translate.wordpress.org/projects/wp-plugins/pattern-css)
 * Tag
 * [block](https://it.wordpress.org/plugins/tags/block/)[css](https://it.wordpress.org/plugins/tags/css/)
   [editor](https://it.wordpress.org/plugins/tags/editor/)[inline](https://it.wordpress.org/plugins/tags/inline/)
   [styles](https://it.wordpress.org/plugins/tags/styles/)
 *  [Visualizzazione avanzata](https://it.wordpress.org/plugins/pattern-css/advanced/)

## Valutazioni

 5 su 5 stelle.

 *  [  8 recensioni a 5-stelle     ](https://wordpress.org/support/plugin/pattern-css/reviews/?filter=5)
 *  [  0 recensioni a 4-stelle     ](https://wordpress.org/support/plugin/pattern-css/reviews/?filter=4)
 *  [  0 recensioni a 3-stelle     ](https://wordpress.org/support/plugin/pattern-css/reviews/?filter=3)
 *  [  0 recensioni a 2-stelle     ](https://wordpress.org/support/plugin/pattern-css/reviews/?filter=2)
 *  [  0 recensioni a 1-stelle     ](https://wordpress.org/support/plugin/pattern-css/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/pattern-css/reviews/#new-post)

[Vedi tutte le recensioni](https://wordpress.org/support/plugin/pattern-css/reviews/)

## Collaboratori

 *   [ Kevin Batdorf ](https://profiles.wordpress.org/kbat82/)

## Supporto

Hai qualcosa da dire? Ti serve aiuto?
Problemi risolti negli ultimi due mesi:

     1 su 1

 [Chiedi nel forum di supporto](https://wordpress.org/support/plugin/pattern-css/)