My Gutenberg editor block appears out of order

I am writing a custom Gutenberg editor block, it is a dynamic block, rendered server side, it just shows a “dummy” image for now but I am facing two issues with it:

  1. When the editor loads the page, the block is rendered on top of the entire editor. server contentIt actually triggers an entire page load.

  2. When I preview the page the block is out of order, it always appears first.

You can watch a screencast at the end.

Editor block code:

import { registerBlockType } from '@wordpress/blocks';
import {
  useBlockProps,
  InspectorControls
} from '@wordpress/block-editor';
import {
  PanelBody,
  TextareaControl
} from '@wordpress/components';
import imgFeaturedPostsType3 from './featured-posts-type-3.svg'

registerBlockType(
  'pdb/theme-featured-posts-type-3',
  {
    apiVersion: 2,
    title: 'Posts em Destaque (5 Posts)',
    description: 'Exibe os 5 posts mais recentes (ou fixados) como destaque',
    category: 'theme',
    icon: 'layout',
    keywords: ['posts', 'tema', 'destaque', 'home'],

    example: {
      attributes: {
        exclude_categories: '',
        exclude_tags: ''
      }
    },

    attributes: {
      exclude_categories: {type: 'string', default: ''},
      exclude_tags: {type: 'string', default: ''}
    },

    edit: ({ attributes, setAttributes }) => {
      const blockProps = useBlockProps();

      return (
        <div { ...blockProps }>
          <InspectorControls>
            <PanelBody
              title="Configurações"
              initialOpen={ true }
            >
              <TextareaControl
                value={ attributes.exclude_categories }
                label="Categorias Excluídas"
                rows={ 3 }
                help={ <>
                  Uma lista separada por vírgula contendo slugs de categorias a serem excluídas, por exemplo: <i>categoria1, categoria2</i>
                </> }
                onChange={ (value) => setAttributes({exclude_categories: value}) }
              ></TextareaControl>

              <TextareaControl
                value={ attributes.exclude_tags }
                label="Tags Excluídas"
                rows={ 3 }
                help={ <>
                  Uma lista separada por vírgula contendo slugs de tags a serem excluídas, por exemplo: <i>tag1, tag2</i>
                </> }
                onChange={ (value) => setAttributes({exclude_tags: value}) }
              ></TextareaControl>
            </PanelBody>
          </InspectorControls>

          <img src={ imgFeaturedPostsType3 } style={ {width: '100%', height: 'auto'} } />
        </div>
      );
    }
  }
);

Server side code:

wp_register_script(
      'pdb-theme-fix-blocks',
      '/editor-blocks.js',
      ['react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element'],
      '1.0'
    );

    register_block_type(
      'pdb/theme-featured-posts-type-3',
      [
        'editor_script'   => 'pdb-theme-fix-blocks',
        'render_callback' => function ($block_attributes, $content) {
          echo '<img src="/featured-posts-type-3.svg" style="width: 100%; height: auto;">';
        }
      ]
    );

Everything works as expected except the above problems.

Leave a Comment