How can I include React useState in a custom gutenberg block plugin?
Okay, just lucked upon an answer. Added const { element: { useState, }, } = wp; at the top of the file, it seemingly works, though I still have no idea what is going on.
react
What is the proper way of using React Hooks in Gutenberg on frontend?
What is the proper way of using React Hooks in Gutenberg on frontend?
Why is my Toggle field not showing in Gutenberg?
You forgot to declare the attributes: registerPlugin( ‘page-layout-plugin’, { icon: ‘smiley’, attributes: { ‘showSidebarAttribute’: {‘type’: ‘boolean’, ‘default’: true}, // <– and maybe others }, render: ( props ) => { You can drop the quotes of the properties, of course (they are optional), I keep them because the equivalent statement is copied over from the … Read more
How do i fix type error
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 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