I found it, wp-element. The @wordpress/scripts
should handle the heavy lifting of transforming the JSX in the proper way.
add_action( 'wp_enqueue_scripts', 'my_enqueue_plugin_js' ); // Loads on frontend
function my_enqueue_plugin_js() {
wp_enqueue_script(
'my-plugin-frontend',
plugin_dir_url( __FILE__ ) . 'js/plugin.js',
['wp-element']
);
}
Once we do this we will have window.wp.element available in our JavaScript. This contains the ReactDOM render() function as well as createElement() if you wanted to write React without JSX.
Related Posts:
- How to target block variations with has_block()?
- Dequeue Gutenburg Block Library CSS (‘wp-block-library’) in Admin
- How can I render a built-in Gutenberg block with InnerBlocks outside of the block editor?
- What is the proper way of using React Hooks in Gutenberg on frontend?
- How to add Gutenberg editor on frontend page?
- How to dynamically add style tags to Gutenberg editor in react
- How to trigger JS in gutenberg page load
- Gutenberg: Block validation failed
- Change order/position of Gutenberg inspector control panel
- Gutenberg Inspector Controls
- serialize_blocks breaking html tags in content
- How to use getBlockIndex
- Hide or show Gutenberg custom block using date range
- Use page Title in Gutenberg custom banner block
- How to add code to `head` with WordPress 5.9 FSE (Full Site Editing)
- Block Editor: add an aria-label to an option inside a SelectControl
- Gutenberg: Get All Attributes From «core/image» Block
- Where on Github, or elsewhere, can I find the code for core-blocks?
- Gutenberg translation is not working
- How to add javascript function in the “save()” of gutenberg block?
- How to check if current admin page is Gutenberg editor? [duplicate]
- Possible add color palette for a block’s inner div instead of outer?
- Programmatically trigger the gutenberg save
- Gutenberg : in the backend, I just want to store a JSON object
- wordpress gutenberg url popover custom options
- Text Editors Are Hiding Text
- Disabling deleting reusable blocks except on the reusable block manager
- Gutenberg remove Most Used group
- Gutenberg. How To Register A Custom Block Style For Specific Post Type Only
- get used blocks in post and detect changing
- How to know whether you are editing a page or a post?
- Can the index.asset.php file be used with the enqueue_block_editor_assets action?
- Gutenberg get block name
- How has my WordPress editor become so basic? Cannot add blocks or see anything visual
- Block Validation Fails: ‘
- Object type for block Attribute (Gutenberg)
- Controlling the RichText component outside of blocks
- Custom Gutenberg Block: How to return plain HTML with save(), without escaping?
- Removing advanced section from brand new gutenberg block
- How to allow to add gradients to core/heading block?
- Gutenberg: How to update associated Terms of Custom Taxonomy to Current Post
- Gutenberg: How to float core table block in front-end of site?
- Register multiple styles / scripts in register_block_type
- How to automatically remove noreferrer from targetd link rel attribute, on render?
- Should there be concern about breaking Gutenberg updates to extended core blocks?
- How do I access onMerge, onReplace, onRemove functions for a Rich Text component in Gutenberg block code?
- How can Reusable Blocks be fully deleted?
- Make a Gutenberg Block that do WP_User_Query
- Extend Gutenberg block core/quote block
- How to get all attributes of a block in PHP?
- reload the gutenberg editer on taxonomy change
- Gutenberg Block Get Author Details
- Gutenberg Block Toolbar – remove button
- WordPress block editor embeds not working in theme (single.php)
- Cannot enable Gutenberg editor [closed]
- Remove ‘type / to choose a block’ placeholder [duplicate]
- Start a line with – without converting to list
- Quickest way of developing custom Gutenberg Blocks
- gutenberg attributes
- How to register two blocks in the same plugin
- Gutenberg: always show text color selector in editing bar
- How to lock innerBlocks within a block variation?
- How to get startIndex and endIndex from the selected block in gutenberg?
- How to fix: “The editor has encountered an unexpected error”?
- Set a minimum and maximum limit of images to select in the MediaUpload component for Block
- Compile a blocks src directory and main index.js entry file and output to different build dirs?
- Proxy External API request in PHP from Edit.js in Block Plugin
- How do I stop a dynamic Gutenberg component from re-rendering on every keystroke?
- Leave focus on custom Gutenberg block when pressing enter
- How to Analyze Blocks and find Intersection and patterns between pages
- WordPress does not hide content after “Read more” block added using gutenberg editor
- Gutenberg InnerBlocks allowed types and reusable blocks
- Issue with translation – Gutenberg
- Is “document loaded” different on admin side than public side?
- RSS feed WP widget vs Gutenberg Block?
- Gutenberg Custom Style problem with background image
- Theme options missing from edit page
- How to activate a new prop that a block introduces in a new release?
- “Updating failed” if any text includes “$v()”
- Disable Font Size for Authors using: add_theme_support(‘disable-custom-font-sizes’);
- Multiple checkboxes Gutenberg control
- Block validation failed
- Loading column block style seperately
- wp-scripts start build hangs
- WordPress “HTML editor” which doesn’t trash hand-coded HTML?
- How to force package.json to create build some files?
- How to modify array of object in Gutenberg (block/editor)?
- fetch more than 100 records in block editor API call
- How can I deprecate an old version of my custom Gutenberg block, but keep the new version?
- register_block_type – no block available in block editor
- Block development: how to bump version on generated css files?
- Dealing with unknown option ‘–variant’ when setting up a block environment
- Enable Gutenberg Editor when editing tags
- How to position more than one item over an image in a Gutenberg WordPress block theme
- Some CSS classes missing when rendering the page with get_the_content()
- Error with RichText Component
- Rem font size is different in the frontend and block editor
- Add to Media Inserter Categories
- Get attributes from last block created
- How do I make the block editor use https by default?