Timeline for Wrap gutenberg block ‘div’ in other elements/extra HTML
Current License: CC BY-SA 4.0
17 events
| when toggle format | what | by | license | comment | |
|---|---|---|---|---|---|
| Jul 21, 2021 at 16:47 | comment | added | klewis | Would there happen to be a YouTube tutorial on this same process? | |
| May 21, 2019 at 9:43 | comment | added | bearandpear | You are an absolute legend! Thank you so much, this works perfectly. Is there any way I can show some appreciation? A plugin page I can review or beer tokens or something? | |
| May 21, 2019 at 8:52 | history | edited | Alvaro | CC BY-SA 4.0 |
added 840 characters in body
|
| May 21, 2019 at 8:36 | comment | added | Alvaro |
You can include the JS part above (I only indicated the plain JS for blocks.getSaveElement, Ill add the one for editor.BlockEdit) The JSX needs to be compiled ("transformed") into JS in your PC and then the browser reads the already compiled (only JS) file. I used some features that usually get transformed as well, like spread or arrow functions. I'll edit the plain JS part.
|
|
| May 21, 2019 at 8:18 | comment | added | bearandpear | Sorry to ask but is there a simple way to add this content to the editor with JS? I can't figure out how to rewrite the JSX in JS, keeps throwing up errors... | |
| May 21, 2019 at 7:33 | vote | accept | bearandpear | ||
| May 21, 2019 at 7:33 | comment | added | bearandpear | That works perfectly, thank you so much for persevering! I will try to add to the editor as well based on the JS code you have provided. I really do appreciate the help, I have learnt so much just from this one issue. I am new to JS in all of its forms, but currently trying to build a block from scratch following some tuts so I will stick at it and learn JSX—I've just set up node etc. so the fun can now begin! | |
| May 20, 2019 at 20:03 | comment | added | Alvaro |
@bearandpear I included a non-JSX version in the answer and extended the explanation on the script dependencies. JSX can be difficult at first, but if you are getting deeper into JavaScript with Gutenberg it is worth learning it. If you follow that path I suggest parcel over webpack as it is easier to set up. Hope it helps!
|
|
| May 20, 2019 at 20:01 | history | edited | Alvaro | CC BY-SA 4.0 |
added 1196 characters in body
|
| May 20, 2019 at 19:22 | comment | added | bearandpear | Yeah big topic indeed... I think I'll need to somehow either compile this as a separate file or re-write the existing script in JSX. It is all a bit beyond me at the moment. I will go back to the drawing board and try to create a block plugin from scratch rather than edit an existing one. Thank you so much for your help, I am just too new to the whole JSX/react/babel environment at the moment. | |
| May 20, 2019 at 19:01 | comment | added | Alvaro |
@bearandpear You don't need those two add_action( 'wp-hooks'... In your case it would be: function bp_block_container_enqueue() { wp_enqueue_script( 'bp-block-container-script', plugins_url( 'bpblockcontainer.js', __FILE__ ), array ('wp-hooks' ) ); } add_action( 'enqueue_block_editor_assets', 'bp_block_container_enqueue' );. But the issue you are having is that you are using JSX syntax in your JS file. JSX needs to be compiled to JS with Babel. It's a big topic.If you need any pointer let me know.
|
|
| May 20, 2019 at 18:45 | comment | added | bearandpear |
I have added 'wp-hooks' to the wp_enqueue_script like this... function bp_block_container_enqueue() { wp_enqueue_script( 'bp-block-container-script', plugins_url( 'bpblockcontainer.js', __FILE__ ) ); } add_action( 'enqueue_block_editor_assets', 'bp_block_container_enqueue' ); add_action( 'wp-hooks', 'bp_block_container/modifySaveHtml' ); add_action( 'wp-hooks', 'bp_block_container/modifyEditHtml' ); but I keep getting this in the console... 'Uncaught SyntaxError: Unexpected token <' I am clearly doing something wrong in the JS?
|
|
| May 20, 2019 at 17:32 | comment | added | Alvaro |
@bearandpear the code from the answer goes in that JS file. But you need to modify your wp_enqueue_script call to include the 'wp-hooks' dependency. When using any of the Gutenberg packages (wp.editor, wp.blocks, etc.) you need to include those dependencies in your script enqueue (remember that the JS object wp.hooks belongs to the dependency wp-hooks). See an example of adding a Gutenberg dependency here.
|
|
| May 20, 2019 at 14:54 | comment | added | bearandpear |
does this code go in the JS file or the PHP file? I was inserting it in the JS file which is called up in my plugin's PHP file... function bp_block_container_enqueue() { wp_enqueue_script( 'bp-block-container-script', plugins_url( 'bpblockcontainer.js', __FILE__ ) ); } add_action( 'enqueue_block_editor_assets', 'bp_block_container_enqueue' );
|
|
| May 20, 2019 at 12:00 | comment | added | Alvaro | @bearandpear You just need to add the code in the same script you are using to add your custom block. Can you share how you are adding that script (the PHP function)? | |
| May 20, 2019 at 11:31 | comment | added | bearandpear | This is great, thank you Alvaro. This all seems to make sense (and probably works perfectly), but due to my own inexperience I could't quite figure out how to get this to work when hooking into an existing plugin. I have however managed a work-around by building my own very simple container block plugin with all of the HTML wrappers needed (using innerBlocks and align-full), which I can insert the other blocks into. | |
| May 18, 2019 at 22:52 | history | answered | Alvaro | CC BY-SA 4.0 |