dawoe / OEmbed-Picker-Property-Editor

Property editor for Umbraco CMS to allow embedding 3rd party media like Youtube, Vimeo, ... outside of the rich text editor.
https://our.umbraco.org/projects/backoffice-extensions/oembed-picker-property-editor/
MIT License
10 stars 10 forks source link

V10 -> v13 upgrade data issue #36

Open IOSven opened 3 weeks ago

IOSven commented 3 weeks ago

Hi,

We're in the process of upgrading an umbraco v10 installation to v13 LTS. We use the OEmbed-picker-property editor in our content blocks in combination with block grids.

We notice that all our properties using the OEmbed-picker-property editor are currently empty in the Umbraco backoffice. image Upon further investigation we notice that the format of the property value has been updated, but our content has not been updated after upgrading Umbraco to v13 and this package to v13.

Old format: "[{\"url\":\"https://www.youtube.com/watch?v=nv-_zh0Vnzo\",\"width\":244,\"height\":203,\"preview\":\"<iframe width=\\"360\\" height=\\"203\\" src=\\"https://www.youtube.com/embed/nv-_zh0Vnzo?feature=oembed\\" frameborder=\\"0\\" allow=\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\" referrerpolicy=\\"strict-origin-when-cross-origin\\" allowfullscreen title=\\"test\\">\"}]",

New format: "[\"<iframe width=\\"360\\" height=\\"203\\" src=\\"https://www.youtube.com/embed/nv-_zh0Vnzo?feature=oembed\\" frameborder=\\"0\\" allow=\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\" allowfullscreen title=\\"test\\">\"]"

Any idea how we can convert our values to the new format via code? Thanks in advance!

dawoe commented 3 weeks ago

Hi @IOSven,

Can you tell me which version of Umbraco you are exactly using.

Dave

IOSven commented 3 weeks ago

Hey @dawoe, Umbraco v13.3.2

dawoe commented 3 weeks ago

I will try to reproduce, because this is the first time I see this issue.

IOSven commented 3 weeks ago

Thank you! Note: In Umbraco 10 we used nested content in combination with doc type grid editor (https://our.umbraco.com/packages/backoffice-extensions/doc-type-grid-editor)

We've used uSync.Migrations to convert nested content and doc type grid editor to block lists and block grids.

dawoe commented 3 weeks ago

Hi @IOSven

I just setup a sample website using this script

# Ensure we have the version specific Umbraco templates
dotnet new -i Umbraco.Templates::10.8.6 --force

# Create solution/project
dotnet new sln --name "OEmbedTest"
dotnet new umbraco --force -n "OEmbedTest.Web" --friendly-name "Administrator" --email "admin@example.com" --password "1234567890" --development-database-type SQLite
dotnet sln add "OEmbedTest.Web"

#Add starter kit
dotnet add "OEmbedTest.Web" package Umbraco.TheStarterKit --version 10.0.0

#Add Packages
dotnet add "OEmbedTest.Web" package Dawoe.OEmbedPickerPropertyEditor --version 10.0.0

dotnet run --project "OEmbedTest.Web"
#Running

I added a OEmbed picker to the content page doctype and on one of the pages I added a youtube video.

I then stopped the project and updated the csproj file to this to trigger the update to v13

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
    <Nullable>enable</Nullable>
    <ManagePackageVersionsCentrally>false</ManagePackageVersionsCentrally>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Dawoe.OEmbedPickerPropertyEditor" Version="13.0.0" />
    <PackageReference Include="Umbraco.Cms" Version="13.3.2" />
    <PackageReference Include="Umbraco.TheStarterKit" Version="13.0.0" />
  </ItemGroup>

  <ItemGroup>
    <!-- Opt-in to app-local ICU to ensure consistent globalization APIs across different platforms -->
    <PackageReference Include="Microsoft.ICU.ICU4C.Runtime" Version="68.2.0.9" />
    <RuntimeHostConfigurationOption Include="System.Globalization.AppLocalIcu" Value="68.2.0.9" Condition="$(RuntimeIdentifier.StartsWith('linux')) or $(RuntimeIdentifier.StartsWith('win')) or ('$(RuntimeIdentifier)' == '' and !$([MSBuild]::IsOSPlatform('osx')))" />
  </ItemGroup>

  <PropertyGroup>
    <!-- Razor files are needed for the backoffice to work correctly -->
    <CopyRazorGenerateFilesToPublishDirectory>true</CopyRazorGenerateFilesToPublishDirectory>
  </PropertyGroup>

  <PropertyGroup>
    <!-- Remove RazorCompileOnBuild and RazorCompileOnPublish when not using ModelsMode InMemoryAuto -->
    <RazorCompileOnBuild>false</RazorCompileOnBuild>
    <RazorCompileOnPublish>false</RazorCompileOnPublish>
  </PropertyGroup>

</Project>

After that I started the website again.

I can still see the video. So I think the uSync Migrations might have changed the json structure for this package

IOSven commented 2 weeks ago

@dawoe some more information:

In umbraco v10 we used nested content in combination with doctype grid editor package.

There is one nested content item with the OEmbed picker property.

Nested content & doctype grid editor has been upgraded to Umbraco blocklist & Umbraco block grid with uSync migrations. Only content within the block grid has the issue mentioned above.

dawoe commented 2 weeks ago

I suspect it has to do something with the uSync Migrations.

I just checked a website we upgraded from V10 to V13 where we use this property editor in a block list block. And I don't see the issue there.

Dave