Gutenberg, the new WordPress editor, uses blocks to create content. This is a big departure from the previous TinyMCE editor and provides a much more intuitive and dynamic user interface. At the heart of this new editor is the React JavaScript library. This means you can now create your own blocks using JavaScript and React. In this article, we will discuss how to create your own Gutenberg block using these technologies.<\/p>\n\n\n\n
Preparation<\/strong><\/p>\n\n\n\n To get started, we need to have Node.js and NPM installed on our machine. Next, we'll use the WP CLI, specifically the package Here 'my-block' is the name of your block. This will create a new folder with the same name, including all the necessary files for a Gutenberg block.<\/p>\n\n\n\n Development of the block<\/strong><\/p>\n\n\n\n Now open the block folder in your preferred text editor. You will see two main files \u2013 To create our own block we will need to import several components from For example, in Here we use IN Block registration<\/strong><\/p>\n\n\n\n Finally, we need to register our new block with WordPress. Go back to Here we register a new block with the name 'my-plugin\/my-block', defining the attributes the block will use and specifying the functions Conclusion<\/strong><\/p>\n\n\n\n This is a basic guide to creating your own block in Gutenberg with JavaScript and React. Since Gutenberg is built with React, the possibilities for customizing and extending the functionality of the blocks are almost endless. With React skills, you can create more complex blocks that meet the specific needs of your website or app.<\/p>","protected":false},"excerpt":{"rendered":" Gutenberg, the new WordPress editor, uses blocks to create content. This is a big departure from the previous TinyMCE editor and provides a much more intuitive and dynamic user interface. At the heart of this new editor is the React JavaScript library. This means you can now create your own blocks using JavaScript and React. In this article, we will discuss how to create your own Gutenberg block using these technologies.<\/p>","protected":false},"author":2,"featured_media":3337,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[386,390],"tags":[],"class_list":["post-3336","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-386","category-390"],"taxonomy_info":{"category":[{"value":386,"label":"\u041f\u043b\u044a\u0433\u0438\u043d\u0438 \u0438 \u0422\u0435\u043c\u0438"},{"value":390,"label":"\u0421\u044a\u0432\u0435\u0442\u0438 \u0438 \u041f\u0440\u0435\u043f\u043e\u0440\u044a\u043a\u0438"}]},"featured_image_src_large":["https:\/\/minchev-design.com\/wp-content\/uploads\/\u0421\u044a\u0437\u0434\u0430\u0432\u0430\u043d\u0435-\u043d\u0430-\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u0438-Gutenberg-\u0431\u043b\u043e\u043a\u043e\u0432\u0435-\u0441-JavaScript-\u0438-React-1024x683.jpg",1024,683,true],"author_info":{"display_name":"\u0421\u0432\u0435\u0442\u043e\u0441\u043b\u0430\u0432 \u041c\u0438\u043d\u0447\u0435\u0432","author_link":"https:\/\/minchev-design.com\/en\/author\/minchev\/"},"comment_info":0,"category_info":[{"term_id":386,"name":"\u041f\u043b\u044a\u0433\u0438\u043d\u0438 \u0438 \u0422\u0435\u043c\u0438","slug":"%d0%bf%d0%bb%d1%8a%d0%b3%d0%b8%d0%bd%d0%b8-%d0%b8-%d1%82%d0%b5%d0%bc%d0%b8","term_group":0,"term_taxonomy_id":386,"taxonomy":"category","description":"","parent":0,"count":14,"filter":"raw","cat_ID":386,"category_count":14,"category_description":"","cat_name":"\u041f\u043b\u044a\u0433\u0438\u043d\u0438 \u0438 \u0422\u0435\u043c\u0438","category_nicename":"%d0%bf%d0%bb%d1%8a%d0%b3%d0%b8%d0%bd%d0%b8-%d0%b8-%d1%82%d0%b5%d0%bc%d0%b8","category_parent":0},{"term_id":390,"name":"\u0421\u044a\u0432\u0435\u0442\u0438 \u0438 \u041f\u0440\u0435\u043f\u043e\u0440\u044a\u043a\u0438","slug":"%d1%81%d1%8a%d0%b2%d0%b5%d1%82%d0%b8-%d0%b8-%d0%bf%d1%80%d0%b5%d0%bf%d0%be%d1%80%d1%8a%d0%ba%d0%b8","term_group":0,"term_taxonomy_id":390,"taxonomy":"category","description":"","parent":0,"count":29,"filter":"raw","cat_ID":390,"category_count":29,"category_description":"","cat_name":"\u0421\u044a\u0432\u0435\u0442\u0438 \u0438 \u041f\u0440\u0435\u043f\u043e\u0440\u044a\u043a\u0438","category_nicename":"%d1%81%d1%8a%d0%b2%d0%b5%d1%82%d0%b8-%d0%b8-%d0%bf%d1%80%d0%b5%d0%bf%d0%be%d1%80%d1%8a%d0%ba%d0%b8","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/minchev-design.com\/en\/wp-json\/wp\/v2\/posts\/3336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/minchev-design.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/minchev-design.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/minchev-design.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/minchev-design.com\/en\/wp-json\/wp\/v2\/comments?post=3336"}],"version-history":[{"count":0,"href":"https:\/\/minchev-design.com\/en\/wp-json\/wp\/v2\/posts\/3336\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/minchev-design.com\/en\/wp-json\/wp\/v2\/media\/3337"}],"wp:attachment":[{"href":"https:\/\/minchev-design.com\/en\/wp-json\/wp\/v2\/media?parent=3336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/minchev-design.com\/en\/wp-json\/wp\/v2\/categories?post=3336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/minchev-design.com\/en\/wp-json\/wp\/v2\/tags?post=3336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}@wordpress\/create-block<\/code>, to create our block structure. In your command prompt, navigate to the wp-content\/plugins folder of your WordPress site and enter the following command:<\/p>\n\n\n\nnpx @wordpress\/create-block my-block<\/code><\/pre>\n\n\n\nedit.js<\/code> and save.js<\/code>. The file edit.js<\/code> defines how the block will look and function in the Gutenberg editor, whereas save.js<\/code> determines how the block will be displayed on the frontend of your site.<\/p>\n\n\n\n@wordpress\/block-editor<\/code> and @wordpress\/components<\/code>.<\/p>\n\n\n\nedit.js<\/code> we can import and use RichText<\/code> component to create a text block that users can edit:<\/p>\n\n\n\nimport { RichText } from '@wordpress\/block-editor'; export default function Edit( { attributes, setAttributes } ) { const { content } = attributes; return ( setAttributes( { content: newContent } ) } \/> ); }<\/code><\/pre>\n\n\n\nRichText<\/code> the component it receives content<\/code> the attribute and the function setAttributes<\/code> from props. When the user changes the text, onChange<\/code> the event updates content<\/code> attribute with the new content.<\/p>\n\n\n\nsave.js<\/code> we will use the same one RichText.Content<\/code> component to print the contents of the block:<\/p>\n\n\n\nimport { RichText } from '@wordpress\/block-editor'; export default function Save( { attributes } ) { const { content } = attributes; return ( ); }<\/code><\/pre>\n\n\n\nindex.js<\/code> file and add the following function registerBlockType<\/code>:<\/p>\n\n\n\nimport { registerBlockType } from '@wordpress\/blocks'; import Edit from '.\/edit'; import save from '.\/save'; registerBlockType( 'my-plugin\/my-block', { apiVersion: 2, title: 'My Block', category: 'common', attributes: { content: { type: 'string', source: 'html', selector: 'p', }, }, edit: Edit, save, } );<\/code><\/pre>\n\n\n\nEdit<\/code> and save<\/code> to edit and display the block.<\/p>\n\n\n\n