Daniel Richards

@casparpt Thanks for noticing this.

This is due to a change in the way embeds have been implemented. They now use a feature called Block Variations.

I’ve put in a feature request to show these in the Block Manager again:
https://github.com/WordPress/gutenberg/issues/27708

• This reply was modified 5 years, 8 months ago by Daniel Richards.

@jrotering The JSON structure you’re seeing is standard in the block editor.

The HTML comment is called a block delimiter, and that comment can also include a JSON object of data. The event organizer block looks like a dynamic block (rendered server-side), so it’s self closing and has no content. When a post is loaded the server-side render callback is triggered to produce the appropriate HTML content.

It’s difficult for me to advise on the given information, but you might consider using the block parser to retrieve data about blocks in a post:
https://github.com/WordPress/gutenberg/tree/master/packages/block-serialization-default-parser

@nathan888 Here’s the API reference for insertBlock:
https://developer.wordpress.org/block-editor/data/data-core-block-editor/#insertBlock

As your code snippet isn’t very complete it’s hard to provide feedback, but the error tells me that you’re trying to call something that’s an object as a function, quite possibly when you call insertBlock. How are you referencing insertBlock?

If you try the following in your browser console, it should work and will hopefully get you started:

wp.data.dispatch( 'core/block-editor' ).insertBlock( wp.blocks.createBlock( 'core/paragraph' ) );

If you have experience of redux you might be familiar with dispatch and actions. The ‘core/block-editor’ part is required because the block editor is built in a modular way with multiple data stores, the ‘core/block-editor’ namespace makes sure you’re using the right store.

The documentation for wordpress data is pretty long unfortunately:
https://developer.wordpress.org/block-editor/packages/packages-data/

There are some other blog posts I found that might be useful:
– https://riad.blog/2018/06/07/efficient-client-data-management-for-wordpress-plugins/
– https://getwithgutenberg.com/2019/05/selecting-and-dispatching-with-the-data-store/

But it’s worth noting that they’re a little older, for React components the recommended APIs are now useSelect and useDispatch:

Introducing useDispatch and useSelect

Can anyone tell me if and how a reusable block can be used in a block template?

You should be able to use a reusable block in a template, but you’d only be able to reference an existing reusable block that you’ve created.

The steps would be:
1. Create the reusable block.
2. Note the id of the reusable block. One way to do this is to go to the ‘Manage all reusable blocks’ page (http://localhost:8888/wp-admin/edit.php?post_type=wp_block), edit the block and grab the post id from the URL. The other is to add the reusable block to a post and switch to the code editor where you’ll be able to see the id next to where it says ‘ref’.
3. In your template add the following to reference your reusable block (if your reusable block id were 123):
array( 'core/block', array( 'ref' => 123 ) )

Using the custom post type example from the docs that might look a bit like:

function myplugin_register_book_post_type() {
    $args = array(
        'public' => true,
        'label'  => 'Books',
        'show_in_rest' => true,
        'template' => array(
            array( 'core/block', array(
                'ref' => 123,
            ) ),
            array( 'core/heading', array(
                'placeholder' => 'Add Author...',
            ) ),
            array( 'core/paragraph', array(
                'placeholder' => 'Add Description...',
            ) ),
        ),
    );
    register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );

> it’s not about the usecase of block but it’s about just customizing the html output of block.

@hozefasmile I’d politely disagree. Supporting bootstrap wasn’t a consideration for the group block during development, it’s not how it’s intended to be used. That’s the whole reason your situation exists. You could use a filter to remove the div (there are many block filters: https://developer.wordpress.org/block-editor/developers/filters/block-filters/), but there would always be a chance that future changes to the block would again cause compatibility issues. This is a block that hasn’t even been released yet in WordPress core.

On the other hand, a block from a plugin that’s intended to be used with bootstrap would hopefully be maintained with the goal that it’ll continue to work with bootstrap. You’re less likely to have future compatibility issues, which is why I think that’s the preferable solution to your issue.

Anyway, here’s some further background on why the extra div was added:
https://github.com/WordPress/gutenberg/pull/15210

There’s also an issue here that looks relevant, though it was probably created before the extra div was released:
https://github.com/WordPress/gutenberg/issues/15926

It might be worth adding your comment to that issue if you have a github account. I’ve already commented and linked to this forum thread.

Hi @hozefasmile, the group block will be a bit like a single column. It has some additional features that set it apart from a column like the ability to set a background color, and also a few more planned (the ability to group a selection of blocks using a keyboard shortcut or menu option, possibly background images). The alignment options should also behave slightly differently, when aligning the block to full width, content should stay narrow (if the theme supports it).

@memerunner This looks like it’s part of the theme you’re using rather than something to do with Gutenberg. The margin-top isn’t responsible, the gap is caused by padding added to site-inner via a stylesheet.

You could override it in the Appearance > Customize > Additional CSS screen using a rule like:

.site-container .site-inner {
  padding: 0;
}

• This reply was modified 7 years, 3 months ago by Daniel Richards.