block-editor - Read For Learn

Is it possible to create column width presets in Gutenberg?

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

How to Parse an Array of Elements in Gutenberg Block

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

How do I fire a snackbar notice in admin?

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

fetching via fetch/ajax gutenberg block data from third party

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

Get blocks from other pages, from within current page

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

Gutenberg – Custom blocks onClick not working?

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

Custom Gutenberg block is not showing up in inserter dialog

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

Can’t get dynamic Gutenberg block to render on the frontend

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.

Looking for callback function after Gutenberg is rendered?

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

Gutenberg Block Editor Match Admin Styles & Frontend Styles

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

+ More