Block Content Type Picker for FlowPart and BagPart

[buzznick]

Summary

This PR introduces a new block-style editor for FlowPart and BagPart that provides a modern, visual content type picker with thumbnail previews, category filtering, and search functionality. This enhances the content editing experience by allowing editors to browse and select content types in a more intuitive way.

Motivation

The existing dropdown-based widget selector can become unwieldy when sites have many content types available as widgets. This new block picker provides:

• Visual thumbnails for content types, making it easier to identify the right widget
• Category-based filtering to organise content types logically
• Search functionality for quick access to specific content types
• A modern card-based UI consistent with other CMS platforms

Features

New Block-Style Editor

• FlowPart-Blocks - New editor alternative for FlowPart with visual content type picker
• BagPart-Blocks - New editor alternative for BagPart with visual content type picker
• Both editors can be selected in the part settings as an alternative to the default editors

Content Type Picker Modal

• Vue.js-based modal with category sidebar and content type grid
• Thumbnail image support for each content type
• Real-time search filtering by name and description
• Category filtering for organised browsing
• Single modal instance shared across the page for performance

Content Type Settings Enhancements

Added new settings to ContentTypeSettings:

• Category - Allows grouping content types in the picker sidebar
• ThumbnailPath - Path to a thumbnail image displayed in the picker

These settings are editable in the Content Types admin UI.

Configurable Defaults

Added ContentTypesOptions for site-wide configuration via appsettings.json:

{
  "OrchardCore": {
    "OrchardCore_ContentTypes": {
      "DefaultThumbnailPath": "~/OrchardCore.ContentTypes/placeholder.png",
      "DefaultCategory": "Content"
    }
  }
}

• DefaultThumbnailPath - Default thumbnail for newly created content types
• DefaultCategory - Default category for newly created content types (optional)

BagPart Editor Settings

Added BagPartBlocksEditorSettings to customise:

• Modal title text
• Add button text

Files Changed

New Files

File	Description
OrchardCore.Flows/Assets/js/contentTypePicker.js	Vue.js content type picker application
OrchardCore.Flows/Views/ContentTypePicker.cshtml	Shared picker UI component
OrchardCore.Flows/Views/FlowPart-Blocks.Edit.cshtml	Block editor for FlowPart
OrchardCore.Flows/Views/BagPart-Blocks.Edit.cshtml	Block editor for BagPart
OrchardCore.Flows/Views/ContentCard-FlowPartBlocks.Edit.cshtml	Content card template
OrchardCore.Flows/Extensions/ContentTypePickerExtensions.cs	Helper extensions
OrchardCore.Flows/Settings/BagPartBlocksEditorSettingsDriver.cs	Settings driver
OrchardCore.Flows.Core/Models/BagPartBlocksEditorSettings.cs	Settings model
OrchardCore.ContentTypes/wwwroot/placeholder.png	Default placeholder image
OrchardCore.ContentTypes.Abstractions/ContentTypesOptions.cs	Configuration options

Modified Files

File	Description
OrchardCore.ContentManagement.Abstractions/Metadata/Settings/ContentTypeSettings.cs	Added Category and ThumbnailPath
OrchardCore.ContentManagement.Abstractions/Metadata/Settings/ContentTypeSettingsExtensions.cs	Added WithCategory and WithThumbnailPath
OrchardCore.ContentTypes/Services/ContentDefinitionService.cs	Use configurable defaults
OrchardCore.ContentTypes/Startup.cs	Register options configuration
OrchardCore.ContentTypes/Editors/ContentTypeSettingsDisplayDriver.cs	Edit Category/ThumbnailPath
OrchardCore.ContentTypes/Views/ContentTypeSettings.Edit.cshtml	UI for new settings
OrchardCore.Flows/Startup.cs	Register settings driver
OrchardCore.Flows/ResourceManifest.cs	Register picker script
OrchardCore.Flows/Controllers/AdminController.cs	Support block editors
OrchardCore.Flows/Drivers/BagPartDisplayDriver.cs	Pass picker data

Screenshots

New Content Type Picker

Content Picker Options

Customise the add button and modal title for the BagPart editor.

Optional Content Type Category and Thumbnail

Testing

1. Enable FlowPart or BagPart on a content type
2. In the part settings, select "Blocks" as the editor
3. Edit a content item with the part
4. Click "Add Widget" to open the content type picker
5. Verify category filtering, search, and thumbnail display work correctly

Breaking Changes

None. The existing dropdown editors remain the default. The new block editors are opt-in via part settings. The new Content Type settings (Category and Thumbnail) are optional, existing content types will be empty.

Migration Notes

• Existing sites will continue using the dropdown editor by default
• To use the new block picker, update the editor setting on FlowPart or BagPart to "Blocks"
• Content types can optionally be configured with Category and ThumbnailPath for improved UX

[Copilot]

Pull request overview

This PR introduces a modern block-style content type picker for FlowPart and BagPart editors, replacing the traditional dropdown-based widget selector with a Vue.js-powered modal featuring visual thumbnails, category filtering, and search capabilities.

Key Changes:

• Adds new block editor alternatives for FlowPart and BagPart with visual content type picker
• Introduces Category and ThumbnailPath settings to ContentTypeSettings for improved organization
• Implements shared Vue.js modal component for consistent picker experience across editors

Reviewed changes

Copilot reviewed 31 out of 35 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
OrchardCore.Flows.Core/Models/BagPartBlocksEditorSettings.cs	New settings model for customizing BagPart blocks editor
OrchardCore.ContentTypes.Abstractions/ContentTypesOptions.cs	Configuration options for default thumbnail and category
OrchardCore.ContentManagement.Abstractions/Metadata/Settings/ContentTypeSettings.cs	Added Category and ThumbnailPath properties
OrchardCore.ContentManagement.Abstractions/Metadata/Settings/ContentTypeSettingsExtensions.cs	Extension methods for new settings
OrchardCore.ContentManagement.Abstractions/Metadata/Models/ContentTypeDefinitionDriverOptions.cs	Added Categories property for UI options
OrchardCore.Flows/wwwroot/Scripts/content-type-picker.js	Vue.js application for content type picker modal
OrchardCore.Flows/Views/FlowPart-Blocks.Edit.cshtml	Block editor view for FlowPart
OrchardCore.Flows/Views/BagPart-Blocks.Edit.cshtml	Block editor view for BagPart
OrchardCore.Flows/Views/ContentTypePicker.cshtml	Shared Vue.js picker component
OrchardCore.Flows/Views/ContentCard-FlowPartBlocks.Edit.cshtml	Content card template for FlowPart blocks
OrchardCore.Flows/Views/BagPartBlocksEditorSettings.Edit.cshtml	Settings editor for BagPart blocks
OrchardCore.Flows/ViewModels/BagPartEditViewModel.cs	Added properties for button and modal text customization
OrchardCore.Flows/Settings/BagPartBlocksEditorSettingsDriver.cs	Display driver for BagPart blocks settings
OrchardCore.Flows/Extensions/ContentTypePickerExtensions.cs	Helper extensions for retrieving category and thumbnail
OrchardCore.Flows/Drivers/BagPartDisplayDriver.cs	Updated to pass blocks settings to view model
OrchardCore.Flows/Controllers/AdminController.cs	Added cardCollectionType parameter support
OrchardCore.Flows/ResourceManifest.cs	Registered content-type-picker script resource
OrchardCore.Flows/Startup.cs	Registered BagPartBlocksEditorSettingsDriver
OrchardCore.ContentTypes/Views/ContentTypeSettings.Edit.cshtml	UI for Category and ThumbnailPath settings
OrchardCore.ContentTypes/ViewModels/ContentTypeSettingsViewModel.cs	Added Category and ThumbnailPath properties
OrchardCore.ContentTypes/Editors/ContentTypeSettingsDisplayDriver.cs	Display driver updates for new settings
OrchardCore.ContentTypes/Services/ContentDefinitionService.cs	Applied default thumbnail and category to new content types
OrchardCore.ContentTypes/Startup.cs	Configuration for ContentTypesOptions
OrchardCore.ContentTypes/wwwroot/placeholder.png	Default placeholder image
appsettings.json	Example configuration for ContentTypes options
launchSettings.json	Minor formatting change

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[barthamark]

Wouldn’t it be useful to add some documentation to the Orchard Core docs?

[buzznick]

Wouldn’t it be useful to add some documentation to the Orchard Core docs?

Sure, will update the docs and update PR shortly.

[buzznick]

@barthamark I have just pushed up changes to the documention for the FlowPart, BagPart and Content Types.

[barthamark]

What is the actual default category? Is it Content or empty string?

[buzznick]

By default it is an empty string, but can be configured in the app settings if a default is wanted.

[buzznick]

Hi everyone, was there any changes needed to get this PR merged? We discussed maybe moving the defaults to a custom setting that could be set in the Admin UI but wasnt sure if that was the general consensus.

[hishamco]

@buzznick let me have a look at the great work that you did, then review your PR if it's possible.

[gvkries]

Very nice work, I like it 🤗

I'm not sure if you can put more effort into it, but I think we should try to avoid using Vue 2 and jQuery for new features.

[buzznick]

@gvkries thanks for feedback. Will update to Vue 3 and remove jQuery dependency. 👍

[github-actions]

This pull request has merge conflicts. Please resolve those before requesting a review.

[Piedone]

@buzznick any news here by chance?

[buzznick]

@Piedone removing the jQuery dependency is fine, was having issues upgrading to Vue3 as other editors (mainly the media gallery) on the page used Vue 2 I was getting a mismatch of versions and cuasing errors. Is there a plan to upgrade all Vue 2 instances to Vue 3?

[Piedone]

Yes, and there were attempts (#18620, #17525, #14256) but it's a huge chore.

[buzznick]

@Piedone thanks, I did see the other attempts. As it is a big task, suggest sticking with Vue 2 for now. I can remove the jQuery dependancy and sort out the conflicts shortly.

[Piedone]

OK, thanks!

[gvkries]

I agree, let's stick with Vue 2 for now. Thanks @buzznick