[Custom but OOTB-like detailed block preview]

BlockListItem.html

<button type="button" class="btn-reset umb-outline blockelement-labelblock-editor blockelement__draggable-element flex"
        ng-click="api.editBlock(block, block.hideContentInOverlay, index, parentForm)"
        ng-focus="block.focus"
        ng-class="{ '--active': block.active, '--error': parentForm.$invalid && valFormManager.isShowingValidation() }"
        val-server-property-class=""
        style="padding:11px;">
    <i class="icon {{block.content.icon}}" aria-hidden="true"></i>
    <span style="margin-left:8px;">
        
        <!-- if the block is the image block, show the name of the image, and optionally the caption -->
        <span ng-if="block.content.contentTypeAlias == 'imageBlock'">
            {{ block.data.image | ncNodeName }}
            <small ng-if="block.data.caption != ''">
                <br />
                {{ block.data.caption }}
            </small>
        </span>

        <!-- if the block is a FAQ block - show the first question, and then how many other questions have been added -->
        <span ng-if="block.content.contentTypeAlias == 'fAQ'">
            {{ block.data.headline }}
            <small>
                <br />
                <span ng-if="block.data.faqItem && block.data.faqItem.contentData.length == 0">
                    No questions added
                </span>
                <span ng-if="block.data.faqItem && block.data.faqItem.contentData.length > 0">
                    {{ block.data.faqItem.contentData[0].question }}
                </span>
                <span ng-if="block.data.faqItem && block.data.faqItem.contentData.length == 2">
                    and one other question
                </span>
                <span ng-if="block.data.faqItem && block.data.faqItem.contentData.length > 2">
                    and {{ block.data.faqItem.contentData.length - 1 }} other questions
                </span>
            </small>
        </span>

    </span>
</button>