{"id":11485,"date":"2026-08-10T10:32:49","date_gmt":"2026-08-10T10:32:49","guid":{"rendered":"https:\/\/nokobox.com\/index.php\/item\/udemy-gutenberg-blocks-for-wordpress-and-react-developers-2022-1\/"},"modified":"2026-08-10T10:32:49","modified_gmt":"2026-08-10T10:32:49","slug":"udemy-gutenberg-blocks-for-wordpress-and-react-developers-2022-1","status":"publish","type":"digital_item","link":"https:\/\/nokobox.com\/index.php\/item\/udemy-gutenberg-blocks-for-wordpress-and-react-developers-2022-1\/","title":{"rendered":"Udemy \u2013 Gutenberg Blocks for WordPress and React Developers 2022-1"},"content":{"rendered":"<div class=\"w-post-elm post_content\">\n<h2 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Description<\/span><\/h2>\n<p class=\"first-token\" dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Gutenberg Blocks for WordPress and React Developers Course. This course is a comprehensive guide for developers who want to create custom blocks for the Gutenberg editor. Replacing the legacy WordPress editor with Gutenberg, this course teaches you how to use React to build a variety of blocks, such as buttons, images, and dynamic text. Prerequisites for this course include knowledge of WordPress plugin\/theme development, familiarity with JavaScript (especially ES6+), and a mastery of basic and advanced React concepts such as components, hooks, and Redux. During the course, you will first learn the basics of block design, then learn how to store data and structure blocks in a database. After creating your first simple block, you will move on to building more complex blocks with features such as nesting, image handling, and dynamic data. Also covered are topics like Redux-like data storage, metadata management, and advanced techniques like patterns, templates, and internationalization. This course provides you with professional development experience using modern tools like wp-scripts, ESLint, and Prettier.<\/span><\/p>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">What you will learn<\/span><\/h3>\n<ul dir=\"ltr\" style=\"text-align: left\">\n<li><span style=\"vertical-align: inherit\">Block Editor Design Guidelines: Learn design guidelines for the Block Editor.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Data storage: Discover how the block editor stores your post in the database and how the editor UI is built.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Using development tools: Learn how to use wp-scripts to compile ES6 and JSX, compile SASS to CSS, package and minify JS and CSS files, and more.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Workflow Improvement: Integrate ESLint, Prettier, Stylelint, and Husky into the project to improve workflow.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Creating Custom Blocks: Create a new custom Gutenberg block from scratch.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Editor customization: Customize the block editor features in your WordPress theme.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Building Complex Blocks: Discover every aspect you need to create a complex Gutenberg block.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Nested blocks: Create a nested block (a block that accepts other blocks inside itself).<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Using React Libraries: Using third-party React libraries to create complex features.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Managing obsolete blocks: Learn how to manage obsolete blocks.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Converting Blocks: Learn how to convert a custom block to another block.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Creating dynamic blocks: Create a dynamic block.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Data Storage: Explore how to use the data stores available in blocks and learn how to create custom data stores to share data between blocks.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Metadata Management: Learn different ways to manage metadata fields in the block editor.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Custom Sidebar: Learn how to create a custom sidebar in the block editor and manage metadata fields within it.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Expanding an existing sidebar: Learn how to expand an existing sidebar in the block editor.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Advanced features: Learn about features like patterns, context, formatting API, and templates.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Modifying Block Behavior: Change the behavior of existing blocks with JavaScript and PHP filters.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Block Localization: Internationalize blocks by generating and uploading translation files.<\/span><\/li>\n<\/ul>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">This course is suitable for people who:<\/span><\/h3>\n<ul dir=\"ltr\" style=\"text-align: left\">\n<li><span style=\"vertical-align: inherit\">WordPress theme\/plugin developers: People who are familiar with ReactJS and want to create Gutenberg blocks from scratch.<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Anyone with WordPress and ReactJS experience: Those who want to know everything about the Gutenberg editor.<\/span><\/li>\n<\/ul>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Gutenberg Blocks for WordPress and React Developers Course Details<\/span><\/h3>\n<ul dir=\"ltr\" style=\"text-align: left\">\n<li><span style=\"vertical-align: inherit\">Publisher:&nbsp; <\/span><a href=\"https:\/\/href.li\/?https:\/\/www.udemy.com\/course\/gutenberg\/?couponCode=KEEPLEARNING\" target=\"_blank\" rel=\"noopener\"><span style=\"vertical-align: inherit\">Udemy<\/span><\/a><\/li>\n<li><span style=\"vertical-align: inherit\">Instructor:&nbsp; <\/span><a class=\"ud-btn ud-btn-medium ud-btn-link ud-heading-sm ud-text-sm ud-instructor-links\" href=\"https:\/\/downloadlynet.ir\/tag\/ali-alaa\/\" data-position=\"1\"><span class=\"ud-btn-label\"><span style=\"vertical-align: inherit\">Ali Alaa<\/span><\/span><\/a><\/li>\n<li><span style=\"vertical-align: inherit\">Training level: Beginner to advanced<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Training duration: 16 hours and 16 minutes<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Number of lessons: 113<\/span><\/li>\n<\/ul>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Course syllabus in 2024\/6<\/span><\/h3>\n<h3 dir=\"ltr\" style=\"text-align: left\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-997812 size-full\" src=\"https:\/\/downloadly.ir\/wp-content\/uploads\/2025\/08\/Gutenberg-Blocks-for-WordPress-and-React-Developers-1.png\" alt=\"Gutenberg Blocks for WordPress and React Developers\" width=\"878\" height=\"709\"><\/h3>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Prerequisites for the Gutenberg Blocks for WordPress and React Developers course<\/span><\/h3>\n<ul dir=\"ltr\" style=\"text-align: left\">\n<li dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">You should be familiar with HTML, CSS (SASS), Javascript and PHP basics.<\/span><\/li>\n<li dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">You should be familiar with WordPress development.<\/span><\/li>\n<li dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">You should be familiar with ReactJS Basic Concepts.<\/span><\/li>\n<li dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Redux Knowledge is Preferred<\/span><\/li>\n<li dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Any code editor you are comfortable with, I will use VS Code in this code.<\/span><\/li>\n<li dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">A local server like MAMP, WAMP, XAMPP, Laragon or any other software you are familiar with. I will use MAMP throughout this course.<\/span><\/li>\n<li dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">NodeJS and NPM or Yarn installed on your machine.<\/span><\/li>\n<\/ul>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Course images<\/span><\/h3>\n<h3 dir=\"ltr\" style=\"text-align: left\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-997813 size-full\" src=\"https:\/\/downloadly.ir\/wp-content\/uploads\/2025\/08\/Gutenberg-Blocks-for-WordPress-and-React-Developers.png\" alt=\"Gutenberg Blocks for WordPress and React Developers\" width=\"848\" height=\"351\"><\/h3>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Sample course video<\/span><\/h3>\n<div style=\"width: 640px;\" class=\"wp-video\"><span class=\"mejs-offscreen\">Video Player<\/span><\/p>\n<div id=\"mep_0\" class=\"mejs-container mejs-container-keyboard-inactive wp-video-shortcode mejs-video\" tabindex=\"0\" role=\"application\" aria-label=\"Video Player\" style=\"width: 640px; height: 360px; min-width: 217px;\">\n<div class=\"mejs-inner\">\n<div class=\"mejs-mediaelement\"><mediaelementwrapper id=\"video-171857-1\"><video class=\"wp-video-shortcode\" id=\"video-171857-1_html5\" width=\"640\" height=\"360\" preload=\"metadata\" src=\"https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Gutenberg_Blocks_for_WordPress_and_React_Developers_Downloadly.ir.mp4?_=1\" style=\"width: 640px; height: 360px;\"><source type=\"video\/mp4\" src=\"https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Gutenberg_Blocks_for_WordPress_and_React_Developers_Downloadly.ir.mp4?_=1\"><a href=\"https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Gutenberg_Blocks_for_WordPress_and_React_Developers_Downloadly.ir.mp4?nocache=1786140919008\">https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Gutenberg_Blocks_for_WordPress_and_React_Developers_Downloadly.ir.mp4<\/a><\/video><\/mediaelementwrapper><\/div>\n<div class=\"mejs-layers\">\n<div class=\"mejs-poster mejs-layer\" style=\"display: none; width: 100%; height: 100%;\"><\/div>\n<div class=\"mejs-overlay mejs-layer\" style=\"display: none; width: 100%; height: 100%;\">\n<div class=\"mejs-overlay-loading\"><span class=\"mejs-overlay-loading-bg-img\"><\/span><\/div>\n<\/div>\n<div class=\"mejs-overlay mejs-layer\" style=\"display: none; width: 100%; height: 100%;\">\n<div class=\"mejs-overlay-error\"><\/div>\n<\/div>\n<div class=\"mejs-overlay mejs-layer mejs-overlay-play\" style=\"width: 100%; height: 100%;\">\n<div class=\"mejs-overlay-button\" role=\"button\" tabindex=\"0\" aria-label=\"Play\" aria-pressed=\"false\"><\/div>\n<\/div>\n<\/div>\n<div class=\"mejs-controls\">\n<div class=\"mejs-button mejs-playpause-button mejs-play\"><button type=\"button\" aria-controls=\"mep_0\" title=\"Play\" aria-label=\"Play\" tabindex=\"0\"><\/button><\/div>\n<div class=\"mejs-time mejs-currenttime-container\" role=\"timer\" aria-live=\"off\"><span class=\"mejs-currenttime\">00:00<\/span><\/div>\n<div class=\"mejs-time-rail\"><span class=\"mejs-time-total mejs-time-slider\" role=\"slider\" tabindex=\"0\" aria-label=\"Time Slider\" aria-valuemin=\"0\" aria-valuemax=\"0\" aria-valuenow=\"0\" aria-valuetext=\"00:00\"><span class=\"mejs-time-buffering\" style=\"display: none;\"><\/span><span class=\"mejs-time-loaded\"><\/span><span class=\"mejs-time-current\"><\/span><span class=\"mejs-time-hovered no-hover\"><\/span><span class=\"mejs-time-handle\"><span class=\"mejs-time-handle-content\"><\/span><\/span><span class=\"mejs-time-float\"><span class=\"mejs-time-float-current\">00:00<\/span><span class=\"mejs-time-float-corner\"><\/span><\/span><\/span><\/div>\n<div class=\"mejs-time mejs-duration-container\"><span class=\"mejs-duration\">00:00<\/span><\/div>\n<div class=\"mejs-button mejs-volume-button mejs-mute\"><button type=\"button\" aria-controls=\"mep_0\" title=\"Mute\" aria-label=\"Mute\" tabindex=\"0\"><\/button><a href=\"javascript:void(0);\" class=\"mejs-volume-slider\" aria-label=\"Volume Slider\" aria-valuemin=\"0\" aria-valuemax=\"100\" role=\"slider\" aria-orientation=\"vertical\"><span class=\"mejs-offscreen\">Use Up\/Down Arrow keys to increase or decrease volume.<\/span><\/p>\n<div class=\"mejs-volume-total\">\n<div class=\"mejs-volume-current\" style=\"bottom: 0px; height: 100%;\"><\/div>\n<div class=\"mejs-volume-handle\" style=\"bottom: 100%; margin-bottom: -3px;\"><\/div>\n<\/div>\n<p><\/a><\/div>\n<div class=\"mejs-button mejs-fullscreen-button\"><button type=\"button\" aria-controls=\"mep_0\" title=\"Fullscreen\" aria-label=\"Fullscreen\" tabindex=\"0\"><\/button><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div dir=\"ltr\" style=\"text-align: left\">\n<h3><span style=\"vertical-align: inherit\">Installation Guide<\/span><\/h3>\n<p><span style=\"vertical-align: inherit\">After Extract, view with your favorite player.<\/span><\/p>\n<p><span style=\"vertical-align: inherit\">Subtitles: English<\/span><\/p>\n<p><span style=\"vertical-align: inherit\">Quality: 720p<\/span><\/p>\n<\/div>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Download link<\/span><\/h3>\n<p dir=\"ltr\" style=\"text-align: left\"><a href=\"https:\/\/dl1.downloadly.ir\/Files\/Elearning\/Udemy_Gutenberg_Blocks_for_WordPress_and_React_Developers_2022-1.part1_Downloadly.ir.rar?nocache=1786140918\"><span style=\"vertical-align: inherit\">Download Part 1 \u2013 1 GB<\/span><\/a><\/p>\n<p dir=\"ltr\" style=\"text-align: left\"><a href=\"https:\/\/dl1.downloadly.ir\/Files\/Elearning\/Udemy_Gutenberg_Blocks_for_WordPress_and_React_Developers_2022-1.part2_Downloadly.ir.rar?nocache=1786140918\"><span style=\"vertical-align: inherit\">Download Part 2 \u2013 1 GB<\/span><\/a><\/p>\n<p dir=\"ltr\" style=\"text-align: left\"><a href=\"https:\/\/dl1.downloadly.ir\/Files\/Elearning\/Udemy_Gutenberg_Blocks_for_WordPress_and_React_Developers_2022-1.part3_Downloadly.ir.rar?nocache=1786140918\"><span style=\"vertical-align: inherit\">Download Part 3 \u2013 1 GB<\/span><\/a><\/p>\n<p dir=\"ltr\" style=\"text-align: left\"><a href=\"https:\/\/dl1.downloadly.ir\/Files\/Elearning\/Udemy_Gutenberg_Blocks_for_WordPress_and_React_Developers_2022-1.part4_Downloadly.ir.rar?nocache=1786140918\"><span style=\"vertical-align: inherit\">Download Part 4 \u2013 1 GB<\/span><\/a><\/p>\n<p dir=\"ltr\" style=\"text-align: left\"><a href=\"https:\/\/dl1.downloadly.ir\/Files\/Elearning\/Udemy_Gutenberg_Blocks_for_WordPress_and_React_Developers_2022-1.part5_Downloadly.ir.rar?nocache=1786140918\"><span style=\"vertical-align: inherit\">Download Part 5 \u2013 1 GB<\/span><\/a><\/p>\n<p dir=\"ltr\" style=\"text-align: left\"><a href=\"https:\/\/dl1.downloadly.ir\/Files\/Elearning\/Udemy_Gutenberg_Blocks_for_WordPress_and_React_Developers_2022-1.part6_Downloadly.ir.rar?nocache=1786140918\"><span style=\"vertical-align: inherit\">Download Part 6 \u2013 1 GB<\/span><\/a><\/p>\n<p dir=\"ltr\" style=\"text-align: left\"><a href=\"https:\/\/dl1.downloadly.ir\/Files\/Elearning\/Udemy_Gutenberg_Blocks_for_WordPress_and_React_Developers_2022-1.part7_Downloadly.ir.rar?nocache=1786140918\"><span style=\"vertical-align: inherit\">Download Part 7 \u2013 158 MB<\/span><\/a><\/p>\n<p dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">File(s) password: www.downloadly.ir<\/span><\/p>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">File size<\/span><\/h3>\n<p dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">6.1 GB<\/span><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Description Gutenberg Blocks for WordPress and React Developers Course. This course is a comprehensive guide for developers who want to create custom blocks for<\/p>\n","protected":false},"author":1,"template":"","dgi_category":[10458],"dgi_tag":[34408,95751,95752,95753,95754,95755],"class_list":["post-11485","digital_item","type-digital_item","status-publish","has-post-thumbnail","hentry","dgi_category-video-tutorials","dgi_tag-ali-alaa","dgi_tag-course-gutenberg-blocks-for-wordpress-and-react-developers","dgi_tag-download-course-gutenberg-blocks-for-wordpress-and-react-developers","dgi_tag-download-gutenberg-blocks-for-wordpress-and-react-developers","dgi_tag-free-download-gutenberg-blocks-for-wordpress-and-react-developers","dgi_tag-free-gutenberg-blocks-for-wordpress-and-react-developers"],"_links":{"self":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/digital_item\/11485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/digital_item"}],"about":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/types\/digital_item"}],"author":[{"embeddable":true,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/digital_item\/11485\/revisions"}],"wp:attachment":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/media?parent=11485"}],"wp:term":[{"taxonomy":"dgi_category","embeddable":true,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/dgi_category?post=11485"},{"taxonomy":"dgi_tag","embeddable":true,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/dgi_tag?post=11485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}