Block Inserter - Need a Preview for Each Block > Is an SVG Doable?

[ZaredRogers]

Description:

We need to create previews for each block in the Block Inserter to give users a visual representation of the block before inserting it into the page. The ideal approach would be to use SVGs for these previews to ensure scalability and clarity.

Requirements:

• Investigate whether SVG previews can be used in the Block Inserter.
• Create SVG previews for each block in the plugin.
  • Ensure the SVG previews accurately represent the layout and functionality of the block.
  • SVGs should be lightweight and scalable for optimal performance.
• Test the SVG previews for compatibility with the WordPress Block Editor and ensure they display correctly in the Block Inserter.

Acceptance Criteria:

• SVG previews for each block are implemented and visible in the Block Inserter when hovered over.
• The previews are clear, visually represent the block’s layout, and are scalable without loss of quality.
• The SVGs do not negatively impact the performance of the Block Editor.

Additional Notes:

• If SVGs are not feasible, explore other methods for creating previews that are lightweight and compatible with the WordPress Block Editor.