Block Grid: Sort mode

[leekelleher]

Description

Adds the Sort mode property-action feature to the Block Grid property-editor.

In an effort to make these feature reusable with other property-editors, this pull request adds a new @umbraco-backoffice/sorter package, (I originally wanted to name this "sort", but we already had a namespace for "sorter", so in wanting to maintain backwards-compatibility, I have used the existing namespace).

For property-editors wanting to implement the Sort mode feature, can register a sortMode property-context for the property-editor, and consume the UMB_SORT_PROPERTY_CONTEXT to detect when sorting mode has been toggled.

How to test?

An initial test is to enable Sort mode with the Block Grid property-editor, this is available as a property-action.
Notice that once sort mode has been enabled, the property-action menu label will toggle to "End sort mode", and a toolbar will appear above the Block Grid items (with a button, also labelled "End sort mode").

When sort mode is enabled, the block grid items should switch to use the umb-block-grid-block component only, e.g. switching from any inline or custom block-views. To enable a simpler sortable view.

[Copilot]

Pull Request Overview

This PR introduces a "Sort mode" feature for the Block Grid property-editor by creating a reusable @umbraco-backoffice/sorter package. The feature allows users to enter a sorting mode where blocks can be easily rearranged with simplified views. The implementation includes property contexts, actions, and UI components for managing the sort state.

Key changes:

• Created new @umbraco-backoffice/sorter package with property context and actions
• Integrated sort mode into Block Grid with toolbar, visual indicators, and simplified block views
• Added icon-sort to icon registry and improved code formatting across multiple components

Reviewed Changes

Copilot reviewed 50 out of 55 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/tsconfig.json	Updated sorter package path from core/sorter to standalone sorter package
src/Umbraco.Web.UI.Client/src/packages/sorter/**	New sorter package with property contexts, actions, controller, and UI components
src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/**	Added icon-sort for the sort mode feature
src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts	Fixed typo: renamed #renderNoting() to #renderNothing()
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/**	Integrated sort mode into Block Grid with manager context, entry elements, and property editor UI
src/Umbraco.Web.UI.Client/src/packages/block/block/components/block-overlay-expose-button/block-overlay-expose-button.element.ts	Reformatted render method for better readability
src/Umbraco.Web.UI.Client/package.json	Updated sorter export path
src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts	Added sorter package import to core packages

Files not reviewed (1)

• src/Umbraco.Web.UI.Client/package-lock.json: Language not supported

[leekelleher]

Important

Circular references / illegal imports

I'm trying to unpick the illegal imports in the core package. They are all related to the UmbSorterController used with various "input" components. I'm wondering whether these components need to be inside the "core" package, or if they could be relocated elsewhere? e.g. the "property-editors" package? 😏

...or maybe I should put the "sorter" package back inside "core"? 😕
...or to pass the tests for this PR, bump the ILLEGAL_CORE_IMPORTS_THRESHOLD value to 7? and we unpick this after? 🤔