Wrong encoding of dynamic block properties problem when loggen in as editor

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:

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,

    } = wp.components;

 
    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,
 ) );

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
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?

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Solve it:
It’s a compatibility issue. In the days before Gutenberg it was possible to do an update of a post bevore saving in this way:

// get post object by id
$post_obj = get_post($post_id);         
// do something with post_content
    
// unhook this function so it doesn't loop infinitely
remove_action( 'save_post', array($this, 'replace_postcontent') );
// update the post, which calls save_post again
wp_update_post( array( 'ID' => $post_obj->ID, 'post_content' => $post_obj->post_content ) );
// re-hook this function
add_action( 'save_post', array($this, 'replace_postcontent') );

It still works, but cause problems like described above.
The solution is just to use the post object.
Instead of:
wp_update_post( array( 'ID' => $post_obj->ID, 'post_content' => $post_obj->post_content ) );
use:
wp_update_post( $post_obj );

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating