BASIC

Styles

Styles are block style variants: alternative looks that editors pick from a block's Styles panel, or from a pattern's Pattern Styles panel. A Style adds the class is-style-{slug} to the block.

Example uses:

  • a "Rounded" style for images
  • an "Outline" variant for buttons
  • a "Tinted" background for a Group or a whole pattern

The Style page covers the SCSS of one block. A Style here is its own item in FanCoolo, shared by every block and pattern it is assigned to.

Creating a Style

  1. Open FanCoolo in WordPress admin.
  2. Add a new Style.
  3. Enter a name, for example "Rounded".
  4. Write the SCSS.
  5. Under Where this style applies, choose Blocks, Patterns, or both.
  6. Save.

Writing Style SCSS

Your SCSS is wrapped in .is-style-{slug} for you:

// Style name: "Rounded"
// becomes .is-style-rounded { ... }

border-radius: 12px;
overflow: hidden;

You can also write the full selector yourself:

.is-style-rounded {
    border-radius: 12px;
    overflow: hidden;

    img {
        border-radius: inherit;
    }
}

Where This Style Applies

The Where this style applies section has two pickers, Blocks and Patterns. A Style can use both.

Blocks

Blocks chooses which block types offer the Style in their Styles panel. Type a block name and press Enter, for example core/paragraph, core/image or fancoolo/my-block.

To use it, select the block in the editor and click the Style in the block's Styles panel.

Patterns

Patterns offers the Style on WordPress patterns. Search for a pattern by name and select it. The list includes theme patterns, plugin patterns, core patterns and your own saved patterns.

Picking a Pattern Style

Assigning a Style to a pattern only offers it. Every use of the pattern starts on Default, without the Style. Pages that already use the pattern do not change when you assign a Style.

To style one use of a pattern:

  1. Select the pattern on the page.
  2. In the sidebar, open Pattern Styles (Styles on a synced pattern).
  3. Click a Style, or Default to remove it.
  4. Save the page.

The panel shows Default plus every FanCoolo Style assigned to the pattern. It does not show the block styles of the blocks inside the pattern: for a Group, those stay in the block's own Styles panel. A pattern without assigned Styles gets no panel.

What a pick does:

  • It applies to this use only. The pattern itself never changes.
  • On a regular pattern, the class is-style-{slug} is saved on the pattern's root block, like any block style.
  • On a synced pattern, the pick is saved with the page, and the class is added when the page renders.
  • The pattern's own classes, such as a theme style on its Group, stay as they are.
  • The editor and the front end show the same result, and the Style's CSS loads on pages that use it.
  • If a picked Style is no longer assigned to a synced pattern, that use shows Default.
  • If you detach a synced pattern, the picked Style is written into the detached block, so it keeps its look.
  • If FanCoolo is deactivated, a synced pattern renders without the Style.

The pattern's own edit screen shows the pattern without any assigned Style.

Limitations

  • Only patterns with a single top-level block are supported. The picker shows the others as not supported.
  • To style such a pattern, wrap its blocks in one Group.
  • The class goes on the pattern's root block only. Reach inner blocks from your SCSS, for example .is-style-card .wp-block-heading.
  • If a synced pattern has several top-level blocks, only the first one is styled, and the panel says so.

Starter Styles

Every site gets three starter Styles, created once:

Style Slug Look
Tinted fc-tinted Light tinted background
Dark fc-dark Dark background with light text
Accent fc-accent Theme accent colour; text turns white or black automatically in modern browsers
  • They are assigned to core/group, so they appear in the Group block's Styles panel.
  • Their colours come from your theme palette, with fallbacks when a preset is missing.
  • You can edit them like any other Style, or assign them to patterns.
  • If you delete one, it is not created again.

Export and Import

  • Exports include the assigned blocks and patterns.
  • Theme, plugin and core pattern names are exported as they are.
  • Your own saved patterns are exported by slug and matched by slug on import.
  • If a pattern does not exist on the target site, that assignment is skipped and listed as a warning in the import summary.

Deleting a Style

Before you delete a Style, FanCoolo warns you if it is still in use. The warning lists the blocks and patterns it is assigned to, and the blocks and symbols whose code uses the is-style-{slug} class.

Example Styles

Outline Button

.is-style-outline {
    background: transparent;
    border: 2px solid currentColor;

    &:hover {
        background: currentColor;
        color: var(--wp--preset--color--base-1);
    }
}

Shadow Card

.is-style-shadow {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: none;
}

Generated Files

Each Style compiles to fancoolo-blocks/styles/{slug}/style.css, with a source map. FanCoolo registers it with register_block_style() for each assigned block, and loads the CSS on pages where a pattern use picks it.