> For the complete documentation index, see [llms.txt](https://learnphp.gitbook.io/learnphp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnphp.gitbook.io/learnphp/wordpress/genesis-gutenberg-examples-basic-ok.md).

# \[GENESIS] Gutenberg Examples Basic (ok)

![](https://2370029328-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWPtKFbhw0XehxVuoiZ%2F-MX7IhMmAgvbs7_HJUAN%2F-MX7IpUCx6AeaN6mYRKT%2FScreenshot_1.jpg?alt=media\&token=a3b5bf86-8a00-43f8-aba4-f8c2d0a0d696)

![](https://2370029328-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWPtKFbhw0XehxVuoiZ%2F-MX7IhMmAgvbs7_HJUAN%2F-MX7IsJtqQ_RMLd8MwLX%2FScreenshot_2.jpg?alt=media\&token=adafb813-fa73-4e0f-933c-2b3d4d7277b9)

![](https://2370029328-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWPtKFbhw0XehxVuoiZ%2F-MX7IhMmAgvbs7_HJUAN%2F-MX7IvvzXfErXYPTLTbw%2FScreenshot_3.jpg?alt=media\&token=77ff1c5d-83e5-480b-9f20-c84aa2681e13)

C:\xampp\htdocs\reset\wp-content\plugins\lionel\lionel.php

```
<?php
/**
 * Plugin Name: Lionel
 * Plugin URI: https://github.com/WordPress/gutenberg-examples
 * Description: This is a plugin demonstrating how to register new blocks for the Gutenberg editor.
 * Version: 1.1.0
 * Author: the Gutenberg Team
 *
 * @package gutenberg-examples
 */
defined('ABSPATH') || exit;
/**
 * Load all translations for our plugin from the MO file.
 */
add_action('init', 'gutenberg_examples_01_load_textdomain');
function gutenberg_examples_01_load_textdomain() {
  load_plugin_textdomain('gutenberg-examples', false, basename(__DIR__) . '/languages');
}
/**
 * Registers all block assets so that they can be enqueued through Gutenberg in
 * the corresponding context.
 *
 * Passes translations to JavaScript.
 */
function gutenberg_examples_01_register_block() {
  if (!function_exists('register_block_type')) {
    // Gutenberg is not active.
    return;
  }
  wp_register_script(
    'gutenberg-examples-01', plugins_url('block.js', __FILE__), array('wp-blocks', 'wp-i18n', 'wp-element'), filemtime(plugin_dir_path(__FILE__) . 'block.js')
  );
  register_block_type('gutenberg-examples/example-01-basic', array('editor_script' => 'gutenberg-examples-01'));
  if (function_exists('wp_set_script_translations')) {
    /**
     * May be extended to wp_set_script_translations( 'my-handle', 'my-domain',
     * plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see
     * https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/
     */
    wp_set_script_translations('gutenberg-examples-01', 'gutenberg-examples');
  }
}
add_action('init', 'gutenberg_examples_01_register_block');
```

C:\xampp\htdocs\reset\wp-content\plugins\lionel\block.js

```
/**
 * Hello World: Step 1
 *
 * Simple block, renders and saves the same content without interactivity.
 *
 * Using inline styles - no external stylesheet needed.  Not recommended
 * because all of these styles will appear in `post_content`.
 */
( function( blocks, i18n, element ) {
	var el = element.createElement;
	var __ = i18n.__;
	var blockStyle = {
		backgroundColor: '#900',
		color: '#fff',
		padding: '20px',
	};
	blocks.registerBlockType( 'gutenberg-examples/example-01-basic', {
		title: __( 'Example: Basic', 'gutenberg-examples' ),
		icon: 'universal-access-alt',
		category: 'layout',
		example: {},
		edit: function() {
			return el('p',{ style: blockStyle },'Hello World, step 1 (from the editor).');
		},
		save: function() {
			return el('p',{ style: blockStyle },'Hello World, step 1 (from the frontend).');
		},
	} );
} )( window.wp.blocks, window.wp.i18n, window.wp.element );
```