Support for Umbraco 14, (Bellissima, the new backoffice)

[leekelleher]

Note

This is a work-in-progress status update to outline my progress on Contentment for Bellissima (aka the Umbraco v14 backoffice).

Current status

	Editor	Status	Comment
🟢	Bytes	Done
🟢	Code Editor	Done
🔴	Content Blocks	Undecided	🚫 Considering deprecating; potentially migrate to Block List? 🤔
🟢	Data List	Done	Property-editor work is done. BUT! A few of the data-sources and list-editors are still under active development, (see below for status).
🔵	Data Picker	Started	1% done; A read-only placeholder editor is available.
🟢	Editor Notes	Done
🟢	Icon Picker	Done
🟢	List Items	Done
🟢	Notes	Done
🟢	Number Input	Done
🟢	Render Macro	Done	🚫 Macros have been deprecated in Umbraco. ⚠️ Replaced the editor with a deprecation notice.
🟢	Social Links	Done
🤔	Templated Label	Researching	1% done; A read-only placeholder editor is available; I'm currently researching the templating possibilities.
🟢	Textbox List	Done
🟢	Text Input	Done	⚠️ Unfortunately uui-input doesn't support datalist yet.

Note

Status details about the internally used components is here.
👇👇👇

Internal components

Status of components used internally within Contentment.

	Editor	Status	Comment
🟢	Cascading Dropdown List	Done
🟢	Configuration Editor	Done
🟢	Content Picker	Done
🔵	Data Table	Started	1% done; A read-only placeholder editor is available.
🟢	Dictionary Picker	Done
🔴	Macro Picker	Deprecated	🚫 Macros have been removed in Umbraco 14.
🔴	Read Only	Deprecated	🚫 Not required, as was only used in the Content Block configuration.
🔴	Rich Text Editor	Deprecated	🚫 Not required, reuses Umbraco's RTE component.

Data List editors

Status of list-editors used by the Data List editor.

	Editor	Status	Comment
🟢	Buttons	Done
🟢	Checkbox List	Done
🟢	Dropdown List	Done	⚠️ Missing "HTML attributes", Data Table UI.
🔵	Item Picker	Started	37% done.
🟢	Radio Button List	Done
🔵	Tags	Started	42% done.
🤔	Templated List	Researching	🤔 Exploring alternative options. ⚠️ Missing "HTML attributes", Data Table UI.

Data List sources

Status of data-sources used by the Data List editor.
The majority of this work is reliant on the internal Configuration Editor UI.

	Editor	Status	Comment
🟢	.NET Countries	Done
🟢	.NET Currencies	Done
🟢	.NET Enum	Done
🟢	.NET Languages	Done
🟢	.NET Time Zone	Done
🟢	Examine	Done
🟢	JSON	Done
🟢	Number Range	Done
🟢	Physical File System	Done
🟢	SQL	Done
🟢	Text Delimited	Done
🟢	uCssClassName	Done
🤔	Umbraco Backoffice Sections	Researching	🚫 Backoffice sections are now registered on the client-side, unable to query from the server. I'd like to explore a way to have client-side data-sources.
🟢	Umbraco Content	Done
🟢	Umbraco Content Properties	Done
🟢	Umbraco Content Property Value	Done
🟢	Umbraco Content Types	Done
🚫	Umbraco Content XPath	Deprecated	🚫 XPath has been removed in Umbraco 14.
🟢	Umbraco Dictionary	Done
🟢	Umbraco Entity	Done
🟢	Umbraco Files	Done
🟢	Umbraco Image Crop	Done
🟢	Umbraco Languages	Done
🟢	Umbraco Member Group	Done
🟢	Umbraco Members	Done
🟢	Umbraco Tags	Done
🟢	Umbraco Templates	Done
🟢	Umbraco User Group	Done
🟢	Umbraco Users	Done
🟢	User Defined	Done
🟢	XML	Done
🟢	XML Sitemap Change Frequency	Done
🟢	XML Sitemap Priority	Done

Updates

In reverse chronological order (most recent first)…

• August 2024:

  • "Edit raw JSON" property-action is done.
  • List Items is done.
  • Cascading Dropdown List is done, (for picking .NET Enums).
  • Dictionary Picker is done.
  • Member Type Picker is done.
  • Content Source editor is done (for picking start nodes).
  • Started work on Tags list-editor.
  • Started work on Item Picker list-editor
  • Adds data-type configuration migrations for some of the Data List sources.
  • Released 6.0.0-alpha003! 🎉

• July 2024:

  • Number Input is done.
  • Text Input is done.
  • Textbox List is done.
  • Social Links is done.
  • Added a few package migrations, for updating data-type configuration for Data List, Editor Notes and Notes.
  • Released 6.0.0-alpha002! 🎉

• June 2024:

  • Configuration Editor is done.
  • Started work on the Data List's data-sources and list-editors configuration fields UI.
  • Released 6.0.0-alpha001! 🎉 Moved working branch to dev/v6.x.

• May 2024: Upgraded to 14.0.0 (final).

  • Exploring how the Templated Label feature replacement may work, current thought is Markdown + Mustache.
  • Fixed a bug with the RTE configuration for Notes and Editor Notes.
  • Added Bytes and Icon Picker editors.
  • Started work on the Configuration Editor.
  • Added read-only placeholder editors for the remaining property-editor UIs, so that migrated data doesn't appear lost.
  • Added a C# database migration to assign the client-side property-editor UI aliases.

• April 2024: - Upgraded to 14.0.0-rc1 (and then rc2).

  • Much more work on Data List: API controller wired up, returning items from data-sources; implemented list-editor UIs for Buttons, Checkbox List, Dropdown List and Radio Button List.
  • Added a stub component for Render Macro, to display a notice about Macros being deprecated in Umbraco.

• March 2024: - Upgraded to 14.0.0-beta002, (I missed beta001, due to prep for Umbraco Spark).

  • Figured out how to do the hideLabel feature for Notes/Editor Notes. Still feels like a DOM hack, but it's "just JavaScript", right? 😉
  • More exploration with Data List, figured out how to wrap an existing property-editor UI and pick up the "property-value-change" event (from the wrapped element) and persist the value. "Softly, softly, catchee monkey".

• February 2024: - Upgraded to 14.0.0--preview005.

  • Started work on prototyping the Data List editor, finding that the old hacks - that made it appear simple - are no longer viable in Bellissima. Exploring alternative approaches to keep it simple.

• January 2024: Finding my balance between new job, community work, family life, (as well as pretending to be a rock star).

  • Updated to 14.0.0--preview003, then 14.0.0--preview004.
  • Lots of exploration with Notes, Editor Notes and Code Editor.
  • Found that Notes and Editor Notes can't hide the property label (else the UI screws up), and that the "hide property group container" option was originally a glorious CSS hack, but with the new shadow DOM approach, that's a complete non-starter.

• December 2023: I started a new role at Umbraco HQ at the end of the year, working on Bellissima itself.

• November 2023: Further work on the Editor Notes read-only editor. Added styling and markup amends.

  • Started work on Code Editor, reusing Umbraco's <umb-code-editor> component (which itself uses Microsoft's Monaco editor).

• October 2023: Started work on the Notes and Editor Notes read-only editors. Refactored how the property-editor manifests are loaded in via a single entryPoint extension, (I'd like to keep the metadata in "umbraco-package.json" to a minimum).

• September 2023: Work-in-progress branch on dev/wip/bellissima; Targeted net8.0 (for Umbraco 14.0.0--preview002); Code amends to support breaking-changes; Decided the target version should be Contentment v6 for Umbraco v15/.NET 9.

• August 2023: Bellissima: Preview releases of the new backoffice, 14.0.0--preview002 released.