import will import those items from a package. const is just an indicator that a variable is a constant, a variable that cannot be reassigned. E.g. const number = 5;. In this case, these 2 lines do exactly the same thing: const useSelect = wp.data.useSelect; const useSelect = window.wp.data.useSelect; The important difference being that if … Read more
My main problem is: how can I pass to my <ServerSideRender /> block the children of my block? Well actually, you might not need to use ServerSideRender.. If you just wanted to see a preview of the block output coming from the save() function, then you could simply use getSaveElement() to get that output, or … Read more
Just in case anyone else comes looking here’s what I did. First I enqueued a javascript file into the block editor. add_action( ‘enqueue_block_editor_assets’, function () { wp_enqueue_style( ‘block-editor-styles’, get_template_directory_uri(‘styles/gutenberg.css’), false, ‘1.0’, ‘all’ ); wp_enqueue_script( ‘block-editor-scripts’, get_template_directory_uri(‘scripts/gutenberg.js’), array( ‘wp-blocks’, ‘wp-dom’ ), time(), true ); }); Then I just used this bit of code for adding a … Read more
I found a workaround, sparked by @tmdesigned’s answer, which I’m going to post as an answer. It is not pretty and I don’t think it can be the “canonical” answer, but hopefully it helps us get there. So first, I kept the attributes using a source: children: tabs: { type: ‘array’, source: ‘children’, selector: ‘ul.tabs’, … Read more
WordPress has some global actions you can use here. If you want to add your own notice in the lower corner (like the screenshot), you can do that like this: wp.data.dispatch(“core/notices”).createNotice( “success”, // Can be one of: success, info, warning, error. “This is my custom message.”, // Text string to display. { type: “snackbar”, isDismissible: … Read more
Well, I figured it out. Though my solution is probably far from elegant (I’m not making concessions for timeouts or usability/accessibility). My problem was mostly overzealous configuration, copy and paste errors, and needing to apply async/await keywords. Attributes look like this: attributes: { url: { source: ‘attribute’, type: ‘string’, selector: ‘.o_microlink’, attribute: ‘href’, }, title: … Read more
WordPress provides a way to get an array of blocks for a page with the parse_blocks() function. If you extract from that the specific block(s) you are interested in, you can then use render_block() to put the block on another page. This function would do that: function example_extract_block_type_from_page( $post_id, $block_name ) { //get post_content for … Read more
The Block Editor’s save() function doesn’t save JS functions to the database to be run on the front end. To run JS on the front end, you need to save it as a separate file and enqueue that file explicitly on the front end. With that in mind, it would be easiest to rewrite your … Read more
You should enqueue your scripts using enqueue_block_assets action, like this: add_action(‘enqueue_block_assets’, ‘gutenberg_bolierplate_block’); Second, you should use JSX with modern JavaScript development environment to write your blocks easily. I made a boilerplate for my personal use that you can use: https://github.com/HardeepAsrani/gutenberg-boilerplate You just need to run npm install to install dependencies, and then npm run dev … Read more
Since you’re making a dynamic block you don’t need to register the block in JavaScript. Take a look at the Latest Posts block in Core to see how they do it.