Webwonders.Umbraco.BlockPicker 17.0.1

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher. 
dotnet add package Webwonders.Umbraco.BlockPicker --version 17.0.1
                    


                    

                
NuGet\Install-Package Webwonders.Umbraco.BlockPicker -Version 17.0.1
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Webwonders.Umbraco.BlockPicker" Version="17.0.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Webwonders.Umbraco.BlockPicker" Version="17.0.1" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Webwonders.Umbraco.BlockPicker" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Webwonders.Umbraco.BlockPicker --version 17.0.1
                    


                    

                
#r "nuget: Webwonders.Umbraco.BlockPicker, 17.0.1"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package Webwonders.Umbraco.BlockPicker@17.0.1
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Webwonders.Umbraco.BlockPicker&version=17.0.1
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Webwonders.Umbraco.BlockPicker&version=17.0.1
                    


                            Install as a Cake Tool

Webwonders Block Picker

A property editor for Umbraco 17 that lets editors pick specific blocks from a Block Grid or Block List — either from the current page or from anywhere in the content tree.

Installation

dotnet add package Webwonders.Umbraco.BlockPicker

The package registers itself automatically via Umbraco's composer system. No manual setup required.

Setting up a data type

In the backoffice go to Settings → Data Types → Create new and select Block Picker from the property editor list.

Setting Description
Multi select Allow editors to pick more than one block at a time.
Across site When on, the picker shows a browsable content tree. When off, only blocks on the current page are shown.
Start node Restricts the content tree to a specific subtree (across-site mode only).
Excluded page types Document types to hide from the content tree.
Excluded block types Element types to hide from block lists (e.g. structural wrapper blocks that are not meaningful to link to).

Add the data type to any document type as you would any other property.

The value model

The property value converter returns WebwondersBlockPicker[]. Each item identifies one picked block:

public class WebwondersBlockPicker
{
    public string? BlockKey { get; set; }      // Content element key (Guid string) of the block
    public string? BlockAlias { get; set; }    // Element type alias
    public string? BlockTypeName { get; set; } // Element type display name
    public string? PageUrl { get; set; }       // URL of the page the block lives on
}

BlockKey is the stable identifier — use it to locate the block in the content cache or to match it against a rendered element's id attribute. PageUrl is populated for every block, making cross-page deep links straightforward.

Basic usage

@using Webwonders.Umbraco.BlockPicker.Models

@{
    var picked = Model.Value<WebwondersBlockPicker[]>("myBlockPicker");
}

@foreach (var item in picked ?? [])
{
    <a href="@item.PageUrl#@item.BlockKey">@item.BlockAlias</a>
}

Using BlockKey as the anchor works out of the box — add a matching id attribute to each block's rendered HTML:

<section id="@Model.Content.Key">
    ...
</section>

If you need human-readable anchor slugs (e.g. #our-services instead of a Guid), add an anchor property to your element type and write a small resolver that looks up each block by BlockKey in the relevant BlockGridModel or BlockListModel. The picker intentionally stays out of how you model and render your content.

Requirements

  • Umbraco 17
  • .NET 10
Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
17.0.1 88 5/7/2026
17.0.0 84 5/7/2026