My gutenberg editor block appears out of order

Question

I’m writing a custom gutenberg editor block, it’s a dynamic block, server side rendered, it shows just a “dummy” image for now but I’m facing two issues with it:

  1. When the editor loads the page, the block is rendered above the entire editor with content coming from the server, it triggers a entire page load actually.

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

You can see a screencast at the end.

Editor block code:

import { registerBlockType } from 'wordpress user/blocks';
import {
  useBlockProps,
  InspectorControls
} from 'wordpress user/block-editor';
import {
  PanelBody,
  TextareaControl
} from 'wordpress user/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 for the problems above.

enter image description here

0
faelv 4 weeks 2022-11-04T17:15:31-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse