Initial help with official "create a block" tutorial

Question

[EDIT] Problem 3 is solved (just I must to remove source: 'text' from attributes declaration to allow store data in the the block’s comment delimiter).

Following this tutorial I made a plugin for embed peertube video. My block is as simple as two fields (instance and ID). Here it is a working example. And here the plugin.

I have three problems:

1. The TextControl fields are shown 100% wide, instead center in the column:

2. Once created, I can not remove the block in the editor

3. The block shows the video content in the front end but when I come back to the editor, the fields are not stored. First is shown this:

Second, if I try to recover block with this button, the fields are shown empty (as in the first image).

This is the edit function (also here in context):

import { TextControl } from '@wordpress/components';

export default function Edit( { attributes, className, setAttributes } ) {
    return (
        <div className={ className }>
            <TextControl
                label={ __( 'Identificador', 'peertube' ) }
                value={ attributes.identificador }
                onChange={ ( val ) => setAttributes( { identificador: val } ) }
            />
            <TextControl
                label={ __( 'Instancia', 'peertube' ) }
                value={ attributes.instancia }
                onChange={ ( val ) => setAttributes( { instancia: val } ) }
            />
        </div>
    );
}

Here the register block function (also here in context):

registerBlockType( 'e451/peertube', {
    attributes: {
        identificador: {
            type: 'string',
            source: 'text',
            selector: 'div',
        },
        instancia: {
            type: 'string',
            source: 'text',
            selector: 'div',
        },
    },
    apiVersion: 2,
    title: __( 'Peertube video', 'peertube' ),
    description: __( 'Insertar contenido de peertube', 'peertube' ),
    category: 'embed',
    icon: 'video-alt3',
    supports: {
        // Removes support for an HTML mode.
        html: false,
    },
    edit: Edit,
    save,
} );

Any help appreciated.

Answer 1

Glad that you managed to fix the 3rd issue (block validation failed), and as for the first and second issues, you can fix them by using useBlockProps in your block's edit callback:

// In src/index.js

import { TextControl } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';

export default function Edit( { attributes, className, setAttributes } ) {
    const blockProps = useBlockProps();
    return (
        <div { ...blockProps }>
            ... your code.
        </div>
    );
}

See Developer Documentation → Block API Reference → Edit and Save in the block editor handbook for more details on that useBlockProps (hook). :)