1

[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:

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

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

  2. 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:

enter image description here

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.

6
  • Looks like you've doe a good job, but what about debugging - JS or PHP - can you capture and share any debug info you have?
    – Q Studio
    Jan 31, 2021 at 9:55
  • I'm not sure how to do that (I have no much experience). Query monitor plugin is not showing alerts and JS are linted with yarn build with no alerts too.
    – aitor
    Jan 31, 2021 at 10:10
  • Your browser will have a code inspector with a JS console and you can activate PHP logging in WP wordpress.org/support/article/debugging-in-wordpress/…
    – Q Studio
    Jan 31, 2021 at 10:19
  • 1
    Indeed, I have an error in the JS console: Block validation: Expected attribute src of value undefined/videos/embed/undefined, saw https://video.nogafam.es/videos/embed/2e3d35ba-f42f-49be-8bc2-97a770785570.
    – aitor
    Jan 31, 2021 at 10:34
  • 1
    Problem 3 is solved now. Question edited.
    – aitor
    Jan 31, 2021 at 11:28

1 Answer 1

2

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). :)

1
  • PS: Sorry, I meant src/edit.js..
    – Sally CJ
    Jan 31, 2021 at 14:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.