German umlauts in dynamic block properties ( strings ) are incorrectly encoded/saved in the database, when it's an editor, but correct if edited by an admin.

How to reproduce:

1. Create a dynamich block plugin: testblock.php

    <?php
    /**
     * Plugin Name: Gutenberg wrong encoding example dynamic
     */
     
    function test_callback( $block_attributes, $content ) {
    
        return '<p>'.$block_attributes['dataTest'].'</p>';
    }
     
    function wrong_encoding_dynamic() {
    
        wp_register_script(
            'test',
                    plugins_url( 'testblock.js',__FILE__ ), 
                    
                    array( 'wp-editor', 'wp-i18n', 'wp-element', 'wp-components', 'wp-blocks' ),
                    '1.0.0',
                    true
        );
     
        register_block_type( 'dev/test', array(
            'editor_script' => 'test',
            'render_callback' => 'test_callback'
        ) );
     
    }
    add_action( 'init', 'wrong_encoding_dynamic' );

testblock.js:

( function( blocks, element, data ) {
    var el = element.createElement,
        registerBlockType = blocks.registerBlockType;
const {
        TextControl,

    } = wpponents;

 
    registerBlockType( 'dev/test', {
        title: 'Dev: Test',
        icon: 'megaphone',
        category: 'widgets',
        attributes: {
            dataTest:{
                    type:'string',
                    default:'ÄÖÜäöüß'
                },
        },
        edit: function( props ) {
            return el(TextControl,{
                                onChange: ( value ) => {    
                                                        props.setAttributes({dataTest:value});
                                                        },
                                          }
         );
    }
});
 }(
    window.wp.blocks,
    window.wp.element,
    window.wp.data,
 ) );

2. Login as (Super)Administrator, Activete the plugin, create a new post, add the block and type in some umlauts. Save or publish the post & take a look at the output
3. Log out. Log in as editor, repeat step 2, compare the output.

Example post content in db:

<!-- wp:dev/test {"dataTest":"u00c4u00d6u00dcu00e4u00f6u00fcu00dfu00f6"} /-->

but should be:

<!-- wp:dev/test {"dataTest":"ÄÖÜäöüßö"} /--> 

Any idea whats wrong?

German umlauts in dynamic block properties ( strings ) are incorrectly encoded/saved in the database, when it's an editor, but correct if edited by an admin.

How to reproduce:

1. Create a dynamich block plugin: testblock.php

    <?php
    /**
     * Plugin Name: Gutenberg wrong encoding example dynamic
     */
     
    function test_callback( $block_attributes, $content ) {
    
        return '<p>'.$block_attributes['dataTest'].'</p>';
    }
     
    function wrong_encoding_dynamic() {
    
        wp_register_script(
            'test',
                    plugins_url( 'testblock.js',__FILE__ ), 
                    
                    array( 'wp-editor', 'wp-i18n', 'wp-element', 'wp-components', 'wp-blocks' ),
                    '1.0.0',
                    true
        );
     
        register_block_type( 'dev/test', array(
            'editor_script' => 'test',
            'render_callback' => 'test_callback'
        ) );
     
    }
    add_action( 'init', 'wrong_encoding_dynamic' );

testblock.js:

( function( blocks, element, data ) {
    var el = element.createElement,
        registerBlockType = blocks.registerBlockType;
const {
        TextControl,

    } = wpponents;

 
    registerBlockType( 'dev/test', {
        title: 'Dev: Test',
        icon: 'megaphone',
        category: 'widgets',
        attributes: {
            dataTest:{
                    type:'string',
                    default:'ÄÖÜäöüß'
                },
        },
        edit: function( props ) {
            return el(TextControl,{
                                onChange: ( value ) => {    
                                                        props.setAttributes({dataTest:value});
                                                        },
                                          }
         );
    }
});
 }(
    window.wp.blocks,
    window.wp.element,
    window.wp.data,
 ) );

2. Login as (Super)Administrator, Activete the plugin, create a new post, add the block and type in some umlauts. Save or publish the post & take a look at the output
3. Log out. Log in as editor, repeat step 2, compare the output.

Example post content in db:

<!-- wp:dev/test {"dataTest":"u00c4u00d6u00dcu00e4u00f6u00fcu00dfu00f6"} /-->

but should be:

<!-- wp:dev/test {"dataTest":"ÄÖÜäöüßö"} /--> 

Any idea whats wrong?

• rest-api

• They're the same though? Sure they don't read the same to us humans, but that data is still the same, JSON encode it and see for yourself, it's working as intended. If it didn't then characters such as " or > in the attribute would break the data. – Tom J Nowell ♦ Commented Oct 15, 2020 at 17:25
• hmmm your example is missing the necessary slash escape sequence