I am writing a customized gutenberg editor block, it is a dynamic block, server facet rendered, it reveals only a “dummy” picture for now however I am dealing with two points with it:
-
When the editor masses the web page, the block is rendered above your complete editor with content material coming from the server, it triggers a total web page load really.
-
After I preview the web page the block is out of order, it all the time seems first.
You may see a screencast on the finish.
Editor block code:
import { registerBlockType } from '@wordpress/blocks';
import {
useBlockProps,
InspectorControls
} from '@wordpress/block-editor';
import {
PanelBody,
TextareaControl
} from '@wordpress/elements';
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',
class: 'theme',
icon: 'format',
key phrases: ['posts', 'tema', 'destaque', 'home'],
instance: {
attributes: {
exclude_categories: '',
exclude_tags: ''
}
},
attributes: {
exclude_categories: {sort: 'string', default: ''},
exclude_tags: {sort: 'string', default: ''}
},
edit: ({ attributes, setAttributes }) => {
const blockProps = useBlockProps();
return (
<div { ...blockProps }>
<InspectorControls>
<PanelBody
title="Configurações"
initialOpen={ true }
>
<TextareaControl
worth={ attributes.exclude_categories }
label="Categorias ExcluÃdas"
rows={ 3 }
assist={ <>
Uma lista separada por vÃrgula contendo slugs de categorias a serem excluÃdas, por exemplo: <i>categoria1, categoria2</i>
</> }
onChange={ (worth) => setAttributes({exclude_categories: worth}) }
></TextareaControl>
<TextareaControl
worth={ attributes.exclude_tags }
label="Tags ExcluÃdas"
rows={ 3 }
assist={ <>
Uma lista separada por vÃrgula contendo slugs de tags a serem excluÃdas, por exemplo: <i>tag1, tag2</i>
</> }
onChange={ (worth) => setAttributes({exclude_tags: worth}) }
></TextareaControl>
</PanelBody>
</InspectorControls>
<img src={ imgFeaturedPostsType3 } type={ {width: '100%', peak: 'auto'} } />
</div>
);
}
}
);
Server facet 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;">';
}
]
);
All the things works as anticipated apart from the issues above.