react - Read For Learn

How do i fix type error

‘useSate’ error when using React on the frontend in custom block plugin

I tried your view script, i.e. the code in your view.js file, and it’s true that I also got the same error in question. However, I spotted another error which appeared before the other error, and which explained why that other error appeared: Warning: Invalid hook call. Hooks can only be called inside of the … Read more

Creating my own “recent blog posts” static Gutenberg block, can’t use react hooks in the frontend

That’s not how blocks work, the save component generates static HTML, so you can’t use interactive hooks or state. The important part is that the save component only runs inside the editor on your browser. It does not run in the database, or on the client. You can’t save a react component to the database … Read more

React Plugin Settings Page Localization

adds an admin menu page with a div that React replaces, but the localization inside this React doesn’t work Actually, since you are enqueueing the same script (build/index.js), which is automatically registered by register_block_type(), then in your my_enqueue_admin_scripts() function, just do wp_enqueue_script( ‘my-block-local-editor-script’ ) to enqueue/load the script on your admin menu page. And secondly, … Read more

How to add more elements to an already existing section in Gutenberg

How can I render a built-in Gutenberg block with InnerBlocks outside of the block editor?

It was a long and winding road that led me to a working solution, which doesn’t resemble my above attempts very closely at all. In short: instead of importing the Save component by itself, you run the registration functions from the root JS file of the blocks, and then use createBlock and serialize. The full … Read more

What is the standard way to use the version of React that ships with Gutenberg on the front end?

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 … Read more

React Material UI and WordPress Admin Area

The fundamental issue is that MUI is probably not meant to be used in an environment where there are already styles like this. It’s supposed to be the base layer. The WordPress admin has its own styles and it’s highly unusual to try and use a completely different UI framework inside of it. These types … Read more

get the current logged in user using WooCommerce API in React App [closed]

Renaming the ‘build’ directory generated by @wordpress/scripts for React development

I am writing this answer after testing the suggestion given by @SallyCJ (thank you for pointing me towards the right direction) Writing the following entry into the scripts section of package.json will change both the source and destination of the React code. “scripts”: { “build”: “wp-scripts build –webpack-src-dir=path/to/source/dir/ –output-path=path/to/destination/dir/”, “test”: “echo \”Error: no test specified\” … Read more

+ More