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.
Well, its very hard to find developer documented posts about Gutenberg and the block editor. This solution works for us, and as Gutenberg is using javascript for everything, we do the same, but wraps it up in jQuery, as we hate react API. ;( function( $ ) { $(document).ready(function(){ // EVERYTHING HERE IS A UNIQUE … Read more
The Editor itself doesn’t have much in the way of visible styling; it’s more to ensure consistency across Editor components themselves, like buttons and info panels. You are meant to apply styles wherever they’re needed. Usually, most of your CSS should go in a file that gets enqueued on both ends – the front end … Read more
This fixed it in block.json: “editorScript”: “file:index.js” This is what I used before: “editorScript”: “file:./index.js”,
I’ve found a way to dynamicaly change the slug field with the short title custom field. jQuery(document).ready(() => { const acfField = ‘field_61f8bacf53dc5’; const inputShortTitle = document.getElementById(‘acf-‘ + acfField); const slugify = (str) => { return str.toLowerCase().replace(/ /g, ‘-‘) .replace(/-+/g, ‘-‘).replace(/[^\w-]+/g, ”); } const updateSlug = () => { wp.data.dispatch(‘core/editor’).editPost({slug: slugify(inputShortTitle.value)}); } if (inputShortTitle !== … Read more