Different import style in edit.js and save.js

[salcode]

Currently edit.js uses the import style

import { RichText } from '@wordpress/block-editor';

and save.js uses

const {
    blockEditor: {
        RichText,
    },
} = wp;

If I understand correctly, we could change this to both import from the wp global or both from @wordpress.

Of course, I recognize there may be a reason for the different styles that I'm not familiar with, however I wanted to bring this up.

[michealengland]

@salcode Great catch, I will have a quick fix fired up.

[salcode]

@michealengland Am I correct we're better off destructing wp rather than using @wordpress/block-editor?

[salcode]

Now I'm wondering whether we should change this or not.

Based on packages/block-library/src/html/edit.js in WordPress/gutenberg/, I'm trying to add ToolbarGroup with

const {
  components:
  {
    ToolbarGroup,
  },
} = wp;

however ToobarGroup does not exist.

I'm guessing this was added to Gutenberg in a release newer than the version currently included in WP Core.

I'm wondering if by going with

import { ToolbarGroup } from '@wordpress/components';

we could then be sure of what is available and hopefully our block would not break when WP changes or removes components like this.

[salcode]

I put together a summary of my thoughts around this in th blog post WordPress Gutenberg import versus Destructuring Global wp.

Based on this related tweet

Use import, it's what the official packages use, the official examples, and it has the blessing of the official wp-scripts setup. It might use the other method internally, but that could change in the future. Destructuring a global variable to get dependencies in JSX is weird

I think we should standardize on using import not destructing.

[salcode]

Note: The conversation in #28 is related and explains why edit.js was updated to use import.

I think based on all this conversation, the action item coming out of this is to update save.js to use import.