How to learn Gutenberg block development [closed]

The Block Editor Handbook offers the official documentation, along with some examples, including a Blocks Tutorial. It’s improving over time to include more and more information and examples.

The JS for WP site offers some tutorials. The caveat is the Gutenberg Block Development course and the Advanced Gutenberg course were both created in the early days, so the specific code tends to be outdated, but the principles are still similar enough I’ve found them useful.

You may also wish to search for more specific tutorials once you’ve run through the basic examples. GitHub is also full of open-sourced blocks. I’ve personally found it helpful, when searching for tutorials and examples, to make sure I’m using ones that have been written most recently. Anything more than about 6 months old tends to use outdated code – the editor and the way you code for it is constantly evolving.

Related Posts:

  1. Remove block styles in the Block Editor
  2. Are there ways to make the Gutenberg editor wider? And the HTML-block higher?
  3. Blocks: set a default value for a TextControl
  4. Is there a list / reference for all current native WordPress blocks?
  5. Setting default font family with theme.json
  6. (Gutenberg Block Editor) Using editor.BlockEdit filter, need to alter html/ CSS class of BlockEdit Component
  7. Extending Gutenberg group block: How to properly combine multiple attributes?
  8. Required (mandatory) Gutenberg block
  9. Add classname to Gutenberg block wrapper in the editor?
  10. How to develop custom blocks without triggering validation errors
  11. get selected categories or tags (using javascript) in GutenBerg?
  12. Help with using getBlockIndex
  13. Gutenberg blocks – processing server data within a block
  14. Best practices for CPT without using an editor [closed]
  15. Custom Gutenberg block is not showing up in inserter dialog
  16. Gutenberg – Custom blocks onClick not working?
  17. Get blocks from other pages, from within current page
  18. Your site doesn’t include support for the block… after registering a block
  19. .editor-styles-wrapper overriding my block styles in Gutenberg
  20. Remove a component fill from a Block Editor panel
  21. How to wrap the Gutenberg editor in a custom React component?
  22. Proper way to reload or update getEntityRecords state
  23. Cannot embed YouTube video
  24. Add a button to the toolbar of an existing Gutenberg block
  25. JSON File in Gutenberg
  26. Show date post published in Gutenberg component
  27. Adding an html wrapper to a custom Block Pattern
  28. How to add a class to the element in a custom Gutenberg block
  29. Gutenberg: How to check if a block is used in a paginated post?
  30. Editor API Endpoint or Data Store That Provides a List of Meta Fields for Post Types
  31. Specify exact parent child relationship between two blocks
  32. Using custom Entities to retrieve external data in the Block Editor
  33. How can I remove a button from the paragraph block toolbar?
  34. Align Group blocks left or right
  35. How to enable Block Editor on the Posts page
  36. React to a change of the block alignment
  37. Object type for block Attribute (Gutenberg)
  38. Controlling the RichText component outside of blocks
  39. Custom Gutenberg Block: How to return plain HTML with save(), without escaping?
  40. Removing advanced section from brand new gutenberg block
  41. How to allow to add gradients to core/heading block?
  42. Gutenberg: How to update associated Terms of Custom Taxonomy to Current Post
  43. Gutenberg: How to float core table block in front-end of site?
  44. Guttenberg Implementation on Front Page
  45. Should there be concern about breaking Gutenberg updates to extended core blocks?
  46. How do I access onMerge, onReplace, onRemove functions for a Rich Text component in Gutenberg block code?
  47. How can Reusable Blocks be fully deleted?
  48. Make a Gutenberg Block that do WP_User_Query
  49. Extend Gutenberg block core/quote block
  50. How to get all attributes of a block in PHP?
  51. reload the gutenberg editer on taxonomy change
  52. Gutenberg Block Get Author Details
  53. Gutenberg Block Toolbar – remove button
  54. Cannot enable Gutenberg editor [closed]
  55. Remove ‘type / to choose a block’ placeholder [duplicate]
  56. Start a line with – without converting to list
  57. Quickest way of developing custom Gutenberg Blocks
  58. gutenberg attributes
  59. How to register two blocks in the same plugin
  60. Gutenberg: always show text color selector in editing bar
  61. How to lock innerBlocks within a block variation?
  62. How to get startIndex and endIndex from the selected block in gutenberg?
  63. How to fix: “The editor has encountered an unexpected error”?
  64. Set a minimum and maximum limit of images to select in the MediaUpload component for Block
  65. Compile a blocks src directory and main index.js entry file and output to different build dirs?
  66. Proxy External API request in PHP from Edit.js in Block Plugin
  67. How do I stop a dynamic Gutenberg component from re-rendering on every keystroke?
  68. Leave focus on custom Gutenberg block when pressing enter
  69. How to Analyze Blocks and find Intersection and patterns between pages
  70. WordPress does not hide content after “Read more” block added using gutenberg editor
  71. Gutenberg InnerBlocks allowed types and reusable blocks
  72. Issue with translation – Gutenberg
  73. RSS feed WP widget vs Gutenberg Block?
  74. Gutenberg editor failing to load correctly after new theme install
  75. Gutenberg Custom Style problem with background image
  76. Theme options missing from edit page
  77. How to activate a new prop that a block introduces in a new release?
  78. Disable Font Size for Authors using: add_theme_support(‘disable-custom-font-sizes’);
  79. Multiple checkboxes Gutenberg control
  80. Block validation failed
  81. Loading column block style seperately
  82. wp-scripts start build hangs
  83. How to display dynamic block editor on front-end?
  84. Enable varying text for Phone, Tablet and Desktop
  85. Debouncing Input value with block attributes
  86. Using the block theme in production
  87. Pass component name in onChange [closed]
  88. Add another option to default link control settings panel?
  89. With full-site-editing menus, how do I create a non-linking top-level menu item with linking sub-pages
  90. How can I render a built-in Gutenberg block with InnerBlocks outside of the block editor?
  91. How do I add filters in Twenty-Twenty-Three without a functions.php?
  92. Different style options for the same block depending where it is used
  93. How to extract ‘intro’ block from page content, but later strip from page main content
  94. Add a new option to Social Link block
  95. What is the proper way of using React Hooks in Gutenberg on frontend?
  96. How to add Gutenberg editor on frontend page?
  97. WordPress gutenberg block serverside rendering html elements not showing up
  98. Gutenberg: change block Components Popover properties
  99. Unable to register a block using block.json in Block Editor
  100. $attributes not defined in block.json PHP template for ACF blocks