Masonry gallery block is working in the block editor but not the template editor

Your code isn’t at fault. The Masonry library doesn’t support this cross frame scenario. I can think of three ways you might get past this:

  1. Inject the masonry script into the iframe so it could be used from within the iframe
  2. Patch the masonry script and ship that version with your plugin
  3. Find an alternative library that doesn’t have the issue

The third option might be fruitless. I’m not sure there are many options out there and they might have the same sort of issues.

The second option I’ve tried. I patched a couple places in the library and it seems to work okay now. I’m not sure it’s 100% covered i.e. you might encounter an issue with some configuration I haven’t tried. Here’s a gist with the patched version if you want to try it. In WordPress, you’ll have to deregister the masonry script they bundled and register that one of course.

The first option might be a good one but you’d have to be sure to only try injecting the script into the iframe when there actually is one and you’d have to make sure your block waits to be sure the script has been made available in the iframe. There may be other potential gotchas as well.

On a side note, I’m considering submitting PRs to the libraries (the parts I patched are in separate dependencies (fizzy-ui-utils and outlayer) but not sure if/when they’d make it into a release.

Related Posts:

  1. How to add more elements to an already existing section in Gutenberg
  2. Working with a non-React external library in a custom block
  3. Trigger Javascript on Gutenberg (Block Editor) Save
  4. Gutenberg – remove / add blocks with custom script
  5. How to use wp.hooks.addAction() in React JS/Gutenberg?
  6. Show control conditionally in Gutenberg
  7. Gutenberg custom block plugin with custom image sizes
  8. How to get the ToggleControl Gutenberg component working for a PHP Block
  9. Is there a core Sortable component in Gutenberg?
  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. 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. Gutenberg Modify core taxonomy panel element via wp.hooks.addFilter
  18. What is “open()” in MediaUpload?
  19. Why is this gutenberg custom format button only available from the toolbar as a dropdown?
  20. Setting HTML properties in a Gutenberg plugin using WordPress settings
  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. Load script after block is inserted
  27. Gutenberg block “This block appears to have been modified externally” on save
  28. How to get value of selected page template in Gutenberg editor?
  29. How do I access site and block editor state data and use `useSelect()` or `withSelect()` to bind it to my components?
  30. Gutenberg passing block attributes to component in ES6/ESNext
  31. Can the index.asset.php file be used with the enqueue_block_editor_assets action?
  32. How can I add Block Style support to the core HTML block in Gutenberg?
  33. var is undefined in a Gutenberg block
  34. Gutenberg add extra attributes to custom format
  35. Using wp.data.select get actual tags (not id’s) used in post
  36. How to remove p / br elements from gutenbergs editor
  37. Programatically update posts in database from one block to another using transform
  38. Gutenberg getMedia() in post query doesn’t return all featured images
  39. How to transform a legacy widget into a block
  40. Gutenberg: Block validation Failed Richtext undefined
  41. Gutenberg select categories
  42. Add custom HTML markup to Gutenberg RichText
  43. Listening change event of taxonomy term checkboxes in Gutenberg editor
  44. Gutenberg get core data – search
  45. What is the correct way to import the blocks-editor?
  46. Get Block Attributes in JSON REST API
  47. Open Featured Image Modal in WordPress Gutenberg onClick of a button
  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. Why isn’t wp_enqueue_script(‘jquery-masonry’) working?
  52. Search for a keyword across post types in a Gutenberg component
  53. Using apiFetch for retrieving post data in Gutenberg
  54. Add custom classes for blocks in editor based on custom attributes
  55. How to load an additional script for a block in the block editor?
  56. useSelect second parameter
  57. How can I allow HTML in Gutenberg UI elements help text?
  58. what is the purpose of the namespace argument when customizing blocks?
  59. Trigger wp-embed via JavaScript to refresh iframe preview?
  60. How can I import one custom block into another?
  61. Gutenberg getBlockIndex in save() function
  62. Gutenberg Blocks: how to determine an index of the current inner block?
  63. Widgets and Post/Page edit/new blank, console errors only, no server errors
  64. Trying to turn the Edit function into a class to be able to use React lifecycle methods
  65. Get terms of a taxonomy using useSelect
  66. Gutenberg richtext block vaildation failed
  67. UnitControl – Block has encountered an error
  68. Conditional save return on Gutenberg Block
  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 Gutenberg block: access dom element via JavaScript
  76. Custom Block – save.js function not saving attributes
  77. Gutenberg – useEffect manipulate DOM after block re-renders DOM
  78. Problem extending a core block
  79. Cannot read properties of undefined (reading ‘show_ui’) Error on WordPress Post Editor
  80. Including dependencies using @wordpress/dependency-extraction-webpack-plugin
  81. Issue migrating a checkbox-type meta field to the block editor
  82. Gutenberg – dynamically created element: how to set onChange?
  83. Custom block update rendering when reused
  84. WordPress Gutenberg Ajax request
  85. WP Gutenberg – custom block with two content fields
  86. How do I make a savable preview like Youtube Gutenberg block?
  87. Gutenberg Edit Block Inspector Controls and save
  88. Spans in gutenberg
  89. iFrame onLoad in custom Gutenberg block
  90. Block pattern conflict with custom block
  91. Table block variation with header section activated
  92. Filtering Gutenberg Components, not Blocks
  93. Where to include JS library in gutenberg blocks
  94. Masonry grid with bootstrap 4
  95. How to detect if we are in the Site Editor part of the Block Editor (as opposed to editing a Page/Post) in JavaScript?
  96. How can I show a Slot/Fill in the block editor
  97. Is it possible to add javascript to template parts
  98. How to add a new attribute to core wp block editor without npm?
  99. Create Youtube embed block with createBlock
  100. How to add a css class to postTitleWrapper in Gutenberg?
Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)