Our.Umbraco.HideIt 18.0.4

Hide It

The "now you see me, now you don't" package for Umbraco Block List and Block Grid!

Ever wanted to temporarily hide a block without deleting it? Maybe it's a seasonal promo, a work-in-progress section, or that testimonial from your ex-client. Whatever the reason - Hide It has your back.

Works with both Block List and Block Grid editors.

What's in the Box?

• One-Click Toggle — Eye icon right there in the block action bar. Click it. Done.
• Visual Feedback — Hidden blocks get dimmed so you know what's hiding
• Zero View Changes — Hidden blocks vanish from the frontend automagically
• Search-Safe Content — Hidden block content is excluded from Umbraco search indexing
• Nested Support — BlockGrid areas? Yep, filters all the way down

Installation

dotnet add package Our.Umbraco.HideIt

Setup (It's Stupid Simple)

1. Add a True/False property to your block's Settings element type
2. Give it the alias hideIt
3. There is no step 3

The toggle appears. The magic happens. Your frontend stays clean.

Need more control? See Advanced / Extensibility near the end.

How It Works

On the Frontend

Nothing! That's the point. Hidden blocks just... aren't there. The package intercepts Umbraco's property converters and filters them out before your views even see them.

Requirements

• Umbraco 17.5+ (that's when block actions became a thing) or 18.x
• .NET 10.0

Versions

Advanced / Extensibility

Custom Alias

Maybe hideIt isn't your style, or you're migrating a site that already has its own "hide this" property. Point Hide It at any alias in appsettings.json:

{
  "HideIt": {
    "PropertyAlias": "hideFromSite"
  }
}

Both the backoffice toggle and the frontend filtering pick up the custom alias. Leave the setting out and the default hideIt keeps working.

Want Full Control of Block Styling?

Set HideIt:CssPath to your own stylesheet path in appsettings.json:

{
  "HideIt": {
    "CssPath": "/css/hideit-custom.css"
  }
}

• If CssPath is not set, Hide It keeps the current default dimmed styling for hidden blocks.
• If CssPath is set, Hide It skips its default styling and loads your stylesheet instead (including inside block-entry shadow roots).

Hide It adds these state markers on each block entry:

• Hidden state: data-hideit-hidden attribute + .hideit-block--hidden class
• Visible state: .hideit-block--visible class

Use those selectors in your CSS to style hidden/visible blocks exactly how you want.

Custom Action Icons

You can override the action icon for both states in appsettings.json:

{
  "HideIt": {
    "VisibleIcon": "/icons/power.svg",
    "HiddenIcon": "/icons/power-off.svg"
  }
}

• VisibleIcon controls the icon shown when the block is currently visible.
• HiddenIcon controls the icon shown when the block is currently hidden.
• Values must be SVG paths (for example /icons/power.svg).

Manual Filtering

Don't trust the magic? Fair. Extension methods are available:

using HideIt;

// Filter manually
var visibleBlocks = Model.Blocks.WhereVisible();
var visibleGrid = Model.Grid.WhereVisible();

// Check a single block
if (!block.IsBlockHidden())
{
    // This block is ready for its close-up
}

Custom Block Conversion Pipeline

If you previously replaced BlockListPropertyValueConverter or BlockGridPropertyValueConverter, switch to Hide It's filter extension points instead:

using HideIt;
using Umbraco.Cms.Core.Models.Blocks;

public class MyCustomBlockListFilter : IHideItBlockListFilter {
    public BlockListModel Filter(BlockListModel model) {
        // Your custom filtering/transformation
        return model;
    }
}

public class MyCustomBlockGridFilter : IHideItBlockGridFilter {
    public BlockGridModel Filter(BlockGridModel model) {
        // Your custom filtering/transformation
        return model;
    }
}

builder.Services.AddSingleton<IHideItBlockListFilter, MyCustomBlockListFilter>();
builder.Services.AddSingleton<IHideItBlockGridFilter, MyCustomBlockGridFilter>();

This keeps Hide It's built-in hide logic and your custom logic in the same pipeline without chained converter Replace<>() calls.

Contributing

Local Umbraco test site

An in-repo Umbraco 18 site is available under HideIt.Test.

• Open HideIt.slnx
• Start HideIt.Test with IIS Express or the Umbraco.Web.UI profile
• The site uses the local HideIt.csproj via project reference, so backoffice/frontend changes are picked up automatically
• The sample is intentionally a single-page homepage test surface focused on Content Rows (Block List) and Content Grid (Block Grid)
• The sample ships with a seeded SQLite database, so you can start testing immediately
• Backoffice login: admin@example.com / 1234567890

Found a bug? Create an issue here. Got an idea? PRs welcome!

License

MIT