Unable to create a Gutenberg block…

[ad_1]

Hello,

I’m beginer on WordPress and I’m trying to create a plugin to add a gutenberg block.

Here my post-displayer.php :

<?php
/**
* Plugin Name: Post Displayer
* Description: Add a Gutenberg block to display another existing post.
* Version: 1.0
* License: GPLv2 or later
* Text Domain: post-displayer
*/

if (!defined(‘ABSPATH’)) {
exit;
}

function register_post_displayer_block() {
register_block_type_from_metadata(
__DIR__ . ‘/block.json’,
array(
‘editor_script’ => ‘post-displayer-block-script’,
‘editor_style’ => ‘post-displayer-block-style’
)
);
}
add_action(‘init’, ‘register_post_displayer_block’);

Here my block.js

const { registerBlockType } = wp.blocks;
const { SelectControl } = wp.components;
const { withSelect } = wp.data;

registerBlockType(‘post-displayer/block’, {
title: ‘Post Displayer’,
icon: ‘admin-post’,
category: ‘widgets’,
attributes: {
selectedPost: {
type: ‘integer’,
default: 0,
},
},
edit: withSelect((select) => {
return {
posts: select(‘core’).getEntityRecords(‘postType’, ‘post’),
};
})(({ posts, attributes, setAttributes }) => {
if (!posts) {
return ‘Loading…’;
}
if (posts && !posts.length) {
return ‘No posts found.’;
}
const options = posts.map((post) => ({
label: post.title.rendered,
value: post.id,
}));
return (
<SelectControl
label=”Select a post to display”
value={attributes.selectedPost}
options={options}
onChange={(value) => setAttributes({ selectedPost: parseInt(value) })}
/>
);
}),
save: () => {
return null;
},
});

and here my block.json

{
“apiVersion”: 2,
“name”: “post-displayer/block”,
“title”: “Post Displayer”,
“icon”: “admin-post”,
“category”: “widgets”,
“attributes”: {
“selectedPost”: {
“type”: “integer”,
“default”: 0
}
},
“editorScript”: “post-displayer-block-script”,
“editorStyle”: “post-displayer-block-style”
}

Unfortunatly no gutenberg block appears after I enabled the plugin:

&#x200B;

https://preview.redd.it/nwrtl96phdkc1.png?width=634&format=png&auto=webp&s=2e81e5e98a9f194a0c3e6d1c2b4fe2bccf10e0eb

I tried a lot of things to be helped like ask to an AI. But nothing works, I never seen this gutenberg block…

Any idea to help me ?

Note, I’m using the last WordPress version.

A lot of thanks !

[ad_2]