Add upgrade migration for umbExternalBlockElement relation type

After discussion, decided not to store the element key or UDI in the index. External element content is still flattened into the block resume when IndexExternalElements is enabled, but no reference field is emitted.

- Remove ElementKeyFieldName constant from UmbracoExamineFieldNames
- Remove ExternalElementUdi emission from Handle() in BlockValuePropertyIndexValueFactoryBase
- Remove ExternalElementUdi property from RawDataItem
- Remove GetLayouts() abstract method (no longer needed after refactor)
- Refactor GetDataItems to iterate in layout order, fetching external elements via IElementService when IndexExternalElements is enabled
- Update tests: remove assertions about element UDI/key in index, remove Indexes_Shared_Element_Reference_When_ExplicitlyIndexEachNestedProperty_Is_Enabled test

src/Umbraco.Core/Configuration/Models/IndexingSettings.cs

@@ -9,6 +9,7 @@ namespace Umbraco.Cms.Core.Configuration.Models;
 public class IndexingSettings
 {
     private const bool StaticExplicitlyIndexEachNestedProperty = false;
+    private const bool StaticIndexExternalElements = false;
     private const int StaticBatchSize = 10000;
 
     /// <summary>
@@ -17,6 +18,12 @@ public class IndexingSettings
     [DefaultValue(StaticExplicitlyIndexEachNestedProperty)]
     public bool ExplicitlyIndexEachNestedProperty { get; set; } = StaticExplicitlyIndexEachNestedProperty;
 
+    /// <summary>
+    /// Gets or sets a value indicating whether the content of external elements referenced by block editors is flattened into the index entry of referencing documents. Requires a rebuild of indexes when changed.
+    /// </summary>
+    [DefaultValue(StaticIndexExternalElements)]
+    public bool IndexExternalElements { get; set; } = StaticIndexExternalElements;
+
     /// <summary>
     /// Gets or sets a value for how many items to index at a time.
     /// </summary>

src/Umbraco.Core/Constants-Conventions.cs

@@ -357,6 +357,16 @@ public static partial class Constants
             /// </summary>
             public const string RelatedElementAlias = "umbElement";
 
+            /// <summary>
+            ///     Name for default relation type "External Block Element".
+            /// </summary>
+            public const string RelatedExternalBlockElementName = "External Block Element";
+
+            /// <summary>
+            ///     Alias for default relation type "External Block Element".
+            /// </summary>
+            public const string RelatedExternalBlockElementAlias = "umbExternalBlockElement";
+
             /// <summary>
             ///     Name for default relation type "Relate Document On Copy".
             /// </summary>
@@ -414,7 +424,7 @@ public static partial class Constants
             ///     Developers should not manually use these relation types since they will all be cleared whenever an entity
             ///     (content, media, member or element) is saved since they are auto-populated based on property values.
             /// </remarks>
-            public static string[] AutomaticRelationTypes { get; } = { RelatedMediaAlias, RelatedMemberAlias, RelatedDocumentAlias, RelatedElementAlias };
+            public static string[] AutomaticRelationTypes { get; } = { RelatedMediaAlias, RelatedMemberAlias, RelatedDocumentAlias, RelatedElementAlias, RelatedExternalBlockElementAlias };
 
             // TODO: return a list of built in types so we can use that to prevent deletion in the UI
         }

src/Umbraco.Core/Models/Blocks/BlockGridLayoutItem.cs

@@ -64,4 +64,8 @@ public class BlockGridLayoutItem : BlockLayoutItemBase
     /// <inheritdoc />
     public override bool ReferencesSetting(Guid key)
         => SettingsKey == key || Areas.Any(area => area.ContainsSetting(key));
+
+    /// <inheritdoc />
+    public override IEnumerable<IBlockLayoutItem> GetContainedLayouts()
+        => Areas.SelectMany(area => area.Items);
 }

src/Umbraco.Core/Models/Blocks/BlockLayoutItemBase.cs

@@ -5,12 +5,18 @@ namespace Umbraco.Cms.Core.Models.Blocks;
 /// </summary>
 public abstract class BlockLayoutItemBase : IBlockLayoutItem
 {
+    /// <inheritdoc />
+    public Guid Key { get; set; }
+
     /// <inheritdoc />
     public Guid ContentKey { get; set; }
 
     /// <inheritdoc />
     public Guid? SettingsKey { get; set; }
 
+    /// <inheritdoc />
+    public bool IsExternalContent { get; set; }
+
     /// <summary>
     ///     Initializes a new instance of the <see cref="BlockLayoutItemBase" /> class.
     /// </summary>
@@ -44,4 +50,7 @@ public abstract class BlockLayoutItemBase : IBlockLayoutItem
     /// <inheritdoc />
     public virtual bool ReferencesSetting(Guid key)
         => SettingsKey == key;
+
+    /// <inheritdoc />
+    public virtual IEnumerable<IBlockLayoutItem> GetContainedLayouts() => [];
 }

src/Umbraco.Core/Models/Blocks/IBlockLayoutItem.cs

@@ -8,6 +8,18 @@ namespace Umbraco.Cms.Core.Models.Blocks;
 /// </summary>
 public interface IBlockLayoutItem
 {
+    /// <summary>
+    ///     Gets or sets the layout item key.
+    /// </summary>
+    /// <value>
+    ///     The layout item key.
+    /// </value>
+    /// <remarks>
+    ///     Uniquely identifies a layout item. Previously the <see cref="ContentKey"/> could be used for this, but
+    ///     with reusable elements, the same <see cref="ContentKey"/> can appear multiple times in one layout.
+    /// </remarks>
+    public Guid Key { get; set; }
+
     /// <summary>
     ///     Gets or sets the content key.
     /// </summary>
@@ -24,6 +36,11 @@ public interface IBlockLayoutItem
     /// </value>
     public Guid? SettingsKey { get; set; }
 
+    /// <summary>
+    ///     Indicates if the content source is local or originates from the element service.
+    /// </summary>
+    public bool IsExternalContent { get; set; }
+
     /// <summary>
     ///     Determines whether this layout item references the specified content key.
     /// </summary>
@@ -41,4 +58,10 @@ public interface IBlockLayoutItem
     ///     <c>true</c> if this layout item references the specified settings key; otherwise, <c>false</c>.
     /// </returns>
     public bool ReferencesSetting(Guid key) => SettingsKey == key;
+
+    /// <summary>
+    ///     Returns any nested layouts for this layout (e.g. area layouts for the Block Grid).
+    /// </summary>
+    /// <returns>The nested layouts.</returns>
+    public IEnumerable<IBlockLayoutItem> GetContainedLayouts();
 }

src/Umbraco.Core/PropertyEditors/IBlockGridPropertyIndexValueFactory.cs

@@ -1,12 +1,11 @@
 namespace Umbraco.Cms.Core.PropertyEditors;
 
 /// <summary>
-///     Represents a property index value factory specifically for block-based property values.
+///     Represents a property index value factory specifically for block grid properties.
 /// </summary>
 /// <remarks>
-///     This marker interface allows for specialized indexing of block content,
-///     such as Block List, Block Grid, and Rich Text block values.
+///     This marker interface allows for specialized indexing of block grid content.
 /// </remarks>
-public interface IBlockValuePropertyIndexValueFactory : IPropertyIndexValueFactory
+public interface IBlockGridPropertyIndexValueFactory : IPropertyIndexValueFactory
 {
 }

src/Umbraco.Core/PropertyEditors/IBlockListPropertyIndexValueFactory.cs

@@ -0,0 +1,11 @@
+namespace Umbraco.Cms.Core.PropertyEditors;
+
+/// <summary>
+///     Represents a property index value factory specifically for block list properties.
+/// </summary>
+/// <remarks>
+///     This marker interface allows for specialized indexing of block list content.
+/// </remarks>
+public interface IBlockListPropertyIndexValueFactory : IPropertyIndexValueFactory
+{
+}

src/Umbraco.Core/PropertyEditors/ISingleBlockPropertyIndexValueFactory.cs

@@ -0,0 +1,11 @@
+namespace Umbraco.Cms.Core.PropertyEditors;
+
+/// <summary>
+///     Represents a property index value factory specifically for single block properties.
+/// </summary>
+/// <remarks>
+///     This marker interface allows for specialized indexing of single block content.
+/// </remarks>
+public interface ISingleBlockPropertyIndexValueFactory : IPropertyIndexValueFactory
+{
+}

src/Umbraco.Core/PublishedCache/IBlockElementService.cs

@@ -3,7 +3,17 @@ using Umbraco.Cms.Core.Models.PublishedContent;
 
 namespace Umbraco.Cms.Core.PublishedCache;
 
+/// <summary>
+/// A service for converting <see cref="BlockItemData"/> into <see cref="IPublishedElement"/>.
+/// </summary>
 public interface IBlockElementService
 {
-    Task<IPublishedElement?> BuildElementAsync(BlockItemData blockItemData, bool? preview = null);
+    /// <summary>
+    /// Creates an <see cref="IPublishedElement"/> instance from <see cref="BlockItemData"/>.
+    /// </summary>
+    /// <param name="owner">The <see cref="IPublishedElement"/> that contains the block property which is the origin to the <see cref="BlockItemData"/>.</param>
+    /// <param name="blockItemData">The <see cref="BlockItemData"/> containing the data to convert into an <see cref="IPublishedElement"/>.</param>
+    /// <param name="preview">Whether to perform the conversion for preview.</param>
+    /// <returns>The created <see cref="IPublishedElement"/>, or null if an element could not be created from the <see cref="BlockItemData"/>.</returns>
+    Task<IPublishedElement?> BuildElementAsync(IPublishedElement owner, BlockItemData blockItemData, bool? preview = null);
 }

src/Umbraco.Core/Services/IDeferredSearchReindexService.cs

@@ -22,4 +22,11 @@ public interface IDeferredSearchReindexService
     /// </summary>
     /// <param name="memberTypeIds">The member type IDs to reindex.</param>
     void QueueMemberTypeReindex(IReadOnlyCollection<int> memberTypeIds);
+
+    /// <summary>
+    ///     Queues a set of element node ids whose change requires re-indexing the documents that
+    ///     (transitively) embed them via block editors.
+    /// </summary>
+    /// <param name="elementIds">The element node ids that changed.</param>
+    void QueueElementReindex(IReadOnlyCollection<int> elementIds);
 }

src/Umbraco.Infrastructure/DependencyInjection/UmbracoBuilder.CoreServices.cs

@@ -285,7 +285,9 @@ public static partial class UmbracoBuilderExtensions
     /// <returns>The same <see cref="Umbraco.Cms.Core.DependencyInjection.IUmbracoBuilder"/> instance so that multiple calls can be chained.</returns>
     public static IUmbracoBuilder AddPropertyIndexValueFactories(this IUmbracoBuilder builder)
     {
-        builder.Services.AddSingleton<IBlockValuePropertyIndexValueFactory, BlockValuePropertyIndexValueFactory>();
+        builder.Services.AddSingleton<IBlockListPropertyIndexValueFactory, BlockListPropertyIndexValueFactory>();
+        builder.Services.AddSingleton<IBlockGridPropertyIndexValueFactory, BlockGridPropertyIndexValueFactory>();
+        builder.Services.AddSingleton<ISingleBlockPropertyIndexValueFactory, SingleBlockPropertyIndexValueFactory>();
         builder.Services.AddSingleton<ITagPropertyIndexValueFactory, TagPropertyIndexValueFactory>();
         builder.Services.AddSingleton<IRichTextPropertyIndexValueFactory, RichTextPropertyIndexValueFactory>();
         builder.Services.AddSingleton<IDateOnlyPropertyIndexValueFactory, DateOnlyPropertyIndexValueFactory>();

src/Umbraco.Infrastructure/DependencyInjection/UmbracoBuilder.Examine.cs

@@ -5,9 +5,9 @@ using Umbraco.Cms.Core.DeliveryApi;
 using Umbraco.Cms.Core.DependencyInjection;
 using Umbraco.Cms.Core.Models;
 using Umbraco.Cms.Core.Notifications;
-using Umbraco.Cms.Core.Security;
 using Umbraco.Cms.Core.PropertyEditors;
 using Umbraco.Cms.Core.Scoping;
+using Umbraco.Cms.Core.Security;
 using Umbraco.Cms.Core.Services;
 using Umbraco.Cms.Core.Strings;
 using Umbraco.Cms.Infrastructure.Examine;
@@ -86,6 +86,8 @@ public static partial class UmbracoBuilderExtensions
         builder.AddNotificationHandler<ContentCacheRefresherNotification, DeliveryApiContentIndexingNotificationHandler>();
         builder.AddNotificationHandler<ContentTypeCacheRefresherNotification, DeliveryApiContentIndexingNotificationHandler>();
         builder.AddNotificationHandler<PublicAccessCacheRefresherNotification, DeliveryApiContentIndexingNotificationHandler>();
+        builder.AddNotificationHandler<ElementSavedNotification, ElementIndexingNotificationHandler>();
+        builder.AddNotificationHandler<ElementPublishedNotification, ElementIndexingNotificationHandler>();
         builder.AddNotificationHandler<MediaCacheRefresherNotification, MediaIndexingNotificationHandler>();
         builder.AddNotificationHandler<MemberCacheRefresherNotification, MemberIndexingNotificationHandler>();
         builder.AddNotificationHandler<ExternalMemberCacheRefresherNotification, ExternalMemberIndexingNotificationHandler>();

src/Umbraco.Infrastructure/Migrations/Install/DatabaseDataCreator.cs

@@ -2834,6 +2834,14 @@ internal sealed class DatabaseDataCreator
             Constants.ObjectTypes.ElementContainer,
             false,
             false);
+        CreateRelationTypeData(
+            10,
+            Constants.Conventions.RelationTypes.RelatedExternalBlockElementAlias,
+            Constants.Conventions.RelationTypes.RelatedExternalBlockElementName,
+            null,
+            null,
+            false,
+            true);
     }
 
     private void CreateRelationTypeData(

src/Umbraco.Infrastructure/Migrations/Upgrade/UmbracoPlan.cs

@@ -103,6 +103,9 @@ public partial class UmbracoPlan : MigrationPlan
         To<V_18_0_0.AddElementContainerPermissions>("{D00BB11A-DDF8-47C4-B58E-150C123BB3BB}");
         To<V_18_0_0.MigrateSingleBlockList>("{74332C49-B279-4945-8943-F8F00B1F5949}");
         To<V_18_0_0.AddElementSectionForAdmins>("{6FE4656E-8B8D-452F-AE2A-438A615B61BC}");
+
+        // To 19.0.0
+        To<V_19_0_0.AddExternalBlockElementRelationType>("{2D8F1B6E-4C3A-4E7D-9A1B-5F0C7E2D8A93}");
     }
 
     /// <summary>

src/Umbraco.Infrastructure/Migrations/Upgrade/V_18_0_0/MigrateSingleBlockList.cs

@@ -76,7 +76,7 @@ public class MigrateSingleBlockList : AsyncMigrationBase
         SingleBlockListConfigurationCache blockListConfigurationCache,
         IDataValueEditorFactory dataValueEditorFactory,
         IIOHelper ioHelper,
-        IBlockValuePropertyIndexValueFactory blockValuePropertyIndexValueFactory,
+        ISingleBlockPropertyIndexValueFactory blockValuePropertyIndexValueFactory,
         IBlockEditorElementTypeCache elementTypeCache,
         AppCaches appCaches)
         : base(context)

src/Umbraco.Infrastructure/Migrations/Upgrade/V_19_0_0/AddExternalBlockElementRelationType.cs

@@ -0,0 +1,56 @@
+using Umbraco.Cms.Core;
+using Umbraco.Cms.Core.Models;
+using Umbraco.Cms.Core.Services;
+using Umbraco.Cms.Infrastructure.Migrations.Install;
+
+namespace Umbraco.Cms.Infrastructure.Migrations.Upgrade.V_19_0_0;
+
+/// <summary>
+/// Adds the "External Block Element" relation type used to track elements that are
+/// embedded as external (reusable) block content, so that only documents whose index
+/// includes the element's content are reindexed when the element changes.
+/// </summary>
+public class AddExternalBlockElementRelationType : AsyncMigrationBase
+{
+    private readonly IRelationService _relationService;
+
+    /// <summary>
+    /// Initializes a new instance of the <see cref="AddExternalBlockElementRelationType"/> class.
+    /// </summary>
+    /// <param name="context">The migration context.</param>
+    /// <param name="relationService">The relation service used to create the relation type.</param>
+    public AddExternalBlockElementRelationType(IMigrationContext context, IRelationService relationService)
+        : base(context)
+        => _relationService = relationService;
+
+    /// <inheritdoc />
+    protected override Task MigrateAsync()
+    {
+        IRelationType? relationType = _relationService.GetRelationTypeByAlias(
+            Constants.Conventions.RelationTypes.RelatedExternalBlockElementAlias);
+        if (relationType != null)
+        {
+            return Task.CompletedTask;
+        }
+
+        // Generate the same unique key a fresh install would produce.
+        Guid key = DatabaseDataCreator.CreateUniqueRelationTypeId(
+            Constants.Conventions.RelationTypes.RelatedExternalBlockElementAlias,
+            Constants.Conventions.RelationTypes.RelatedExternalBlockElementName);
+
+        // Save via the service so the repository cache is updated as well.
+        relationType = new RelationType(
+            Constants.Conventions.RelationTypes.RelatedExternalBlockElementName,
+            Constants.Conventions.RelationTypes.RelatedExternalBlockElementAlias,
+            false,
+            parentObjectType: null,
+            childObjectType: null,
+            isDependency: true)
+        {
+            Key = key
+        };
+        _relationService.Save(relationType);
+
+        return Task.CompletedTask;
+    }
+}

src/Umbraco.Infrastructure/PropertyEditors/BlockEditorPropertyNotificationHandlerBase.cs

@@ -110,10 +110,10 @@ public abstract class BlockEditorPropertyNotificationHandlerBase<TBlockLayoutIte
 
     private void TraverseObject(JsonObject obj)
     {
-        // we'll assume that the object is a data representation of a block based editor if it contains "contentData" and "settingsData".
-        if (obj["contentData"] is JsonArray contentData && obj["settingsData"] is JsonArray settingsData)
+        // we'll assume that the object is a data representation of a block based editor if it contains "contentData", "settingsData" and "layout".
+        if (obj["contentData"] is JsonArray contentData && obj["settingsData"] is JsonArray settingsData && obj["layout"] is JsonObject layoutData)
         {
-            ParseKeys(contentData, settingsData);
+            ParseKeys(contentData, settingsData, layoutData);
             return;
         }
 
@@ -123,12 +123,46 @@ public abstract class BlockEditorPropertyNotificationHandlerBase<TBlockLayoutIte
         }
     }
 
-    private void ParseKeys(JsonArray contentData, JsonArray settingsData)
+    private void ParseKeys(JsonArray contentData, JsonArray settingsData, JsonObject layoutData)
     {
-        // grab all keys from the objects of contentData and settingsData
-        var keys = contentData.Select(c => c?["key"])
-            .Union(settingsData.Select(s => s?["key"]))
-            .Select(keyToken => keyToken?.GetValue<string>().NullOrWhiteSpaceAsNull())
+        // recurse a JSON object to find all contained block editor layouts
+        static List<JsonObject> GetLayoutItemsRecursively(JsonObject jsonObject)
+        {
+            var layoutItems = new List<JsonObject>();
+            if (jsonObject.ContainsKey("key") && jsonObject.ContainsKey("contentKey"))
+            {
+                // assume it's a layout if it has "key" and "contentKey"
+                layoutItems.Add(jsonObject);
+            }
+
+            foreach (JsonNode property in jsonObject.Select(v => v.Value).WhereNotNull())
+            {
+                IEnumerable<JsonObject> childrenToRecurse = property is JsonObject jsonObjectChild
+                    ? [jsonObjectChild]
+                    : property is JsonArray jsonArrayChild
+                        ? jsonArrayChild.OfType<JsonObject>()
+                        : [];
+                layoutItems.AddRange(childrenToRecurse.SelectMany(GetLayoutItemsRecursively));
+            }
+
+            return layoutItems;
+        }
+
+        // grab keys applicable for replacement from all the layouts - that is:
+        // - the key of the layout itself ("key").
+        // - the key of the content item ("contentKey").
+        //   - ONLY for local content; do NOT replace content item keys for external content.
+        // - the key of the settings item ("settingsKey") if present.
+        List<JsonObject> layoutItems = GetLayoutItemsRecursively(layoutData);
+        var keys = layoutItems.SelectMany(layoutItem => new[]
+            {
+                layoutItem["key"]?.GetValue<string>(),
+                layoutItem["isExternalContent"]?.GetValue<bool>() is not true
+                    ? layoutItem["contentKey"]?.GetValue<string>()
+                    : null,
+                layoutItem["settingsKey"]?.GetValue<string>(),
+            })
+            .WhereNotNull()
             .ToArray();
 
         // the following is solely for avoiding functionality wise breakage. we should consider removing it eventually, but for the time being it's harmless.

src/Umbraco.Infrastructure/PropertyEditors/BlockEditorPropertyValueEditor.cs

@@ -127,7 +127,7 @@ public abstract class BlockEditorPropertyValueEditor<TValue, TLayout> : BlockVal
     }
 
     private static bool IsBlockEditorDataEmpty([NotNullWhen(false)] BlockEditorData<TValue, TLayout>? editorData)
-        => editorData is null || editorData.BlockValue.ContentData.Count == 0;
+        => editorData is null || editorData.BlockValue.Layout.Count == 0;
 
     // We don't throw on error here because we want to be able to parse what we can, even if some of the data is invalid. In cases where migrating
     // from nested content to blocks, we don't want to trigger a fatal error for retrieving references, as this isn't vital to the operation.

src/Umbraco.Infrastructure/PropertyEditors/BlockEditorValues.cs

@@ -63,13 +63,20 @@ public class BlockEditorValues<TValue, TLayout>
 
     private BlockEditorData<TValue, TLayout>? Clean(BlockEditorData<TValue, TLayout> blockEditorData)
     {
-        if (blockEditorData.BlockValue.ContentData.Count == 0)
+        if (blockEditorData.BlockValue.Layout.Count == 0)
         {
             // if there's no content ensure there's no settings too
             blockEditorData.BlockValue.SettingsData.Clear();
             return null;
         }
 
+        if (blockEditorData.BlockValue.ContentData.Count == 0
+            && blockEditorData.BlockValue.SettingsData.Count == 0)
+        {
+            // no local content or settings; the block editor must contain only global elements
+            return blockEditorData;
+        }
+
         var contentTypePropertyTypes = new Dictionary<string, Dictionary<string, IPropertyType>>();
 
         // filter out any content that isn't referenced in the layout references

src/Umbraco.Infrastructure/PropertyEditors/BlockGridPropertyEditor.cs

@@ -26,7 +26,7 @@ public class BlockGridPropertyEditor : BlockGridPropertyEditorBase
     public BlockGridPropertyEditor(
         IDataValueEditorFactory dataValueEditorFactory,
         IIOHelper ioHelper,
-        IBlockValuePropertyIndexValueFactory blockValuePropertyIndexValueFactory)
+        IBlockGridPropertyIndexValueFactory blockValuePropertyIndexValueFactory)
         : base(dataValueEditorFactory, blockValuePropertyIndexValueFactory)
         => _ioHelper = ioHelper;
 

src/Umbraco.Infrastructure/PropertyEditors/BlockGridPropertyEditorBase.cs

@@ -25,9 +25,9 @@ namespace Umbraco.Cms.Core.PropertyEditors;
 /// </summary>
 public abstract class BlockGridPropertyEditorBase : DataEditor, IValueSchemaProvider
 {
-    private readonly IBlockValuePropertyIndexValueFactory _blockValuePropertyIndexValueFactory;
+    private readonly IBlockGridPropertyIndexValueFactory _blockValuePropertyIndexValueFactory;
 
-    protected BlockGridPropertyEditorBase(IDataValueEditorFactory dataValueEditorFactory, IBlockValuePropertyIndexValueFactory blockValuePropertyIndexValueFactory)
+    protected BlockGridPropertyEditorBase(IDataValueEditorFactory dataValueEditorFactory, IBlockGridPropertyIndexValueFactory blockValuePropertyIndexValueFactory)
         : base(dataValueEditorFactory)
     {
         _blockValuePropertyIndexValueFactory = blockValuePropertyIndexValueFactory;

src/Umbraco.Infrastructure/PropertyEditors/BlockGridPropertyIndexValueFactory.cs

@@ -0,0 +1,23 @@
+using Microsoft.Extensions.Options;
+using Umbraco.Cms.Core.Configuration.Models;
+using Umbraco.Cms.Core.Models.Blocks;
+using Umbraco.Cms.Core.Serialization;
+using Umbraco.Cms.Core.Services;
+
+namespace Umbraco.Cms.Core.PropertyEditors;
+
+internal sealed class BlockGridPropertyIndexValueFactory
+    : BlockValuePropertyIndexValueFactoryBase<BlockGridValue>, IBlockGridPropertyIndexValueFactory
+{
+    public BlockGridPropertyIndexValueFactory(
+        PropertyEditorCollection propertyEditorCollection,
+        IElementService elementService,
+        IJsonSerializer jsonSerializer,
+        IOptionsMonitor<IndexingSettings> indexingSettings)
+        : base(propertyEditorCollection, elementService, jsonSerializer, indexingSettings)
+    {
+    }
+
+    protected override IEnumerable<RawDataItem> GetDataItems(BlockGridValue input, bool published)
+        => GetDataItems(input.GetLayouts() ?? [], input.ContentData, input.Expose, published);
+}

src/Umbraco.Infrastructure/PropertyEditors/BlockListPropertyEditor.cs

@@ -25,7 +25,7 @@ public class BlockListPropertyEditor : BlockListPropertyEditorBase
     public BlockListPropertyEditor(
         IDataValueEditorFactory dataValueEditorFactory,
         IIOHelper ioHelper,
-        IBlockValuePropertyIndexValueFactory blockValuePropertyIndexValueFactory,
+        IBlockListPropertyIndexValueFactory blockValuePropertyIndexValueFactory,
         IJsonSerializer jsonSerializer)
         : base(dataValueEditorFactory, blockValuePropertyIndexValueFactory, jsonSerializer)
         => _ioHelper = ioHelper;

src/Umbraco.Infrastructure/PropertyEditors/BlockListPropertyEditorBase.cs

@@ -21,13 +21,13 @@ namespace Umbraco.Cms.Core.PropertyEditors;
 /// </summary>
 public abstract class BlockListPropertyEditorBase : DataEditor, IValueSchemaProvider
 {
-    private readonly IBlockValuePropertyIndexValueFactory _blockValuePropertyIndexValueFactory;
+    private readonly IBlockListPropertyIndexValueFactory _blockValuePropertyIndexValueFactory;
     private readonly IJsonSerializer _jsonSerializer;
 
     /// <summary>
     /// Initializes a new instance of the <see cref="BlockListPropertyEditorBase"/> class.
     /// </summary>
-    protected BlockListPropertyEditorBase(IDataValueEditorFactory dataValueEditorFactory, IBlockValuePropertyIndexValueFactory blockValuePropertyIndexValueFactory, IJsonSerializer jsonSerializer)
+    protected BlockListPropertyEditorBase(IDataValueEditorFactory dataValueEditorFactory, IBlockListPropertyIndexValueFactory blockValuePropertyIndexValueFactory, IJsonSerializer jsonSerializer)
         : base(dataValueEditorFactory)
     {
         _blockValuePropertyIndexValueFactory = blockValuePropertyIndexValueFactory;

src/Umbraco.Infrastructure/PropertyEditors/BlockListPropertyIndexValueFactory.cs

@@ -0,0 +1,26 @@
+// Copyright (c) Umbraco.
+// See LICENSE for more details.
+
+using Microsoft.Extensions.Options;
+using Umbraco.Cms.Core.Configuration.Models;
+using Umbraco.Cms.Core.Models.Blocks;
+using Umbraco.Cms.Core.Serialization;
+using Umbraco.Cms.Core.Services;
+
+namespace Umbraco.Cms.Core.PropertyEditors;
+
+internal sealed class BlockListPropertyIndexValueFactory
+    : BlockValuePropertyIndexValueFactoryBase<BlockListValue>, IBlockListPropertyIndexValueFactory
+{
+    public BlockListPropertyIndexValueFactory(
+        PropertyEditorCollection propertyEditorCollection,
+        IElementService elementService,
+        IJsonSerializer jsonSerializer,
+        IOptionsMonitor<IndexingSettings> indexingSettings)
+        : base(propertyEditorCollection, elementService, jsonSerializer, indexingSettings)
+    {
+    }
+
+    protected override IEnumerable<RawDataItem> GetDataItems(BlockListValue input, bool published)
+        => GetDataItems(input.GetLayouts() ?? [], input.ContentData, input.Expose, published);
+}

src/Umbraco.Infrastructure/PropertyEditors/BlockValuePropertyIndexValueFactory.cs

@@ -1,45 +0,0 @@
-// Copyright (c) Umbraco.
-// See LICENSE for more details.
-
-using Microsoft.Extensions.Options;
-using Umbraco.Cms.Core.Configuration.Models;
-using Umbraco.Cms.Core.Models.Blocks;
-using Umbraco.Cms.Core.Serialization;
-
-namespace Umbraco.Cms.Core.PropertyEditors;
-
-internal sealed class BlockValuePropertyIndexValueFactory :
-    BlockValuePropertyIndexValueFactoryBase<BlockValuePropertyIndexValueFactory.IndexValueFactoryBlockValue>,
-    IBlockValuePropertyIndexValueFactory
-{
-    /// <summary>
-    /// Initializes a new instance of the <see cref="BlockValuePropertyIndexValueFactory"/> class.
-    /// </summary>
-    /// <param name="propertyEditorCollection">The <see cref="PropertyEditorCollection"/> containing available property editors.</param>
-    /// <param name="jsonSerializer">The <see cref="IJsonSerializer"/> used for serializing and deserializing JSON values.</param>
-    /// <param name="indexingSettings">The <see cref="IOptionsMonitor{IndexingSettings}"/> providing access to indexing configuration settings.</param>
-    public BlockValuePropertyIndexValueFactory(
-        PropertyEditorCollection propertyEditorCollection,
-        IJsonSerializer jsonSerializer,
-        IOptionsMonitor<IndexingSettings> indexingSettings)
-        : base(propertyEditorCollection, jsonSerializer, indexingSettings)
-    {
-    }
-
-    protected override IEnumerable<RawDataItem> GetDataItems(IndexValueFactoryBlockValue input, bool published)
-        => GetDataItems(input.ContentData, input.Expose, published);
-
-    // we only care about the content data when extracting values for indexing - not the layouts nor the settings
-    internal sealed class IndexValueFactoryBlockValue
-    {
-        /// <summary>
-        /// Gets or sets the list of content block item data.
-        /// </summary>
-        public List<BlockItemData> ContentData { get; set; } = new();
-
-        /// <summary>
-        /// Gets or sets the collection of <see cref="BlockItemVariation"/> instances that should be exposed by the index value factory.
-        /// </summary>
-        public List<BlockItemVariation> Expose { get; set; } = new();
-    }
-}

src/Umbraco.Infrastructure/PropertyEditors/BlockValuePropertyIndexValueFactoryBase.cs

@@ -4,6 +4,7 @@ using Umbraco.Cms.Core.Configuration.Models;
 using Umbraco.Cms.Core.Models;
 using Umbraco.Cms.Core.Models.Blocks;
 using Umbraco.Cms.Core.Serialization;
+using Umbraco.Cms.Core.Services;
 using Umbraco.Cms.Infrastructure.Examine;
 using Umbraco.Extensions;
 
@@ -12,16 +13,22 @@ namespace Umbraco.Cms.Core.PropertyEditors;
 internal abstract class BlockValuePropertyIndexValueFactoryBase<TSerialized> : JsonPropertyIndexValueFactoryBase<TSerialized>
 {
     private readonly PropertyEditorCollection _propertyEditorCollection;
+    private readonly IElementService _elementService;
+    private readonly IOptionsMonitor<IndexingSettings> _indexingSettings;
 
     protected BlockValuePropertyIndexValueFactoryBase(
         PropertyEditorCollection propertyEditorCollection,
+        IElementService elementService,
         IJsonSerializer jsonSerializer,
         IOptionsMonitor<IndexingSettings> indexingSettings)
         : base(jsonSerializer, indexingSettings)
     {
         _propertyEditorCollection = propertyEditorCollection;
+        _elementService = elementService;
+        _indexingSettings = indexingSettings;
     }
 
+    /// <inheritdoc/>
     protected override IEnumerable<IndexValue> Handle(
         TSerialized deserializedPropertyValue,
         IProperty property,
@@ -104,18 +111,46 @@ internal abstract class BlockValuePropertyIndexValueFactoryBase<TSerialized> : J
     protected abstract IEnumerable<RawDataItem> GetDataItems(TSerialized input, bool published);
 
     /// <summary>
-    /// Unwraps block item data as data items.
+    /// Unwraps block item data as data items, in layout order.
     /// </summary>
-    protected IEnumerable<RawDataItem> GetDataItems(IList<BlockItemData> contentData, IList<BlockItemVariation> expose, bool published)
+    protected IEnumerable<RawDataItem> GetDataItems(IEnumerable<IBlockLayoutItem> layouts, IList<BlockItemData> contentData, IList<BlockItemVariation> expose, bool published)
     {
-        if (published is false)
-        {
-            return contentData.Select(ToRawData);
-        }
+        IBlockLayoutItem[] layoutsAsArray = layouts as IBlockLayoutItem[] ?? layouts.ToArray();
 
-        var indexData = new List<RawDataItem>();
-        foreach (BlockItemData blockItemData in contentData)
+        // NOTE: While the Grid areas are modeled to contain areas within areas, in reality it cannot be configured as
+        //       such, so this "top-level aggregation" of layout items works in effect.
+        IBlockLayoutItem[] allLayouts = layoutsAsArray
+            .Union(layoutsAsArray.SelectMany(l => l.GetContainedLayouts()))
+            .ToArray();
+
+        var contentDataByKey = contentData.ToDictionary(d => d.Key);
+
+        Dictionary<Guid, RawDataItem>? externalDataByKey = _indexingSettings.CurrentValue.IndexExternalElements
+            ? GetExternalElementDataItems(allLayouts, published)
+            : null;
+        foreach (IBlockLayoutItem layout in allLayouts)
         {
+            if (layout.IsExternalContent)
+            {
+                if (externalDataByKey?.TryGetValue(layout.ContentKey, out RawDataItem? elementData) == true)
+                {
+                    yield return elementData;
+                }
+
+                continue;
+            }
+
+            if (!contentDataByKey.TryGetValue(layout.ContentKey, out BlockItemData? blockItemData))
+            {
+                continue;
+            }
+
+            if (published is false)
+            {
+                yield return ToRawData(blockItemData);
+                continue;
+            }
+
             var exposedCultures = expose
                 .Where(e => e.ContentKey == blockItemData.Key)
                 .Select(e => e.Culture)
@@ -129,17 +164,39 @@ internal abstract class BlockValuePropertyIndexValueFactoryBase<TSerialized> : J
             if (exposedCultures.Contains(null)
                 || exposedCultures.ContainsAll(blockItemData.Values.Select(v => v.Culture)))
             {
-                indexData.Add(ToRawData(blockItemData));
+                yield return ToRawData(blockItemData);
                 continue;
             }
 
-            indexData.Add(
-                ToRawData(
-                    blockItemData.ContentTypeKey,
-                    blockItemData.Values.Where(value => value.Culture is null || exposedCultures.Contains(value.Culture))));
+            yield return ToRawData(
+                blockItemData.ContentTypeKey,
+                blockItemData.Values.Where(value => value.Culture is null || exposedCultures.Contains(value.Culture)));
         }
+    }
 
-        return indexData;
+    private Dictionary<Guid, RawDataItem> GetExternalElementDataItems(IBlockLayoutItem[] allLayouts, bool published)
+    {
+        Guid[] externalKeys = allLayouts.Where(l => l.IsExternalContent).Select(l => l.ContentKey).ToArray();
+        return _elementService.GetByIds(externalKeys)
+            .ToDictionary(
+                element => element.Key,
+                element => new RawDataItem
+                {
+                    ContentTypeKey = element.ContentType.Key,
+                    Properties = element
+                        .Properties
+                        .SelectMany(property => property
+                            .Values
+                            .Select(value => new RawPropertyData
+                            {
+                                Alias = property.Alias,
+                                Culture = value.Culture,
+                                Value = published
+                                    ? value.PublishedValue
+                                    : value.EditedValue,
+                            }))
+                        .ToArray(),
+                });
     }
 
     /// <summary>

src/Umbraco.Infrastructure/PropertyEditors/BlockValuePropertyValueEditorBase.cs

@@ -1,3 +1,4 @@
+using Umbraco.Cms.Core;
 using Umbraco.Cms.Core.Cache;
 using Umbraco.Cms.Core.IO;
 using Umbraco.Cms.Core.Models;
@@ -23,7 +24,6 @@ public abstract class BlockValuePropertyValueEditorBase<TValue, TLayout> : DataV
     private readonly IJsonSerializer _jsonSerializer;
     private readonly DataValueReferenceFactoryCollection _dataValueReferenceFactoryCollection;
     private readonly BlockEditorVarianceHandler _blockEditorVarianceHandler;
-    private BlockEditorValues<TValue, TLayout>? _blockEditorValues;
     private readonly ILanguageService _languageService;
 
     protected BlockValuePropertyValueEditorBase(
@@ -46,15 +46,15 @@ public abstract class BlockValuePropertyValueEditorBase<TValue, TLayout> : DataV
         _languageService = languageService;
     }
 
-              /// <summary>
-              /// Caches referenced entities for all property values with supporting property editors within the specified block editor data
-              /// optimising subsequent retrieval of entities when parsing and converting property values.
-              /// </summary>
-              /// <remarks>
-              /// This method iterates through all property values associated with data editors in the provided
-              /// block editor data and invokes caching for referenced entities where supported by the property editor.
-              /// </remarks>
-              /// <param name="blockEditorData">The block editor data containing content and settings property values to analyze for referenced entities.</param>
+    /// <summary>
+    /// Caches referenced entities for all property values with supporting property editors within the specified block editor data
+    /// optimising subsequent retrieval of entities when parsing and converting property values.
+    /// </summary>
+    /// <remarks>
+    /// This method iterates through all property values associated with data editors in the provided
+    /// block editor data and invokes caching for referenced entities where supported by the property editor.
+    /// </remarks>
+    /// <param name="blockEditorData">The block editor data containing content and settings property values to analyze for referenced entities.</param>
     [Obsolete("This method is available for support of request caching retrieved entities in derived property value editors. " +
               "The intention is to supersede this with lazy loaded read locks, which will make this unnecessary. " +
               "Scheduled for removal in Umbraco 19.")]
@@ -92,8 +92,8 @@ public abstract class BlockValuePropertyValueEditorBase<TValue, TLayout> : DataV
 
     protected BlockEditorValues<TValue, TLayout> BlockEditorValues
     {
-        get => _blockEditorValues ?? throw new NullReferenceException($"The property {nameof(BlockEditorValues)} must be initialized at value editor construction");
-        set => _blockEditorValues = value;
+        get => field ?? throw new NullReferenceException($"The property {nameof(BlockEditorValues)} must be initialized at value editor construction");
+        set;
     }
 
     protected IEnumerable<UmbracoEntityReference> GetBlockValueReferences(TValue blockValue)
@@ -131,6 +131,16 @@ public abstract class BlockValuePropertyValueEditorBase<TValue, TLayout> : DataV
             }
         }
 
+        IEnumerable<IBlockLayoutItem> allExternalLayoutItems = blockValue.Layout.Values
+            .SelectMany(layouts => layouts)
+            .Union(blockValue.Layout.Values.SelectMany(layouts => layouts.SelectMany(l => l.GetContainedLayouts())))
+            .Where(l => l.IsExternalContent);
+
+        foreach (IBlockLayoutItem layout in allExternalLayoutItems)
+        {
+            result.Add(new UmbracoEntityReference(new GuidUdi(Constants.UdiEntityType.Element, layout.ContentKey)));
+        }
+
         return result;
     }
 
@@ -225,10 +235,7 @@ public abstract class BlockValuePropertyValueEditorBase<TValue, TLayout> : DataV
                 var newValue = valueEditor.FromEditor(propertyData, currentValue?.Value);
 
                 // Update the raw value since this is what will get serialized out.
-                if (editedValue != null)
-                {
-                    editedValue.Value = newValue;
-                }
+                editedValue?.Value = newValue;
             }
         }
     }
@@ -287,11 +294,29 @@ public abstract class BlockValuePropertyValueEditorBase<TValue, TLayout> : DataV
 
     protected void MapBlockValueToEditor(IProperty property, TValue blockValue, string? culture, string? segment)
     {
+        EnsureLayoutItemKeys(blockValue);
+
         MapBlockItemDataToEditor(property, blockValue.ContentData, culture, segment);
         MapBlockItemDataToEditor(property, blockValue.SettingsData, culture, segment);
         _blockEditorVarianceHandler.AlignExposeVariance(blockValue);
     }
 
+    // Ensures that all layout items have a key (for backwards data format compatibility).
+    private static void EnsureLayoutItemKeys(TValue blockValue)
+    {
+        if (!blockValue.Layout.TryGetValue(blockValue.PropertyEditorAlias, out IEnumerable<IBlockLayoutItem>? layout))
+        {
+            return;
+        }
+
+        // All layout items with an empty key will be assigned the content key of the layout item.
+        // This ensures data consistency across multiple sessions.
+        foreach (IBlockLayoutItem layoutItem in layout.Where(layoutItem => layoutItem.Key == Guid.Empty))
+        {
+            layoutItem.Key = layoutItem.ContentKey;
+        }
+    }
+
     protected IEnumerable<Guid> ConfiguredElementTypeKeys(IBlockConfiguration configuration)
     {
         yield return configuration.ContentElementTypeKey;
@@ -315,11 +340,7 @@ public abstract class BlockValuePropertyValueEditorBase<TValue, TLayout> : DataV
             item.Values = _blockEditorVarianceHandler.AlignPropertyVarianceAsync(item.Values, culture).GetAwaiter().GetResult();
             foreach (BlockPropertyValue blockPropertyValue in item.Values)
             {
-                IPropertyType? propertyType = blockPropertyValue.PropertyType;
-                if (propertyType is null)
-                {
-                    throw new ArgumentException("One or more block properties did not have a resolved property type. Block editor values must be resolved before attempting to map them to editor.", nameof(items));
-                }
+                IPropertyType? propertyType = blockPropertyValue.PropertyType ?? throw new ArgumentException("One or more block properties did not have a resolved property type. Block editor values must be resolved before attempting to map them to editor.", nameof(items));
 
                 IDataEditor? propertyEditor = _propertyEditors[propertyType.PropertyEditorAlias];
                 if (propertyEditor is null)
@@ -404,7 +425,7 @@ public abstract class BlockValuePropertyValueEditorBase<TValue, TLayout> : DataV
         bool canUpdateInvariantData,
         HashSet<string> allowedCultures)
     {
-        var mergedInvariant = UpdateSourceInvariantData(source, target, canUpdateInvariantData);
+        BlockEditorData<TValue, TLayout>? mergedInvariant = UpdateSourceInvariantData(source, target, canUpdateInvariantData);
 
         // if the structure (invariant) is not defined after merger, the target content does not matter
         if (mergedInvariant?.Layout is null)
@@ -414,10 +435,7 @@ public abstract class BlockValuePropertyValueEditorBase<TValue, TLayout> : DataV
 
         // since we merged the invariant data (layout) before we get to this point
         // we just need an empty valid object to run comparisons at this point
-        if (source is null)
-        {
-            source = new BlockEditorData<TValue, TLayout>([], new TValue());
-        }
+        source ??= new BlockEditorData<TValue, TLayout>([], new TValue());
 
         // update the target with the merged invariant
         target!.BlockValue.Layout = mergedInvariant.BlockValue.Layout;

src/Umbraco.Infrastructure/PropertyEditors/RichTextPropertyIndexValueFactory.cs

@@ -2,7 +2,9 @@ using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Options;
 using Umbraco.Cms.Core.Configuration.Models;
 using Umbraco.Cms.Core.Models;
+using Umbraco.Cms.Core.Models.Blocks;
 using Umbraco.Cms.Core.Serialization;
+using Umbraco.Cms.Core.Services;
 using Umbraco.Cms.Infrastructure.Examine;
 using Umbraco.Extensions;
 
@@ -19,14 +21,16 @@ internal sealed class RichTextPropertyIndexValueFactory : BlockValuePropertyInde
     /// </summary>
     /// <param name="propertyEditorCollection">A collection containing all available property editors.</param>
     /// <param name="jsonSerializer">The serializer used for handling JSON data.</param>
+    /// <param name="elementService">Service for accessing elements.</param>
     /// <param name="indexingSettings">The monitor providing current indexing settings.</param>
     /// <param name="logger">The logger used for logging diagnostic information.</param>
     public RichTextPropertyIndexValueFactory(
         PropertyEditorCollection propertyEditorCollection,
+        IElementService elementService,
         IJsonSerializer jsonSerializer,
         IOptionsMonitor<IndexingSettings> indexingSettings,
         ILogger<RichTextPropertyIndexValueFactory> logger)
-        : base(propertyEditorCollection, jsonSerializer, indexingSettings)
+        : base(propertyEditorCollection, elementService, jsonSerializer, indexingSettings)
     {
         _jsonSerializer = jsonSerializer;
         _logger = logger;
@@ -156,7 +160,7 @@ internal sealed class RichTextPropertyIndexValueFactory : BlockValuePropertyInde
     }
 
     protected override IEnumerable<RawDataItem> GetDataItems(RichTextEditorValue input, bool published)
-        => GetDataItems(input.Blocks?.ContentData ?? [], input.Blocks?.Expose ?? [], published);
+        => GetDataItems(input.Blocks?.GetLayouts() ?? [], input.Blocks?.ContentData ?? [], input.Blocks?.Expose ?? [], published);
 
     /// <summary>
     /// Strips HTML tags from content, replacing them with spaces to preserve word boundaries for indexing.

src/Umbraco.Infrastructure/PropertyEditors/SingleBlockPropertyEditor.cs

@@ -27,7 +27,7 @@ public class SingleBlockPropertyEditor : DataEditor
 {
     private readonly IJsonSerializer _jsonSerializer;
     private readonly IIOHelper _ioHelper;
-    private readonly IBlockValuePropertyIndexValueFactory _blockValuePropertyIndexValueFactory;
+    private readonly ISingleBlockPropertyIndexValueFactory _blockValuePropertyIndexValueFactory;
 
     /// <summary>
     /// Initializes a new instance of the <see cref="SingleBlockPropertyEditor"/> class.
@@ -40,7 +40,7 @@ public class SingleBlockPropertyEditor : DataEditor
         IDataValueEditorFactory dataValueEditorFactory,
         IJsonSerializer jsonSerializer,
         IIOHelper ioHelper,
-        IBlockValuePropertyIndexValueFactory blockValuePropertyIndexValueFactory)
+        ISingleBlockPropertyIndexValueFactory blockValuePropertyIndexValueFactory)
         : base(dataValueEditorFactory)
     {
         _jsonSerializer = jsonSerializer;

src/Umbraco.Infrastructure/PropertyEditors/SingleBlockPropertyIndexValueFactory.cs

@@ -0,0 +1,26 @@
+// Copyright (c) Umbraco.
+// See LICENSE for more details.
+
+using Microsoft.Extensions.Options;
+using Umbraco.Cms.Core.Configuration.Models;
+using Umbraco.Cms.Core.Models.Blocks;
+using Umbraco.Cms.Core.Serialization;
+using Umbraco.Cms.Core.Services;
+
+namespace Umbraco.Cms.Core.PropertyEditors;
+
+internal sealed class SingleBlockPropertyIndexValueFactory
+    : BlockValuePropertyIndexValueFactoryBase<SingleBlockValue>, ISingleBlockPropertyIndexValueFactory
+{
+    public SingleBlockPropertyIndexValueFactory(
+        PropertyEditorCollection propertyEditorCollection,
+        IElementService elementService,
+        IJsonSerializer jsonSerializer,
+        IOptionsMonitor<IndexingSettings> indexingSettings)
+        : base(propertyEditorCollection, elementService, jsonSerializer, indexingSettings)
+    {
+    }
+
+    protected override IEnumerable<RawDataItem> GetDataItems(SingleBlockValue input, bool published)
+        => GetDataItems(input.GetLayouts() ?? [], input.ContentData, input.Expose, published);
+}

src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/BlockEditorConverter.cs

@@ -94,7 +94,7 @@ public sealed class BlockEditorConverter
             Key = data.Key,
         };
 
-        return _blockElementService.BuildElementAsync(alignedData, preview).GetAwaiter().GetResult();
+        return _blockElementService.BuildElementAsync(owner, alignedData, preview).GetAwaiter().GetResult();
     }
 
     /// <summary>

src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/BlockGridPropertyValueConverter.cs

@@ -9,6 +9,7 @@ using Umbraco.Cms.Core.Models.Blocks;
 using Umbraco.Cms.Core.Models.DeliveryApi;
 using Umbraco.Cms.Core.Models.PublishedContent;
 using Umbraco.Cms.Core.PropertyEditors.DeliveryApi;
+using Umbraco.Cms.Core.PublishedCache;
 using Umbraco.Cms.Core.Serialization;
 using Umbraco.Cms.Core.Services;
 using Umbraco.Extensions;
@@ -30,10 +31,21 @@ namespace Umbraco.Cms.Core.PropertyEditors.ValueConverters
         private readonly BlockEditorVarianceHandler _blockEditorVarianceHandler;
         private readonly ILanguageService _languageService;
         private readonly IPropertyRenderingContextAccessor _propertyRenderingContextAccessor;
+        private readonly IElementCacheService _elementCacheService;
 
         /// <summary>
         /// Initializes a new instance of the <see cref="BlockGridPropertyValueConverter"/> class.
         /// </summary>
+        /// <param name="proflog">The logger used for profiling and diagnostics.</param>
+        /// <param name="blockConverter">The converter responsible for handling block editor values.</param>
+        /// <param name="jsonSerializer">The serializer used for JSON serialization and deserialization.</param>
+        /// <param name="apiElementBuilder">The builder for creating API elements from block data.</param>
+        /// <param name="constructorCache">The cache for block grid property value constructors.</param>
+        /// <param name="variationContextAccessor">Provides access to the current variation context.</param>
+        /// <param name="blockEditorVarianceHandler">Handles variance logic for block editors.</param>
+        /// <param name="languageService">Service for accessing all languages.</param>
+        /// <param name="propertyRenderingContextAccessor">Provides access to the current rendering context.</param>
+        /// <param name="elementCacheService">The cache for elements.</param>
         public BlockGridPropertyValueConverter(
             IProfilingLogger proflog,
             BlockEditorConverter blockConverter,
@@ -43,7 +55,8 @@ namespace Umbraco.Cms.Core.PropertyEditors.ValueConverters
             IVariationContextAccessor variationContextAccessor,
             BlockEditorVarianceHandler blockEditorVarianceHandler,
             ILanguageService languageService,
-            IPropertyRenderingContextAccessor propertyRenderingContextAccessor)
+            IPropertyRenderingContextAccessor propertyRenderingContextAccessor,
+            IElementCacheService elementCacheService)
         {
             _proflog = proflog;
             _blockConverter = blockConverter;
@@ -54,10 +67,11 @@ namespace Umbraco.Cms.Core.PropertyEditors.ValueConverters
             _blockEditorVarianceHandler = blockEditorVarianceHandler;
             _languageService = languageService;
             _propertyRenderingContextAccessor = propertyRenderingContextAccessor;
+            _elementCacheService = elementCacheService;
         }
 
         /// <inheritdoc cref="BlockGridPropertyValueConverter(IProfilingLogger, BlockEditorConverter, IJsonSerializer, IApiElementBuilder, BlockGridPropertyValueConstructorCache, IVariationContextAccessor, BlockEditorVarianceHandler, ILanguageService, IPropertyRenderingContextAccessor)"/>
-        [Obsolete("Please use the constructor with all parameters. Scheduled for removal in Umbraco 19.")]
+        [Obsolete("Please use the constructor with all parameters. Scheduled for removal in Umbraco 20.")]
         public BlockGridPropertyValueConverter(
             IProfilingLogger proflog,
             BlockEditorConverter blockConverter,
@@ -70,6 +84,31 @@ namespace Umbraco.Cms.Core.PropertyEditors.ValueConverters
         {
         }
 
+        [Obsolete("Please use the non-obsolete constructor. Scheduled for removal in V20.")]
+        public BlockGridPropertyValueConverter(
+            IProfilingLogger proflog,
+            BlockEditorConverter blockConverter,
+            IJsonSerializer jsonSerializer,
+            IApiElementBuilder apiElementBuilder,
+            BlockGridPropertyValueConstructorCache constructorCache,
+            IVariationContextAccessor variationContextAccessor,
+            BlockEditorVarianceHandler blockEditorVarianceHandler,
+            ILanguageService languageService,
+            IPropertyRenderingContextAccessor propertyRenderingContextAccessor)
+            : this(
+                proflog,
+                blockConverter,
+                jsonSerializer,
+                apiElementBuilder,
+                constructorCache,
+                variationContextAccessor,
+                blockEditorVarianceHandler,
+                languageService,
+                propertyRenderingContextAccessor,
+                StaticServiceProvider.Instance.GetRequiredService<IElementCacheService>())
+        {
+        }
+
         /// <inheritdoc />
         public override bool IsConverter(IPublishedPropertyType propertyType)
             => propertyType.EditorAlias.InvariantEquals(Constants.PropertyEditors.Aliases.BlockGrid);
@@ -80,7 +119,7 @@ namespace Umbraco.Cms.Core.PropertyEditors.ValueConverters
 
         /// <inheritdoc />
         public override PropertyCacheLevel GetPropertyCacheLevel(IPublishedPropertyType propertyType)
-            => PropertyCacheLevel.Element;
+            => PropertyCacheLevel.Elements;
 
         /// <inheritdoc />
         public override object? ConvertIntermediateToObject(IPublishedElement owner, IPublishedPropertyType propertyType, PropertyCacheLevel referenceCacheLevel, object? inter, bool preview)
@@ -155,7 +194,7 @@ namespace Umbraco.Cms.Core.PropertyEditors.ValueConverters
                     return null;
                 }
 
-                var creator = new BlockGridPropertyValueCreator(_blockConverter, _variationContextAccessor, _propertyRenderingContextAccessor, _blockEditorVarianceHandler, _jsonSerializer, _constructorCache, _languageService);
+                var creator = new BlockGridPropertyValueCreator(_blockConverter, _variationContextAccessor, _propertyRenderingContextAccessor, _blockEditorVarianceHandler, _elementCacheService, _jsonSerializer, _constructorCache, _languageService);
                 return creator.CreateBlockModelAsync(owner, referenceCacheLevel, intermediateBlockModelValue, preview, configuration.Blocks, configuration.GridColumns).GetAwaiter().GetResult();
             }
         }

src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/BlockGridPropertyValueCreator.cs

@@ -1,5 +1,6 @@
 using Umbraco.Cms.Core.Models.Blocks;
 using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
 using Umbraco.Cms.Core.Serialization;
 using Umbraco.Cms.Core.Services;
 using Umbraco.Extensions;
@@ -16,19 +17,22 @@ internal sealed class BlockGridPropertyValueCreator : BlockPropertyValueCreatorB
     /// </summary>
     /// <param name="blockEditorConverter">The service used to convert block editor data into strongly typed objects.</param>
     /// <param name="variationContextAccessor">Provides access to the current variation context for content.</param>
+    /// <param name="propertyRenderingContextAccessor">Provides access to the current rendering context.</param>
     /// <param name="blockEditorVarianceHandler">Handles variance logic for block editors, such as culture or segment variations.</param>
     /// <param name="jsonSerializer">The serializer used to handle JSON data for block grid properties.</param>
     /// <param name="constructorCache">A cache for constructors used when creating block grid property values, improving performance.</param>
     /// <param name="languageService">Service used to retrieve language information for fallback resolution.</param>
+    /// <param name="elementCacheService">The cache for elements.</param>
     public BlockGridPropertyValueCreator(
         BlockEditorConverter blockEditorConverter,
         IVariationContextAccessor variationContextAccessor,
         IPropertyRenderingContextAccessor propertyRenderingContextAccessor,
         BlockEditorVarianceHandler blockEditorVarianceHandler,
+        IElementCacheService elementCacheService,
         IJsonSerializer jsonSerializer,
         BlockGridPropertyValueConstructorCache constructorCache,
         ILanguageService languageService)
-        : base(blockEditorConverter, variationContextAccessor, propertyRenderingContextAccessor, blockEditorVarianceHandler, languageService)
+        : base(blockEditorConverter, variationContextAccessor, propertyRenderingContextAccessor, blockEditorVarianceHandler, languageService, elementCacheService)
     {
         _jsonSerializer = jsonSerializer;
         _constructorCache = constructorCache;

src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/BlockListPropertyValueConverter.cs

@@ -10,6 +10,7 @@ using Umbraco.Cms.Core.Models.Blocks;
 using Umbraco.Cms.Core.Models.DeliveryApi;
 using Umbraco.Cms.Core.Models.PublishedContent;
 using Umbraco.Cms.Core.PropertyEditors.DeliveryApi;
+using Umbraco.Cms.Core.PublishedCache;
 using Umbraco.Cms.Core.Serialization;
 using Umbraco.Cms.Core.Services;
 using Umbraco.Cms.Infrastructure.Extensions;
@@ -34,6 +35,7 @@ public class BlockListPropertyValueConverter : PropertyValueConverterBase, IDeli
     private readonly BlockEditorVarianceHandler _blockEditorVarianceHandler;
     private readonly ILanguageService _languageService;
     private readonly IPropertyRenderingContextAccessor _propertyRenderingContextAccessor;
+    private readonly IElementCacheService _elementCacheService;
 
     /// <summary>
     /// Initializes a new instance of the <see cref="BlockListPropertyValueConverter"/> class.
@@ -48,6 +50,7 @@ public class BlockListPropertyValueConverter : PropertyValueConverterBase, IDeli
     /// <param name="blockEditorVarianceHandler">Handles variance for block editors.</param>
     /// <param name="languageService">Service used to retrieve language information for fallback resolution.</param>
     /// <param name="propertyRenderingContextAccessor">Accessor for the current property rendering context.</param>
+    /// <param name="elementCacheService">The cache for elements.</param>
     public BlockListPropertyValueConverter(
         IProfilingLogger proflog,
         BlockEditorConverter blockConverter,
@@ -58,7 +61,8 @@ public class BlockListPropertyValueConverter : PropertyValueConverterBase, IDeli
         IVariationContextAccessor variationContextAccessor,
         BlockEditorVarianceHandler blockEditorVarianceHandler,
         ILanguageService languageService,
-        IPropertyRenderingContextAccessor propertyRenderingContextAccessor)
+        IPropertyRenderingContextAccessor propertyRenderingContextAccessor,
+        IElementCacheService elementCacheService)
     {
         _proflog = proflog;
         _blockConverter = blockConverter;
@@ -70,6 +74,7 @@ public class BlockListPropertyValueConverter : PropertyValueConverterBase, IDeli
         _blockEditorVarianceHandler = blockEditorVarianceHandler;
         _languageService = languageService;
         _propertyRenderingContextAccessor = propertyRenderingContextAccessor;
+        _elementCacheService = elementCacheService;
     }
 
     /// <inheritdoc cref="BlockListPropertyValueConverter(IProfilingLogger, BlockEditorConverter, IContentTypeService, IApiElementBuilder, IJsonSerializer, BlockListPropertyValueConstructorCache, IVariationContextAccessor, BlockEditorVarianceHandler, ILanguageService, IPropertyRenderingContextAccessor)"/>
@@ -87,6 +92,33 @@ public class BlockListPropertyValueConverter : PropertyValueConverterBase, IDeli
     {
     }
 
+    [Obsolete("Please use the non-obsolete constructor. Scheduled for removal in V20.")]
+    public BlockListPropertyValueConverter(
+        IProfilingLogger proflog,
+        BlockEditorConverter blockConverter,
+        IContentTypeService contentTypeService,
+        IApiElementBuilder apiElementBuilder,
+        IJsonSerializer jsonSerializer,
+        BlockListPropertyValueConstructorCache constructorCache,
+        IVariationContextAccessor variationContextAccessor,
+        BlockEditorVarianceHandler blockEditorVarianceHandler,
+        ILanguageService languageService,
+        IPropertyRenderingContextAccessor propertyRenderingContextAccessor)
+        : this(
+            proflog,
+            blockConverter,
+            contentTypeService,
+            apiElementBuilder,
+            jsonSerializer,
+            constructorCache,
+            variationContextAccessor,
+            blockEditorVarianceHandler,
+            languageService,
+            propertyRenderingContextAccessor,
+            StaticServiceProvider.Instance.GetRequiredService<IElementCacheService>())
+    {
+    }
+
     /// <inheritdoc />
     public override bool IsConverter(IPublishedPropertyType propertyType)
         => propertyType.EditorAlias.InvariantEquals(Constants.PropertyEditors.Aliases.BlockList);
@@ -128,7 +160,7 @@ public class BlockListPropertyValueConverter : PropertyValueConverterBase, IDeli
 
     /// <inheritdoc />
     public override PropertyCacheLevel GetPropertyCacheLevel(IPublishedPropertyType propertyType)
-        => PropertyCacheLevel.Element;
+        => PropertyCacheLevel.Elements;
 
     /// <inheritdoc />
     public override object? ConvertSourceToIntermediate(IPublishedElement owner, IPublishedPropertyType propertyType, object? source, bool preview)
@@ -196,7 +228,7 @@ public class BlockListPropertyValueConverter : PropertyValueConverterBase, IDeli
                 return null;
             }
 
-            var creator = new BlockListPropertyValueCreator(_blockConverter, _variationContextAccessor, _propertyRenderingContextAccessor, _blockEditorVarianceHandler, _jsonSerializer, _constructorCache, _languageService);
+            var creator = new BlockListPropertyValueCreator(_blockConverter, _variationContextAccessor, _propertyRenderingContextAccessor, _blockEditorVarianceHandler, _elementCacheService, _jsonSerializer, _constructorCache, _languageService);
             return creator.CreateBlockModelAsync(owner, referenceCacheLevel, intermediateBlockModelValue, preview, configuration.Blocks).GetAwaiter().GetResult();
         }
     }

src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/BlockListPropertyValueCreator.cs

@@ -1,5 +1,6 @@
 using Umbraco.Cms.Core.Models.Blocks;
 using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
 using Umbraco.Cms.Core.Serialization;
 using Umbraco.Cms.Core.Services;
 
@@ -15,19 +16,22 @@ internal sealed class BlockListPropertyValueCreator : BlockPropertyValueCreatorB
     /// </summary>
     /// <param name="blockEditorConverter">The service used to convert block editor data into strongly typed objects.</param>
     /// <param name="variationContextAccessor">Provides access to the current variation context, used for handling content variations.</param>
+    /// <param name="propertyRenderingContextAccessor">Provides access to the current rendering context.</param>
     /// <param name="blockEditorVarianceHandler">Handles variance logic for block editors, determining how values vary by culture or segment.</param>
     /// <param name="jsonSerializer">The serializer used for serializing and deserializing JSON data related to block list properties.</param>
     /// <param name="constructorCache">A cache that stores constructors for block list property values to improve performance.</param>
     /// <param name="languageService">Service used to retrieve language information for fallback resolution.</param>
+    /// <param name="elementCacheService">The cache for elements.</param>
     public BlockListPropertyValueCreator(
         BlockEditorConverter blockEditorConverter,
         IVariationContextAccessor variationContextAccessor,
         IPropertyRenderingContextAccessor propertyRenderingContextAccessor,
         BlockEditorVarianceHandler blockEditorVarianceHandler,
+        IElementCacheService elementCacheService,
         IJsonSerializer jsonSerializer,
         BlockListPropertyValueConstructorCache constructorCache,
         ILanguageService languageService)
-        : base(blockEditorConverter, variationContextAccessor, propertyRenderingContextAccessor, blockEditorVarianceHandler, languageService)
+        : base(blockEditorConverter, variationContextAccessor, propertyRenderingContextAccessor, blockEditorVarianceHandler, languageService, elementCacheService)
     {
         _jsonSerializer = jsonSerializer;
         _constructorCache = constructorCache;

src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/BlockPropertyValueCreatorBase.cs

@@ -6,6 +6,7 @@ using Umbraco.Cms.Core.Models;
 using Umbraco.Cms.Core.Models.Blocks;
 using Umbraco.Cms.Core.Models.PublishedContent;
 using Umbraco.Cms.Core.Services;
+using Umbraco.Cms.Core.PublishedCache;
 using Umbraco.Extensions;
 
 namespace Umbraco.Cms.Core.PropertyEditors.ValueConverters;
@@ -21,6 +22,7 @@ internal abstract class BlockPropertyValueCreatorBase<TBlockModel, TBlockItemMod
     private readonly IPropertyRenderingContextAccessor _propertyRenderingContextAccessor;
     private readonly BlockEditorVarianceHandler _blockEditorVarianceHandler;
     private readonly ILanguageService _languageService;
+    private readonly IElementCacheService _elementCacheService;
 
     /// <summary>
     /// Creates a specific data converter for the block property implementation.
@@ -64,13 +66,14 @@ internal abstract class BlockPropertyValueCreatorBase<TBlockModel, TBlockItemMod
     /// <returns></returns>
     protected delegate TBlockItemModel? EnrichBlockItemModelFromConfiguration(TBlockItemModel item, TBlockLayoutItem layoutItem, TBlockConfiguration configuration, CreateBlockItemModelFromLayout blockItemModelCreator);
 
-    protected BlockPropertyValueCreatorBase(BlockEditorConverter blockEditorConverter, IVariationContextAccessor variationContextAccessor, IPropertyRenderingContextAccessor propertyRenderingContextAccessor, BlockEditorVarianceHandler blockEditorVarianceHandler, ILanguageService languageService)
+    protected BlockPropertyValueCreatorBase(BlockEditorConverter blockEditorConverter, IVariationContextAccessor variationContextAccessor, IPropertyRenderingContextAccessor propertyRenderingContextAccessor, BlockEditorVarianceHandler blockEditorVarianceHandler, ILanguageService languageService, IElementCacheService elementCacheService)
     {
         BlockEditorConverter = blockEditorConverter;
         _variationContextAccessor = variationContextAccessor;
         _propertyRenderingContextAccessor = propertyRenderingContextAccessor;
         _blockEditorVarianceHandler = blockEditorVarianceHandler;
         _languageService = languageService;
+        _elementCacheService = elementCacheService;
     }
 
     protected BlockEditorConverter BlockEditorConverter { get; }
@@ -121,17 +124,14 @@ internal abstract class BlockPropertyValueCreatorBase<TBlockModel, TBlockItemMod
         CreateBlockModelFromItems createModelFromItems,
         EnrichBlockItemModelFromConfiguration? enrichBlockItem = null)
     {
-        if (converted.BlockValue.ContentData.Count == 0)
+        if (converted.Layout is null || converted.Layout.Any() is false)
         {
             return createEmptyModel();
         }
 
-        if (converted.Layout is null)
-        {
-            return createEmptyModel();
-        }
-
-        var blockConfigMap = blockConfigurations.ToDictionary(bc => bc.ContentElementTypeKey);
+        TBlockConfiguration[] blockConfigurationsAsArray = blockConfigurations as TBlockConfiguration[] ?? blockConfigurations.ToArray();
+        var blockConfigMap = blockConfigurationsAsArray.ToDictionary(bc => bc.ContentElementTypeKey);
+        var blockContentDataMap = converted.BlockValue.ContentData.ToDictionary(b => b.Key);
         VariationContext variationContext = _variationContextAccessor.VariationContext ?? new VariationContext();
         var languagesByIsoCode = (await _languageService.GetAllAsync())
             .ToDictionary(l => l.IsoCode, StringComparer.OrdinalIgnoreCase);
@@ -139,15 +139,33 @@ internal abstract class BlockPropertyValueCreatorBase<TBlockModel, TBlockItemMod
 
         // Convert the content data
         var contentPublishedElements = new Dictionary<Guid, IPublishedElement>();
-        foreach (BlockItemData data in converted.BlockValue.ContentData)
+
+        // Get all layouts.
+        // NOTE: While the Grid areas are modeled to contain areas within areas, in reality it cannot be configured as
+        //       such, so this "top-level aggregation" of layouts works in effect.
+        IBlockLayoutItem[] allLayouts = converted
+            .Layout
+            .SelectMany(layout => new[] { layout }.Union(layout.GetContainedLayouts()))
+            .ToArray();
+        foreach (var layout in allLayouts)
         {
-            if (!blockConfigMap.ContainsKey(data.ContentTypeKey))
+            IPublishedElement? element = null;
+            BlockItemData? data = null;
+            if (layout.IsExternalContent)
             {
-                continue;
+                element = await _elementCacheService.GetByKeyAsync(layout.ContentKey, preview);
+
+                if (preview is false && element?.IsPublished(variationContext.Culture) is false)
+                {
+                    element = null;
+                }
+            }
+            else if (blockContentDataMap.TryGetValue(layout.ContentKey, out data))
+            {
+                element = BlockEditorConverter.ConvertToElement(owner, data, referenceCacheLevel, preview);
             }
 
-            IPublishedElement? element = BlockEditorConverter.ConvertToElement(owner, data, referenceCacheLevel, preview);
-            if (element == null)
+            if (element is null)
             {
                 continue;
             }
@@ -162,15 +180,19 @@ internal abstract class BlockPropertyValueCreatorBase<TBlockModel, TBlockItemMod
                 ? variationContext.Segment.NullOrWhiteSpaceAsNull()
                 : null;
 
-            Fallback fallback = _propertyRenderingContextAccessor.PropertyRenderingContext?.Fallback ?? default;
-            if (BlockExposeFallbackHelper.IsBlockExposed(expose, element.Key, expectedBlockVariationCulture, expectedBlockVariationSegment, fallback, languagesByIsoCode, defaultIsoCode, out var resolvedCulture) is false)
+            string? resolvedCulture = null;
+            if (layout.IsExternalContent is false)
             {
-                continue;
+                Fallback fallback = _propertyRenderingContextAccessor.PropertyRenderingContext?.Fallback ?? default;
+                if (BlockExposeFallbackHelper.IsBlockExposed(expose, element.Key, expectedBlockVariationCulture, expectedBlockVariationSegment, fallback, languagesByIsoCode, defaultIsoCode, out resolvedCulture) is false)
+                {
+                    continue;
+                }
             }
 
             // If the block was exposed via fallback to a different culture, recreate the element
             // with that culture's variation context so its property values come from the resolved culture.
-            if (resolvedCulture is not null && resolvedCulture.InvariantEquals(expectedBlockVariationCulture) is false)
+            if (resolvedCulture is not null && resolvedCulture.InvariantEquals(expectedBlockVariationCulture) is false && data is not null)
             {
                 VariationContext? originalContext = _variationContextAccessor.VariationContext;
                 try

src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/RichTextBlockPropertyValueCreator.cs

@@ -3,6 +3,7 @@
 
 using Umbraco.Cms.Core.Models.Blocks;
 using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
 using Umbraco.Cms.Core.Serialization;
 using Umbraco.Cms.Core.Services;
 
@@ -18,7 +19,9 @@ internal sealed class RichTextBlockPropertyValueCreator : BlockPropertyValueCrea
     /// </summary>
     /// <param name="blockEditorConverter">The <see cref="BlockEditorConverter"/> used to convert block editor values.</param>
     /// <param name="variationContextAccessor">The <see cref="IVariationContextAccessor"/> providing access to the variation context.</param>
+    /// <param name="propertyRenderingContextAccessor">Provides access to the current rendering context.</param>
     /// <param name="blockEditorVarianceHandler">The <see cref="BlockEditorVarianceHandler"/> that handles block editor variance.</param>
+    /// <param name="elementCacheService">The cache for elements.</param>
     /// <param name="jsonSerializer">The <see cref="IJsonSerializer"/> used for JSON serialization and deserialization.</param>
     /// <param name="constructorCache">The <see cref="RichTextBlockPropertyValueConstructorCache"/> used to cache rich text block property value constructors.</param>
     /// <param name="languageService">Service used to retrieve language information for fallback resolution.</param>
@@ -27,10 +30,11 @@ internal sealed class RichTextBlockPropertyValueCreator : BlockPropertyValueCrea
         IVariationContextAccessor variationContextAccessor,
         IPropertyRenderingContextAccessor propertyRenderingContextAccessor,
         BlockEditorVarianceHandler blockEditorVarianceHandler,
+        IElementCacheService elementCacheService,
         IJsonSerializer jsonSerializer,
         RichTextBlockPropertyValueConstructorCache constructorCache,
         ILanguageService languageService)
-        : base(blockEditorConverter, variationContextAccessor, propertyRenderingContextAccessor, blockEditorVarianceHandler, languageService)
+        : base(blockEditorConverter, variationContextAccessor, propertyRenderingContextAccessor, blockEditorVarianceHandler, languageService, elementCacheService)
     {
         _jsonSerializer = jsonSerializer;
         _constructorCache = constructorCache;

src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/RteBlockRenderingValueConverter.cs

@@ -15,6 +15,7 @@ using Umbraco.Cms.Core.Models.Blocks;
 using Umbraco.Cms.Core.Models.DeliveryApi;
 using Umbraco.Cms.Core.Models.PublishedContent;
 using Umbraco.Cms.Core.PropertyEditors.DeliveryApi;
+using Umbraco.Cms.Core.PublishedCache;
 using Umbraco.Cms.Core.Serialization;
 using Umbraco.Cms.Core.Services;
 using Umbraco.Cms.Core.Strings;
@@ -46,6 +47,7 @@ public class RteBlockRenderingValueConverter : SimpleRichTextValueConverter, IDe
     private readonly BlockEditorVarianceHandler _blockEditorVarianceHandler;
     private readonly ILanguageService _languageService;
     private readonly IPropertyRenderingContextAccessor _propertyRenderingContextAccessor;
+    private readonly IElementCacheService _elementCacheService;
 
     private DeliveryApiSettings _deliveryApiSettings;
     private readonly IDisposable? _deliveryApiSettingsChangeSubscription;
@@ -69,6 +71,7 @@ public class RteBlockRenderingValueConverter : SimpleRichTextValueConverter, IDe
     /// <param name="deliveryApiSettingsMonitor">Monitors settings for the Delivery API.</param>
     /// <param name="languageService">Service used to retrieve language information for fallback resolution.</param>
     /// <param name="propertyRenderingContextAccessor">Accessor for the current property rendering context.</param>
+    /// <param name="elementCacheService">The cache for elements.</param>
     public RteBlockRenderingValueConverter(
         HtmlLocalLinkParser linkParser,
         HtmlUrlParser urlParser,
@@ -85,7 +88,8 @@ public class RteBlockRenderingValueConverter : SimpleRichTextValueConverter, IDe
         BlockEditorVarianceHandler blockEditorVarianceHandler,
         IOptionsMonitor<DeliveryApiSettings> deliveryApiSettingsMonitor,
         ILanguageService languageService,
-        IPropertyRenderingContextAccessor propertyRenderingContextAccessor)
+        IPropertyRenderingContextAccessor propertyRenderingContextAccessor,
+        IElementCacheService elementCacheService)
     {
         _linkParser = linkParser;
         _urlParser = urlParser;
@@ -102,6 +106,7 @@ public class RteBlockRenderingValueConverter : SimpleRichTextValueConverter, IDe
         _blockEditorVarianceHandler = blockEditorVarianceHandler;
         _languageService = languageService;
         _propertyRenderingContextAccessor = propertyRenderingContextAccessor;
+        _elementCacheService = elementCacheService;
 
         _deliveryApiSettings = deliveryApiSettingsMonitor.CurrentValue;
         _deliveryApiSettingsChangeSubscription = deliveryApiSettingsMonitor.OnChange(settings => _deliveryApiSettings = settings);
@@ -128,6 +133,45 @@ public class RteBlockRenderingValueConverter : SimpleRichTextValueConverter, IDe
     {
     }
 
+    [Obsolete("Please use the non-obsolete constructor. Scheduled for removal in V20.")]
+    public RteBlockRenderingValueConverter(
+        HtmlLocalLinkParser linkParser,
+        HtmlUrlParser urlParser,
+        HtmlImageSourceParser imageSourceParser,
+        IApiRichTextElementParser apiRichTextElementParser,
+        IApiRichTextMarkupParser apiRichTextMarkupParser,
+        IPartialViewBlockEngine partialViewBlockEngine,
+        BlockEditorConverter blockEditorConverter,
+        IJsonSerializer jsonSerializer,
+        IApiElementBuilder apiElementBuilder,
+        RichTextBlockPropertyValueConstructorCache constructorCache,
+        ILogger<RteBlockRenderingValueConverter> logger,
+        IVariationContextAccessor variationContextAccessor,
+        BlockEditorVarianceHandler blockEditorVarianceHandler,
+        IOptionsMonitor<DeliveryApiSettings> deliveryApiSettingsMonitor,
+        ILanguageService languageService,
+        IPropertyRenderingContextAccessor propertyRenderingContextAccessor)
+        : this(
+            linkParser,
+            urlParser,
+            imageSourceParser,
+            apiRichTextElementParser,
+            apiRichTextMarkupParser,
+            partialViewBlockEngine,
+            blockEditorConverter,
+            jsonSerializer,
+            apiElementBuilder,
+            constructorCache,
+            logger,
+            variationContextAccessor,
+            blockEditorVarianceHandler,
+            deliveryApiSettingsMonitor,
+            languageService,
+            propertyRenderingContextAccessor,
+            StaticServiceProvider.Instance.GetRequiredService<IElementCacheService>())
+    {
+    }
+
     /// <summary>
     /// Gets the cache level for the property.
     /// </summary>
@@ -328,7 +372,7 @@ public class RteBlockRenderingValueConverter : SimpleRichTextValueConverter, IDe
             return null;
         }
 
-        var creator = new RichTextBlockPropertyValueCreator(_blockEditorConverter, _variationContextAccessor, _propertyRenderingContextAccessor, _blockEditorVarianceHandler, _jsonSerializer, _constructorCache, _languageService);
+        var creator = new RichTextBlockPropertyValueCreator(_blockEditorConverter, _variationContextAccessor, _propertyRenderingContextAccessor, _blockEditorVarianceHandler, _elementCacheService, _jsonSerializer, _constructorCache, _languageService);
         return creator.CreateBlockModelAsync(owner, referenceCacheLevel, blocks, preview, configuration.Blocks).GetAwaiter().GetResult();
     }
 

src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/SingleBlockPropertyValueConverter.cs

@@ -12,6 +12,7 @@ using Umbraco.Cms.Core.Models.PublishedContent;
 using Umbraco.Cms.Core.PropertyEditors;
 using Umbraco.Cms.Core.PropertyEditors.DeliveryApi;
 using Umbraco.Cms.Core.PropertyEditors.ValueConverters;
+using Umbraco.Cms.Core.PublishedCache;
 using Umbraco.Cms.Core.Serialization;
 using Umbraco.Cms.Core.Services;
 using Umbraco.Cms.Infrastructure.Extensions;
@@ -36,6 +37,7 @@ public class SingleBlockPropertyValueConverter : PropertyValueConverterBase, IDe
     private readonly BlockEditorVarianceHandler _blockEditorVarianceHandler;
     private readonly ILanguageService _languageService;
     private readonly IPropertyRenderingContextAccessor _propertyRenderingContextAccessor;
+    private readonly IElementCacheService _elementCacheService;
 
     /// <summary>
     /// Initializes a new instance of the <see cref="SingleBlockPropertyValueConverter"/> class.
@@ -49,6 +51,7 @@ public class SingleBlockPropertyValueConverter : PropertyValueConverterBase, IDe
     /// <param name="blockEditorVarianceHandler">Handles variance logic for block editors.</param>
     /// <param name="languageService">Service used to retrieve language information for fallback resolution.</param>
     /// <param name="propertyRenderingContextAccessor">Accessor for the current property rendering context.</param>
+    /// <param name="elementCacheService">The cache for elements.</param>
     public SingleBlockPropertyValueConverter(
         IProfilingLogger proflog,
         BlockEditorConverter blockConverter,
@@ -58,7 +61,8 @@ public class SingleBlockPropertyValueConverter : PropertyValueConverterBase, IDe
         IVariationContextAccessor variationContextAccessor,
         BlockEditorVarianceHandler blockEditorVarianceHandler,
         ILanguageService languageService,
-        IPropertyRenderingContextAccessor propertyRenderingContextAccessor)
+        IPropertyRenderingContextAccessor propertyRenderingContextAccessor,
+        IElementCacheService elementCacheService)
     {
         _proflog = proflog;
         _blockConverter = blockConverter;
@@ -69,6 +73,7 @@ public class SingleBlockPropertyValueConverter : PropertyValueConverterBase, IDe
         _blockEditorVarianceHandler = blockEditorVarianceHandler;
         _languageService = languageService;
         _propertyRenderingContextAccessor = propertyRenderingContextAccessor;
+        _elementCacheService = elementCacheService;
     }
 
     /// <inheritdoc cref="SingleBlockPropertyValueConverter(IProfilingLogger, BlockEditorConverter, IApiElementBuilder, IJsonSerializer, BlockListPropertyValueConstructorCache, IVariationContextAccessor, BlockEditorVarianceHandler, ILanguageService, IPropertyRenderingContextAccessor)"/>
@@ -85,6 +90,21 @@ public class SingleBlockPropertyValueConverter : PropertyValueConverterBase, IDe
     {
     }
 
+    [Obsolete("Please use the non-obsolete constructor. Scheduled for removal in V20.")]
+    public SingleBlockPropertyValueConverter(
+        IProfilingLogger proflog,
+        BlockEditorConverter blockConverter,
+        IApiElementBuilder apiElementBuilder,
+        IJsonSerializer jsonSerializer,
+        BlockListPropertyValueConstructorCache constructorCache,
+        IVariationContextAccessor variationContextAccessor,
+        BlockEditorVarianceHandler blockEditorVarianceHandler,
+        ILanguageService languageService,
+        IPropertyRenderingContextAccessor propertyRenderingContextAccessor)
+        : this(proflog, blockConverter, apiElementBuilder, jsonSerializer, constructorCache, variationContextAccessor, blockEditorVarianceHandler, languageService, propertyRenderingContextAccessor, StaticServiceProvider.Instance.GetRequiredService<IElementCacheService>())
+    {
+    }
+
     /// <inheritdoc />
     public override bool IsConverter(IPublishedPropertyType propertyType)
         => propertyType.EditorAlias.InvariantEquals(Constants.PropertyEditors.Aliases.SingleBlock);
@@ -94,7 +114,7 @@ public class SingleBlockPropertyValueConverter : PropertyValueConverterBase, IDe
 
     /// <inheritdoc />
     public override PropertyCacheLevel GetPropertyCacheLevel(IPublishedPropertyType propertyType)
-        => PropertyCacheLevel.Element;
+        => PropertyCacheLevel.Elements;
 
     /// <inheritdoc />
     public override object? ConvertSourceToIntermediate(IPublishedElement owner, IPublishedPropertyType propertyType, object? source, bool preview)
@@ -149,7 +169,7 @@ public class SingleBlockPropertyValueConverter : PropertyValueConverterBase, IDe
             }
 
 
-            var creator = new SingleBlockPropertyValueCreator(_blockConverter, _variationContextAccessor, _propertyRenderingContextAccessor, _blockEditorVarianceHandler, _jsonSerializer, _constructorCache, _languageService);
+            var creator = new SingleBlockPropertyValueCreator(_blockConverter, _variationContextAccessor, _propertyRenderingContextAccessor, _blockEditorVarianceHandler, _elementCacheService, _jsonSerializer, _constructorCache, _languageService);
             return creator.CreateBlockModelAsync(owner, referenceCacheLevel, intermediateBlockModelValue, preview, configuration.Blocks).GetAwaiter().GetResult();
         }
     }

src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/SingleBlockPropertyValueCreator.cs

@@ -1,5 +1,6 @@
 using Umbraco.Cms.Core.Models.Blocks;
 using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
 using Umbraco.Cms.Core.Serialization;
 using Umbraco.Cms.Core.Services;
 
@@ -16,7 +17,9 @@ internal sealed class SingleBlockPropertyValueCreator : BlockPropertyValueCreato
     /// </summary>
     /// <param name="blockEditorConverter">The service used to convert block editor data.</param>
     /// <param name="variationContextAccessor">Provides access to the current variation context.</param>
+    /// <param name="propertyRenderingContextAccessor">Provides access to the current rendering context.</param>
     /// <param name="blockEditorVarianceHandler">Handles variance logic for block editors.</param>
+    /// <param name="elementCacheService">The cache for elements.</param>
     /// <param name="jsonSerializer">The serializer used for JSON serialization and deserialization.</param>
     /// <param name="constructorCache">A cache for constructors used in block list property value creation.</param>
     /// <param name="languageService">Service used to retrieve language information for fallback resolution.</param>
@@ -25,10 +28,11 @@ internal sealed class SingleBlockPropertyValueCreator : BlockPropertyValueCreato
         IVariationContextAccessor variationContextAccessor,
         IPropertyRenderingContextAccessor propertyRenderingContextAccessor,
         BlockEditorVarianceHandler blockEditorVarianceHandler,
+        IElementCacheService elementCacheService,
         IJsonSerializer jsonSerializer,
         BlockListPropertyValueConstructorCache constructorCache,
         ILanguageService languageService)
-        : base(blockEditorConverter, variationContextAccessor, propertyRenderingContextAccessor, blockEditorVarianceHandler, languageService)
+        : base(blockEditorConverter, variationContextAccessor, propertyRenderingContextAccessor, blockEditorVarianceHandler, languageService, elementCacheService)
     {
         _jsonSerializer = jsonSerializer;
         _constructorCache = constructorCache;

src/Umbraco.Infrastructure/Search/DeferredSearchReindexService.cs

@@ -5,11 +5,13 @@ using Microsoft.Extensions.Options;
 using Umbraco.Cms.Core;
 using Umbraco.Cms.Core.Configuration.Models;
 using Umbraco.Cms.Core.Models;
+using Umbraco.Cms.Core.Models.Entities;
 using Umbraco.Cms.Core.Persistence.Querying;
 using Umbraco.Cms.Core.Persistence.Repositories;
 using Umbraco.Cms.Core.Scoping;
 using Umbraco.Cms.Core.Services;
 using Umbraco.Cms.Core.Services.Navigation;
+using Umbraco.Extensions;
 
 namespace Umbraco.Cms.Infrastructure.Search;
 
@@ -34,9 +36,11 @@ internal sealed class DeferredSearchReindexService : IDeferredSearchReindexServi
     private readonly ICoreScopeProvider _scopeProvider;
     private readonly ILogger<DeferredSearchReindexService> _logger;
     private readonly CancellationTokenSource _shutdownCts;
+    private readonly IRelationService _relationService;
     private readonly ConcurrentDictionary<int, byte> _pendingContentTypeIds = new();
     private readonly ConcurrentDictionary<int, byte> _pendingMediaTypeIds = new();
     private readonly ConcurrentDictionary<int, byte> _pendingMemberTypeIds = new();
+    private readonly ConcurrentDictionary<int, byte> _pendingElementIds = new();
     private int _processing; // 0 = idle, 1 = active
 
     /// <summary>
@@ -51,6 +55,7 @@ internal sealed class DeferredSearchReindexService : IDeferredSearchReindexServi
     /// <param name="scopeProvider">The scope provider, used to create scopes for repository access.</param>
     /// <param name="logger">The logger.</param>
     /// <param name="hostApplicationLifetime">The application lifetime, used to cancel in-flight reindexing on shutdown.</param>
+    /// <param name="relationService">The relation service, used to traverse element-to-document relations.</param>
     public DeferredSearchReindexService(
         IDocumentRepository documentRepository,
         IMediaRepository mediaRepository,
@@ -60,7 +65,8 @@ internal sealed class DeferredSearchReindexService : IDeferredSearchReindexServi
         IOptionsMonitor<IndexingSettings> indexingSettings,
         ICoreScopeProvider scopeProvider,
         ILogger<DeferredSearchReindexService> logger,
-        IHostApplicationLifetime hostApplicationLifetime)
+        IHostApplicationLifetime hostApplicationLifetime,
+        IRelationService relationService)
     {
         _documentRepository = documentRepository;
         _mediaRepository = mediaRepository;
@@ -71,6 +77,7 @@ internal sealed class DeferredSearchReindexService : IDeferredSearchReindexServi
         _scopeProvider = scopeProvider;
         _logger = logger;
         _shutdownCts = CancellationTokenSource.CreateLinkedTokenSource(hostApplicationLifetime.ApplicationStopping);
+        _relationService = relationService;
     }
 
     /// <inheritdoc />
@@ -106,6 +113,17 @@ internal sealed class DeferredSearchReindexService : IDeferredSearchReindexServi
         ScheduleProcessing();
     }
 
+    /// <inheritdoc />
+    public void QueueElementReindex(IReadOnlyCollection<int> elementIds)
+    {
+        foreach (var id in elementIds)
+        {
+            _pendingElementIds.TryAdd(id, 0);
+        }
+
+        ScheduleProcessing();
+    }
+
     private void ScheduleProcessing()
     {
         if (_shutdownCts.IsCancellationRequested)
@@ -140,6 +158,7 @@ internal sealed class DeferredSearchReindexService : IDeferredSearchReindexServi
                 var contentTypeIds = DrainIds(_pendingContentTypeIds);
                 var mediaTypeIds = DrainIds(_pendingMediaTypeIds);
                 var memberTypeIds = DrainIds(_pendingMemberTypeIds);
+                var elementIds = DrainIds(_pendingElementIds);
 
                 try
                 {
@@ -164,6 +183,13 @@ internal sealed class DeferredSearchReindexService : IDeferredSearchReindexServi
                         _logger.LogInformation("Deferred reindex completed for member type IDs: {MemberTypeIds}", memberTypeIds);
                     }
 
+                    if (elementIds.Length > 0)
+                    {
+                        _logger.LogInformation("Deferred reindex starting for documents referencing element IDs: {ElementIds}", elementIds);
+                        ReindexDocumentsReferencingElements(elementIds);
+                        _logger.LogInformation("Deferred reindex completed for documents referencing element IDs: {ElementIds}", elementIds);
+                    }
+
                     consecutiveFailures = 0;
                 }
                 catch (OperationCanceledException) when (cancellationToken.IsCancellationRequested)
@@ -171,6 +197,7 @@ internal sealed class DeferredSearchReindexService : IDeferredSearchReindexServi
                     RequeueIds(_pendingContentTypeIds, contentTypeIds);
                     RequeueIds(_pendingMediaTypeIds, mediaTypeIds);
                     RequeueIds(_pendingMemberTypeIds, memberTypeIds);
+                    RequeueIds(_pendingElementIds, elementIds);
                     throw;
                 }
                 catch (Exception ex)
@@ -180,6 +207,7 @@ internal sealed class DeferredSearchReindexService : IDeferredSearchReindexServi
                     RequeueIds(_pendingContentTypeIds, contentTypeIds);
                     RequeueIds(_pendingMediaTypeIds, mediaTypeIds);
                     RequeueIds(_pendingMemberTypeIds, memberTypeIds);
+                    RequeueIds(_pendingElementIds, elementIds);
 
                     if (consecutiveFailures >= MaxConsecutiveFailures)
                     {
@@ -263,6 +291,86 @@ internal sealed class DeferredSearchReindexService : IDeferredSearchReindexServi
             c => _umbracoIndexingHandler.ReIndexForMember(c));
     }
 
+    private void ReindexDocumentsReferencingElements(int[] elementIds)
+    {
+        IReadOnlyCollection<int> documentIds = FindDocumentIdsReferencingElements(elementIds);
+        if (documentIds.Count == 0)
+        {
+            return;
+        }
+
+        var publishChecked = new Dictionary<int, bool>();
+        foreach (IEnumerable<int> batch in documentIds.InGroupsOf(Constants.Sql.MaxParameterCount))
+        {
+            var batchIds = batch.ToArray();
+            IContent[] documents;
+            using (ICoreScope scope = _scopeProvider.CreateCoreScope(autoComplete: true))
+            {
+                documents = _documentRepository.GetMany(batchIds).ToArray();
+            }
+
+            foreach (IContent document in documents)
+            {
+                var isPublished = false;
+                if (document.Published && publishChecked.TryGetValue(document.Id, out isPublished) is false)
+                {
+                    isPublished = _publishStatusQueryService.HasPublishedAncestorPath(document.Key);
+                    publishChecked[document.Id] = isPublished;
+                }
+
+                _umbracoIndexingHandler.ReIndexForContent(document, isPublished);
+            }
+        }
+    }
+
+    internal IReadOnlyCollection<int> FindDocumentIdsReferencingElements(IEnumerable<int> elementIds)
+    {
+        var visitedElementIds = new HashSet<int>();
+        var documentIds = new HashSet<int>();
+        var queue = new Queue<int>(elementIds);
+
+        while (queue.Count > 0)
+        {
+            var elementId = queue.Dequeue();
+            if (visitedElementIds.Add(elementId) is false)
+            {
+                continue;
+            }
+
+            foreach (IUmbracoEntity documentParent in GetParentEntities(elementId, UmbracoObjectTypes.Document))
+            {
+                documentIds.Add(documentParent.Id);
+            }
+
+            foreach (IUmbracoEntity elementParent in GetParentEntities(elementId, UmbracoObjectTypes.Element))
+            {
+                if (visitedElementIds.Contains(elementParent.Id) is false)
+                {
+                    queue.Enqueue(elementParent.Id);
+                }
+            }
+        }
+
+        return documentIds;
+    }
+
+    private IEnumerable<IUmbracoEntity> GetParentEntities(int childId, UmbracoObjectTypes objectType)
+    {
+        var results = new List<IUmbracoEntity>();
+        var pageSize = _indexingSettings.CurrentValue.BatchSize;
+        long page = 0;
+        var total = long.MaxValue;
+        while (page * pageSize < total)
+        {
+            IUmbracoEntity[] items = _relationService
+                .GetPagedParentEntitiesByChildId(childId, page++, pageSize, out total, objectType)
+                .ToArray();
+            results.AddRange(items);
+        }
+
+        return results;
+    }
+
     /// <summary>
     ///     Pages through a repository without acquiring distributed locks and invokes an action for each item.
     /// </summary>
@@ -328,7 +436,8 @@ internal sealed class DeferredSearchReindexService : IDeferredSearchReindexServi
     private bool HasPendingIds() =>
         _pendingContentTypeIds.IsEmpty is false ||
         _pendingMediaTypeIds.IsEmpty is false ||
-        _pendingMemberTypeIds.IsEmpty is false;
+        _pendingMemberTypeIds.IsEmpty is false ||
+        _pendingElementIds.IsEmpty is false;
 
     private static int[] DrainIds(ConcurrentDictionary<int, byte> dictionary)
     {

src/Umbraco.Infrastructure/Search/ElementIndexingNotificationHandler.cs

@@ -0,0 +1,34 @@
+using Umbraco.Cms.Core.Events;
+using Umbraco.Cms.Core.Models;
+using Umbraco.Cms.Core.Notifications;
+using Umbraco.Cms.Core.Services;
+
+namespace Umbraco.Cms.Infrastructure.Search;
+
+/// <summary>
+/// Queues reindexing of documents that reference elements when those elements are saved or published.
+/// </summary>
+internal sealed class ElementIndexingNotificationHandler :
+    INotificationHandler<ElementSavedNotification>,
+    INotificationHandler<ElementPublishedNotification>
+{
+    private readonly IDeferredSearchReindexService _deferredSearchReindexService;
+
+    public ElementIndexingNotificationHandler(IDeferredSearchReindexService deferredSearchReindexService)
+        => _deferredSearchReindexService = deferredSearchReindexService;
+
+    public void Handle(ElementSavedNotification notification)
+        => QueueElementIds(notification.SavedEntities);
+
+    public void Handle(ElementPublishedNotification notification)
+        => QueueElementIds(notification.PublishedEntities);
+
+    private void QueueElementIds(IEnumerable<IElement> elements)
+    {
+        var ids = elements.Select(e => e.Id).ToArray();
+        if (ids.Length > 0)
+        {
+            _deferredSearchReindexService.QueueElementReindex(ids);
+        }
+    }
+}

src/Umbraco.PublishedCache.HybridCache/Services/BlockElementService.cs

@@ -1,45 +1,84 @@
-using Umbraco.Cms.Core.Models.Blocks;
+using Umbraco.Cms.Core.Models;
+using Umbraco.Cms.Core.Models.Blocks;
 using Umbraco.Cms.Core.Models.PublishedContent;
 using Umbraco.Cms.Core.PublishedCache;
+using Umbraco.Cms.Core.Services;
 using Umbraco.Cms.Infrastructure.HybridCache.Factories;
 using Umbraco.Extensions;
 
 namespace Umbraco.Cms.Infrastructure.HybridCache.Services;
 
+/// <inheritdoc/>
 internal class BlockElementService : IBlockElementService
 {
     private readonly IPublishedContentTypeCache _publishedContentTypeCache;
     private readonly IPublishedContentFactory _publishedContentFactory;
     private readonly IPublishedModelFactory _publishedModelFactory;
+    private readonly ILanguageService _languageService;
 
     public BlockElementService(
         IPublishedContentTypeCache publishedContentTypeCache,
         IPublishedContentFactory publishedContentFactory,
-        IPublishedModelFactory publishedModelFactory)
+        IPublishedModelFactory publishedModelFactory,
+        ILanguageService languageService)
     {
         _publishedContentTypeCache = publishedContentTypeCache;
         _publishedContentFactory = publishedContentFactory;
         _publishedModelFactory = publishedModelFactory;
+        _languageService = languageService;
     }
 
-    public Task<IPublishedElement?> BuildElementAsync(BlockItemData blockItemData, bool? preview = null)
+    /// <inheritdoc/>
+    public async Task<IPublishedElement?> BuildElementAsync(IPublishedElement owner, BlockItemData blockItemData, bool? preview = null)
     {
+        ILanguage[]? allLanguages = null;
+        ILanguage? defaultLanguage = null;
+
         // Only convert element types - content types will cause an exception when PublishedModelFactory creates the model
         IPublishedContentType? publishedContentType = _publishedContentTypeCache.Get(PublishedItemType.Element, blockItemData.ContentTypeKey);
         if (publishedContentType is null || publishedContentType.IsElement is false)
         {
-            return Task.FromResult<IPublishedElement?>(null);
+            return null;
         }
 
         var propertyData = new Dictionary<string, PropertyData[]>();
         foreach (IGrouping<string, BlockPropertyValue> properties in blockItemData.Values.GroupBy(value => value.Alias))
         {
-            propertyData[properties.Key] = properties.Select(property => new PropertyData
+            IPublishedPropertyType? propertyType = publishedContentType.GetPropertyType(properties.Key);
+            if (propertyType is null)
             {
-                Culture = property.Culture ?? string.Empty, // throws an error if there is no value
-                Segment = property.Segment ?? string.Empty, // throws an error if there is no value
-                Value = property.Value,
-            }).ToArray();
+                continue;
+            }
+
+            if (propertyType.VariesByCulture() && owner.ContentType.VariesByCulture() is false)
+            {
+                // Special case:
+                // The element property type varies by culture, but the owner element (e.g. the page) content type does not
+                // vary by culture. Since the created element is fully culture aware at render time, we need to replicate
+                // property values across all available languages, to make them available for rendering.
+
+                allLanguages ??= (await _languageService.GetAllAsync()).ToArray();
+                defaultLanguage ??= allLanguages.SingleOrDefault(l => l.IsDefault)
+                                    ?? throw new InvalidOperationException("Could not find the default language.");
+
+                BlockPropertyValue property = properties.FirstOrDefault(p => p.Culture.InvariantEquals(defaultLanguage.IsoCode))
+                                              ?? properties.First();
+                propertyData[properties.Key] = allLanguages.Select(language => new PropertyData
+                {
+                    Culture = language.IsoCode,
+                    Segment = property.Segment ?? string.Empty, // throws an error if there is no value
+                    Value = property.Value,
+                }).ToArray();
+            }
+            else
+            {
+                propertyData[properties.Key] = properties.Select(property => new PropertyData
+                {
+                    Culture = property.Culture ?? string.Empty, // throws an error if there is no value
+                    Segment = property.Segment ?? string.Empty, // throws an error if there is no value
+                    Value = property.Value,
+                }).ToArray();
+            }
         }
 
         var published = preview is not true;
@@ -47,9 +86,15 @@ internal class BlockElementService : IBlockElementService
 
         const string name = "n/a";
 
-        var cultureInfos = (publishedContentType.VariesByCulture()
-            ? blockItemData.Values.Select(value => value.Culture).WhereNotNull().Distinct()
-            : []).ToDictionary(
+        IEnumerable<string> cultures = publishedContentType.VariesByCulture()
+            ? propertyData
+                .SelectMany(p => p.Value.Select(v => v.Culture))
+                .Where(c => c.IsNullOrWhiteSpace() is false)
+                .OfType<string>()
+                .Distinct()
+            : [];
+
+        var cultureInfos = cultures.ToDictionary(
             culture => culture,
             _ => new CultureVariation
             {
@@ -83,6 +128,6 @@ internal class BlockElementService : IBlockElementService
         };
 
         var result = _publishedContentFactory.ToIPublishedElement(contentCacheNode, draft);
-        return Task.FromResult(result.CreateModel(_publishedModelFactory));
+        return result.CreateModel(_publishedModelFactory);
     }
 }

src/Umbraco.Web.UI.Client/mocks/data/sets/default/data-type.data.ts

@@ -670,7 +670,7 @@ export const data: Array<UmbMockDataTypeModel> = [
 				alias: 'blocks',
 				value: [
 					{
-						label: 'Mocked Block Type for Block List',
+						label: 'Mocked Block Type for Block List: ${elementProperty}',
 						contentElementTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c',
 						settingsElementTypeKey: 'all-property-editors-document-type-id',
 						iconColor: '#F5C1BC',

src/Umbraco.Web.UI.Client/mocks/data/sets/default/document.data.ts

@@ -1062,13 +1062,21 @@ export const data: Array<UmbMockDocumentModel> = [
 					layout: {
 						'Umbraco.BlockList': [
 							{
+								key: '1234',
 								contentKey: '1234',
 								settingsKey: '5678',
 							},
 							{
+								key: '1234-headline',
 								contentKey: '1234-headline',
 								settingsKey: '1234-headline-settings',
 							},
+							{
+								key: '45110b54-764e-4198-858d-6bf8f51589b6',
+								contentKey: 'simple-element-id',
+								settingsKey: null,
+								isExternalContent: true,
+							},
 						],
 					},
 					contentData: [

src/Umbraco.Web.UI.Client/mocks/msw-handlers/element/block-reference.handlers.ts

@@ -0,0 +1,30 @@
+const { http, HttpResponse } = window.MockServiceWorker;
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+
+export const blockReferenceHandlers = [
+	// GET /document/:id/referenced-elements-with-pending-changes
+	// Returns library elements referenced by a document that have unpublished draft changes.
+	http.get(umbracoPath('/document/:id/referenced-elements-with-pending-changes'), () => {
+		return HttpResponse.json({
+			total: 2,
+			items: [
+				{
+					id: 'simple-element-id',
+					name: 'Simple Element',
+					documentType: { id: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c', icon: 'icon-lab' },
+					state: 'PublishedPendingChanges',
+					publishDate: '2024-02-01T10:00:00.000Z',
+					scheduledPublishDate: null,
+				},
+				{
+					id: 'element-in-folder-id',
+					name: 'Element In Folder',
+					documentType: { id: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c', icon: 'icon-lab' },
+					state: 'PublishedPendingChanges',
+					publishDate: '2024-01-17T08:00:00.000Z',
+					scheduledPublishDate: '2026-05-01T00:00:00.000Z',
+				},
+			],
+		});
+	}),
+];

src/Umbraco.Web.UI.Client/mocks/msw-handlers/element/index.ts

@@ -5,6 +5,7 @@ import { publishingHandlers } from './publishing.handlers.js';
 import { detailHandlers } from './detail.handlers.js';
 import { folderHandlers } from './folder.handlers.js';
 import { moveCopyHandlers } from './move-copy.handlers.js';
+import { blockReferenceHandlers } from './block-reference.handlers.js';
 
 export const handlers = [
 	...recycleBinHandlers,
@@ -14,4 +15,5 @@ export const handlers = [
 	...detailHandlers,
 	...folderHandlers,
 	...moveCopyHandlers,
+	...blockReferenceHandlers,
 ];

src/Umbraco.Web.UI.Client/mocks/msw-handlers/element/tree.handlers.ts

@@ -9,7 +9,12 @@ export const treeHandlers = [
 		const url = new URL(request.url);
 		const skip = Number(url.searchParams.get('skip'));
 		const take = Number(url.searchParams.get('take'));
+		const foldersOnly = url.searchParams.get('foldersOnly') === 'true';
 		const response = umbElementMockDb.tree.getRoot({ skip, take });
+		if (foldersOnly) {
+			response.items = response.items.filter((item: any) => item.isFolder);
+			response.total = response.items.length;
+		}
 		return HttpResponse.json(response);
 	}),
 
@@ -19,7 +24,12 @@ export const treeHandlers = [
 		if (!parentId) return;
 		const skip = Number(url.searchParams.get('skip'));
 		const take = Number(url.searchParams.get('take'));
+		const foldersOnly = url.searchParams.get('foldersOnly') === 'true';
 		const response = umbElementMockDb.tree.getChildrenOf({ parentId, skip, take });
+		if (foldersOnly) {
+			response.items = response.items.filter((item: any) => item.isFolder);
+			response.total = response.items.length;
+		}
 		return HttpResponse.json(response);
 	}),
 

src/Umbraco.Web.UI.Client/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@umbraco-cms/backoffice",
-	"version": "18.1.0-rc",
+	"version": "19.0.0-beta1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@umbraco-cms/backoffice",
-			"version": "18.1.0-rc",
+			"version": "19.0.0-beta1",
 			"license": "MIT",
 			"workspaces": [
 				"./src/libs/*",

src/Umbraco.Web.UI.Client/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@umbraco-cms/backoffice",
 	"license": "MIT",
-	"version": "18.1.0-rc",
+	"version": "19.0.0-beta1",
 	"type": "module",
 	"exports": {
 		".": null,

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -2936,6 +2936,12 @@ export default {
 		unsupportedBlockName: 'Unsupported',
 		unsupportedBlockDescription:
 			'This content is no longer supported in this Editor. If you are missing this content, please contact your administrator. Otherwise delete it.',
+		tabLibrary: 'Library',
+		transferToElementLibrary: 'Transfer to Library',
+		disconnectFromElementLibrary: 'Disconnect from Library',
+		disconnectFromElementLibraryConfirm:
+			'This will create a local copy of the Element content. The Library Element will not be affected.',
+		elementUsedByCount: (count: number) => `This Element is referenced by ${count} item(s).`,
 		blockVariantConfigurationNotSupported:
 			'One or more Block Types of this Block Editor is using a Element-Type that is configured to Vary By Culture or Vary By Segment. This is not supported on a Content item that does not vary by Culture or Segment.',
 	},

src/Umbraco.Web.UI.Client/src/css/umb-css.css

@@ -4,6 +4,8 @@
 	--umb-section-sidebar-width: 300px;
 	--umb-card-medium-min-width: 160px;
 	--umb-card-large-min-width: 250px;
+	--umb-color-reference: #7532c8;
+	--umb-color-reference-contrast: var(--uui-color-surface, #fff);
 }
 
 @font-face {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts

@@ -154,14 +154,14 @@ export class UmbBlockGridManagerContext<
 		while (i--) {
 			const currentEntry = entries[i];
 			// Lets check if we found the right parent layout entry:
-			if (currentEntry.contentKey === parentId) {
+			if (currentEntry.key === parentId) {
 				// Append the layout entry to be inserted and unfreeze the rest of the data:
 				const areas =
 					currentEntry.areas?.map((x) =>
 						x.key === areaKey
 							? {
 									...x,
-									items: pushAtToUniqueArray([...x.items], insert, (x) => x.contentKey === insert.contentKey, index),
+									items: pushAtToUniqueArray([...x.items], insert, (x) => x.key === insert.key, index),
 								}
 							: x,
 					) ?? [];
@@ -171,7 +171,7 @@ export class UmbBlockGridManagerContext<
 						...currentEntry,
 						areas,
 					},
-					(x) => x.contentKey === currentEntry.contentKey,
+					(x) => x.key === currentEntry.key,
 				);
 			}
 			// Otherwise check if any items of the areas are the parent layout entry we are looking for. We do so based on parentId, recursively:
@@ -199,7 +199,7 @@ export class UmbBlockGridManagerContext<
 									(z) => z.key === area.key,
 								),
 							},
-							(x) => x.contentKey === currentEntry.contentKey,
+							(x) => x.key === currentEntry.key,
 						);
 					}
 				}

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/clipboard/block/copy/block-grid-to-block-copy-translator.test.ts

@@ -32,6 +32,7 @@ describe('UmbBlockListToBlockClipboardCopyPropertyValueTranslator', () => {
 		layout: {
 			[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]: [
 				{
+					key: 'contentKey',
 					columnSpan: 12,
 					rowSpan: 1,
 					areas: [],
@@ -54,6 +55,7 @@ describe('UmbBlockListToBlockClipboardCopyPropertyValueTranslator', () => {
 		contentData: blockGridPropertyValue.contentData,
 		layout: [
 			{
+				key: 'contentKey',
 				contentKey: 'contentKey',
 				settingsKey: null,
 			},

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/clipboard/block/copy/block-grid-to-block-copy-translator.ts

@@ -62,6 +62,7 @@ export class UmbBlockGridToBlockClipboardCopyPropertyValueTranslator
 			}
 
 			return {
+				key: gridLayout.key,
 				contentKey: gridLayout.contentKey,
 				settingsKey: gridLayout.settingsKey,
 			};

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/clipboard/block/paste/block-to-block-grid-paste-translator.test.ts

@@ -36,6 +36,7 @@ describe('UmbBlockToBlockGridClipboardPastePropertyValueTranslator', () => {
 					columnSpan: 12,
 					rowSpan: 1,
 					areas: [],
+					key: 'contentKey',
 					contentKey: 'contentKey',
 					settingsKey: null,
 				},
@@ -49,6 +50,7 @@ describe('UmbBlockToBlockGridClipboardPastePropertyValueTranslator', () => {
 		contentData: blockGridPropertyValue.contentData,
 		layout: [
 			{
+				key: 'contentKey',
 				contentKey: 'contentKey',
 				settingsKey: null,
 			},

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/clipboard/grid-block/copy/block-grid-to-grid-block-copy-translator.test.ts

@@ -40,6 +40,7 @@ describe('UmbBlockListToBlockClipboardCopyPropertyValueTranslator', () => {
 					columnSpan: 12,
 					rowSpan: 1,
 					areas: [],
+					key: 'contentKey',
 					contentKey: 'contentKey',
 					settingsKey: null,
 				},

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/clipboard/grid-block/paste/grid-block-to-block-grid-paste-translator.test.ts

@@ -34,6 +34,7 @@ describe('UmbGridBlockToBlockGridClipboardPastePropertyValueTranslator', () => {
 					columnSpan: 12,
 					rowSpan: 1,
 					areas: [],
+					key: 'contentKey',
 					contentKey: 'contentKey',
 					settingsKey: null,
 				},

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.ts

@@ -183,6 +183,7 @@ export class UmbBlockGridEntriesContext
 				const valueResolver = new UmbClipboardPastePropertyValueTranslatorValueResolver(this);
 
 				const blockTypes = this.#allowedBlockTypes.getValue();
+				const libraryAllowedElementTypeKeys = await this._getLibraryAllowedElementTypeKeys(blockTypes);
 
 				const configuredSize = this._manager
 					.getEditorConfiguration()
@@ -200,6 +201,7 @@ export class UmbBlockGridEntriesContext
 						blocks: blockTypes,
 						blockGroups: this._manager.getBlockGroups() ?? [],
 						openClipboard: routingInfo.view === 'clipboard',
+						libraryAllowedElementTypeKeys,
 						clipboardFilter: async (clipboardEntryDetail) => {
 							const hasSupportedPasteTranslator = clipboardContext.hasSupportedPasteTranslator(
 								pasteTranslatorManifests,
@@ -237,7 +239,7 @@ export class UmbBlockGridEntriesContext
 				};
 			})
 			.onSubmit(async (value, data) => {
-				if (value?.create && data) {
+				if (value && 'create' in value && data) {
 					const created = await this.create(
 						value.create.contentElementTypeKey,
 						// We can parse an empty object, cause the rest will be filled in by others.
@@ -254,7 +256,9 @@ export class UmbBlockGridEntriesContext
 					} else {
 						throw new Error('Failed to create block');
 					}
-				} else if (value?.clipboard && value.clipboard.selection?.length && data) {
+				} else if (value && 'library' in value) {
+					this._manager?.insertExternalContent(value.library.elementKey);
+				} else if (value && 'clipboard' in value && value.clipboard.selection?.length && data) {
 					const clipboardContext = await this.getContext(UMB_CLIPBOARD_PROPERTY_CONTEXT);
 					if (!clipboardContext) {
 						throw new Error('Clipboard context not available');
@@ -498,23 +502,23 @@ export class UmbBlockGridEntriesContext
 	}
 
 	// create Block?
-	override async delete(contentKey: string) {
+	override async delete(key: string) {
 		// TODO: Loop through children and delete them as well?
 		// Find layout entry:
-		const layout = this._layoutEntries.getValue().find((x) => x.contentKey === contentKey);
+		const layout = this._layoutEntries.getValue().find((x) => x.key === key);
 		if (!layout) {
-			throw new Error(`Cannot delete block, missing layout for ${contentKey}`);
+			throw new Error(`Cannot delete block, missing layout for ${key}`);
 		}
 		// The following loop will only delete the referenced data of sub Layout Entries, as the Layout entry is part of the main Layout Entry they will go away when that is removed. [NL]
 		forEachBlockLayoutEntryOf(layout, async (entry) => {
 			if (entry.settingsKey) {
 				this._manager!.removeOneSettings(entry.settingsKey);
 			}
-			this._manager!.removeOneContent(contentKey);
-			this._manager!.removeExposesOf(contentKey);
+			this._manager!.removeOneContent(entry.contentKey);
+			this._manager!.removeExposesOf(entry.contentKey);
 		});
 
-		await super.delete(contentKey);
+		await super.delete(key);
 	}
 
 	protected async _insertFromPropertyValue(value: UmbBlockGridValueModel, originData: UmbBlockGridWorkspaceOriginData) {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts

@@ -112,10 +112,10 @@ function resolvePlacementAsBlockGrid(
 
 const SORTER_CONFIG: UmbSorterConfig<UmbBlockGridLayoutModel, UmbBlockGridEntryElement> = {
 	getUniqueOfElement: (element) => {
-		return element.contentKey!;
+		return element.key!;
 	},
 	getUniqueOfModel: (modelEntry) => {
-		return modelEntry.contentKey;
+		return modelEntry.key;
 	},
 	resolvePlacement: resolvePlacementAsBlockGrid,
 	identifier: 'block-grid-editor',
@@ -400,12 +400,11 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 			<div class="umb-block-grid__layout-container" data-area-length=${this._layoutEntries.length}>
 				${repeat(
 					this._layoutEntries,
-					(layout) => layout.contentKey,
+					(layout) => layout.key,
 					(layout, index) =>
 						html`<umb-block-grid-entry
 							class="umb-block-grid__layout-item"
 							index=${index}
-							.contentKey=${layout.contentKey}
 							.layout=${layout}>
 						</umb-block-grid-entry>
 					`,

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts

@@ -2,9 +2,10 @@ import type { UmbBlockGridLayoutModel } from '../../types.js';
 import { UMB_BLOCK_GRID } from '../../constants.js';
 import { UmbBlockGridEntryContext } from './block-grid-entry.context.js';
 import { css, customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';
-import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
+import { stringOrStringArrayContains, UmbDeprecation } from '@umbraco-cms/backoffice/utils';
 import { UmbDataPathBlockElementDataQuery } from '@umbraco-cms/backoffice/block';
 import { umbDestroyOnDisconnect, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbElementVariantState } from '@umbraco-cms/backoffice/element';
 import { UmbObserveValidationStateController } from '@umbraco-cms/backoffice/validation';
 import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '@umbraco-cms/backoffice/external/uui';
 import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
@@ -30,15 +31,61 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		this.#context.setIndex(value);
 	}
 
+	/**
+	 * Set the layout entry for this block.
+	 */
+	public set layout(value: UmbBlockGridLayoutModel | undefined) {
+		if (!value) return;
+		const key = value.key;
+		const contentKey = value.contentKey;
+
+		if (key && key !== this._key) {
+			this._key = key;
+			this.#context.setKey(key);
+		}
+
+		if (contentKey && contentKey !== this._contentKey) {
+			this._contentKey = contentKey;
+			this._blockViewProps.contentKey = contentKey;
+			this.setAttribute('data-element-key', contentKey);
+
+			new UmbObserveValidationStateController(
+				this,
+				`$.contentData[${UmbDataPathBlockElementDataQuery({ key: contentKey })}]`,
+				(hasMessages) => {
+					this._contentInvalid = hasMessages;
+					this._blockViewProps.contentInvalid = hasMessages;
+				},
+				'observeMessagesForContent',
+			);
+		}
+	}
+
+	public get key(): string | undefined {
+		return this._key;
+	}
+	private _key?: string | undefined;
+
+	/**
+	 * @deprecated Use the `layout` property instead. Will be removed in Umbraco 20.
+	 */
 	@property({ attribute: false })
 	public get contentKey(): string | undefined {
 		return this._contentKey;
 	}
 	public set contentKey(key: string | undefined) {
 		if (!key || key === this._contentKey) return;
+		new UmbDeprecation({
+			deprecated: 'umb-block-grid-entry.contentKey property',
+			solution: 'Use the `layout` property instead.',
+			removeInVersion: '20.0.0',
+		}).warn();
 		this._contentKey = key;
 		this._blockViewProps.contentKey = key;
 		this.setAttribute('data-element-key', key);
+		if (!this._key) {
+			this.#context.setKey(key);
+		}
 		this.#context.setContentKey(key);
 
 		new UmbObserveValidationStateController(
@@ -88,6 +135,8 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 	@state()
 	private _exposed?: boolean;
 
+	private _hasExpose?: boolean;
+
 	// Unsupported is triggered if the Block Type is not recognized, it can also be triggered by the Content Element Type not existing any longer. [NL]
 	@state()
 	private _unsupported?: boolean;
@@ -134,10 +183,11 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		config: { showContentEdit: false, showSettingsEdit: false },
 	}; // Set to undefined cause it will be set before we render.
 
-	#updateBlockViewProps(incoming: Partial<UmbBlockEditorCustomViewProperties<UmbBlockGridLayoutModel>>) {
-		this._blockViewProps = { ...this._blockViewProps, ...incoming };
-		this.requestUpdate('_blockViewProps');
-	}
+	@property({ type: Boolean, attribute: 'is-reference', reflect: true })
+	private _isExternalContent = false;
+
+	@state()
+	private _externalContentVariantState: string | null | undefined;
 
 	@state()
 	private _isReadOnly = false;
@@ -193,8 +243,8 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		this.observe(
 			this.#context.hasExpose,
 			(exposed) => {
-				this.#updateBlockViewProps({ unpublished: !exposed });
-				this._exposed = exposed;
+				this._hasExpose = exposed;
+				this.#updateExposedState();
 			},
 			null,
 		);
@@ -211,6 +261,22 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		this.observe(this.#context.actionsVisibility, (showActions) => (this._showActions = showActions), null);
 		this.observe(this.#context.inlineEditingMode, (mode) => (this._inlineEditingMode = mode), null);
 		this.observe(this.#context.isSortMode, (isSortMode) => (this._isSortMode = isSortMode), null);
+		this.observe(
+			this.#context.isExternalContent,
+			(isExternalContent) => {
+				this._isExternalContent = isExternalContent;
+				this.#updateExposedState();
+			},
+			null,
+		);
+		this.observe(
+			this.#context.externalContentVariantState,
+			(state) => {
+				this._externalContentVariantState = state;
+				this.#updateExposedState();
+			},
+			null,
+		);
 
 		// Data:
 		this.observe(
@@ -299,6 +365,11 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		);
 	}
 
+	#updateBlockViewProps(incoming: Partial<UmbBlockEditorCustomViewProperties<UmbBlockGridLayoutModel>>) {
+		this._blockViewProps = { ...this._blockViewProps, ...incoming };
+		this.requestUpdate('_blockViewProps');
+	}
+
 	override connectedCallback(): void {
 		super.connectedCallback();
 		// element styling:
@@ -374,6 +445,16 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		this.#context.expose();
 	};
 
+	#updateExposedState() {
+		// External content blocks use the element's variant state; local blocks use the expose entry
+		const isExposed = this._isExternalContent
+			? this._externalContentVariantState === UmbElementVariantState.PUBLISHED ||
+				this._externalContentVariantState === UmbElementVariantState.PUBLISHED_PENDING_CHANGES
+			: this._hasExpose;
+		this.#updateBlockViewProps({ unpublished: !isExposed });
+		this._exposed = isExposed;
+	}
+
 	#callUpdateInlineCreateButtons() {
 		clearTimeout(this.#renderTimeout);
 		this.#renderTimeout = setTimeout(this.#updateInlineCreateButtons, 100) as unknown as number;
@@ -458,6 +539,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 						this._isSortMode,
 						() => this.#renderRefBlock(),
 						() => html`
+							<umb-entity-frame>
+								${when(this._isExternalContent, () => html`<uui-icon name="link"></uui-icon>`)} ${this._label}
+							</umb-entity-frame>
 							<umb-extension-slot
 								single
 								type="blockEditorCustomView"
@@ -580,7 +664,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 	#renderActionBar() {
 		if (this._isSortMode) return nothing;
 		if (!this._showActions) return nothing;
-		return html`<umb-block-action-list id="actions" block-editor=${UMB_BLOCK_GRID}></umb-block-action-list>`;
+		return html`<umb-block-action-list id="actions" .blockEditor=${UMB_BLOCK_GRID}></umb-block-action-list>`;
 	}
 
 	static override styles = [
@@ -659,10 +743,6 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				right: calc(1px - (var(--umb-block-grid--column-gap, 0px) * 0.5));
 			}
 
-			.umb-block-grid__block {
-				height: 100%;
-			}
-
 			:host(:hover):not(:drop)::after {
 				display: block;
 				border-color: var(--uui-color-interactive-emphasis);
@@ -696,6 +776,23 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			uui-badge {
 				z-index: 2;
 			}
+
+			:host([is-reference]) .umb-block-grid__block {
+				--umb-entity-frame-color: var(--umb-color-reference, #7532c8);
+				--umb-entity-frame-contrast-color: var(--umb-color-reference-contrast, #ffffff);
+			}
+
+			.umb-block-grid__block {
+				--umb-entity-frame-opacity: 0;
+				--umb-entity-frame-color: var(--uui-color-interactive-emphasis);
+
+				height: 100%;
+
+				&:hover,
+				&:focus-within {
+					--umb-entity-frame-opacity: 1;
+				}
+			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/utils/index.ts

@@ -39,7 +39,7 @@ export async function forEachBlockLayoutEntryOf(
 	callback: (entry: UmbBlockGridLayoutModel, parentUnique: string, areaKey: string) => PromiseLike<void>,
 ): Promise<void> {
 	if (entry.areas) {
-		const parentUnique = entry.contentKey;
+		const parentUnique = entry.key;
 		await Promise.all(
 			entry.areas.map(async (area) => {
 				const areaKey = area.key;

src/Umbraco.Web.UI.Client/src/packages/block/block-list/clipboard/block/copy/block-list-to-block-copy-translator.test.ts

@@ -32,6 +32,7 @@ describe('UmbBlockListToBlockClipboardCopyPropertyValueTranslator', () => {
 		layout: {
 			[UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS]: [
 				{
+					key: 'contentKey',
 					contentKey: 'contentKey',
 					settingsKey: null,
 				},
@@ -51,6 +52,7 @@ describe('UmbBlockListToBlockClipboardCopyPropertyValueTranslator', () => {
 		contentData: blockListPropertyValue.contentData,
 		layout: [
 			{
+				key: 'contentKey',
 				contentKey: 'contentKey',
 				settingsKey: null,
 			},

src/Umbraco.Web.UI.Client/src/packages/block/block-list/clipboard/block/paste/block-to-block-list-paste-translator.test.ts

@@ -32,6 +32,7 @@ describe('UmbBlockToBlockListClipboardPastePropertyValueTranslator', () => {
 		layout: {
 			[UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS]: [
 				{
+					key: 'contentKey',
 					contentKey: 'contentKey',
 					settingsKey: null,
 				},
@@ -45,6 +46,7 @@ describe('UmbBlockToBlockListClipboardPastePropertyValueTranslator', () => {
 		contentData: blockListPropertyValue.contentData,
 		layout: [
 			{
+				key: 'contentKey',
 				contentKey: 'contentKey',
 				settingsKey: null,
 			},

src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts

@@ -3,8 +3,9 @@ import type { UmbBlockListLayoutModel } from '../../types.js';
 import { UMB_BLOCK_LIST } from '../../constants.js';
 import { css, customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement, umbDestroyOnDisconnect } from '@umbraco-cms/backoffice/lit-element';
-import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
+import { stringOrStringArrayContains, UmbDeprecation } from '@umbraco-cms/backoffice/utils';
 import { UmbDataPathBlockElementDataQuery } from '@umbraco-cms/backoffice/block';
+import { UmbElementVariantState } from '@umbraco-cms/backoffice/element';
 import { UmbObserveValidationStateController } from '@umbraco-cms/backoffice/validation';
 import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '@umbraco-cms/backoffice/external/uui';
 import type {
@@ -32,10 +33,54 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 		return this.#context.getIndex();
 	}
 
+	/**
+	 * Set the layout entry for this block.
+	 */
+	public set layout(value: UmbBlockListLayoutModel | undefined) {
+		if (!value) return;
+		const key = value.key;
+		const contentKey = value.contentKey;
+
+		if (key && key !== this._key) {
+			this._key = key;
+			this.#context.setKey(key);
+		}
+
+		if (contentKey && contentKey !== this._contentKey) {
+			this._contentKey = contentKey;
+
+			new UmbObserveValidationStateController(
+				this,
+				`$.contentData[${UmbDataPathBlockElementDataQuery({ key: contentKey })}]`,
+				(hasMessages) => {
+					this._contentInvalid = hasMessages;
+					this._blockViewProps.contentInvalid = hasMessages;
+				},
+				'observeMessagesForContent',
+			);
+		}
+	}
+
+	public get key(): string | undefined {
+		return this._key;
+	}
+	private _key?: string | undefined;
+
+	/**
+	 * @deprecated Use the `layout` property instead. Will be removed in Umbraco 20.
+	 */
 	@property({ attribute: false })
 	public set contentKey(value: string | undefined) {
 		if (!value) return;
+		new UmbDeprecation({
+			deprecated: 'umb-block-list-entry.contentKey property',
+			solution: 'Use the `layout` property instead.',
+			removeInVersion: '20.0.0',
+		}).warn();
 		this._contentKey = value;
+		if (!this._key) {
+			this.#context.setKey(value);
+		}
 		this.#context.setContentKey(value);
 
 		new UmbObserveValidationStateController(
@@ -73,6 +118,8 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 	@state()
 	private _exposed?: boolean;
 
+	private _hasExpose?: boolean;
+
 	@state()
 	private _unsupported?: boolean;
 
@@ -99,10 +146,11 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 		config: { showContentEdit: false, showSettingsEdit: false },
 	}; // Set to undefined cause it will be set before we render.
 
-	#updateBlockViewProps(incoming: Partial<UmbBlockEditorCustomViewProperties<UmbBlockListLayoutModel>>) {
-		this._blockViewProps = { ...this._blockViewProps, ...incoming };
-		this.requestUpdate('_blockViewProps');
-	}
+	@property({ type: Boolean, attribute: 'is-reference', reflect: true })
+	private _isExternalContent = false;
+
+	@state()
+	private _externalContentVariantState: string | null | undefined;
 
 	@state()
 	private _isReadOnly = false;
@@ -155,8 +203,8 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 		this.observe(
 			this.#context.hasExpose,
 			(exposed) => {
-				this.#updateBlockViewProps({ unpublished: !exposed });
-				this._exposed = exposed;
+				this._hasExpose = exposed;
+				this.#updateExposedState();
 			},
 			null,
 		);
@@ -173,6 +221,22 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 		this.observe(this.#context.actionsVisibility, (showActions) => (this._showActions = showActions), null);
 		this.observe(this.#context.inlineEditingMode, (mode) => (this._inlineEditingMode = mode), null);
 		this.observe(this.#context.isSortMode, (isSortMode) => (this._isSortMode = isSortMode), null);
+		this.observe(
+			this.#context.isExternalContent,
+			(isExternalContent) => {
+				this._isExternalContent = isExternalContent;
+				this.#updateExposedState();
+			},
+			null,
+		);
+		this.observe(
+			this.#context.externalContentVariantState,
+			(state) => {
+				this._externalContentVariantState = state;
+				this.#updateExposedState();
+			},
+			null,
+		);
 
 		// Data props:
 		this.observe(
@@ -244,6 +308,11 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 		);
 	}
 
+	#updateBlockViewProps(incoming: Partial<UmbBlockEditorCustomViewProperties<UmbBlockListLayoutModel>>) {
+		this._blockViewProps = { ...this._blockViewProps, ...incoming };
+		this.requestUpdate('_blockViewProps');
+	}
+
 	override connectedCallback(): void {
 		super.connectedCallback();
 		// element styling:
@@ -279,6 +348,16 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 		this.#context.expose();
 	};
 
+	#updateExposedState() {
+		// External content blocks use the element's variant state; local blocks use the expose entry
+		const isExposed = this._isExternalContent
+			? this._externalContentVariantState === UmbElementVariantState.PUBLISHED ||
+				this._externalContentVariantState === UmbElementVariantState.PUBLISHED_PENDING_CHANGES
+			: this._hasExpose;
+		this.#updateBlockViewProps({ unpublished: !isExposed });
+		this._exposed = isExposed;
+	}
+
 	#extensionSlotFilterMethod = (manifest: ManifestBlockEditorCustomView) => {
 		if (this._unsupported) {
 			// If the block is unsupported, we should not allow any custom views to render.
@@ -302,12 +381,14 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 		if (this._exposed || this._isReadOnly) {
 			return ext.component;
 		} else {
-			return html`<div style="min-height: var(--uui-size-16);">
-				${ext.component}
-				<umb-block-overlay-expose-button
-					.contentTypeName=${this._contentTypeName}
-					@click=${this.#expose}></umb-block-overlay-expose-button>
-			</div>`;
+			return html`
+				<div style="min-height: var(--uui-size-16);">
+					${ext.component}
+					<umb-block-overlay-expose-button
+						.contentTypeName=${this._contentTypeName}
+						@click=${this.#expose}></umb-block-overlay-expose-button>
+				</div>
+			`;
 		}
 	};
 
@@ -328,23 +409,29 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 	}
 
 	#renderInlineBlock() {
-		return html`<umb-inline-list-block
-			.label=${this._label}
-			.icon=${this._icon}
-			.index=${this._blockViewProps.index}
-			.unpublished=${!this._exposed}
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}
-			${umbDestroyOnDisconnect()}></umb-inline-list-block>`;
+		return html`
+			<umb-inline-list-block
+				.label=${this._label}
+				.icon=${this._icon}
+				.index=${this._blockViewProps.index}
+				.unpublished=${!this._exposed}
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}>
+			</umb-inline-list-block>
+		`;
 	}
 
 	#renderUnsupportedBlock() {
-		return html`<umb-unsupported-list-block
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}
-			${umbDestroyOnDisconnect()}></umb-unsupported-list-block>`;
+		return html`
+			<umb-unsupported-list-block
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}>
+			</umb-unsupported-list-block>
+		`;
 	}
 
 	#renderBuiltinBlockView = () => {
@@ -366,6 +453,9 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 						this._isSortMode,
 						() => this.#renderRefBlock(),
 						() => html`
+							<umb-entity-frame>
+								${when(this._isExternalContent, () => html`<uui-icon name="link"></uui-icon>`)} ${this._label}
+							</umb-entity-frame>
 							<umb-extension-slot
 								single
 								type="blockEditorCustomView"
@@ -388,7 +478,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 	#renderActionBar() {
 		if (this._isSortMode) return nothing;
 		if (!this._showActions) return nothing;
-		return html`<umb-block-action-list id="actions" block-editor=${UMB_BLOCK_LIST}></umb-block-action-list>`;
+		return html`<umb-block-action-list id="actions" .blockEditor=${UMB_BLOCK_LIST}></umb-block-action-list>`;
 	}
 
 	override render() {
@@ -484,6 +574,21 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 				transition: opacity 50ms 16ms;
 				opacity: 0;
 			}
+
+			:host([is-reference]) .umb-block-list__block {
+				--umb-entity-frame-color: var(--umb-color-reference, #7532c8);
+				--umb-entity-frame-contrast-color: var(--umb-color-reference-contrast, #ffffff);
+			}
+
+			.umb-block-list__block {
+				--umb-entity-frame-opacity: 0;
+				--umb-entity-frame-color: var(--uui-color-interactive-emphasis);
+
+				&:hover,
+				&:focus-within {
+					--umb-entity-frame-opacity: 1;
+				}
+			}
 		`,
 	];
 }
@@ -494,4 +599,4 @@ declare global {
 	interface HTMLElementTagNameMap {
 		'umb-block-list-entry': UmbBlockListEntryElement;
 	}
-}
+}

src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-entries.context.ts

@@ -56,6 +56,7 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext<
 				const valueResolver = new UmbClipboardPastePropertyValueTranslatorValueResolver(this);
 
 				const blockTypes = this._manager.getBlockTypes();
+				const libraryAllowedElementTypeKeys = await this._getLibraryAllowedElementTypeKeys(blockTypes);
 
 				const configuredSize = this._manager
 					.getEditorConfiguration()
@@ -73,6 +74,7 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext<
 						blocks: blockTypes,
 						blockGroups: [],
 						openClipboard: routingInfo.view === 'clipboard',
+						libraryAllowedElementTypeKeys,
 						clipboardFilter: async (clipboardEntryDetail) => {
 							const hasSupportedPasteTranslator = clipboardContext.hasSupportedPasteTranslator(
 								pasteTranslatorManifests,
@@ -104,7 +106,7 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext<
 				};
 			})
 			.onSubmit(async (value, data) => {
-				if (value?.create && data) {
+				if (value && 'create' in value && data) {
 					const created = await this.create(
 						value.create.contentElementTypeKey,
 						{},
@@ -120,7 +122,9 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext<
 					} else {
 						throw new Error('Failed to create block');
 					}
-				} else if (value?.clipboard && value.clipboard.selection?.length && data) {
+				} else if (value && 'library' in value) {
+					this._manager?.insertExternalContent(value.library.elementKey);
+				} else if (value && 'clipboard' in value && value.clipboard.selection?.length && data) {
 					const clipboardContext = await this.getContext(UMB_CLIPBOARD_PROPERTY_CONTEXT);
 					if (!clipboardContext) {
 						throw new Error('Clipboard context not found');
@@ -196,7 +200,7 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext<
 
 	async create(
 		contentElementTypeKey: string,
-		partialLayoutEntry?: Omit<UmbBlockListLayoutModel, 'contentKey'>,
+		partialLayoutEntry?: Omit<UmbBlockListLayoutModel, 'contentKey' | 'key'>,
 		originData?: UmbBlockListWorkspaceOriginData,
 	) {
 		await this._retrieveManager;

src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts

@@ -52,7 +52,7 @@ export class UmbBlockListManagerContext<
 	 */
 	async createWithPresets(
 		contentElementTypeKey: string,
-		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
+		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey' | 'key'>,
 		// This property is used by some implementations, but not used in this. Do not remove. [NL]
 
 		_originData?: UmbBlockListWorkspaceOriginData,

src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts

@@ -40,10 +40,10 @@ import '../../components/block-list-entry/index.js';
 
 const SORTER_CONFIG: UmbSorterConfig<UmbBlockListLayoutModel, UmbBlockListEntryElement> = {
 	getUniqueOfElement: (element) => {
-		return element.contentKey!;
+		return element.key!;
 	},
 	getUniqueOfModel: (modelEntry) => {
-		return modelEntry.contentKey;
+		return modelEntry.key;
 	},
 	//identifier: 'block-list-editor',
 	itemSelector: 'umb-block-list-entry',
@@ -406,15 +406,10 @@ export class UmbPropertyEditorUIBlockListElement
 			${this.#renderSortModeToolbar()}
 			${repeat(
 				this._layouts,
-				(layout) => layout.contentKey,
+				(layout) => layout.key,
 				(layout, index) => html`
 					${this.#renderInlineCreateButton(index)}
-					<umb-block-list-entry
-						index=${index}
-						.contentKey=${layout.contentKey}
-						.layout=${layout}
-						${umbDestroyOnDisconnect()}>
-					</umb-block-list-entry>
+					<umb-block-list-entry index=${index} .layout=${layout} ${umbDestroyOnDisconnect()}></umb-block-list-entry>
 				`,
 			)}
 			${this.#renderCreateButtonGroup()}

src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts

@@ -2,7 +2,7 @@ import type { UmbBlockRteLayoutModel } from '../../types.js';
 import { UMB_BLOCK_RTE } from '../../constants.js';
 import { UmbBlockRteEntryContext } from '../../context/block-rte-entry.context.js';
 import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
+import { stringOrStringArrayContains, UmbDeprecation } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbDataPathBlockElementDataQuery } from '@umbraco-cms/backoffice/block';
 import { UmbObserveValidationStateController } from '@umbraco-cms/backoffice/validation';
@@ -22,10 +22,35 @@ import '../../../block/action/block-action-list.element.js';
  */
 @customElement('umb-rte-block')
 export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+	/**
+	 * The unique key of this block layout entry.
+	 */
+	@property({ type: String, attribute: 'data-key', reflect: true })
+	public set key(value: string | undefined) {
+		if (!value) return;
+		this._key = value;
+		this.#context.setKey(value);
+	}
+	public get key(): string | undefined {
+		return this._key;
+	}
+	private _key?: string | undefined;
+
+	/**
+	 * @deprecated Use `key` instead. Will be removed in Umbraco 20.
+	 */
 	@property({ type: String, attribute: 'data-content-key', reflect: true })
 	public set contentKey(value: string | undefined) {
 		if (!value) return;
+		new UmbDeprecation({
+			deprecated: 'umb-rte-block.contentKey property',
+			solution: 'Use the `key` property instead.',
+			removeInVersion: '20.0.0',
+		}).warn();
 		this._contentKey = value;
+		if (!this._key) {
+			this.#context.setKey(value);
+		}
 		this.#context.setContentKey(value);
 
 		new UmbObserveValidationStateController(
@@ -255,19 +280,22 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 		if (this._exposed || this._isReadOnly) {
 			return ext.component;
 		} else {
-			return html`<div>
-				${ext.component}
-				<umb-block-overlay-expose-button
-					.contentTypeName=${this._contentTypeName}
-					@click=${this.#expose}></umb-block-overlay-expose-button>
-			</div>`;
+			return html`
+				<div>
+					${ext.component}
+					<umb-block-overlay-expose-button
+						.contentTypeName=${this._contentTypeName}
+						@click=${this.#expose}></umb-block-overlay-expose-button>
+				</div>
+			`;
 		}
 	};
 
 	#renderBlock() {
 		return this.contentKey && this._contentTypeAlias
 			? html`
-					<div class="uui-text uui-font">
+					<div class="umb-block-rte__block uui-text uui-font">
+						<umb-entity-frame .label=${this._label}></umb-entity-frame>
 						<umb-extension-slot
 							type="blockEditorCustomView"
 							default-element="umb-ref-rte-block"
@@ -287,7 +315,7 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 
 	#renderActionBar() {
 		if (!this._showActions) return nothing;
-		return html`<umb-block-action-list id="actions" block-editor=${UMB_BLOCK_RTE}></umb-block-action-list>`;
+		return html`<umb-block-action-list id="actions" .blockEditor=${UMB_BLOCK_RTE}></umb-block-action-list>`;
 	}
 
 	#renderBuiltinBlockView = () => {
@@ -299,14 +327,17 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 	};
 
 	#renderRefBlock() {
-		return html`<umb-ref-rte-block
-			.label=${this._label}
-			.icon=${this._icon}
-			.index=${this._blockViewProps.index}
-			.unpublished=${!this._exposed}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}
-			.config=${this._blockViewProps.config}></umb-ref-rte-block>`;
+		return html`
+			<umb-ref-rte-block
+				.label=${this._label}
+				.icon=${this._icon}
+				.index=${this._blockViewProps.index}
+				.unpublished=${!this._exposed}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}
+				.config=${this._blockViewProps.config}>
+			</umb-ref-rte-block>
+		`;
 	}
 
 	override render() {
@@ -355,6 +386,21 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 			:host([drag-placeholder]) {
 				opacity: 0.2;
 			}
+
+			:host([is-reference]) .umb-block-rte__block {
+				--umb-entity-frame-color: var(--umb-color-reference, #7532c8);
+				--umb-entity-frame-contrast-color: var(--umb-color-reference-contrast, #ffffff);
+			}
+
+			.umb-block-rte__block {
+				--umb-entity-frame-opacity: 0;
+				--umb-entity-frame-color: var(--uui-color-interactive-emphasis);
+
+				&:hover,
+				&:focus-within {
+					--umb-entity-frame-opacity: 1;
+				}
+			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts

@@ -77,12 +77,15 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext<
 				const config = propertyContext.getConfig();
 				const valueResolver = new UmbClipboardPastePropertyValueTranslatorValueResolver(this);
 
+				const libraryAllowedElementTypeKeys = await this._getLibraryAllowedElementTypeKeys(blockTypes);
+
 				return {
 					modal: { size: modalSize },
 					data: {
 						blocks: blockTypes,
 						blockGroups: [],
 						openClipboard: routingInfo.view === 'clipboard',
+						libraryAllowedElementTypeKeys,
 						clipboardFilter: async (clipboardEntryDetail) => {
 							const hasSupportedPasteTranslator = clipboardContext.hasSupportedPasteTranslator(
 								pasteTranslatorManifests,
@@ -114,7 +117,7 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext<
 				};
 			})
 			.onSubmit(async (value, data) => {
-				if (value?.create && data) {
+				if (value && 'create' in value && data) {
 					const created = await this.create(
 						value.create.contentElementTypeKey,
 						{},
@@ -130,7 +133,12 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext<
 					} else {
 						throw new Error('Failed to create block');
 					}
-				} else if (value?.clipboard && value.clipboard.selection?.length && data) {
+				} else if (value && 'library' in value && data) {
+					await this._manager?.insertExternalContent(
+						value.library.elementKey,
+						data.originData as UmbBlockRteWorkspaceOriginData,
+					);
+				} else if (value && 'clipboard' in value && value.clipboard.selection?.length && data) {
 					const clipboardContext = await this.getContext(UMB_CLIPBOARD_PROPERTY_CONTEXT);
 					if (!clipboardContext) {
 						throw new Error('Clipboard context not found');
@@ -193,7 +201,7 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext<
 
 	async create(
 		contentElementTypeKey: string,
-		partialLayoutEntry?: Omit<UmbBlockRteLayoutModel, 'contentKey'>,
+		partialLayoutEntry?: Omit<UmbBlockRteLayoutModel, 'contentKey' | 'key'>,
 		originData?: UmbBlockRteWorkspaceOriginData,
 	) {
 		await this._retrieveManager;

src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts

@@ -3,6 +3,7 @@ import type { UmbBlockRteLayoutModel, UmbBlockRteTypeModel } from '../types.js';
 import type { UmbBlockDataModel } from '../../block/types.js';
 import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
+import { UmbId } from '@umbraco-cms/backoffice/id';
 
 import '../components/block-rte-entry/index.js';
 
@@ -53,7 +54,7 @@ export class UmbBlockRteManagerContext<
 	 */
 	async createWithPresets(
 		contentElementTypeKey: string,
-		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
+		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey' | 'key'>,
 		// This property is used by some implementations, but not used in this, do not remove. [NL]
 
 		_originData?: UmbBlockRteWorkspaceOriginData,
@@ -82,6 +83,14 @@ export class UmbBlockRteManagerContext<
 		return true;
 	}
 
+	override async insertExternalContent(elementKey: string, originData?: UmbBlockRteWorkspaceOriginData) {
+		await super.insertExternalContent(elementKey, originData);
+		if (originData) {
+			const layout = { key: UmbId.new(), contentKey: elementKey, isExternalContent: true } as BlockLayoutType;
+			this.notifyBlockInserted(layout, originData);
+		}
+	}
+
 	/**
 	 * @param contentKey
 	 * @internal

src/Umbraco.Web.UI.Client/src/packages/block/block-single/clipboard/block/copy/block-single-to-block-copy-translator.test.ts

@@ -32,6 +32,7 @@ describe('UmbBlockSingleToBlockClipboardCopyPropertyValueTranslator', () => {
 		layout: {
 			[UMB_BLOCK_SINGLE_PROPERTY_EDITOR_SCHEMA_ALIAS]: [
 				{
+					key: 'contentKey',
 					contentKey: 'contentKey',
 					settingsKey: null,
 				},
@@ -51,6 +52,7 @@ describe('UmbBlockSingleToBlockClipboardCopyPropertyValueTranslator', () => {
 		contentData: blockSinglePropertyValue.contentData,
 		layout: [
 			{
+				key: 'contentKey',
 				contentKey: 'contentKey',
 				settingsKey: null,
 			},

src/Umbraco.Web.UI.Client/src/packages/block/block-single/clipboard/block/paste/block-to-block-single-paste-translator.test.ts

@@ -32,6 +32,7 @@ describe('UmbBlockToBlockSingleClipboardPastePropertyValueTranslator', () => {
 		layout: {
 			[UMB_BLOCK_SINGLE_PROPERTY_EDITOR_SCHEMA_ALIAS]: [
 				{
+					key: 'contentKey',
 					contentKey: 'contentKey',
 					settingsKey: null,
 				},
@@ -45,6 +46,7 @@ describe('UmbBlockToBlockSingleClipboardPastePropertyValueTranslator', () => {
 		contentData: blockSinglePropertyValue.contentData,
 		layout: [
 			{
+				key: 'contentKey',
 				contentKey: 'contentKey',
 				settingsKey: null,
 			},

src/Umbraco.Web.UI.Client/src/packages/block/block-single/components/block-single-entry/block-single-entry.element.ts

@@ -1,10 +1,11 @@
 import { UmbBlockSingleEntryContext } from '../../context/block-single-entry.context.js';
 import type { UmbBlockSingleLayoutModel } from '../../types.js';
 import { UMB_BLOCK_SINGLE } from '../../constants.js';
-import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement, umbDestroyOnDisconnect } from '@umbraco-cms/backoffice/lit-element';
-import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
+import { stringOrStringArrayContains, UmbDeprecation } from '@umbraco-cms/backoffice/utils';
 import { UmbDataPathBlockElementDataQuery } from '@umbraco-cms/backoffice/block';
+import { UmbElementVariantState } from '@umbraco-cms/backoffice/element';
 import { UmbObserveValidationStateController } from '@umbraco-cms/backoffice/validation';
 import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '@umbraco-cms/backoffice/external/uui';
 import type {
@@ -33,13 +34,57 @@ export class UmbBlockSingleEntryElement extends UmbLitElement implements UmbProp
 		this.#context.setIndex(value);
 	}
 
+	/**
+	 * Set the layout entry for this block.
+	 */
+	public set layout(value: UmbBlockSingleLayoutModel | undefined) {
+		if (!value) return;
+		const key = value.key;
+		const contentKey = value.contentKey;
+
+		if (key && key !== this._key) {
+			this._key = key;
+			this.#context.setKey(key);
+		}
+
+		if (contentKey && contentKey !== this._contentKey) {
+			this._contentKey = contentKey;
+
+			new UmbObserveValidationStateController(
+				this,
+				`$.contentData[${UmbDataPathBlockElementDataQuery({ key: contentKey })}]`,
+				(hasMessages) => {
+					this._contentInvalid = hasMessages;
+					this._blockViewProps.contentInvalid = hasMessages;
+				},
+				'observeMessagesForContent',
+			);
+		}
+	}
+
+	public get key(): string | undefined {
+		return this._key;
+	}
+	private _key?: string | undefined;
+
+	/**
+	 * @deprecated Use the `layout` property instead. Will be removed in Umbraco 20.
+	 */
 	@property({ attribute: false })
 	public get contentKey(): string | undefined {
 		return this._contentKey;
 	}
 	public set contentKey(value: string | undefined) {
 		if (!value) return;
+		new UmbDeprecation({
+			deprecated: 'umb-block-single-entry.contentKey property',
+			solution: 'Use the `layout` property instead.',
+			removeInVersion: '20.0.0',
+		}).warn();
 		this._contentKey = value;
+		if (!this._key) {
+			this.#context.setKey(value);
+		}
 		this.#context.setContentKey(value);
 
 		new UmbObserveValidationStateController(
@@ -74,6 +119,8 @@ export class UmbBlockSingleEntryElement extends UmbLitElement implements UmbProp
 	@state()
 	private _exposed?: boolean;
 
+	private _hasExpose?: boolean;
+
 	@state()
 	private _unsupported?: boolean;
 
@@ -97,10 +144,11 @@ export class UmbBlockSingleEntryElement extends UmbLitElement implements UmbProp
 		config: { showContentEdit: false, showSettingsEdit: false },
 	}; // Set to undefined cause it will be set before we render.
 
-	#updateBlockViewProps(incoming: Partial<UmbBlockEditorCustomViewProperties<UmbBlockSingleLayoutModel>>) {
-		this._blockViewProps = { ...this._blockViewProps, ...incoming };
-		this.requestUpdate('_blockViewProps');
-	}
+	@property({ type: Boolean, attribute: 'is-reference', reflect: true })
+	private _isExternalContent = false;
+
+	@state()
+	private _externalContentVariantState: string | null | undefined;
 
 	@state()
 	private _isReadOnly = false;
@@ -109,6 +157,7 @@ export class UmbBlockSingleEntryElement extends UmbLitElement implements UmbProp
 		super();
 		this.#init();
 	}
+
 	#init() {
 		this.observe(
 			this.#context.showContentEdit,
@@ -152,8 +201,24 @@ export class UmbBlockSingleEntryElement extends UmbLitElement implements UmbProp
 		this.observe(
 			this.#context.hasExpose,
 			(exposed) => {
-				this.#updateBlockViewProps({ unpublished: !exposed });
-				this._exposed = exposed;
+				this._hasExpose = exposed;
+				this.#updateExposedState();
+			},
+			null,
+		);
+		this.observe(
+			this.#context.isExternalContent,
+			(isExternalContent) => {
+				this._isExternalContent = isExternalContent;
+				this.#updateExposedState();
+			},
+			null,
+		);
+		this.observe(
+			this.#context.externalContentVariantState,
+			(state) => {
+				this._externalContentVariantState = state;
+				this.#updateExposedState();
 			},
 			null,
 		);
@@ -245,6 +310,21 @@ export class UmbBlockSingleEntryElement extends UmbLitElement implements UmbProp
 		);
 	}
 
+	#updateBlockViewProps(incoming: Partial<UmbBlockEditorCustomViewProperties<UmbBlockSingleLayoutModel>>) {
+		this._blockViewProps = { ...this._blockViewProps, ...incoming };
+		this.requestUpdate('_blockViewProps');
+	}
+
+	#updateExposedState() {
+		// External content blocks use the element's variant state; local blocks use the expose entry
+		const isExposed = this._isExternalContent
+			? this._externalContentVariantState === UmbElementVariantState.PUBLISHED ||
+				this._externalContentVariantState === UmbElementVariantState.PUBLISHED_PENDING_CHANGES
+			: this._hasExpose;
+		this.#updateBlockViewProps({ unpublished: !isExposed });
+		this._exposed = isExposed;
+	}
+
 	override connectedCallback(): void {
 		super.connectedCallback();
 		// element styling:
@@ -313,33 +393,42 @@ export class UmbBlockSingleEntryElement extends UmbLitElement implements UmbProp
 	};
 
 	#renderRefBlock() {
-		return html`<umb-ref-single-block
-			.label=${this._label}
-			.icon=${this._icon}
-			.unpublished=${!this._exposed}
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}
-			${umbDestroyOnDisconnect()}></umb-ref-single-block>`;
+		return html`
+			<umb-ref-single-block
+				.label=${this._label}
+				.icon=${this._icon}
+				.unpublished=${!this._exposed}
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}>
+			</umb-ref-single-block>
+		`;
 	}
 
 	#renderInlineBlock() {
-		return html`<umb-inline-single-block
-			.label=${this._label}
-			.icon=${this._icon}
-			.unpublished=${!this._exposed}
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}
-			${umbDestroyOnDisconnect()}></umb-inline-single-block>`;
+		return html`
+			<umb-inline-single-block
+				.label=${this._label}
+				.icon=${this._icon}
+				.unpublished=${!this._exposed}
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}>
+			</umb-inline-single-block>
+		`;
 	}
 
 	#renderUnsupportedBlock() {
-		return html`<umb-unsupported-single-block
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}
-			${umbDestroyOnDisconnect()}></umb-unsupported-single-block>`;
+		return html`
+			<umb-unsupported-single-block
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}
+				${umbDestroyOnDisconnect()}>
+			</umb-unsupported-single-block>
+		`;
 	}
 
 	#renderBuiltinBlockView = () => {
@@ -356,6 +445,9 @@ export class UmbBlockSingleEntryElement extends UmbLitElement implements UmbProp
 		return this.contentKey && (this._contentTypeAlias || this._unsupported)
 			? html`
 					<div class="umb-block-single__block">
+						<umb-entity-frame>
+							${when(this._isExternalContent, () => html`<uui-icon name="link"></uui-icon>`)} ${this._label}
+						</umb-entity-frame>
 						<umb-extension-slot
 							type="blockEditorCustomView"
 							default-element=${this._inlineEditingMode ? 'umb-inline-single-block' : 'umb-ref-single-block'}
@@ -375,7 +467,7 @@ export class UmbBlockSingleEntryElement extends UmbLitElement implements UmbProp
 
 	#renderActionBar() {
 		if (!this._showActions) return nothing;
-		return html`<umb-block-action-list id="actions" block-editor=${UMB_BLOCK_SINGLE}></umb-block-action-list>`;
+		return html`<umb-block-action-list id="actions" .blockEditor=${UMB_BLOCK_SINGLE}></umb-block-action-list>`;
 	}
 
 	override render() {
@@ -471,6 +563,21 @@ export class UmbBlockSingleEntryElement extends UmbLitElement implements UmbProp
 				transition: opacity 50ms 16ms;
 				opacity: 0;
 			}
+
+			:host([is-reference]) .umb-block-single__block {
+				--umb-entity-frame-color: var(--umb-color-reference, #7532c8);
+				--umb-entity-frame-contrast-color: var(--umb-color-reference-contrast, #ffffff);
+			}
+
+			.umb-block-single__block {
+				--umb-entity-frame-opacity: 0;
+				--umb-entity-frame-color: var(--uui-color-interactive-emphasis);
+
+				&:hover,
+				&:focus-within {
+					--umb-entity-frame-opacity: 1;
+				}
+			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/block/block-single/components/ref-single-block/ref-single-block.element.ts

@@ -37,10 +37,11 @@ export class UmbRefSingleBlockElement extends UmbLitElement {
 				<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
 				${when(
 					this.unpublished,
-					() =>
-						html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
-							><umb-localize key="blockEditor_notExposedLabel"></umb-localize
-						></uui-tag>`,
+					() => html`
+						<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}>
+							<umb-localize key="blockEditor_notExposedLabel"></umb-localize>
+						</uui-tag>
+					`,
 				)}
 			</uui-ref-node>
 		`;

src/Umbraco.Web.UI.Client/src/packages/block/block-single/context/block-single-entries.context.ts

@@ -56,6 +56,7 @@ export class UmbBlockSingleEntriesContext extends UmbBlockEntriesContext<
 				const valueResolver = new UmbClipboardPastePropertyValueTranslatorValueResolver(this);
 
 				const blockTypes = this._manager.getBlockTypes() ?? [];
+				const libraryAllowedElementTypeKeys = await this._getLibraryAllowedElementTypeKeys(blockTypes);
 
 				const configuredSize = this._manager
 					.getEditorConfiguration()
@@ -73,6 +74,7 @@ export class UmbBlockSingleEntriesContext extends UmbBlockEntriesContext<
 						blocks: blockTypes,
 						blockGroups: [],
 						openClipboard: routingInfo.view === 'clipboard',
+						libraryAllowedElementTypeKeys,
 						clipboardFilter: async (clipboardEntryDetail) => {
 							const hasSupportedPasteTranslator = clipboardContext.hasSupportedPasteTranslator(
 								pasteTranslatorManifests,
@@ -104,7 +106,7 @@ export class UmbBlockSingleEntriesContext extends UmbBlockEntriesContext<
 				};
 			})
 			.onSubmit(async (value, data) => {
-				if (value?.create && data) {
+				if (value && 'create' in value && data) {
 					const created = await this.create(
 						value.create.contentElementTypeKey,
 						{},
@@ -120,7 +122,9 @@ export class UmbBlockSingleEntriesContext extends UmbBlockEntriesContext<
 					} else {
 						throw new Error('Failed to create block');
 					}
-				} else if (value?.clipboard && value.clipboard.selection?.length && data) {
+				} else if (value && 'library' in value) {
+					this._manager?.insertExternalContent(value.library.elementKey);
+				} else if (value && 'clipboard' in value && value.clipboard.selection?.length && data) {
 					const clipboardContext = await this.getContext(UMB_CLIPBOARD_PROPERTY_CONTEXT);
 					if (!clipboardContext) {
 						throw new Error('Clipboard context not found');
@@ -196,7 +200,7 @@ export class UmbBlockSingleEntriesContext extends UmbBlockEntriesContext<
 
 	async create(
 		contentElementTypeKey: string,
-		partialLayoutEntry?: Omit<UmbBlockSingleLayoutModel, 'contentKey'>,
+		partialLayoutEntry?: Omit<UmbBlockSingleLayoutModel, 'contentKey' | 'key'>,
 		originData?: UmbBlockSingleWorkspaceOriginData,
 	) {
 		await this._retrieveManager;

src/Umbraco.Web.UI.Client/src/packages/block/block-single/context/block-single-manager.context.ts

@@ -28,7 +28,7 @@ export class UmbBlockSingleManagerContext<
 	 */
 	async createWithPresets(
 		contentElementTypeKey: string,
-		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
+		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey' | 'key'>,
 		// This property is used by some implementations, but not used in this. Do not remove. [NL]
 
 		_originData?: UmbBlockSingleWorkspaceOriginData,

src/Umbraco.Web.UI.Client/src/packages/block/block-single/property-editors/block-single-editor/property-editor-ui-block-single.element.ts

@@ -41,10 +41,10 @@ import { UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/variant';
 
 const SORTER_CONFIG: UmbSorterConfig<UmbBlockSingleLayoutModel, UmbBlockSingleEntryElement> = {
 	getUniqueOfElement: (element) => {
-		return element.contentKey!;
+		return element.key!;
 	},
 	getUniqueOfModel: (modelEntry) => {
-		return modelEntry.contentKey;
+		return modelEntry.key;
 	},
 	//identifier: 'block-single-editor',
 	itemSelector: 'umb-block-single-entry',
@@ -395,13 +395,9 @@ export class UmbPropertyEditorUIBlockSingleElement
 		return html`
 			${repeat(
 				this._layouts,
-				(x) => x.contentKey,
+				(x) => x.key,
 				(layoutEntry) => html`
-					<umb-block-single-entry
-						.contentKey=${layoutEntry.contentKey}
-						.layout=${layoutEntry}
-						${umbDestroyOnDisconnect()}>
-					</umb-block-single-entry>
+					<umb-block-single-entry .layout=${layoutEntry} ${umbDestroyOnDisconnect()}></umb-block-single-entry>
 				`,
 			)}
 			${this.#renderCreateButtonGroup()}

src/Umbraco.Web.UI.Client/src/packages/block/block/action/block-action.interface.ts

@@ -1,5 +1,6 @@
 import type { UmbBlockActionArgs } from './types.js';
 import type { UmbAction } from '@umbraco-cms/backoffice/action';
+import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 
 export interface UmbBlockAction<ArgsMetaType> extends UmbAction<UmbBlockActionArgs<ArgsMetaType>> {
 	/**
@@ -9,6 +10,13 @@ export interface UmbBlockAction<ArgsMetaType> extends UmbAction<UmbBlockActionAr
 	 */
 	getHref(): Promise<string | undefined>;
 
+	/**
+	 * An optional reactive observable for the href location.
+	 * When provided, the default kind element subscribes to it and updates the link reactively,
+	 * rather than resolving `getHref()` once at initialisation time.
+	 */
+	hrefObservable?: Observable<string | undefined>;
+
 	/**
 	 * The `execute` method, the action will act as a button.
 	 * @returns {Promise<void>}
@@ -22,4 +30,12 @@ export interface UmbBlockAction<ArgsMetaType> extends UmbAction<UmbBlockActionAr
 	 * @returns {Promise<string | undefined>}
 	 */
 	getValidationDataPath(): Promise<string | undefined>;
+
+	/**
+	 * An optional reactive observable for the validation data path.
+	 * When provided, the default kind element subscribes to it and updates the validation
+	 * state controller reactively, rather than resolving `getValidationDataPath()` once at
+	 * initialisation time.
+	 */
+	validationDataPathObservable?: Observable<string | undefined>;
 }

src/Umbraco.Web.UI.Client/src/packages/block/block/action/common/disconnect-from-element-library/constants.ts

@@ -0,0 +1 @@
+export const UMB_BLOCK_ACTION_DISCONNECT_FROM_ELEMENT_LIBRARY_ALIAS = 'Umb.BlockAction.DisconnectFromElementLibrary';

src/Umbraco.Web.UI.Client/src/packages/block/block/action/common/disconnect-from-element-library/disconnect-from-element-library-block.action.ts

@@ -0,0 +1,12 @@
+import type { MetaBlockActionDefaultKind } from '../../default/types.js';
+import { UmbBlockActionBase } from '../../block-action-base.js';
+import { UMB_BLOCK_ENTRY_CONTEXT } from '../../../context/block-entry.context-token.js';
+
+export class UmbDisconnectFromElementLibraryBlockAction extends UmbBlockActionBase<MetaBlockActionDefaultKind> {
+	override async execute() {
+		const context = await this.getContext(UMB_BLOCK_ENTRY_CONTEXT);
+		await context?.requestDisconnectFromElementLibrary();
+	}
+}
+
+export { UmbDisconnectFromElementLibraryBlockAction as api };

src/Umbraco.Web.UI.Client/src/packages/block/block/action/common/disconnect-from-element-library/manifests.ts

@@ -0,0 +1,30 @@
+import {
+	UMB_BLOCK_ENTRY_HAS_EXTERNAL_CONTENT_CONDITION_ALIAS,
+	UMB_BLOCK_ENTRY_IS_READ_ONLY_CONDITION_ALIAS,
+} from '../../../conditions/constants.js';
+import { UMB_BLOCK_ACTION_DISCONNECT_FROM_ELEMENT_LIBRARY_ALIAS } from './constants.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'blockAction',
+		kind: 'default',
+		alias: UMB_BLOCK_ACTION_DISCONNECT_FROM_ELEMENT_LIBRARY_ALIAS,
+		name: 'Disconnect Block From Element Library Action',
+		weight: 250,
+		api: () => import('./disconnect-from-element-library-block.action.js'),
+		meta: {
+			icon: 'icon-unlink',
+			label: '#blockEditor_disconnectFromElementLibrary',
+		},
+		conditions: [
+			{
+				alias: UMB_BLOCK_ENTRY_IS_READ_ONLY_CONDITION_ALIAS,
+				match: false,
+			},
+			{
+				alias: UMB_BLOCK_ENTRY_HAS_EXTERNAL_CONTENT_CONDITION_ALIAS,
+				match: true,
+			},
+		],
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/block/block/action/common/edit-content/edit-content-block.action.ts

@@ -4,16 +4,26 @@ import { UmbBlockActionBase } from '../../block-action-base.js';
 import { UmbDataPathBlockElementDataQuery } from '../../../validation/data-path-element-data-query.function.js';
 import { UMB_BLOCK_ENTRY_CONTEXT } from '../../../context/block-entry.context-token.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbStringState } from '@umbraco-cms/backoffice/observable-api';
 
 /**
  * Block action that navigates to the block's content editor workspace.
- * Exposes the workspace edit path via `getHref()` and the content validation data path via `getValidationDataPath()`.
+ * Exposes the workspace edit path via `getHref()` / `hrefObservable` and the content validation
+ * data path via `getValidationDataPath()` / `validationDataPathObservable`.
+ * The observable variants update reactively (e.g. after disconnect from Element Library),
+ * whereas the promise variants resolve once for consumers that call them imperatively.
  */
 export class UmbEditContentBlockAction extends UmbBlockActionBase<MetaBlockActionDefaultKind> {
 	#context?: typeof UMB_BLOCK_ENTRY_CONTEXT.TYPE;
 	#contextReady: Promise<void>;
 	#resolveContext!: () => void;
 
+	readonly #href = new UmbStringState(undefined);
+	readonly hrefObservable = this.#href.asObservable();
+
+	readonly #validationDataPath = new UmbStringState(undefined);
+	readonly validationDataPathObservable = this.#validationDataPath.asObservable();
+
 	constructor(host: UmbControllerHost, args: UmbBlockActionArgs<MetaBlockActionDefaultKind>) {
 		super(host, args);
 
@@ -23,7 +33,26 @@ export class UmbEditContentBlockAction extends UmbBlockActionBase<MetaBlockActio
 
 		this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
 			this.#context = context;
+			if (!context) return;
 			this.#resolveContext();
+
+			this.observe(
+				context.workspaceEditContentPath,
+				(path) => this.#href.setValue(path || undefined),
+				'observeHref',
+			);
+
+			this.observe(
+				context.contentKey,
+				(contentKey) => {
+					this.#validationDataPath.setValue(
+						contentKey
+							? `$.contentData[${UmbDataPathBlockElementDataQuery({ key: contentKey })}]`
+							: undefined,
+					);
+				},
+				'observeValidationDataPath',
+			);
 		});
 	}
 

src/Umbraco.Web.UI.Client/src/packages/block/block/action/common/edit-settings/edit-settings-block.action.ts

@@ -3,17 +3,27 @@ import type { UmbBlockActionArgs } from '../../types.js';
 import { UmbBlockActionBase } from '../../block-action-base.js';
 import { UmbDataPathBlockElementDataQuery } from '../../../validation/data-path-element-data-query.function.js';
 import { UMB_BLOCK_ENTRY_CONTEXT } from '../../../context/block-entry.context-token.js';
+import { UmbStringState } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 /**
  * Block action that navigates to the block's settings editor workspace.
- * Exposes the workspace edit path via `getHref()` and the settings validation data path via `getValidationDataPath()`.
+ * Exposes the workspace edit path via `getHref()` / `hrefObservable` and the settings validation
+ * data path via `getValidationDataPath()` / `validationDataPathObservable`.
+ * The observable variants update reactively (e.g. after transfer to Element Library),
+ * whereas the promise variants resolve once for consumers that call them imperatively.
  */
 export class UmbEditSettingsBlockAction extends UmbBlockActionBase<MetaBlockActionDefaultKind> {
 	#context?: typeof UMB_BLOCK_ENTRY_CONTEXT.TYPE;
 	#contextReady: Promise<void>;
 	#resolveContext!: () => void;
 
+	readonly #href = new UmbStringState(undefined);
+	readonly hrefObservable = this.#href.asObservable();
+
+	readonly #validationDataPath = new UmbStringState(undefined);
+	readonly validationDataPathObservable = this.#validationDataPath.asObservable();
+
 	constructor(host: UmbControllerHost, args: UmbBlockActionArgs<MetaBlockActionDefaultKind>) {
 		super(host, args);
 
@@ -23,7 +33,20 @@ export class UmbEditSettingsBlockAction extends UmbBlockActionBase<MetaBlockActi
 
 		this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
 			this.#context = context;
+			if (!context) return;
 			this.#resolveContext();
+
+			this.observe(context.workspaceEditSettingsPath, (path) => this.#href.setValue(path || undefined), 'observeHref');
+
+			this.observe(
+				context.settingsKey,
+				(settingsKey) => {
+					this.#validationDataPath.setValue(
+						settingsKey ? `$.settingsData[${UmbDataPathBlockElementDataQuery({ key: settingsKey })}]` : undefined,
+					);
+				},
+				'observeValidationDataPath',
+			);
 		});
 	}
 

src/Umbraco.Web.UI.Client/src/packages/block/block/action/common/transfer-to-element-library/constants.ts

@@ -0,0 +1 @@
+export const UMB_BLOCK_ACTION_TRANSFER_TO_ELEMENT_LIBRARY_ALIAS = 'Umb.BlockAction.TransferToElementLibrary';

src/Umbraco.Web.UI.Client/src/packages/block/block/action/common/transfer-to-element-library/manifests.ts

@@ -0,0 +1,30 @@
+import {
+	UMB_BLOCK_ENTRY_HAS_EXTERNAL_CONTENT_CONDITION_ALIAS,
+	UMB_BLOCK_ENTRY_IS_READ_ONLY_CONDITION_ALIAS,
+} from '../../../conditions/constants.js';
+import { UMB_BLOCK_ACTION_TRANSFER_TO_ELEMENT_LIBRARY_ALIAS } from './constants.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'blockAction',
+		kind: 'default',
+		alias: UMB_BLOCK_ACTION_TRANSFER_TO_ELEMENT_LIBRARY_ALIAS,
+		name: 'Transfer Block To Element Library Action',
+		weight: 250,
+		api: () => import('./transfer-to-element-library-block.action.js'),
+		meta: {
+			icon: 'icon-link',
+			label: '#blockEditor_transferToElementLibrary',
+		},
+		conditions: [
+			{
+				alias: UMB_BLOCK_ENTRY_IS_READ_ONLY_CONDITION_ALIAS,
+				match: false,
+			},
+			{
+				alias: UMB_BLOCK_ENTRY_HAS_EXTERNAL_CONTENT_CONDITION_ALIAS,
+				match: false,
+			},
+		],
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/block/block/action/common/transfer-to-element-library/transfer-to-element-library-block.action.ts

@@ -0,0 +1,12 @@
+import type { MetaBlockActionDefaultKind } from '../../default/types.js';
+import { UmbBlockActionBase } from '../../block-action-base.js';
+import { UMB_BLOCK_ENTRY_CONTEXT } from '../../../context/block-entry.context-token.js';
+
+export class UmbTransferToElementLibraryBlockAction extends UmbBlockActionBase<MetaBlockActionDefaultKind> {
+	override async execute() {
+		const context = await this.getContext(UMB_BLOCK_ENTRY_CONTEXT);
+		await context?.requestTransferToElementLibrary();
+	}
+}
+
+export { UmbTransferToElementLibraryBlockAction as api };

src/Umbraco.Web.UI.Client/src/packages/block/block/action/default/block-action.element.ts

@@ -29,23 +29,45 @@ export class UmbBlockActionDefaultElement<
 		this.#api = api;
 		this._href = undefined;
 
-		// TODO: getHref() and getValidationDataPath() resolve once. If the underlying observable values
-		// change, the button won't update. Consider making these reactive in a future iteration. [LK]
-		this.#api?.getHref?.().then((href) => {
-			this._href = href;
-		});
+		if (api?.hrefObservable) {
+			this.observe(api.hrefObservable, (href) => (this._href = href), 'observeHref');
+		} else {
+			this.removeUmbControllerByAlias('observeHref');
+			api?.getHref?.().then((href) => {
+				this._href = href;
+			});
+		}
 
-		this.#api?.getValidationDataPath?.().then((path) => {
-			this.removeUmbControllerByAlias('observeValidation');
-			if (path) {
-				new UmbObserveValidationStateController(
-					this,
-					path,
-					(hasMessages) => (this._invalid = hasMessages),
-					'observeValidation',
-				);
-			}
-		});
+		if (api?.validationDataPathObservable) {
+			this.observe(
+				api.validationDataPathObservable,
+				(path) => {
+					this.removeUmbControllerByAlias('observeValidation');
+					if (path) {
+						new UmbObserveValidationStateController(
+							this,
+							path,
+							(hasMessages) => (this._invalid = hasMessages),
+							'observeValidation',
+						);
+					}
+				},
+				'observeValidationDataPath',
+			);
+		} else {
+			this.removeUmbControllerByAlias('observeValidationDataPath');
+			api?.getValidationDataPath?.().then((path) => {
+				this.removeUmbControllerByAlias('observeValidation');
+				if (path) {
+					new UmbObserveValidationStateController(
+						this,
+						path,
+						(hasMessages) => (this._invalid = hasMessages),
+						'observeValidation',
+					);
+				}
+			});
+		}
 	}
 
 	@state()

src/Umbraco.Web.UI.Client/src/packages/block/block/action/index.ts

@@ -2,9 +2,11 @@ export * from './block-action-base.js';
 export * from './block-action-list.element.js';
 export * from './common/copy-to-clipboard/constants.js';
 export * from './common/delete/constants.js';
+export * from './common/disconnect-from-element-library/constants.js';
 export * from './common/edit-content/constants.js';
 export * from './common/edit-settings/constants.js';
 export * from './common/expose-content/constants.js';
+export * from './common/transfer-to-element-library/constants.js';
 export * from './default/default.action.kind.js';
 
 export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/block/block/action/manifests.ts

@@ -1,8 +1,10 @@
 import { manifests as copyToClipboardManifests } from './common/copy-to-clipboard/manifests.js';
 import { manifests as deleteManifests } from './common/delete/manifests.js';
+import { manifests as disconnectFromElementLibraryManifests } from './common/disconnect-from-element-library/manifests.js';
 import { manifests as editContentManifests } from './common/edit-content/manifests.js';
 import { manifests as editSettingsManifests } from './common/edit-settings/manifests.js';
 import { manifests as exposeContentManifests } from './common/expose-content/manifests.js';
+import { manifests as transferToElementLibraryManifests } from './common/transfer-to-element-library/manifests.js';
 import { manifests as defaultKindManifests } from './default/manifests.js';
 import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
@@ -10,7 +12,9 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 	...defaultKindManifests,
 	...copyToClipboardManifests,
 	...deleteManifests,
+	...disconnectFromElementLibraryManifests,
 	...editContentManifests,
 	...editSettingsManifests,
 	...exposeContentManifests,
+	...transferToElementLibraryManifests,
 ];

src/Umbraco.Web.UI.Client/src/packages/block/block/conditions/block-entry-has-external-content.condition.ts

@@ -0,0 +1,30 @@
+import { UMB_BLOCK_ENTRY_CONTEXT } from '../context/block-entry.context-token.js';
+import type { BlockEntryHasExternalContentConditionConfig } from './types.js';
+import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbBlockEntryHasExternalContentCondition
+	extends UmbConditionBase<BlockEntryHasExternalContentConditionConfig>
+	implements UmbExtensionCondition
+{
+	constructor(
+		host: UmbControllerHost,
+		args: UmbConditionControllerArguments<BlockEntryHasExternalContentConditionConfig>,
+	) {
+		super(host, args);
+
+		this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
+			if (!context) return;
+			this.observe(
+				context.isExternalContent,
+				(isExternalContent) => {
+					this.permitted = isExternalContent === (this.config.match !== undefined ? this.config.match : true);
+				},
+				'observeIsExternalContent',
+			);
+		});
+	}
+}
+
+export default UmbBlockEntryHasExternalContentCondition;

src/Umbraco.Web.UI.Client/src/packages/block/block/conditions/block-workspace-has-content.condition.ts

@@ -0,0 +1,29 @@
+import { UMB_BLOCK_WORKSPACE_CONTEXT } from '../workspace/block-workspace.context-token.js';
+import type { BlockWorkspaceHasContentConditionConfig } from './types.js';
+import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbBlockWorkspaceHasContentCondition
+	extends UmbConditionBase<BlockWorkspaceHasContentConditionConfig>
+	implements UmbExtensionCondition
+{
+	constructor(
+		host: UmbControllerHost,
+		args: UmbConditionControllerArguments<BlockWorkspaceHasContentConditionConfig>,
+	) {
+		super(host, args);
+
+		this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (context) => {
+			this.observe(
+				context?.hasContent,
+				(hasContent) => {
+					this.permitted = hasContent === true;
+				},
+				'observeHasContent',
+			);
+		});
+	}
+}
+
+export default UmbBlockWorkspaceHasContentCondition;

src/Umbraco.Web.UI.Client/src/packages/block/block/conditions/constants.ts

@@ -1,4 +1,6 @@
 export const UMB_BLOCK_ENTRY_HAS_SETTINGS_CONDITION_ALIAS = 'Umb.Condition.BlockEntryHasSettings';
 export const UMB_BLOCK_ENTRY_IS_EXPOSED_CONDITION_ALIAS = 'Umb.Condition.BlockEntryIsExposed';
+export const UMB_BLOCK_ENTRY_HAS_EXTERNAL_CONTENT_CONDITION_ALIAS = 'Umb.Condition.BlockEntryHasExternalContent';
 export const UMB_BLOCK_ENTRY_IS_READ_ONLY_CONDITION_ALIAS = 'Umb.Condition.BlockEntryIsReadOnly';
 export const UMB_BLOCK_ENTRY_SHOW_CONTENT_EDIT_CONDITION_ALIAS = 'Umb.Condition.BlockEntryShowContentEdit';
+export const UMB_BLOCK_WORKSPACE_HAS_CONTENT_CONDITION_ALIAS = 'Umb.Condition.BlockWorkspaceHasContent';

src/Umbraco.Web.UI.Client/src/packages/block/block/conditions/manifests.ts

@@ -1,12 +1,16 @@
 import {
 	UMB_BLOCK_ENTRY_HAS_SETTINGS_CONDITION_ALIAS,
+	UMB_BLOCK_ENTRY_HAS_EXTERNAL_CONTENT_CONDITION_ALIAS,
 	UMB_BLOCK_ENTRY_IS_EXPOSED_CONDITION_ALIAS,
 	UMB_BLOCK_ENTRY_IS_READ_ONLY_CONDITION_ALIAS,
+	UMB_BLOCK_WORKSPACE_HAS_CONTENT_CONDITION_ALIAS,
 } from './constants.js';
 import UmbBlockEntryHasSettingsCondition from './block-entry-has-settings.condition.js';
+import UmbBlockEntryHasExternalContentCondition from './block-entry-has-external-content.condition.js';
 import UmbBlockEntryIsExposedCondition from './block-entry-is-exposed.condition.js';
 import UmbBlockEntryIsReadOnlyCondition from './block-entry-is-read-only.condition.js';
 import UmbBlockEntryShowContentEditCondition from './block-entry-show-content-edit.condition.js';
+import UmbBlockWorkspaceHasContentCondition from './block-workspace-has-content.condition.js';
 import UmbBlockWorkspaceHasSettingsCondition from './block-workspace-has-settings.condition.js';
 import UmbBlockWorkspaceIsExposedCondition from './block-workspace-is-exposed.condition.js';
 import UmbBlockWorkspaceIsReadOnlyCondition from './block-workspace-is-readonly.condition.js';
@@ -19,6 +23,12 @@ export const manifests: Array<ManifestCondition> = [
 		alias: 'Umb.Condition.BlockWorkspaceHasSettings',
 		api: UmbBlockWorkspaceHasSettingsCondition,
 	},
+	{
+		type: 'condition',
+		name: 'Block Workspace Has Content Condition',
+		alias: UMB_BLOCK_WORKSPACE_HAS_CONTENT_CONDITION_ALIAS,
+		api: UmbBlockWorkspaceHasContentCondition,
+	},
 	{
 		type: 'condition',
 		name: 'Block Show Content Edit Condition',
@@ -49,6 +59,12 @@ export const manifests: Array<ManifestCondition> = [
 		alias: UMB_BLOCK_ENTRY_IS_EXPOSED_CONDITION_ALIAS,
 		api: UmbBlockEntryIsExposedCondition,
 	},
+	{
+		type: 'condition',
+		name: 'Block Entry Has External Content Condition',
+		alias: UMB_BLOCK_ENTRY_HAS_EXTERNAL_CONTENT_CONDITION_ALIAS,
+		api: UmbBlockEntryHasExternalContentCondition,
+	},
 	{
 		type: 'condition',
 		name: 'Block Entry Is ReadOnly Condition',

src/Umbraco.Web.UI.Client/src/packages/block/block/conditions/types.ts

@@ -5,20 +5,21 @@ export type BlockWorkspaceHasSettingsConditionConfig =
 	UmbConditionConfigBase<'Umb.Condition.BlockWorkspaceHasSettings'>;
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export interface BlockEntryShowContentEditConditionConfig
-	extends UmbConditionConfigBase<'Umb.Condition.BlockEntryShowContentEdit'> {
+export type BlockWorkspaceHasContentConditionConfig =
+	UmbConditionConfigBase<'Umb.Condition.BlockWorkspaceHasContent'>;
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export interface BlockEntryShowContentEditConditionConfig extends UmbConditionConfigBase<'Umb.Condition.BlockEntryShowContentEdit'> {
 	match?: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export interface BlockEntryIsExposedConditionConfig
-	extends UmbConditionConfigBase<'Umb.Condition.BlockWorkspaceIsExposed'> {
+export interface BlockEntryIsExposedConditionConfig extends UmbConditionConfigBase<'Umb.Condition.BlockWorkspaceIsExposed'> {
 	match?: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export interface BlockWorkspaceIsReadOnlyConditionConfig
-	extends UmbConditionConfigBase<'Umb.Condition.BlockWorkspaceIsReadOnly'> {
+export interface BlockWorkspaceIsReadOnlyConditionConfig extends UmbConditionConfigBase<'Umb.Condition.BlockWorkspaceIsReadOnly'> {
 	match?: boolean;
 }
 
@@ -26,15 +27,18 @@ export interface BlockWorkspaceIsReadOnlyConditionConfig
 export type BlockEntryHasSettingsConditionConfig = UmbConditionConfigBase<'Umb.Condition.BlockEntryHasSettings'>;
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export interface BlockEntryIsReadOnlyConditionConfig
-	extends UmbConditionConfigBase<'Umb.Condition.BlockEntryIsReadOnly'> {
+export interface BlockEntryHasExternalContentConditionConfig extends UmbConditionConfigBase<'Umb.Condition.BlockEntryHasExternalContent'> {
+	match?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export interface BlockEntryIsReadOnlyConditionConfig extends UmbConditionConfigBase<'Umb.Condition.BlockEntryIsReadOnly'> {
 	match?: boolean;
 }
 
 // NOTE: Named with a `Umb` prefix, as clashed with `BlockEntryIsExposedConditionConfig`,
 // but that one is a misnomer as the condition targets the block workspace. [LK]
-export interface UmbBlockEntryIsExposedConditionConfig
-	extends UmbConditionConfigBase<'Umb.Condition.BlockEntryIsExposed'> {
+export interface UmbBlockEntryIsExposedConditionConfig extends UmbConditionConfigBase<'Umb.Condition.BlockEntryIsExposed'> {
 	match?: boolean;
 }
 
@@ -43,7 +47,9 @@ declare global {
 		umbBlock:
 			| BlockEntryShowContentEditConditionConfig
 			| BlockWorkspaceHasSettingsConditionConfig
+			| BlockWorkspaceHasContentConditionConfig
 			| BlockEntryIsExposedConditionConfig
+			| BlockEntryHasExternalContentConditionConfig
 			| BlockWorkspaceIsReadOnlyConditionConfig
 			| BlockEntryIsReadOnlyConditionConfig
 			| BlockEntryHasSettingsConditionConfig

src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entries.context.ts

@@ -4,6 +4,7 @@ import type { UmbBlockDataObjectModel, UmbBlockManagerContext } from './block-ma
 import { UMB_BLOCK_ENTRIES_CONTEXT } from './block-entries.context-token.js';
 import { type Observable, UmbArrayState, UmbBasicState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import { UmbElementTypeStructureRepository } from '@umbraco-cms/backoffice/element';
 import type { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
@@ -30,7 +31,7 @@ export abstract class UmbBlockEntriesContext<
 
 	public abstract readonly canCreate: Observable<boolean>;
 
-	protected _layoutEntries = new UmbArrayState<BlockLayoutType>([], (x) => x.contentKey);
+	protected _layoutEntries = new UmbArrayState<BlockLayoutType>([], (x) => x.key);
 	readonly layoutEntries = this._layoutEntries.asObservable();
 	readonly layoutEntriesLength = this._layoutEntries.asObservablePart((x) => x.length);
 
@@ -72,9 +73,15 @@ export abstract class UmbBlockEntriesContext<
 	layoutOf(contentKey: string) {
 		return this._layoutEntries.asObservablePart((source) => source.find((x) => x.contentKey === contentKey));
 	}
+	byKey(key: string) {
+		return this._layoutEntries.asObservablePart((source) => source.find((x) => x.key === key));
+	}
 	getLayoutOf(contentKey: string) {
 		return this._layoutEntries.getValue().find((x) => x.contentKey === contentKey);
 	}
+	getByKey(key: string) {
+		return this._layoutEntries.getValue().find((x) => x.key === key);
+	}
 	setLayouts(layouts: Array<BlockLayoutType>) {
 		return this._layoutEntries.setValue(layouts);
 	}
@@ -85,9 +92,21 @@ export abstract class UmbBlockEntriesContext<
 	public abstract getPathForCreateBlock(index: number): string | undefined;
 	public abstract getPathForClipboard(index: number): string | undefined;
 
+	/**
+	 * Returns the element type uniques allowed at the library root that overlap
+	 * with the given block types — used to filter the library picker in the
+	 * block catalogue modal.
+	 */
+	protected async _getLibraryAllowedElementTypeKeys(blockTypes: Array<BlockType>): Promise<Array<string>> {
+		const blockTypeKeys = new Set(blockTypes.map((bt) => bt.contentElementTypeKey));
+		const repo = new UmbElementTypeStructureRepository(this);
+		const { data: allowedTypes } = await repo.requestAllowedChildrenOf(null, null);
+		return allowedTypes?.items.filter((t) => t.unique && blockTypeKeys.has(t.unique)).map((t) => t.unique!) ?? [];
+	}
+
 	public abstract create(
 		contentElementTypeKey: string,
-		layoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
+		layoutEntry?: Omit<BlockLayoutType, 'contentKey' | 'key'>,
 		originData?: BlockOriginData,
 	): Promise<UmbBlockDataObjectModel<BlockLayoutType> | undefined>;
 
@@ -98,19 +117,25 @@ export abstract class UmbBlockEntriesContext<
 		originData: BlockOriginData,
 	): Promise<boolean>;
 
-	public async delete(contentKey: string) {
+	public async delete(key: string) {
 		await this._retrieveManager;
-		const layout = this._layoutEntries.value.find((x) => x.contentKey === contentKey);
+		const layout = this._layoutEntries.value.find((x) => x.key === key);
 		if (!layout) {
-			throw new Error(`Cannot delete block, missing layout for ${contentKey}`);
+			throw new Error(`Cannot delete block, missing layout for ${key}`);
 		}
-		this._layoutEntries.removeOne(contentKey);
+		this._layoutEntries.removeOne(key);
 
-		this._manager!.removeOneContent(contentKey);
-		if (layout.settingsKey) {
-			this._manager!.removeOneSettings(layout.settingsKey);
+		// Only remove content/settings/exposes if no other layout references the same contentKey
+		const hasOtherReference = this._layoutEntries.value.some(
+			(x) => x.key !== key && x.contentKey === layout.contentKey,
+		);
+		if (!hasOtherReference) {
+			this._manager!.removeOneContent(layout.contentKey);
+			if (layout.settingsKey) {
+				this._manager!.removeOneSettings(layout.settingsKey);
+			}
+			this._manager!.removeExposesOf(layout.contentKey);
 		}
-		this._manager!.removeExposesOf(contentKey);
 	}
 
 	// insert/paste from property value methods:
@@ -133,6 +158,12 @@ export abstract class UmbBlockEntriesContext<
 		value: UmbBlockValueType,
 		originData: BlockOriginData,
 	) {
+		// External-content references have no inline contentData — insert as a reference instead.
+		if (layoutEntry.isExternalContent) {
+			await this._manager?.insertExternalContent(layoutEntry.contentKey, originData);
+			return;
+		}
+
 		const content = value.contentData.find((x) => x.key === layoutEntry.contentKey);
 		if (!content) {
 			throw new Error('No content found for layout entry');

src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts

@@ -17,12 +17,14 @@ import {
 	mergeObservables,
 	observeMultiple,
 } from '@umbraco-cms/backoffice/observable-api';
-import { encodeFilePath, UmbReadOnlyVariantGuardManager } from '@umbraco-cms/backoffice/utils';
+import { encodeFilePath, UmbDeprecation, UmbReadOnlyVariantGuardManager } from '@umbraco-cms/backoffice/utils';
 import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';
-import { UmbRoutePathAddendumContext } from '@umbraco-cms/backoffice/router';
+import { UmbModalRouteRegistrationController, UmbRoutePathAddendumContext } from '@umbraco-cms/backoffice/router';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import { UmbUfmVirtualRenderController } from '@umbraco-cms/backoffice/ufm';
+import { UMB_EDIT_ELEMENT_WORKSPACE_PATH_PATTERN, UMB_ELEMENT_ENTITY_TYPE } from '@umbraco-cms/backoffice/element';
+import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';
 import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type';
 import type { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
@@ -52,12 +54,23 @@ export abstract class UmbBlockEntryContext<
 	protected _manager?: BlockManagerContextType;
 	protected _entries?: BlockEntriesContextType;
 
+	#key?: string;
 	#contentKey?: string;
 	#unsupported = new UmbBooleanState(undefined);
 	readonly unsupported = this.#unsupported.asObservable();
+	/** True when unsupported was set by a structural fault (missing block type or element type structure). Prevents the content observer from resetting the flag. */
+	#structurallyUnsupported = false;
 
 	protected readonly localize = new UmbLocalizationController(this);
 
+	#isExternalContent = new UmbBooleanState(false);
+	/** Observable that emits true when this block's content is shared (referenced from the Element Library) rather than local. */
+	readonly isExternalContent = this.#isExternalContent.asObservable();
+
+	#externalContentVariantState = new UmbStringState(undefined);
+	/** Observable of the shared element's variant state (e.g. 'Published', 'Draft'), resolved for the active culture/segment. */
+	readonly externalContentVariantState = this.#externalContentVariantState.asObservable();
+
 	#pathAddendum = new UmbRoutePathAddendumContext(this);
 	#variantId = new UmbClassState<UmbVariantId | undefined>(undefined);
 	protected readonly _variantId = this.#variantId.asObservable();
@@ -140,7 +153,7 @@ export abstract class UmbBlockEntryContext<
 	public readonly layout = this._layout.asObservable();
 	public readonly contentKey = this._layout.asObservablePart((x) => x?.contentKey);
 	public readonly settingsKey = this._layout.asObservablePart((x) => (x ? (x.settingsKey ?? null) : undefined));
-	public readonly unique = this._layout.asObservablePart((x) => x?.contentKey);
+	public readonly unique = this._layout.asObservablePart((x) => x?.key);
 
 	/**
 	 * Get the layout of the block.
@@ -166,9 +179,18 @@ export abstract class UmbBlockEntryContext<
 
 	#workspacePath = new UmbStringState(undefined);
 	public readonly workspacePath = this.#workspacePath.asObservable();
+
+	#externalContentWorkspacePath = new UmbStringState(undefined);
+
 	public readonly workspaceEditContentPath = mergeObservables(
-		[this.contentKey, this.workspacePath],
-		([contentKey, path]) => this.#generateWorkspaceEditContentPath(path, contentKey),
+		[this.contentKey, this.workspacePath, this.isExternalContent, this.#externalContentWorkspacePath.asObservable()],
+		([contentKey, path, isExternalContent, externalContentPath]) => {
+			if (!contentKey) return '';
+			if (isExternalContent && externalContentPath) {
+				return externalContentPath + UMB_EDIT_ELEMENT_WORKSPACE_PATH_PATTERN.generateLocal({ unique: contentKey });
+			}
+			return this.#generateWorkspaceEditContentPath(path, contentKey);
+		},
 	);
 	public readonly workspaceEditSettingsPath = mergeObservables(
 		[this.contentKey, this.workspacePath],
@@ -360,6 +382,21 @@ export abstract class UmbBlockEntryContext<
 			null,
 		);
 
+		// Re-observe content and expose when the layout's contentKey changes (e.g., after Transfer to
+		// Element Library assigns a new element UUID, or Disconnect assigns a fresh local content key).
+		// NOTE: this.#contentKey is updated by #observeLayout() AFTER _layout.setValue() emits, so we
+		// must sync it here before calling the observe methods which read it.
+		this.observe(
+			this.contentKey,
+			(contentKey) => {
+				if (!contentKey) return;
+				this.#contentKey = contentKey;
+				this.#observeContentData();
+				this.#gotVariantId();
+			},
+			null,
+		);
+
 		// Observe contentElementTypeKey:
 		this.observe(
 			this.contentTypeKey,
@@ -441,15 +478,38 @@ export abstract class UmbBlockEntryContext<
 		return this._layout.value?.contentKey;
 	}
 
+	/**
+	 * Set the key of this entry — the unique identity of the block layout item.
+	 * @param {string} key the block key.
+	 */
+	setKey(key: string) {
+		this.#key = key;
+		this.#observeLayout();
+	}
+
+	getKey() {
+		return this.#key;
+	}
+
 	/**
 	 * Set the contentKey of this entry.
 	 * @function setContentKey
 	 * @param {string} contentKey the entry content key.
 	 * @returns {void}
+	 * @deprecated Use `setKey` instead. Will be removed in Umbraco 20.
 	 */
 	setContentKey(contentKey: string) {
+		new UmbDeprecation({
+			deprecated: 'UmbBlockEntryContext.setContentKey',
+			solution: 'Use setKey() with the block layout key instead.',
+			removeInVersion: '20.0.0',
+		}).warn();
 		this.#contentKey = contentKey;
-		this.#observeLayout();
+		// Backwards compat: if no key set yet, use contentKey
+		if (!this.#key) {
+			this.#key = contentKey;
+			this.#observeLayout();
+		}
 	}
 
 	/**
@@ -481,12 +541,16 @@ export abstract class UmbBlockEntryContext<
 	}
 
 	#observeLayout() {
-		if (!this._entries || !this.#contentKey) return;
+		if (!this._entries || !this.#key) return;
 
 		this.observe(
-			this._entries.layoutOf(this.#contentKey),
+			this._entries.byKey(this.#key),
 			(layout) => {
 				this._layout.setValue(layout);
+				// Derive contentKey from the layout so internal flows have it without external setters.
+				if (layout?.contentKey) {
+					this.#contentKey = layout.contentKey;
+				}
 			},
 			'observeParentLayout',
 		);
@@ -522,25 +586,53 @@ export abstract class UmbBlockEntryContext<
 			},
 			'observeWorkspacePath',
 		);
+
+		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+			.addAdditionalPath('library')
+			.addUniquePaths(['unique'])
+			.onSetup(() => {
+				return {
+					data: { entityType: UMB_ELEMENT_ENTITY_TYPE, preset: {} },
+					modal: { size: 'large' },
+				};
+			})
+			.observeRouteBuilder((routeBuilder) => {
+				this.#externalContentWorkspacePath.setValue(routeBuilder({ entityType: UMB_ELEMENT_ENTITY_TYPE }));
+			});
 	}
 
 	protected abstract _gotEntries(): void;
 
 	#observeContentData() {
-		if (!this._manager || !this.#contentKey) return;
+		const contentKey = this.#contentKey ?? this._layout.value?.contentKey;
+		if (!this._manager || !contentKey) return;
 
-		// observe content:
+		// Observe content and external-content state together to avoid race conditions.
+		// Both are evaluated in the same tick, preventing the unsupported flag
+		// from flashing true while external content is being fetched.
 		this.observe(
-			this._manager.contentOf(this.#contentKey),
-			(content) => {
-				if (this.#unsupported.getValue() !== true) {
-					// If we could not find content, then we do not know the contentTypeKey and then the content is broken. [NL]
-					this.#unsupported.setValue(!content);
+			mergeObservables(
+				[this._manager.contentOf(contentKey), this._manager.isExternalContentOf(contentKey)],
+				([content, isExternalContent]) => ({ content, isExternalContent: isExternalContent ?? false }),
+			),
+			({ content, isExternalContent }) => {
+				this.#isExternalContent.setValue(isExternalContent);
+				if (!this.#structurallyUnsupported) {
+					this.#unsupported.setValue(!content && !isExternalContent);
 				}
 				this.#content.setValue(content);
 			},
 			'observeContent',
 		);
+
+		// Observe the variant state of external content (published, draft, etc.)
+		this.observe(
+			this._manager.elementStateOf(contentKey),
+			(state) => {
+				this.#externalContentVariantState.setValue(state ?? undefined);
+			},
+			'observeExternalContentVariantState',
+		);
 	}
 	#observeSettingsData() {
 		// observe settings:
@@ -630,7 +722,8 @@ export abstract class UmbBlockEntryContext<
 		this.#contentStructurePromiseResolve?.();
 
 		if (!this.#contentStructure) {
-			// If we got no content structure, then this is element type did not load and there for it is not supported any longer.
+			// If we got no content structure, then this element type did not load and the block is not supported any longer.
+			this.#structurallyUnsupported = true;
 			this.#unsupported.setValue(true);
 		}
 
@@ -676,6 +769,7 @@ export abstract class UmbBlockEntryContext<
 				this._blockType.setValue(blockType as BlockType);
 				if (!blockType) {
 					// If the block type is undefined, then we do not have this Block Type and the Block is then unsupported. [NL]
+					this.#structurallyUnsupported = true;
 					this.#unsupported.setValue(true);
 				}
 			},
@@ -747,11 +841,22 @@ export abstract class UmbBlockEntryContext<
 		this.delete();
 	}
 
+	async requestTransferToElementLibrary() {
+		if (!this.#key) return;
+		const name = this.getName();
+		await this._manager?.requestTransferToElementLibrary(this.#key, name);
+	}
+
+	async requestDisconnectFromElementLibrary() {
+		if (!this.#key) return;
+		await this._manager?.requestDisconnectFromElementLibrary(this.#key);
+	}
+
 	public delete() {
 		if (!this._entries) return;
-		const contentKey = this._layout.value?.contentKey;
-		if (!contentKey) return;
-		this._entries.delete(contentKey);
+		const key = this._layout.value?.key;
+		if (!key) return;
+		this._entries.delete(key);
 	}
 
 	public expose() {

src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts

@@ -1,5 +1,10 @@
 import type { UmbBlockWorkspaceOriginData } from '../workspace/index.js';
-import type { UmbBlockLayoutBaseModel, UmbBlockDataModel, UmbBlockExposeModel } from '../types.js';
+import type {
+	UmbBlockDataModel,
+	UmbBlockDataValueModel,
+	UmbBlockExposeModel,
+	UmbBlockLayoutBaseModel,
+} from '../types.js';
 import { UmbBlockInsertedEvent } from '../events/block-inserted.event.js';
 import { UMB_BLOCK_MANAGER_CONTEXT } from './block-manager.context-token.js';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
@@ -26,6 +31,9 @@ import {
 } from '@umbraco-cms/backoffice/property';
 import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
 import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type';
+import { UmbElementDetailRepository } from '@umbraco-cms/backoffice/element';
+import { UMB_BLOCK_TRANSFER_TO_ELEMENT_LIBRARY_MODAL } from '../modals/transfer-to-element-library/transfer-to-element-library-modal.token.js';
+import { UMB_MODAL_MANAGER_CONTEXT, umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 
 export type UmbBlockDataObjectModel<LayoutEntryType extends UmbBlockLayoutBaseModel> = {
 	layout: LayoutEntryType;
@@ -69,12 +77,22 @@ export abstract class UmbBlockManagerContext<
 	protected _liveEditingMode = new UmbBooleanState(undefined);
 	public readonly liveEditingMode = this._liveEditingMode.asObservable();
 
-	protected _layouts = new UmbArrayState(<Array<BlockLayoutType>>[], (x) => x.contentKey);
+	protected _layouts = new UmbArrayState(<Array<BlockLayoutType>>[], (x) => x.key);
 	public readonly layouts = this._layouts.asObservable();
 
 	readonly #contents = new UmbArrayState(<Array<UmbBlockDataModel>>[], (x) => x.key);
 	public readonly contents = this.#contents.asObservable();
 
+	readonly #resolvedExternalContent = new UmbArrayState(<Array<UmbBlockDataModel>>[], (x) => x.key);
+	readonly #resolvedExternalContentVariants = new UmbArrayState(
+		<
+			Array<{ key: string; variants: Array<{ culture: string | null; segment: string | null; state: string | null }> }>
+		>[],
+		(x) => x.key,
+	);
+	#elementRepository = new UmbElementDetailRepository(this);
+	#pendingElementFetches = new Set<string>();
+
 	readonly #settings = new UmbArrayState(<Array<UmbBlockDataModel>>[], (x) => x.key);
 	public readonly settings = this.#settings.asObservable();
 
@@ -112,7 +130,8 @@ export abstract class UmbBlockManagerContext<
 	 * @param {Array<BlockLayoutType>} layouts - All layouts.
 	 */
 	setLayouts(layouts: Array<BlockLayoutType>) {
-		this._layouts.setValue(layouts);
+		// Backwards compatibility: ensure all layouts have a key (persisted data may not have one)
+		this._layouts.setValue(layouts.map((layout) => (layout.key ? layout : { ...layout, key: layout.contentKey })));
 	}
 
 	/**
@@ -181,6 +200,19 @@ export abstract class UmbBlockManagerContext<
 			},
 			null,
 		);
+
+		// Auto-resolve content for any layout marked as shared, whenever layouts change.
+		this.observe(
+			this._layouts.asObservable(),
+			(layouts) => {
+				layouts.forEach((layout) => {
+					if (layout.isExternalContent && layout.contentKey) {
+						this.#fetchExternalContent(layout.contentKey);
+					}
+				});
+			},
+			null,
+		);
 	}
 
 	#ensureContentTypes(blockTypes: Array<BlockType>) {
@@ -293,8 +325,84 @@ export abstract class UmbBlockManagerContext<
 		return this._layouts.asObservablePart((source) => source.find((x) => x.contentKey === contentKey));
 	}
 	contentOf(key: string) {
-		return this.#contents.asObservablePart((source) => source.find((x) => x.key === key));
+		return mergeObservables(
+			[
+				this.#contents.asObservablePart((source) => source.find((x) => x.key === key)),
+				this.#resolvedExternalContent.asObservablePart((source) => source.find((x) => x.key === key)),
+			],
+			([localContent, externalContent]) => localContent ?? externalContent ?? undefined,
+		);
 	}
+
+	// TODO: [LK] Review the naming of this property, align with with team.
+	/**
+	 * Returns an observable that emits true when the layout for the given contentKey
+	 * has `isExternalContent` set (i.e., the block references external content).
+	 */
+	isExternalContentOf(key: string) {
+		return this._layouts.asObservablePart(
+			(source) => source.find((x) => x.contentKey === key)?.isExternalContent === true,
+		);
+	}
+
+	/**
+	 * Returns an observable of the variant state for external content,
+	 * resolved against the manager's active variantId (culture/segment).
+	 * Emits the state string (e.g., 'Published', 'Draft') or null if not resolved yet.
+	 */
+	elementStateOf(key: string) {
+		return mergeObservables(
+			[
+				this.#resolvedExternalContentVariants.asObservablePart((source) => source.find((x) => x.key === key)),
+				this.variantId,
+			],
+			([entry, variantId]) => {
+				if (!entry?.variants.length) return null;
+				if (!variantId) return entry.variants[0]?.state ?? null;
+				const match = entry.variants.find((v) => v.culture === variantId.culture && v.segment === variantId.segment);
+				return match?.state ?? entry.variants[0]?.state ?? null;
+			},
+		);
+	}
+
+	// TODO: [@madsrasmussen] Replace per-key fetches here with a batching manager that bundles multiple
+	// element requests into a single round-trip. Today this issues one request per shared block, which
+	// can become N+1 on pages with many references. The batching manager should also cache and dedupe.
+	async #fetchExternalContent(key: string) {
+		if (this.#pendingElementFetches.has(key)) return;
+		if (this.#resolvedExternalContent.getValue().some((x) => x.key === key)) return;
+		this.#pendingElementFetches.add(key);
+		try {
+			const { data } = await this.#elementRepository.requestByUnique(key);
+			if (data) {
+				const blockData: UmbBlockDataModel = {
+					key: data.unique,
+					contentTypeKey: data.documentType.unique,
+					values: data.values.map(
+						(v): UmbBlockDataValueModel => ({
+							alias: v.alias,
+							editorAlias: v.editorAlias,
+							culture: v.culture,
+							segment: v.segment,
+							value: v.value,
+						}),
+					),
+				};
+				this.#resolvedExternalContent.appendOne(blockData);
+				this.#resolvedExternalContentVariants.appendOne({
+					key: data.unique,
+					variants: data.variants.map((v) => ({
+						culture: v.culture ?? null,
+						segment: v.segment ?? null,
+						state: v.state ?? null,
+					})),
+				});
+			}
+		} finally {
+			this.#pendingElementFetches.delete(key);
+		}
+	}
+
 	settingsOf(key: string) {
 		return this.#settings.asObservablePart((source) => source.find((x) => x.key === key));
 	}
@@ -355,7 +463,10 @@ export abstract class UmbBlockManagerContext<
 		return this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentTypeKey);
 	}
 	getContentOf(contentKey: string) {
-		return this.#contents.value.find((x) => x.key === contentKey);
+		return (
+			this.#contents.value.find((x) => x.key === contentKey) ??
+			this.#resolvedExternalContent.value.find((x) => x.key === contentKey)
+		);
 	}
 	getSettingsOf(settingsKey: string) {
 		return this.#settings.value.find((x) => x.key === settingsKey);
@@ -399,6 +510,119 @@ export abstract class UmbBlockManagerContext<
 		this.#exposes.filter((x) => !(x.contentKey === contentKey && variantId.compare(x)));
 	}
 
+	/**
+	 * Insert a block whose content is an external content reference.
+	 * Only creates a layout entry — no contentData entry is added.
+	 * The layout observer handles fetching the element data.
+	 */
+	insertExternalContent(elementKey: string, _originData?: BlockOriginDataType) {
+		const layout = { key: UmbId.new(), contentKey: elementKey, isExternalContent: true } as BlockLayoutType;
+		this._layouts.appendOne(layout);
+	}
+
+	/**
+	 * Request to transfer a local block's content to the Element Library.
+	 * Opens the transfer modal for the user to name the new Element and pick a location,
+	 * then creates the Element and updates the block to reference it.
+	 * @param {string} key the block layout key.
+	 */
+	async requestTransferToElementLibrary(key: string, name?: string) {
+		const layout = this._layouts.getValue().find((x) => x.key === key);
+		if (!layout) return;
+		const contentKey = layout.contentKey;
+		const content = this.getContentOf(contentKey);
+		if (!content) return;
+
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT).catch(() => undefined);
+		if (!modalManager) return;
+		const result = await modalManager
+			.open(this, UMB_BLOCK_TRANSFER_TO_ELEMENT_LIBRARY_MODAL, { data: { name } })
+			.onSubmit()
+			.catch(() => undefined);
+		if (!result) return;
+
+		const elementRepository = new UmbElementDetailRepository(this);
+		const { data: scaffold } = await elementRepository.createScaffold({
+			documentType: { unique: content.contentTypeKey, collection: null },
+			values: content.values,
+			variants: [
+				{
+					culture: null,
+					segment: null,
+					state: null,
+					name: result.name,
+					publishDate: null,
+					createDate: null,
+					updateDate: null,
+				},
+			],
+		});
+		if (!scaffold) return;
+
+		const { data: created } = await elementRepository.create(scaffold, result.parentUnique);
+		if (!created) return;
+
+		this.#contents.removeOne(contentKey);
+		this.removeExposesOf(contentKey);
+		this._layouts.updateOne(key, {
+			contentKey: created.unique,
+			isExternalContent: true,
+		} as Partial<BlockLayoutType>);
+	}
+
+	/**
+	 * Request to disconnect a block from the Element Library.
+	 * Asks for user confirmation, then copies the element content into local contentData.
+	 * @param {string} key the block layout key.
+	 */
+	async requestDisconnectFromElementLibrary(key: string) {
+		const layout = this._layouts.getValue().find((x) => x.key === key);
+		if (!layout) return;
+		const elementKey = layout.contentKey;
+
+		try {
+			await umbConfirmModal(this, {
+				headline: '#blockEditor_disconnectFromElementLibrary',
+				content: '#blockEditor_disconnectFromElementLibraryConfirm',
+				confirmLabel: '#blockEditor_disconnectFromElementLibrary',
+				color: 'warning',
+			});
+		} catch {
+			return; // user cancelled
+		}
+
+		const elementRepository = new UmbElementDetailRepository(this);
+		const { data: element } = await elementRepository.requestByUnique(elementKey);
+		if (!element) return;
+
+		const contentTypeKey = element.documentType.unique;
+		const newContent: UmbBlockDataModel = {
+			key: UmbId.new(),
+			contentTypeKey,
+			values: element.values.map(
+				(v): UmbBlockDataValueModel => ({
+					alias: v.alias,
+					editorAlias: v.editorAlias,
+					culture: v.culture,
+					segment: v.segment,
+					value: v.value,
+				}),
+			),
+		};
+		this.#contents.appendOne(newContent);
+		this._layouts.updateOne(key, {
+			contentKey: newContent.key,
+			isExternalContent: undefined,
+		} as Partial<BlockLayoutType>);
+		this.#resolvedExternalContent.removeOne(elementKey);
+		this.#resolvedExternalContentVariants.removeOne(elementKey);
+		// Only set expose if the content type structure is loaded (it may not be for external content
+		// whose type was not in the block type list)
+		if (this.getStructure(contentTypeKey)) {
+			this.#setInitialBlockExpose(newContent);
+		}
+	}
+
 	setOneContentProperty(key: string, propertyAlias: string, value: unknown) {
 		this.#contents.updateOne(key, { [propertyAlias]: value });
 	}
@@ -419,7 +643,7 @@ export abstract class UmbBlockManagerContext<
 
 	abstract createWithPresets(
 		contentElementTypeKey: string,
-		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
+		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey' | 'key'>,
 		originData?: BlockOriginDataType,
 	): Promise<UmbBlockDataObjectModel<BlockLayoutType> | undefined>;
 
@@ -520,7 +744,7 @@ export abstract class UmbBlockManagerContext<
 
 	protected async _createBlockData(
 		contentElementTypeKey: string,
-		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
+		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey' | 'key'>,
 	) {
 		// Find block type.
 		const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey);
@@ -528,9 +752,12 @@ export abstract class UmbBlockManagerContext<
 			throw new Error(`Cannot create block, missing block type for ${contentElementTypeKey}`);
 		}
 
+		const contentKey = UmbId.new();
+
 		// Create layout entry:
 		const layout: BlockLayoutType = {
-			contentKey: UmbId.new(),
+			key: contentKey,
+			contentKey,
 			...(partialLayoutEntry as Partial<BlockLayoutType>),
 		} as BlockLayoutType;
 

src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts

@@ -13,13 +13,14 @@ import {
 } from '@umbraco-cms/backoffice/external/lit';
 import { transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
+import { UmbPickerContext } from '@umbraco-cms/backoffice/picker';
 import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
 import { UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/document-type';
 import { UMB_MODAL_CONTEXT, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 import type { UmbBlockTypeGroup, UmbBlockTypeWithGroupKey } from '@umbraco-cms/backoffice/block-type';
 import type { UmbDocumentTypeItemModel } from '@umbraco-cms/backoffice/document-type';
-import type { UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event';
+import type { UmbDeselectedEvent, UmbSelectedEvent, UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event';
 import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
 type UmbBlockTypeItemWithGroupKey = UmbBlockTypeWithGroupKey & UmbDocumentTypeItemModel;
@@ -34,6 +35,8 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 		UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS,
 	);
 
+	#pickerContext = new UmbPickerContext(this);
+
 	#search = '';
 
 	#serverUrl = '';
@@ -41,7 +44,12 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	private _groupedBlocks: Array<{ name?: string; blocks: Array<UmbBlockTypeItemWithGroupKey> }> = [];
 
 	@state()
-	private _openClipboard?: boolean;
+	private _activeView: 'create' | 'clipboard' | 'library' = 'create';
+
+	@state()
+	private _searchQuery = '';
+
+	#hasLibraryElements = false;
 
 	@state()
 	private _workspacePath?: string;
@@ -88,13 +96,24 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 		this.observe(this.#itemManager.items, async (items) => {
 			this.#observeBlockTypes(items);
 		});
+
+		this.#pickerContext.search.updateConfig({ providerAlias: 'Umb.SearchProvider.Element' });
+		this.#pickerContext.selection.setMultiple(false);
+		this.observe(this.#pickerContext.search.query, (query) => {
+			this._searchQuery = query?.query ?? '';
+		});
+		this.observe(this.#pickerContext.selection.selection, (selection) => {
+			const elementKey = selection[0];
+			this.value = elementKey ? { library: { elementKey } } : undefined;
+		});
 	}
 
 	override connectedCallback() {
 		super.connectedCallback();
 		if (!this.data) return;
 
-		this._openClipboard = this.data.openClipboard ?? false;
+		this._activeView = this.data.openClipboard ? 'clipboard' : 'create';
+		this.#hasLibraryElements = (this.data.libraryAllowedElementTypeKeys?.length ?? 0) > 0;
 
 		this.#itemManager.setUniques(this.data.blocks.map((block) => block.contentElementTypeKey));
 	}
@@ -193,7 +212,15 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	}
 
 	#renderMain() {
-		return this._manager ? (this._openClipboard ? this.#renderClipboard() : this.#renderCreateEmpty()) : nothing;
+		if (!this._manager) return nothing;
+		switch (this._activeView) {
+			case 'clipboard':
+				return this.#renderClipboard();
+			case 'library':
+				return this.#renderLibrary();
+			default:
+				return this.#renderCreateEmpty();
+		}
 	}
 
 	#renderClipboard() {
@@ -204,6 +231,49 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 		`;
 	}
 
+	#renderLibrary() {
+		return html`
+			<umb-picker-search-field></umb-picker-search-field>
+			<umb-picker-search-result .pickableFilter=${this.#librarySelectableFilter}></umb-picker-search-result>
+			${when(
+				!this._searchQuery,
+				() => html`
+					<uui-box>
+						<umb-tree
+							alias="Umb.Tree.Element"
+							.props=${this.#libraryTreeProps}
+							@selected=${this.#onLibraryElementSelected}
+							@deselected=${this.#onLibraryElementDeselected}></umb-tree>
+					</uui-box>
+				`,
+			)}
+		`;
+	}
+
+	#librarySelectableFilter = (item: any) => {
+		if (item.isFolder) return false;
+		const allowedKeys = this.data?.libraryAllowedElementTypeKeys;
+		if (!allowedKeys?.length) return true;
+		return allowedKeys.includes(item.documentType?.unique ?? '');
+	};
+
+	#libraryTreeProps = {
+		hideTreeItemActions: true,
+		hideTreeRoot: true,
+		selectableFilter: this.#librarySelectableFilter,
+		selectionManager: this.#pickerContext.selection,
+	};
+
+	#onLibraryElementSelected(event: UmbSelectedEvent) {
+		event.stopPropagation();
+		if (event.unique) this.#pickerContext.selection.select(event.unique);
+	}
+
+	#onLibraryElementDeselected(event: UmbDeselectedEvent) {
+		event.stopPropagation();
+		if (event.unique) this.#pickerContext.selection.deselect(event.unique);
+	}
+
 	#renderCreateEmpty() {
 		if (this._loading) return html`<div id="loader"><uui-loader></uui-loader></div>`;
 		return html`
@@ -267,16 +337,28 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 			<uui-tab-group slot="navigation">
 				<uui-tab
 					label=${this.localize.term('blockEditor_tabCreateEmpty')}
-					?active=${!this._openClipboard}
-					@click=${() => (this._openClipboard = false)}>
-					<umb-localize key=${this.localize.term('blockEditor_tabCreateEmpty')}>Create Empty</umb-localize>
+					?active=${this._activeView === 'create'}
+					@click=${() => (this._activeView = 'create')}>
+					<umb-localize key="blockEditor_tabCreateEmpty">Create Empty</umb-localize>
 					<uui-icon slot="icon" name="icon-add"></uui-icon>
 				</uui-tab>
+				${when(
+					this.#hasLibraryElements,
+					() => html`
+						<uui-tab
+							label=${this.localize.term('blockEditor_tabLibrary')}
+							?active=${this._activeView === 'library'}
+							@click=${() => (this._activeView = 'library')}>
+							<umb-localize key="blockEditor_tabLibrary">Library</umb-localize>
+							<uui-icon slot="icon" name="icon-link"></uui-icon>
+						</uui-tab>
+					`,
+				)}
 				<uui-tab
 					label=${this.localize.term('blockEditor_tabClipboard')}
-					?active=${this._openClipboard}
-					@click=${() => (this._openClipboard = true)}>
-					<umb-localize key=${this.localize.term('blockEditor_tabClipboard')}>Clipboard</umb-localize>
+					?active=${this._activeView === 'clipboard'}
+					@click=${() => (this._activeView = 'clipboard')}>
+					<umb-localize key="blockEditor_tabClipboard">Clipboard</umb-localize>
 					<uui-icon slot="icon" name="icon-clipboard"></uui-icon>
 				</uui-tab>
 			</uui-tab-group>