Converting WYSIWYG to Block Editor

As of version 22.10, it is now possible to transform WYSIWYG fields into Block Editor fields within a given Content Type. This is one way to seamlessly integrate Block Editors when you've built your existing content-creation system around the WYSIWYG field.

This conversion does not trigger an expensive mass data-conversion process; the only change initially is within the content type itself. New contentlets will treat the field as a Block Editor, but all previous contentlets will continue to store the field as its prior WYSIWYG HTML. When editing an older contentlet containing prior WYSIWYG data, said data will be reinterpreted on the fly as Block Editor content. As such, data will only be converted on a per-contentlet basis, on saving.

When the conversion triggers, the HTML is transformed into JSON according to the Block Editor's schema. As such, the result is relatively genericized; HTML attributes are not preserved, and the JSON will display according to your block rendering configuration.

Admin Panel Method

To initiate the transformation from the admin panel, browse to Types & Tags -> Content Types, select the Content Type with a WYSIWYG field, and edit the field's properties. At the bottom of the modal dialog, you'll find the following menu item:

Simply check the box and click the button to begin.

Headless Method

This operation can be initiated headlessly by updating the field, such as through the API call below.

{domain}/api/v3/contenttype/{typeIdOrVarName}/fields/{id}

As a curl call, it might look like this:

curl -v -u admin@dotcms.com:admin -XPUT https://demo.dotcms.com/api/v3/contenttype/testField/fields/32df305c2dd5917cd37e3f45f5d6ba2f -H "Content-Type: application/json" --data @bodyUpdate.json

This requires three things:

1. The identifier or variable name of the Content Type
2. The identifier of the WYSIWYG field
3. A small JSON payload representing the altered field

The Content Type variable or identifier can be found via the Content Type API generally. If you already know the identifier or variable name for the WYSIWYG field, you could return its object through either of the following two GET calls:

/api/v2/contenttype/{typeIdOrVarName}/fields/id/{fieldId}
/api/v2/contenttype/{typeIdOrVarName}/fields/var/{fieldVar}

Alternately, if you lack the variable or identifier, you could obtain an array of all a Content Type's field objects through the following GET call:

/api/v3/contenttype/{typeIdOrVarName}/fields

The returned field object will look something like this:

{
    "clazz": "com.dotcms.contenttype.model.field.ImmutableWysiwygField",
    "contentTypeId": "d9eda6f96171df28fc5a6f3babb32be6",
    "dataType": "LONG_TEXT",
    "fieldType": "WYSIWYG",
    "fieldTypeLabel": "WYSIWYG",
    "fieldVariables": [],
    "fixed": false,
    "iDate": 1666975791000,
    "id": "4d65053db994dcb81394d0c9b9fecfaa",
    "indexed": false,
    "listed": false,
    "modDate": 1666975791000,
    "name": "testField",
    "readOnly": false,
    "required": false,
    "searchable": false,
    "sortOrder": 3,
    "unique": false,
    "variable": "testField"
}

To begin the transformation of a WYSIWYG field to a Block Editor field, the above object will need to be turned into a suitable payload by making three changes:

• Alter the clazz field, replacing .ImmutableWysiwygField with .ImmutableStoryBlockField
• Alter fieldType, replacing WYSIWYG with Story-Block
• Store the entire resulting object as the value of the key field.

The resulting payload will look like this:

}
    "field": {
        "clazz": "com.dotcms.contenttype.model.field.ImmutableStoryBlockField",
        "contentTypeId": "d9eda6f96171df28fc5a6f3babb32be6",
        "dataType": "LONG_TEXT",
        "fieldType": "Story-Block",
        "fieldTypeLabel": "WYSIWYG",
        "fieldVariables": [],
        "fixed": false,
        "iDate": 1666975791000,
        "id": "4d65053db994dcb81394d0c9b9fecfaa",
        "indexed": false,
        "listed": false,
        "modDate": 1666975791000,
        "name": "testField",
        "readOnly": false,
        "required": false,
        "searchable": false,
        "sortOrder": 3,
        "unique": false,
        "variable": "testField"
    }
}

In the curl example above, this payload would be saved as bodyUpdate.json. With the payload in place, the call will begin the conversion process.