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 {
} from '@wordpress/block-editor';
import {
} from '@wordpress/components';
import imgFeaturedPostsType3 from './featured-posts-type-3.svg'

    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 }>
              initialOpen={ true }
                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}) }

                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}) }

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

Server side code:

      ['react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element'],

        '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