Make a list with header and subtext in Gutenberg blocks

In general you have to do those things:

  • Define you attributes
  • Write a UI for the editor in the edit function, which saves values entered by the editor to your attributes
  • Render the html with the save function by using the values from your attributes

The tutorial from the official docs isn’t half bad:
https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type/

Related Posts:

  1. lodash dependency in a Gutenberg plugin
  2. creating elements/innerblocks via rangecontrol
  3. Looking for callback function after Gutenberg is rendered?
  4. Gutenberg: useDispatch is not a function – @wordpress/data included
  5. Gutenberg – What is the best way to save/update post meta?
  6. How to prevent UNDO on guternberg block editor
  7. Do I have to worry about useState causing a re-render?
  8. Creating a custom Gutenberg block with columns
  9. Gutenberg: import dependency or assign from global variable?
  10. How to control an elements classes from multiple Gutenberg sidebar controls?
  11. Developing the save function in Gutenberg blocks
  12. Gutenberg – is it ok to load dependencies multiple times?
  13. Preventing double loading JS scripts (like React) when developing for Gutenberg
  14. Getting incorrect filepath inside custom block front-end output using @wordpress/create-block tutorial
  15. Trigger function on Remove block or add new block in Gutenberg JavaScript
  16. Rerender core Templates with with ToggleControl but it doesnt recognize block type
  17. HTMLCollection not counting right in editor? / for loop not working on elements in DOM
  18. What happens/fires when you select a block in the editor?
  19. Is “document loaded” different on admin side than public side?
  20. How to use setAttributes outside of the edit function return
  21. why is apiFetch throwing Unhandled Promise Rejection: TypeError: Object is not a function
  22. Reading plugin settings in esnext wordpress block
  23. How can i add insertion point between inner blocks in my custom block like core blocks
  24. Reinitiate Gutenburg’s blocks using javascript
  25. Is it possible to reuse wp.media.editor Modal for dialogs other than media
  26. check if Gutenberg is currently in use
  27. How to use PanelColorSettings in custom Gutenberg block?
  28. How to provide translations for a WordPress TinyMCE plugin?
  29. Hook the Keydown Event in the TinyMCE Post Editor
  30. How to save block attributes when the output doesn’t change
  31. How to remove unwanted panels inside InspectorControls from core blocks in Gutenberg
  32. Gutenberg ServerSideRender is deprecated, how to work with new wp.serverSideRender component?
  33. Create Element From Dynamic HTML String [closed]
  34. How to Parse an Array of Elements in Gutenberg Block
  35. Can’t get JS code to work with shortcode
  36. Using the component outside the editor. select(‘core’) is null
  37. Gutenberg is there a way to know if the current block is reusable?
  38. How to allow core Gutenberg blocks selection only when you are inside a custom inner block
  39. How do I add a javascript file to all admin pages via a plugin?
  40. Saving data from block editor to the database
  41. How do I store information in a dynamic block in WordPress?
  42. Print WordPress username id inside JavaScript
  43. Mixing Regular Javascript With jQuery in a Plugin
  44. How to create multiple Gutenberg blocks in one plugin
  45. How to get color name in PanelColorSettings in custom Gutenberg block?
  46. How to run a external JavaScript file on wp-admin if admin, and other if normal user?
  47. Where to call wp_enqueue_script in a plugin with custom template?
  48. Gutenberg Block showing invalid content on edit
  49. WordPress Plugin with a shortcode that dynamically generates javascript. Can I use add_action without wrapping the javascript in a function?
  50. Is there an additional block.json property to set to get an InnerBlocks child to respect the “supports” property?
  51. How to setAttributes in Gutenberg block?
  52. How to override gutenberg paragraph block edit property
  53. What’s the right way to instantiate new blocks and/or the plugin itself in toto when using wppb architecture?
  54. “import declarations may only appear at top level of a module” when importing WooCommerce API node module
  55. How can I get the selected string when using a toolbar button in Gutenberg?
  56. jQuery selectors for editor elements safe to use?
  57. wp.template() returns tags in Ajax response
  58. add javascript files only when plugin is called?
  59. How can I avoid conflicts between plugin and theme?
  60. How should I go about registering JavaScript that isn’t a file? [duplicate]
  61. How to add a gradient component to a custom block
  62. How to only load css for used blocks on frontend
  63. Additional classes `undefined` after saving post in Gutenberg
  64. How do you submit a Gutenberg plugin?
  65. Translate javascript with WordPress built-in localization API for static strings
  66. Invalid hook call on save, not edit when using swiper slider
  67. Insert Into Post Not Working For Audio File Using jQuery
  68. Modify custom block plugin without losing content
  69. Set Button in PluginDocumentSettingPanel Content (WordPress Gutenberg)
  70. How to override supports of innerBlocks?
  71. wp.media libary pdf type
  72. When setting styles to an extended block that was saved as a pattern, it doesn’t remove the style that was there
  73. extraprops override existing props
  74. Multiple TinyMCE on button click is initialized and appended but why only last one is writeable?
  75. WPGut – Updating failed and shortcode?
  76. Fixed: Console.log twice in the edit function
  77. Gutenberg – Call google map render function in save after DOM has been rendered
  78. converting a node.js project into a wp plugin
  79. How to re-render inspector controls?
  80. Load script on frontend from widget plugin
  81. WordPress with React: Saving and Using Data Collected with fetch
  82. How to integrate plugins into block editor
  83. Add custom html classes to gutenberg wrapper
  84. How to create save function for custom Gutenberg style block?
  85. Using JavaScript in WordPress page to call for server data using AJAX
  86. Uncaught ReferenceError: kpoejy is not defined
  87. On one of my sites a file is shown as 404 but the file IS there
  88. Gutenberg and custom blocks messed up pagespeed score. What did I wrong?
  89. Gutenberg text field validation
  90. Undo operation not working in Rich text [Gutenberg]
  91. How to get the value entered in the input field in wordpres
  92. Help interpreting @wordpress/create-block-tutorial-template usage error
  93. How can create a custom plugin to call my webapi after any registration or membership plugin functionality
  94. How can I add a custom button to the post editor?
  95. Block Development: hamburger module throwing error in save function
  96. Insert meta-description into Yoast-SEO input-field via JavaScript
  97. Adding a navigation with wp_nav_menu() to a custom block in the site editor
  98. Why isn’t custom sidebar panel not showing up in the Gutenberg Editor?
  99. REST API error in block editor for custom templates
  100. Set srcset on a block image