How to troubleshoot a custom Gutenberg block error: “This block has encountered an error and cannot be previewed”

Add this additional variable to your wp-config file:

define ( 'SCRIPT_DEBUG', true);

Also, inline styling directly in react is declared differently is similar but different in many ways than pure, vanilla CSS.

For example, <ul class="home-slider content-slider lightSlider lSFade" style="height: 0px; padding-bottom: 71.9931%;">

is written in react as:

<ul className={ 'home-slider content-slider lightSlider lSFade'} style={{ paddingBottom: '71.9931%', height: 0}}> {'your content'} </ul>
(my react code may not be exactly correct!)

As the above link notes, I would recommend to style your css in a separate file (which is already created for you in wp-scripts) instead of directly within react.

Related Posts:

  1. Deactivate Gutenberg tips forever – not Gutenberg
  2. How do I register multiple blocks with block.json and register_block_type_from_metadata?
  3. Disable Gutenberg text-Settings in all blocks
  4. gutenberg block – how to force update after attribute changed?
  5. How to query multiple post types inside Gutenberg options panel?
  6. How can I add a custom attribute to Gutenberg core blocks?
  7. Add additional classes to gutenberg .editor-styles-wrapper
  8. How to use the WordPress < LinkControl /> Component
  9. Remove border radius setting from the Gutenberg button block?
  10. Add PHP block template to content using wp_insert_post
  11. Gutenberg reusable blocks – is it possible to customise an instance?
  12. Dynamic gutenberg block with react instead of php
  13. File structure and react setup when creating multiple Gutenberg blocks
  14. Gutenberg block get categories in SelectControl
  15. How to access “default” property of attribute in Gutenberg
  16. Gutenberg Block manipulation: Undo parse_blocks() with serialize_blocks() results in unicode issues
  17. How to use “getEntityRecords” for user data?
  18. What is the significance of ‘root’ in getEntityRecords?
  19. Gutenberg: Restrict Top Level Blocks, But Not Child Blocks
  20. WordPress Block Variation for Gallery Columns
  21. How to disable alignments for block patterns?
  22. How to change the admin/password when using the E2E Test Utils for Gutenberg
  23. Create a custom render Appender button to add Inner Blocks
  24. Get a WordPress Gutenberg Block Attribute to use it in frontend
  25. Rename reusable blocks shown in navigator
  26. Are gutenberg blocks ideally supposed to look the same in both back-end and front-end?
  27. How to output child block attributes on a parent block
  28. Is there a better way to to make async API calls using the @wordpress/data module?
  29. How can I center Gutenberg buttons on mobile?
  30. Extend the “core/link” Block Format
  31. Passing settings from Reusable Block to it’s children
  32. Gutenberg element: How to usw Rangecontrol with two values to imitate a rangeslider?
  33. Is there any simple way to remove Gutenberg editor H1 H5 H6 and change the label for the rest H2 H3 H4?
  34. How to add a class to the link of the default Gutenberg Button block?
  35. Deprecated for blocks.getSaveElement
  36. WordPress filter post content with PHP before editing it in Gutenberg
  37. Pass PHP vars to gutenberg sidebar
  38. Suggested image dimensions Gutenberg Hook
  39. How Add New Button to Gutenberg Editing Toolbar
  40. How to force gutenberg to reload blocks after saving
  41. How can I programaticly open Gutenberg
  42. Update a block template and apply those changes to an existing post/page
  43. How do you manage the Gutenberg block previews in the admin area?
  44. Custom block save does not match due to stripped slashes from br tag and added figure tag around images
  45. How to disable align-wide for specified blocks in Gutenberg
  46. Deprecated function not working in Gutenberg
  47. Gutenberg Block checkbox check-unckeck does not work
  48. WordPress npm run build and start only outputs wp-scripts start but does nothing
  49. Gutenberg get index of gutenberg innerblock
  50. Custom Endpoint API based on attribute gutenberg block
  51. Gutenberg : how can I get the title of the current block within its ‘edit’ function?
  52. Gutenberg – Remove add block button
  53. how can default_content filter tell if content will load in block editor or classic editor?
  54. Gutenberg programmatically move block to position
  55. Gutenberg somehow not loading in WP 5
  56. Gutenberg block – remove setting for core/file
  57. Gutenberg JavaScript error
  58. Gutenberg selecting child blocks directly from appender
  59. Image not aligning with text
  60. Custom validation on publish/ update in Block Editor
  61. WordPress Gutenberg – Open the “Block Pattern Explorer” programmatically
  62. Modify src attribute on image block
  63. Two text color palettes are appearing in Gutenberg
  64. Unwanted white space next to inputs added within `PluginDocumentSettingPanel` using “
  65. WordPress Gutenberg – Sidebar get posts list based on selected category
  66. Gutenberg button removed on save if its empty
  67. Gutenberg build error: You may need an appropriate loader to handle this file type SCSS
  68. Gutenberg: How to constrict floated table blocks to 1000px width in the front-end, when align wide & full are being used?
  69. Quasy – modal component does not hide itself
  70. Table block – Wrap table
  71. ResizableBox component is not selectable in block editor
  72. Whitelist a single SVG for use in post_content
  73. Gutenberg block previews suddenly not working
  74. WordPress Gutenberg Signal on Block Alignment Change
  75. When to use block patterns over nested blocks?
  76. How to convert block to a list block in WordPress gutenberg editor?
  77. How to do store, retrieve and write attributes in the registerFormatType method in Guttenberg?
  78. How can I create more advanced layouts in Gutenberg block editor?
  79. How to replace the Gutenberg default block with a custom block?
  80. how to disable a button added by a plugin in gutenberg toolbar?
  81. Images are not shown in the post editor
  82. How do I hide the UI for specific Gutenberg Blocks?
  83. Updating failed message when a wp_insert_post function is hooked to save_post hook
  84. Get post ancestors in the Block Editor
  85. How to disable blocks in Gutenberg editor for specific post type
  86. Possible to make the link autocompleter prioritize Tags before Posts?
  87. Prevent FormTokenField component to accept random entries
  88. How to move the customizations done in the Editor to my child theme?
  89. Unable to see the attributes for the custom block created
  90. Change Featured image location from side to normal using react (gutenberg)
  91. Get postId in a wordpress pattern file?
  92. Remove placeholder from core/image in InnerBlocks template
  93. Gutenberg block not displaying prop values
  94. ACF InnerBlocks breaks css grid, How can we add classes to allowedblocks (WordPress Gutenberg)
  95. How to disable block directory?
  96. Adding custom link text to a URLInputButton
  97. Rearrange order of block into a block category gutenberg
  98. Gutenberg Block Deprecation – Handling old viewScript and styles
  99. Resaving posts to update static blocks
  100. How to dynamically add style tags to Gutenberg editor in react