v13: Blocks in RTE not rendering after save

[mttblss]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

13.0.3

Bug summary

In the back-office, when editing a content page that includes an RTE with blocks, following a Save or Save and Publish the following happens:

• The edit link on the embeded block cannot be clicked
• The html/angular preview does not display correctly (content is missing)

Before:

After:

Specifics

I've checked this in Umbraco 13.0.3 using both Safari and Chrome browsers

Steps to reproduce

1. Install a new Umbraco 13.0.3
2. Create an element type for a block (in my example it was a heading)
3. Configure the RTE to use the block
4. Create a cshtml rendering view for the front-end
5. Create an html/angular rendering view for the back-office
6. Create a page type that includes the RTE
7. Edit the new content page and add a block
8. It will be rendering correctly in the back-office
9. Save or Save & Publish the page
10. The block content disappears and the block edit link no longer works

Expected result / actual result

The blocks in the RTE should render and be editable as they were before the Save

---

This item has been added to our backlog AB#42480

[github-actions]

Hi there @mttblss!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[Zeegaan]

I need some clarification here.

You have this step:
4. Create a cshtml rendering view for the front-end

Is that necessary? We're presumably only looking at the backoffice here.

And then:
5. Create an html/angular rendering view for the back-office

I would like the code for this, so I can reproduce exactly what you are seeing 👍

A video with you setting this up would help a lot to, so I can make certain I'd be doing the same as you 😁

[jannemartensgard]

I can confirm that this is still an issue in a fresh install on 13.1.0 (testing on Chrome/Firefox on Windows). The block is editable when first loading the document in the backoffice, but turns uneditable when saving (clicking the edit icon produces a "Cannot read properties of undefined" error in the console). Moving the block within the editor turns it editable again.
Inspecting the block object I can see that the blockObject does not include content or data properties when the document has just been saved, whereas if I move the block the content and data properties are there (see included images).

https://github.com/umbraco/Umbraco-CMS/assets/78088981/388f2a0f-3417-4b7d-acac-c7e4e4283e05

[Zeegaan]

@jannemartensgard Could you give me some steps to follow from a clean install, so I can reproduce this? 🙈

[jannemartensgard]

Sure, I just did the following:

• Install Umbraco via the CLI
• Run Umbraco, log in
• Create a new document type, make sure it is an Element Type
• Name it "Block Example" and add a text field to it
• Create a new Data Type, name it "Block RTE"
• Select Rich Text Editor as property type, check "Block" in the Toolbar property and add the previously created "Block Example" data type as an available block. Label it "Block Example", leave everything else default
• Click Submit to close the block dialog, then Save the data type
• Create a new Document Type, name it "Page"
• Add a new property, name it "Body Text" and add the Block RTE datatype as the editor
• Select Permission/Allow as root, then save the document type
• Create a new item in the root of the content tree, select the Page document type
• Name it "Start page"
• Type some text in the Body Text field
• Click the "Add block" icon in the toolbar and select the "Block Example" block
• Enter some text into the text field and click "Create"
• In the block that has been created in the RTE field, click the "Edit content" button
• The dialog should reappear, edit the text, click Submit
• Click "Save" to save the document
• Now click the "Edit content" button again, the dialog fails to appear and the error shows up in the console
• Force a rerender of the block, for example by moving it within the text or by clicking the "View Source Code" button in the toolbar and clicking Submit without having changed any code
• Click the "Edit content" button again, the dialog should now reappear

[kulwinderk13]

Hi @jannemartensgard Did you find a fix for this? Its still happening for me in umbraco 13.

[kulwinderk13]

Hi there I have installed version 13.4.1 and have the same issue where blocks not being able to edit after hitting Save/Publish. I am attaching a few screenshots of the errors I can see in the browser console. I put a debug point on editBlock function and noticed that it throws error while accessing blockObject.config.settingsElementTypeKey. That is because the blockObject.config is undefined.

** as shown on the right.

[kulwinderk13]

@kasparboelkjeldsen I can see that the issue has been closed now. I tried the Knowit.Umbraco.InstantBlockPreview but it does not seem to solve the above issue. I guess this package is for Block Grid and Block List in RTE and not the blocks we add through the toolbar.

[kasparboelkjeldsen]

@kulwinderk13 they aren't really related. I'm just mentioning this issue over there as a warning that even with the feature I'm building there, there are currently issues with block elements in the RTE.

[leekelleher]

Fixed in #16864 for v13.5.0.

[kulwinderk13]

Hi @leekelleher Could you tell when 13.5.0 will be available for upgrade as I can only see until 13.4.1.

[leekelleher]

@kulwinderk13 I don't know the exact date, it should be in a few weeks (mid-September).