Translating Gutenberg Blocks breaks them (title seems to be equal to id)

[kaesetoast]

Version

• Carbon Fields: 3.1.15
• WordPress: 5.3.2
• PHP: 7.3.15

Expected Behavior

• Gutenberg blocks created via carbon-fields can have a title (which is translatable) and a fixed ID for identifying the block type.
• I can translate a page into a different language (using WPML) and display a translated block title (e.g. English: 'Quote', German: 'Zitat')
• When I copy a block from one language to another, the title changes, but the block identifier stays the same

Actual Behavior

If I copy a block from one language to another, the block breaks. This is because carbon-fields uses the title of the block (which is translatable) as the block identifier. The block below would result in this block definition for english:

<!-- wp:carbon-fields/quote {"data":{"heading":"Hallo","quote":"\u003cp\u003efoobar\u003c/p\u003e","author":"sdfsd","author_position":"sd","image":736,"color":"brand-orange"}} /-->

and this block definition in german:

<!-- wp:carbon-fields/zitat {"data":{"heading":"Hallo","quote":"\u003cp\u003efoobar\u003c/p\u003e","author":"sdfsd","author_position":"sd","image":736,"color":"brand-orange"}} /-->

As a result, the block will break.

Container definition

Block::make( __( 'Quote' ) )
    ->add_fields( [
        Field::make( 'text', 'heading', __( 'Heading' ) ),
        Field::make( 'rich_text', 'quote', __( 'Quote' ) ),
        Field::make( 'text', 'author', __( 'Author' ) ),
        Field::make( 'text', 'author_position', __( 'Author Position' ) ),
        Field::make( 'image', 'image', __( 'Image' ) ),
        Field::make( 'select', 'color', __( 'Background Color' ) )
            ->set_options( [
                'gray-200' => __('Light Gray'),
                'brand-orange' => __('Orange'),
            ] ),
        ] )
    ->set_render_callback( function ( $fields, $attributes, $inner_blocks ) {
        Timber::render( 'organisms/testimonial--quote.twig', ['fields' => $fields, 'attributes' => $attributes, 'inner_blocks' => $inner_blocks] );
    } );

Steps to Reproduce the Problem

1. Create a block with a translatable title
2. Use it on a page
3. Translate the page
4. Copy content from the original language to translation (e.g. via the built-in functionality in WPML)

Comments

My feeling is that the title should not be used as the block identifier, as this will break if it is translated into different languages. I would rather have the option to add an additional field that will serve as the block identifier and keep the title being translatable.

I am using carbon fields and the Gutenberg editor for the first time, so I might overlook caveats here. For now, I do not translate the block titles as a workaround, but that's not a good fit for a permanent solution.

[lstoyanoff]

Hey @kaesetoast,

You could pass a Block ID as a first argument and the Block Title as a second argument. In your case:

Block::make( 'quote', __( 'Quote' ) )
    ->add_fields( [
        Field::make( 'text', 'heading', __( 'Heading' ) ),
        Field::make( 'rich_text', 'quote', __( 'Quote' ) ),
        Field::make( 'text', 'author', __( 'Author' ) ),
        Field::make( 'text', 'author_position', __( 'Author Position' ) ),
        Field::make( 'image', 'image', __( 'Image' ) ),
        Field::make( 'select', 'color', __( 'Background Color' ) )
            ->set_options( [
                'gray-200' => __('Light Gray'),
                'brand-orange' => __('Orange'),
            ] ),
        ] )
    ->set_render_callback( function ( $fields, $attributes, $inner_blocks ) {
        Timber::render( 'organisms/testimonial--quote.twig', ['fields' => $fields, 'attributes' => $attributes, 'inner_blocks' => $inner_blocks] );
    } );

[MrZyr0]

This should be documented 🙏
As a result, I submitted a PR on the documentation : #119 😇