Unsupported block

src/Umbraco.Web.UI.Client/src/common/services/blockeditormodelobject.service.js

@@ -564,7 +564,7 @@
                 if (blockConfiguration === null || contentScaffold === null) {
 
                     blockConfiguration = {
-                        label: "Unsupported Block ("+udi+")",
+                        label: "Unsupported Block",
                         unsupported: true
                     };
                     contentScaffold = {};

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/unsupportedblock/unsupportedblock.editor.html

@@ -1,4 +1,13 @@
-<button type="button" class="btn-reset umb-outline blockelement-unsupportedblock-editor blockelement__draggable-element" ng-focus="block.focus">
-    <i class="icon icon-alert"></i>
-    <span>{{block.label}}</span>
-</button>
+<div class="blockelement-unsupportedblock-editor blockelement__draggable-element" ng-focus="block.focus">
+    <div class="__header">
+        <i class="icon icon-alert"></i>
+        <span>{{block.label}}</span>
+    </div>
+    <div class="__body">
+        This Block is no longer supported in this context.<br/>
+        You might want to remove this block, or contact your developer to take actions for making this block available again.<br/><br/>
+        <a href="http://our.umbraco.com" target="_blank">Learn about this circumstance on Our</a>
+        <h5>Block data:</h5>
+        <pre ng-bind="block.data | json : 4"></pre>
+    </div>
+</div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/unsupportedblock/unsupportedblock.editor.less

@@ -5,32 +5,53 @@
     margin-bottom: 4px;
     margin-top: 4px;
     width: 100%;
-    min-height: 48px;
     border: 1px solid @gray-9;
     border-radius: @baseBorderRadius;
 
-    cursor: pointer;
-    color: @ui-action-discreet-type;
+    > .__header {
 
-    text-align: left;
-    padding-left: 20px;
-    padding-bottom: 2px;
-
-    user-select: none;
-
-    transition: border-color 120ms;
-    
-    background-color: @ui-btn-negative;
-    color: @ui-btn-negative-type;
-    
-    i {
-        font-size: 22px;
-        margin-right: 5px;
-        display: inline-block;
-        vertical-align: middle;
+        display: flex;
+        align-items: center;
+        
+        padding-left: 20px;
+        padding-bottom: 2px;
+        min-height: 48px;
+        border-bottom: 1px solid @gray-9;
+        
+        background-color: @ui-btn-negative;
+        color: @ui-btn-negative-type;
+        
+        i {
+            font-size: 22px;
+            margin-right: 5px;
+            display: inline-block;
+            vertical-align: middle;
+        }
+        span {
+            display: inline-block;
+            vertical-align: middle;
+        }
     }
-    span {
-        display: inline-block;
-        vertical-align: middle;
+
+    > .__body {
+
+        padding: 20px;
+
+        background-color: @red-washed;
+
+        a {
+            text-decoration: underline;
+            color: @ui-action-type;
+            &:hover {
+                color:@ui-action-type-hover;
+            }
+        }
+
+        pre {
+            border: none;
+            padding: 0;
+            background-color: transparent;
+        }
+
     }
 }