# \[GENESIS] Gutenberg Examples Stylesheets (ok)

![](https://2370029328-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWPtKFbhw0XehxVuoiZ%2F-MX8CMAipkj0jS1mu215%2F-MX8DOeTlP2dsLTmDCJr%2FScreenshot_4.jpg?alt=media\&token=772b5573-3e8e-446e-aa3a-babce86c3aaa)

C:\xampp\htdocs\reset\wp-content\plugins\lionel\index.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_02_load_textdomain' );
function gutenberg_examples_02_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_02_register_block() {
	if ( ! function_exists( 'register_block_type' ) ) {
		// Gutenberg is not active.
		return;
	}
	wp_register_script(
		'gutenberg-examples-02',
		plugins_url( 'block.js', __FILE__ ),
		array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
	);
	wp_register_style(
		'gutenberg-examples-02-editor',
		plugins_url( 'editor.css', __FILE__ ),
		array( 'wp-edit-blocks' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
	);
	wp_register_style(
		'gutenberg-examples-02',
		plugins_url( 'style.css', __FILE__ ),
		array( ),
		filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
	);
	register_block_type( 'gutenberg-examples/example-02-stylesheets', array(
		'style' => 'gutenberg-examples-02',
		'editor_style' => 'gutenberg-examples-02-editor',
		'editor_script' => 'gutenberg-examples-02',
	) );
  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-02', 'gutenberg-examples' );
  }
}
add_action( 'init', 'gutenberg_examples_02_register_block' );
```

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

```
/**
 * Hello World: Step 2
 *
 * Move styles to stylesheets - both edit and front-end.
 *
 * Note the `className` property supplied to the `edit` callback.  To use the
 * `.wp-block-*` class for styling, plugin implementers must return an
 * appropriate element with this class.
 */
( function( blocks, i18n, element ) {
	var el = element.createElement;
	var __ = i18n.__;

	blocks.registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
		title: __( 'Example: Stylesheets', 'gutenberg-examples' ),
		icon: 'universal-access-alt',
		category: 'layout',
		example: {},
		edit: function( props ) {
			return el('p',{ className: props.className },'Hello World, step 2 (from the editor, in green).');
		},
		save: function() {
			return el('p',{},'Hello World, step 2 (from the frontend, in red).');
		},
	} );
} )( window.wp.blocks, window.wp.i18n, window.wp.element );

```
