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 implement Mapbox GL JS with a custom Gutenberg block in FSE?
- Removing Default Panels From Gutenberg Document Setting Panel (sidebar)
- Gutenberg Dev – React Context.Provider returns undefined
- Avoid automatic scroll jump when dragging a resize handle in a Gutenberg block
- Implementation of React-Datepicker component with Gutenberg in WordPress
- How can i extend the existing Block Inspector Tabs in WordPress Gutenberg Editor?
- Detecting whenever a user types – in the Gutenberg editor, and checking if there is a preceding or succeeding – then converting both to an em dash
- Gutenberg Static blocks: viewScript doesn’t import css for frontend?
- Deactivate Gutenberg tips forever – not Gutenberg
- 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?
- File structure and react setup when creating multiple Gutenberg blocks
- 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
- 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
- Popover in a LinkControl style
- Is there any way to render the WordPress Gutenberg core/embed block in PHP by passing in the URL?
- How to use in Block Editor – react-bootstrap?
- Double container elements on custom block in editor
- Can I jump over a InnerBlocks component to target content inside with react-flickity-component?
- Use a React Component in conjunction with Blocks
- How to select block variation from BlockVariationPicker
- How Do I Prevent An Image From Automatically Adjusting In Guttenberg Block Gallery?
- Using wp_set_script_translations without manually registering the script
- Why am I getting the error: Cannot update a component (`Unknown`) while rendering a different component (`Edit`)?
- Update number of posts when attribute changed
- Connect WordPress and react front-end
- Unable to edit server side rendered block
- WordPress Dynamic Block with multiple checkboxes
- Embedded block editor in block editor
- useSelect in block Edit always returns default store value
- Count Gutenberg blocks on the front-end?
- How to call a react hook on edit of registerBlockType?
- Why does the paragraph block automatically add class?
- How can I block embeds and show an individual preview image per block?
- add arrow icon next to read more link on latest posts gutenberg block
- Create a trailing block with programatically generated Gutenberg columns
- How to make attributes unique to Gutenberg blocks
- How to check title is being entered in Title Case?
- Create Gutenburg Block to render inline SVG
- Gutenberg blocks not full width
- How to make a block similar to another block
- Gutenberg: How to enqueue scripts conditionally in render_callback by checking for an attribute?
- How can I reintroduce autocompletion of Gutenberg components in Visual Code?
- Blocks – any way to have editor honor width percentages on child blocks?
- Using `esc_attr( get_block_wrapper_attributes() )`, results in `class=””wp-block-foo””`
- Is it possible to consume context from a parent block and update it from within a child block?
- Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
- 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?
- Full Site Editing (FSE) – How do I display no results with wp:query?
- 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?
- Custom Gutenberg block within column block selection and update issue
- WP Gutenberg – How to parse simple images?
- How to add button to Gutenberg Editing Toolbar in Wordress
- Restrict Block from having a Parent or Ancenstor Block
- Latest WordPress Version Changes to Block Editor Template
- Allowed blocks for core/column
- move useState variable from edit.js to save.js. How do I do that?
- How to build BOTH non-block components and blocks present in the /src directory using @wordpress/scripts
- what is the function of the view.js file?
- Detect whether a block has server-side render
- No aspect ratio selector in a custom block
- How do I load css in edit screens for the block builder?
- How do I add text or message above the featured image area in gutenberg for a CPT
- How to re-render Gutenberg component when object instance is available
- How to render HTML content using the Interactivity API?
- Block that displays post meta as nested block of Query Loop
- How to render initial posts on page load in a Gutenberg block using the Interactivity API?
- InnerBlocks adds any block and saves, but the editor doesn’t show child blocks on reload