Trigger Javascript on Gutenberg (Block Editor) Save

Not sure if there is a better way, but I am listening to subscribe rather than adding an event listener to the button:

wp.data.subscribe(function () {
  var isSavingPost = wp.data.select('core/editor').isSavingPost();
  var isAutosavingPost = wp.data.select('core/editor').isAutosavingPost();

  if (isSavingPost && !isAutosavingPost) {
    // Here goes your AJAX code ......

  }
})

Official docs of the Post Editor data: https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/

Related Posts:

  1. Gutenberg – remove / add blocks with custom script
  2. What are all the query parameters for getEntityRecords?
  3. How to use wp.hooks.addAction() in React JS/Gutenberg?
  4. How to only enqueue block javascript on the frontend when its needed [duplicate]
  5. Extend core block in Gutenberg
  6. Show control conditionally in Gutenberg
  7. Gutenberg custom block plugin with custom image sizes
  8. Get loading state of wp data selector
  9. How to get the ToggleControl Gutenberg component working for a PHP Block
  10. Hooking a callback into the code within a Gutenberg block
  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. Does javascript have an equivalent to PHP’s preg_replace_callback?
  15. Correctly handling WordPress core data retrieval in Gutenberg
  16. Is there a client side API for handling transients or options?
  17. What do the args for Gutenberg subpackage “hooks” function “doAction” mean?
  18. Why is this gutenberg custom format button only available from the toolbar as a dropdown?
  19. Adding a text element in between title and blocks container
  20. Gutenberg RichText
  21. Provide specific example for block variation
  22. Use useSelect/useDispatch instead of withSelect/withDispatch
  23. How to handle Gutenberg wp.data async errors?
  24. Set current tab on a Gutenberg TabPanel component from outside that component
  25. Block editor: How to check if block editor has initialized and populated the data store?
  26. How to use wp.hooks.addAction() in React JS/Gutenberg?
  27. Load script after block is inserted
  28. Gutenberg block “This block appears to have been modified externally” on save
  29. How do I access site and block editor state data and use `useSelect()` or `withSelect()` to bind it to my components?
  30. Block Editor: How to get title and post content within the WordPress admin UI in Javascript?
  31. Custom block SelectControl works but equivalent ComboboxControl gives errors – where’s my mistake?
  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. var is undefined in a Gutenberg block
  35. Gutenberg add extra attributes to custom format
  36. Using wp.data.select get actual tags (not id’s) used in post
  37. event/callback on block update?
  38. How to remove p / br elements from gutenbergs editor
  39. How to disable inline css styles generated by Gutenberg editor?
  40. Programatically update posts in database from one block to another using transform
  41. Gutenberg getMedia() in post query doesn’t return all featured images
  42. How to transform a legacy widget into a block
  43. Add A Tag To A Post Through JavaScript In Gutenberg UI?
  44. Gutenberg select categories
  45. Listening change event of taxonomy term checkboxes in Gutenberg editor
  46. How to return div with custom attributes(Coding a Gutenberg Block)
  47. Gutenberg get core data – search
  48. What is the correct way to import the blocks-editor?
  49. Open MediaUpload from external component in Gutenberg
  50. Gutenberg extend blocks add new class name
  51. How to add classes and events to image in javascript using Gutenberg?
  52. Adding inline JavaScript encoding issue
  53. Search for a keyword across post types in a Gutenberg component
  54. Using apiFetch for retrieving post data in Gutenberg
  55. Add custom classes for blocks in editor based on custom attributes
  56. Looping over wordpress meta to create “ ‘s?
  57. How to display post content in the block editor
  58. How to load an additional script for a block in the block editor?
  59. Gutenberg consume wp-json data and reflect in frontend the content
  60. Trigger wp-embed via JavaScript to refresh iframe preview?
  61. Gutenberg getBlockIndex in save() function
  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. Gutenberg richtext block vaildation failed
  65. Conditional save return on Gutenberg Block
  66. Can I alter the block editor’s paste text behavior?
  67. Custom Gutenberg-Block esnext pass variables
  68. Building a Featured Gallery component for Gutenberg
  69. How to read inline-CSS from Gutenberg block?
  70. Gutenberg RangeControl
  71. Custom Gutenberg block: access dom element via JavaScript
  72. Custom Block – save.js function not saving attributes
  73. Gutenberg – useEffect manipulate DOM after block re-renders DOM
  74. How to set javascript options for select2 in PHP array of plugin
  75. how to prevent added meta box from being injected with style=”position: fixed; top: 56px;” at scroll down
  76. Add a Page Screen is Visually Blank
  77. Including dependencies using @wordpress/dependency-extraction-webpack-plugin
  78. Gutenberg sidebar show input field on toggle
  79. Get the ID of a page in Parent combobox in editor
  80. Uncaught TypeError: r is not a function
  81. Custom block update rendering when reused
  82. WordPress Gutenberg Ajax request
  83. WP Gutenberg – custom block with two content fields
  84. How do I make a savable preview like Youtube Gutenberg block?
  85. Spans in gutenberg
  86. iFrame onLoad in custom Gutenberg block
  87. Block pattern conflict with custom block
  88. How to Create a Repeatable Meta Box
  89. WordPress Gutenberg: Attribute overwritten by block duplicate
  90. Table block variation with header section activated
  91. Filtering Gutenberg Components, not Blocks
  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

Leave a Comment