From the docs:
While it is possible to return a string value from save, it will be
escaped. If the string includes HTML markup, the markup will be shown
on the front of the site verbatim, not as the equivalent HTML node
content. If you must return raw HTML from save, use
wp.element.RawHTML
. As the name implies, this is prone to cross-site
scripting and therefore is discouraged in favor of a WordPress Element
hierarchy whenever possible.
In addition, you can also import the SVG as a component and use it as you would use any other JSX / React, e.g. via svgr
.
return (
<div className="wrapper">
<svg className=".."..>
...
</svg>
</div>
);
would become
import MyIcon from '../../assets/myicon.svg';
...
return (
<div className="wrapper">
<MyIcon />
</div>
)
(Here I’m using JSX <div>
instead of ...createElement('div', ..)
which is basically the same but imo a more readable syntax.)
Related Posts:
- Deactivate Gutenberg tips forever – not Gutenberg
- How do I register multiple blocks with block.json and register_block_type_from_metadata?
- Disable Gutenberg text-Settings in all blocks
- gutenberg block – how to force update after attribute changed?
- Add additional classes to gutenberg .editor-styles-wrapper
- How to use the WordPress < LinkControl /> Component
- Remove border radius setting from the Gutenberg button block?
- Add PHP block template to content using wp_insert_post
- Gutenberg reusable blocks – is it possible to customise an instance?
- Dynamic gutenberg block with react instead of php
- File structure and react setup when creating multiple Gutenberg blocks
- Gutenberg block get categories in SelectControl
- How to access “default” property of attribute in Gutenberg
- Gutenberg Block manipulation: Undo parse_blocks() with serialize_blocks() results in unicode issues
- How to use “getEntityRecords” for user data?
- Gutenberg: Restrict Top Level Blocks, But Not Child Blocks
- WordPress Block Variation for Gallery Columns
- How to disable alignments for block patterns?
- How to change the admin/password when using the E2E Test Utils for Gutenberg
- Create a custom render Appender button to add Inner Blocks
- Get a WordPress Gutenberg Block Attribute to use it in frontend
- Rename reusable blocks shown in navigator
- How to troubleshoot a custom Gutenberg block error: “This block has encountered an error and cannot be previewed”
- Two Gutenberg components sharing the same Panel Body in Inspector Controls
- How to learn Gutenberg block development [closed]
- Gutenberg Block Development: Trying to add custom js script to npm start command by modifying webpack.config
- Is there a better way to to make async API calls using the @wordpress/data module?
- How can I center Gutenberg buttons on mobile?
- Extend the “core/link” Block Format
- Passing settings from Reusable Block to it’s children
- Gutenberg element: How to usw Rangecontrol with two values to imitate a rangeslider?
- Is there any simple way to remove Gutenberg editor H1 H5 H6 and change the label for the rest H2 H3 H4?
- WordPress filter post content with PHP before editing it in Gutenberg
- Pass PHP vars to gutenberg sidebar
- Suggested image dimensions Gutenberg Hook
- How Add New Button to Gutenberg Editing Toolbar
- How to force gutenberg to reload blocks after saving
- How can I programaticly open Gutenberg
- Update a block template and apply those changes to an existing post/page
- How do you manage the Gutenberg block previews in the admin area?
- How to disable align-wide for specified blocks in Gutenberg
- Deprecated function not working in Gutenberg
- Gutenberg Block checkbox check-unckeck does not work
- WordPress npm run build and start only outputs wp-scripts start but does nothing
- Gutenberg get index of gutenberg innerblock
- Custom Endpoint API based on attribute gutenberg block
- Gutenberg : how can I get the title of the current block within its ‘edit’ function?
- Gutenberg – Remove add block button
- how can default_content filter tell if content will load in block editor or classic editor?
- Gutenberg programmatically move block to position
- Gutenberg somehow not loading in WP 5
- Gutenberg block – remove setting for core/file
- Gutenberg JavaScript error
- Gutenberg selecting child blocks directly from appender
- Image not aligning with text
- Custom validation on publish/ update in Block Editor
- WordPress Gutenberg – Open the “Block Pattern Explorer” programmatically
- Modify src attribute on image block
- Two text color palettes are appearing in Gutenberg
- WordPress Gutenberg – Sidebar get posts list based on selected category
- Gutenberg button removed on save if its empty
- Gutenberg build error: You may need an appropriate loader to handle this file type SCSS
- Gutenberg: How to constrict floated table blocks to 1000px width in the front-end, when align wide & full are being used?
- Quasy – modal component does not hide itself
- Table block – Wrap table
- ResizableBox component is not selectable in block editor
- Whitelist a single SVG for use in post_content
- Gutenberg block previews suddenly not working
- WordPress Gutenberg Signal on Block Alignment Change
- When to use block patterns over nested blocks?
- How to convert block to a list block in WordPress gutenberg editor?
- How can I create more advanced layouts in Gutenberg block editor?
- How to replace the Gutenberg default block with a custom block?
- how to disable a button added by a plugin in gutenberg toolbar?
- Images are not shown in the post editor
- Updating failed message when a wp_insert_post function is hooked to save_post hook
- Get post ancestors in the Block Editor
- How to disable blocks in Gutenberg editor for specific post type
- Possible to make the link autocompleter prioritize Tags before Posts?
- Prevent FormTokenField component to accept random entries
- How to move the customizations done in the Editor to my child theme?
- Unable to see the attributes for the custom block created
- How to display dynamic block editor on front-end?
- Enable varying text for Phone, Tablet and Desktop
- Debouncing Input value with block attributes
- Using the block theme in production
- When using the MediaPlaceholder component, will skipping blobUrl handling break something?
- Pass component name in onChange [closed]
- Add another option to default link control settings panel?
- With full-site-editing menus, how do I create a non-linking top-level menu item with linking sub-pages
- How can I render a built-in Gutenberg block with InnerBlocks outside of the block editor?
- How do I add filters in Twenty-Twenty-Three without a functions.php?
- Different style options for the same block depending where it is used
- How to extract ‘intro’ block from page content, but later strip from page main content
- Add a new option to Social Link block
- Editing Inline fonts/typeface using the block editor
- What is the proper way of using React Hooks in Gutenberg on frontend?
- Gutenberg: change block Components Popover properties
- Unable to register a block using block.json in Block Editor
- $attributes not defined in block.json PHP template for ACF blocks