Creating my own “recent blog posts” static Gutenberg block, can’t use react hooks in the frontend

That’s not how blocks work, the save component generates static HTML, so you can’t use interactive hooks or state.

The important part is that the save component only runs inside the editor on your browser. It does not run in the database, or on the client. You can’t save a react component to the database and render it with interactivity on the frontend.

Instead if you want to fetch the 3 latest posts you have 2 options:

  • enqueue a JS file on the frontend that fetches the posts from the REST API
  • save null and use PHP filters to render the 3 latest posts

The latter is how core does it for full site editing blocks

Related Posts:

  1. Unable to trigger a frontend @wordpress/hooks action
  2. Hide gutenberg option blocks
  3. Disable block from editor based on post type
  4. WordPress v5.0.3 Gutenberg & JS error “Uncaught SyntaxError: missing ) after argument list”
  5. Gutenberg gallery hook errors
  6. What is the best filter where to use register_block_type?
  7. @wordpress/hooks use to add actions/filters within multiple plugin
  8. How to extend custom (non-core) blocks?
  9. Is it possible to switch Gutenberg’s editor styles when document settings change?
  10. How do I run an action after a featured image has been selected in the Gutenberg editor?
  11. WordPress How to reorder Page/Post Settings
  12. How To Apply Different Styles To All Blocks Based on Post Meta Value?
  13. getSaveContent.extraProps hook for core/post-title doesn’t add new attributes on to the frontend
  14. How to set Post ID from context to an attribute in child block of Gutenberg Query Loop
  15. The enqueue_block_assets is changing the styles of the editor interface
  16. Replacing specific Gutenberg blocks
  17. useSelect() plus resolver result is serving cached data incorrectly
  18. How to know what functions are hooked to an action/filter?
  19. How do I implement the WordPress Iris picker into my plugin on the front-end?
  20. What is “all” in isset($wp_filter[‘all’])
  21. Please explain how these hooks work
  22. Hook ‘wp_enqueue_scripts’ priority has no effect
  23. Hook *after* user password change?
  24. Does anyone have a visual breakdown of core hooks and when they are fired?
  25. The ‘user_has_cap’ hook seems to take two page loads to trigger
  26. How and where can we request new WordPress hooks to be added?
  27. WordPress Admin Tooltip hooks
  28. Wp_update_post: Infinite loop even with remove_action solution, OOP
  29. RSS Feed Custom Title?
  30. Detect type of post status transition
  31. hook for lostpassword form
  32. What do the args for Gutenberg subpackage “hooks” function “doAction” mean?
  33. How and why can a hook call itself without causing recursion?
  34. Is This A Correct Example Usage Of current_filter()?
  35. Seeking Hook Whenever a Custom Taxonomy Term Has Been Added
  36. How can i trigger an action manually?
  37. Can I trigger the publish_post hook by using wp_insert_post?
  38. WooCommerce New customer email Hook? [closed]
  39. admin_notices not working in post editor
  40. How to detect when a user changes their name?
  41. How to check what kind of saving it is?
  42. Override wp_delete_post and move to trash instead for custom post type
  43. How do I grab specific posts (by post id) and display the title, featured image, and excerpt?
  44. Empty Super Cache programmatically (with ACF action) [closed]
  45. Hook all http requests
  46. Setting Cookie with init hook causes ‘header already sent’
  47. Is there an “Add Page” hook?
  48. How To Make Sure That My Action Hook Executes Last
  49. Does update_comment_meta hook exists?
  50. how to determine how many and what kind of arguments are passed to hooks
  51. Can not set custom title on some WordPress setups
  52. BuddyPress User Profile Menu
  53. How to hook in after user’s registration email has been sent?
  54. Checking post format during xmlrpc_publish_post
  55. Hook for when a page template is changed
  56. Append a code when at the current page in wp_list_pages()
  57. Footer.php being inserted before article closing tag?
  58. Get all posts with a duplicate name
  59. Save acf field data via acf/save_post before post is saved
  60. Above-the-fold inline styles from SASS generated stylesheet
  61. Redirect in form handler causing form to be submitted twice
  62. Checking login status before wp_get_current_user is initialised
  63. Add media library tab
  64. Conditional hook [closed]
  65. Add_menu_page() error message -> “You do not have sufficient permissions to access this page”
  66. Where is the right place to register/enqueue scripts & styles
  67. Displaying list of cities according to the selected state. Using the WordPress hook
  68. Removing parent theme action on pluggable function not working
  69. Removing a Filter
  70. Which action hook should I use to intercept a form upon submission?
  71. Where Are Hooks?
  72. WordPress wp_loaded action hook
  73. useSelect second parameter
  74. Check if `do_action()` in WordPress returns any result
  75. add_action hook for publish_post not working
  76. Modify Notification Message When Profile Updated
  77. Hook for inserting?
  78. How to stop WordPress from updating the post meta
  79. Can an RSS item be altered with a hook?
  80. Block Update Profile Errors
  81. How to remove a meta description or other contents
  82. Delay action unltil the untill previous (hoocked) action is completed
  83. Trigger function on Remove block or add new block in Gutenberg JavaScript
  84. What is the hook to remove a menu items group from Appearance > Menus column Add menu items
  85. Add stuff above header edit form
  86. Add HTML code before the title of the Tag page
  87. Hooks with same priority number. Can one stack items returned in divs, position: absolute each with their own z-index?
  88. trying to locate the correct file to edit my internal linking anchor tags
  89. Send email to post author 1 day before his project ends
  90. can’t access dashboard and showing forbidden page
  91. prepopulate form from a hook within wordpress function.php file
  92. Change Title Type
  93. admin_post hook not working
  94. What is meaning of BEFORE and AFTER in this hook name?
  95. WP: Override/update the_content from database with the publicly echo the_content
  96. How to implement Mapbox GL JS with a custom Gutenberg block in FSE?
  97. Is there a way to assign a default Category to a Post when the user creates a new Post?
  98. Event when Modal is opened/visible
  99. Why is the Gutenberg editor not recognizing my updates?
  100. is_user_logged_in() doesn’t work after custom login and redirect