Gutenberg consume wp-json data and reflect in frontend the content

What you are building is called ‘Dynamic Block‘ and Your block will not work because you haven’t added the front end code ( which is the PHP part for dynamic block ). See this official block code there’s PHP part as well to save the block and work on the front end.

Here’s the official explanation –

Because it is a dynamic block it also needs a server component. The
rendering can be added using the render_callback property when using
the register_block_type function.

Although you can use ServerSideRender component but it’s not recommended.

Related Posts:

  1. How to get value of selected page template in Gutenberg editor?
  2. Trigger Javascript on Gutenberg (Block Editor) Save
  3. Gutenberg – remove / add blocks with custom script
  4. How to use wp.hooks.addAction() in React JS/Gutenberg?
  5. Show control conditionally in Gutenberg
  6. Gutenberg custom block plugin with custom image sizes
  7. How to get the ToggleControl Gutenberg component working for a PHP Block
  8. Is there a core Sortable component in Gutenberg?
  9. Hooking a callback into the code within a Gutenberg block
  10. Editing Source Code in WordPress
  11. conditional layout based on if Innerblocks is not empty
  12. Gutenberg extend blocks add new class name
  13. initial open/toggle PluginDocumentSettingPanel panel in document setting block editor gutenberg
  14. Is there an equivalent of the PHP function sanitize_key in Gutenberg?
  15. What do the args for Gutenberg subpackage “hooks” function “doAction” mean?
  16. How do I fire a snackbar notice in admin?
  17. How/Where is editor.min.js Added to the wp-admin Post Page?
  18. Gutenberg Modify core taxonomy panel element via wp.hooks.addFilter
  19. What is “open()” in MediaUpload?
  20. WordPress Rest API only returns content when posttype has editor capability
  21. Why is this gutenberg custom format button only available from the toolbar as a dropdown?
  22. Insert shortcode in post editor from javascript (Visual / HTML)
  23. Setting HTML properties in a Gutenberg plugin using WordPress settings
  24. Provide specific example for block variation
  25. Use useSelect/useDispatch instead of withSelect/withDispatch
  26. How to handle Gutenberg wp.data async errors?
  27. Set current tab on a Gutenberg TabPanel component from outside that component
  28. Block editor: How to check if block editor has initialized and populated the data store?
  29. Load script after block is inserted
  30. Gutenberg block “This block appears to have been modified externally” on save
  31. How do I access site and block editor state data and use `useSelect()` or `withSelect()` to bind it to my components?
  32. Gutenberg passing block attributes to component in ES6/ESNext
  33. Can the index.asset.php file be used with the enqueue_block_editor_assets action?
  34. How can I add Block Style support to the core HTML block in Gutenberg?
  35. var is undefined in a Gutenberg block
  36. Gutenberg add extra attributes to custom format
  37. Using wp.data.select get actual tags (not id’s) used in post
  38. How to remove p / br elements from gutenbergs editor
  39. Programatically update posts in database from one block to another using transform
  40. Gutenberg getMedia() in post query doesn’t return all featured images
  41. How to transform a legacy widget into a block
  42. Gutenberg: Block validation Failed Richtext undefined
  43. Gutenberg select categories
  44. Add custom HTML markup to Gutenberg RichText
  45. Listening change event of taxonomy term checkboxes in Gutenberg editor
  46. Gutenberg get core data – search
  47. What is the correct way to import the blocks-editor?
  48. Gutenberg extend blocks add new class name
  49. How to add classes and events to image in javascript using Gutenberg?
  50. Checks when fetching data from multiple REST API endpoints in Gutenberg
  51. Search for a keyword across post types in a Gutenberg component
  52. Using apiFetch for retrieving post data in Gutenberg
  53. Add custom classes for blocks in editor based on custom attributes
  54. How to load an additional script for a block in the block editor?
  55. useSelect second parameter
  56. How can I allow HTML in Gutenberg UI elements help text?
  57. what is the purpose of the namespace argument when customizing blocks?
  58. Trigger wp-embed via JavaScript to refresh iframe preview?
  59. How can I import one custom block into another?
  60. Gutenberg getBlockIndex in save() function
  61. Gutenberg Blocks: how to determine an index of the current inner block?
  62. Widgets and Post/Page edit/new blank, console errors only, no server errors
  63. Trying to turn the Edit function into a class to be able to use React lifecycle methods
  64. Get terms of a taxonomy using useSelect
  65. Gutenberg richtext block vaildation failed
  66. UnitControl – Block has encountered an error
  67. Conditional save return on Gutenberg Block
  68. Gutenberg select excerpt, use generated excerpt or use more block excerpt
  69. Can I alter the block editor’s paste text behavior?
  70. Custom Gutenberg-Block esnext pass variables
  71. Building a Featured Gallery component for Gutenberg
  72. Gutenberg dependencies in package.json
  73. find out reason of “Updating failed” in Post-editor
  74. How to read inline-CSS from Gutenberg block?
  75. Custom Block – save.js function not saving attributes
  76. Make a script work within a page
  77. Gutenberg – useEffect manipulate DOM after block re-renders DOM
  78. Problem extending a core block
  79. Uncaught TypeError: switchEditors.switchto is not a function
  80. Cannot read properties of undefined (reading ‘show_ui’) Error on WordPress Post Editor
  81. Issue migrating a checkbox-type meta field to the block editor
  82. Update block once an API request returns with a value
  83. Gutenberg – dynamically created element: how to set onChange?
  84. Custom block update rendering when reused
  85. WordPress Gutenberg Ajax request
  86. WP Gutenberg – custom block with two content fields
  87. Gutenberg Edit Block Inspector Controls and save
  88. Spans in gutenberg
  89. How to integrate a different (JavaScript) editor in WordPress?
  90. Block pattern conflict with custom block
  91. Table block variation with header section activated
  92. Where to include JS library in gutenberg blocks
  93. How to delete child block for associated parent block
  94. Passing object to FormTokenField suggestions
  95. Is it possible to add javascript to template parts
  96. How to add a new attribute to core wp block editor without npm?
  97. How do i get an Inline style in Gutenberg Block show up in front end?
  98. WordPress adds and tags into HTML blocks after saving
  99. Gutenberg core/file add style support in js/ json
  100. Working with a non-React external library in a custom block