How to use the @wordpress/i18n.__ function in @wordpress/i18n

import './style.scss'
import './editor.scss'

import SearchGiphy from './search'

import { __ } from '@wordpress/i18n'
const { registerBlockType } = wp.blocks

export default registerBlockType(
  'advanced-gutenberg-blocks/giphy',
  {
    title: __( 'Giphy', 'advanced-gutenberg-blocks' ),
    description: __( 'Search and insert a GIF from Giphy.', 'advanced-gutenberg-blocks' ),
    category: 'agb',
    icon: { background: '#2F313A', foreground: '#DEBB8F', src: 'images-alt2' },
    keywords: [
      __( 'gif', 'advanced-gutenberg-blocks' ),
    ],
    attributes: {},

    edit: props => {

      const { clientId, insertBlocksAfter } = props
      
      // If API key is not yet provided
      if ( typeof advancedGutenbergBlocksGiphy.error !== "undefined" ) {
        return (
          <p class="AGB-block-message"></p>

_handleInspectOperation(
		cm,
		mousePos
	) {
		const {
			attributes: { query },
		} = this.props;
		const parsedQuery = parse(/*this.state.query*/query || "");

		if (!parsedQuery) {
			console.error(__('Couldn\'t parse query document', 'graphql-api'));
			return null;
		}

		var token = cm.getTokenAt(mousePos);
		var start = { line: mousePos.line, ch: token.start };
		var end = { line: mousePos.line, ch: token.end };
		var relevantMousePos = {
			start: cm.indexFromPos(start),
			end: cm.indexFromPos(end)
		};

		var position = relevantMousePos;

		var def = parsedQuery.definitions.find(definition => {
			if (!definition.loc) {
				console.log("Missing location information for definition");

render() {
		return (

return (
		
			{ isPinnable && (
				
					{ isPinned &&  }
				
			) }
			
				
					<strong>{ title }</strong>
					{ isPinnable &amp;&amp; (
						
					) }

const [ state ] = Form.useFormState( {
		showAdminBar: true,
		password: null,
		darkmode: false,
		uiposition: 'topright'
	}, () => {} )

	return (
		<>

			
				
					
				
				
					<button>{__( 'Generate Password' )}</button>
				
				
					<button>{__( 'Log Out Everywhere' )}</button>
				
			


			
				
					<p>{__( 'These preferences apply specifically to the Assistant user interface (not the WordPress Admin)' )}</p>
				
				
					
				
				
					<select style="{" name="uiposition" id="uiposition"></select>

import { deprecatedConvertToShortcode } from '../../utils/deprecations';
import sharedAttributes, {
	sharedAttributeBlockTypes,
} from '../../utils/shared-attributes';

const blockTypeName = 'woocommerce/product-top-rated';

registerBlockType( blockTypeName, {
	title: __( 'Top Rated Products', 'woo-gutenberg-products-block' ),
	icon: {
		src: ,
		foreground: '#96588a',
	},
	category: 'woocommerce',
	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
	description: __(
		'Display a grid of your top rated products.',
		'woo-gutenberg-products-block'
	),
	supports: {
		align: [ 'wide', 'full' ],
		html: false,
	},
	example: {
		attributes: {
			isPreview: true,
		},
	},
	attributes: {
		...sharedAttributes,
	},

import { InnerBlocks } from '@wordpress/block-editor';
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { ModuleIcon } from '../../../icons';

import EditModuleBlock from './edit';
import transforms from './transforms';

registerBlockType( 'sensei-lms/course-outline-module', {
	title: __( 'Module', 'sensei-lms' ),
	description: __( 'Group related lessons together.', 'sensei-lms' ),
	icon: ModuleIcon,
	category: 'sensei-lms',
	parent: [ 'sensei-lms/course-outline' ],
	keywords: [ __( 'Outline', 'sensei-lms' ), __( 'Module', 'sensei-lms' ) ],
	supports: {
		html: false,
		customClassName: false,
	},
	attributes: {
		id: {
			type: 'integer',
		},
		title: {
			type: 'string',
			default: '',
		},
		description: {
			type: 'string',
			default: '',
		},

{ isEditing
							? this.renderEditMode()
							: this.renderViewMode() }
					
				) : (
					
						}
						label={ __(
							'Products by Tag',
							'woo-gutenberg-products-block'
						) }
						className="wc-block-products-grid wc-block-product-tag"
					>
						{ __(
							"This block displays products from selected tags. In order to preview this you'll first need to create a product and assign it some tags.",
							'woo-gutenberg-products-block'
						) }
					
				) }
			
		);
	}
}

<input id="datetime" name="datetime" type="datetime-local">
				

				
					<progress value="75" max="100">75/100</progress>
				

				
					<meter optimum="50" high="66" low="33" value="75" max="100" min="0">75</meter>
				

				
					
				

				
					
				

				
					
						<input placeholder="(xxx) xxx-xxxx" type="tel" name="phone2" id="phone2">
					

					

if ( fullscreen ) {
							if ( [ 'bottom-left', 'top-left' ].includes( layout ) ) {
								setAttributes( { layout: 'center-left' } );
							}

							if ( [ 'bottom-center', 'top-center' ].includes( layout ) ) {
								setAttributes( { layout: 'center-center' } );
							}

							if ( [ 'bottom-right', 'top-right' ].includes( layout ) ) {
								setAttributes( { layout: 'center-right' } );
							}
						}
						setAttributes( { fullscreen: ! fullscreen } );
					} }
					help={ !! fullscreen ? __( 'Fullscreen mode is enabled.', 'coblocks' ) : __( 'Toggle to enable fullscreen mode.', 'coblocks' ) }
				/>
			
		);
	}
}